青海省建设厅职业注册官方网站,阳江房产网二手房出售,做网站的费用是多少,电子商务作业做网站今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、事件 二、DOM操作 三、案例 零、 复习昨日 js 脚本语言,弱类型 引入方案: 3种 js的内容: 语法dombom 语法 变量 var 数据类型 引用类型 - 对象,J…今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、事件 二、DOM操作 三、案例 零、 复习昨日 js 脚本语言,弱类型 引入方案: 3种 js的内容: 语法dombom 语法 变量 var 数据类型 引用类型 - 对象,JSON {key:value,key:value} 数组 var arr new Array();var arr [1,2];下标取值赋值pop() shift() push() unshift() 日期 var date new Date() 运算 没有 , | 用来判断类型和值都相等才返回true 分支循环 函数 function m1(a,b){ return ab; } 一、事件
1.1 事件介绍 事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等 1.2 事件绑定方式 事件要想发生,就得将事件和标签先绑定 一个完整的事件有三部分 事件源(标签)什么事(事件)响应(动作效果) 事件绑定,其实就是事件和标签绑定 方式1: 事件源,事件,响应在一起方式2: 事件源,事件在一起,响应抽取函数方式3: 事件和响应全部抽取 方式1: 事件源,事件,响应在一起 body!-- 事件源(标签),事件,响应(函数) --!-- 方式1: 事件源,事件,响应在一起 --!-- onclick是单击事件,是html属性 --!-- alert() 函数就是事件的响应 --button typebutton onclickalert(听说你点我了?)按钮/button/body方式2: 事件源,事件在一起,响应抽取函数 bodyhr /!-- 方式2: 事件源,事件在一起,响应抽取函数 --button typebutton onclickdian()按钮/buttonscript// 定义函数function dian() {alert(你又点我?!);}/script/body方式3【重要】: 事件和响应全部抽取 !-- 方式3: 事件和响应全部抽取 --button idbtn再点一下试试/buttonscript// 1) 先获得标签对象var btn document.getElementById(btn);// 2) 给标签对象设置事件以及响应btn.onclick function () {alert(上瘾了是不是?!);};/script练习div宽高各200,背景颜色red,设计点击事件,点击是出现弹框,并有输出语句 计算,点击次数 1.3 不同事件的演示 这些事件,都是html中标签的属性,都是以onxxx开头 事件名称描述onchangeHTML 元素内容改变onblur输入框失去焦点onfocus输入框获得焦点onclick用户点击 单击HTML 元素ondblclick用户双击HTML元素onmouseover用户将鼠标移入一个HTML元素中onmousemove用户在一个HTML元素上移动鼠标onmouseout用户从一个HTML元素上移开鼠标onkeyup键盘弹起onkeydown用户按下键盘按键onkeypress按压键盘onload浏览器已完成页面的加载onsubmit表单提交
1.3.1 鼠标事件 scriptvar box document.getElementById(box);// 鼠标移动,只要鼠标动,就会触发函数box.onmousemove function () {console.log(鼠标移动);};// 鼠标移入,移入进一次,触发一次box.onmouseover function () {console.log(鼠标移入);};// 鼠标离开box.onmouseout function () {console.log(鼠标离开);};/script1.3.2 键盘事件 scriptvar i document.getElementById(i);// 事件触发后,函数有对应的事件对象// 键盘按下i.onkeydown function (event) {// console.log(键盘按下);// event是事件对象,内部包含事件的所有信息// console.log(event);// 可以获得这次键盘事件的代号,13是回车键if (event.keyCode 13) {console.log(提交表单);}};// 键盘弹起i.onkeyup function () {// console.log(键盘弹起);};// 键盘按压(与按下效果一样)i.onkeypress function () {// console.log(键盘按压);};/script1.3.3 表单事件【重点】 是指表单中能用上的一系列事件 onblur 失去焦点onfocus 获得焦点onchange 内容改变onsubmit 表单提交 bodydiv!-- 因为tijiao()函数,返回有了true/false所以οnsubmitreturn true 即提交表达οnsubmitreturn false 阻止表达提交--form accept/java2301 onsubmitreturn tijiao()用户名input idi1 typetext nameusername /br /密码input typepassword namepassword /br /籍贯select idjiguan namejigaunoption河南/optionoption河北/optionoption北京/option/selectinput typesubmit value提交 //formscriptvar i1 document.getElementById(i1);// 绑定获得焦点事件i1.onfocus function () {// 将来可以通过操作DOM,获得输入框的值,也可以改变样式console.log(输入框获得焦点);};// 绑定失去焦点i1.onblur function () {console.log(输入框失去焦点);};var jiguan document.getElementById(jiguan);// 给下拉框绑定内容改变事件jiguan.onchange function () {// 将来配合DOM操作,可以获得改变的内容,做一些其他事情// 可以用于省市二级联动console.log(内容改变);};/*1) 表单事件是表单form的事件,所以这个事件要绑定在form上2) 函数要返回true/false3) onsubmit中也要写return*/function tijiao() {console.log(点击提交按钮);// return 返回false,认为表达不提交// 返回true.表达就会提交// 一般用来数据校验return true;}/script/div/body1.3.4 加载事件【重点】 浏览器加载页面,是瀑布式加载,即从上之下依次加载执行. 如果JS代码在上方,就有可能出现有部分下方html代码加载不到导致js操作出错 headtitle加载事件/titlescript/*解决方案,等页面加载完后,再触发函数,执行绑定事件页面加载事件是窗口对象的事件该函数onload,会在页面加载后触发函数*/window.onload function () {var btn document.getElementById(btn);btn.onclick function () {alert(试试就试试!);};};/script/headbodybutton idbtn点我一下试试?!/button/body二、DOM操作
2.1 概述 通过 HTML DOM可访问 JavaScript HTML 文档的所有元素。 当网页被加载时浏览器会创建页面的文档对象模型Document Object Model。 HTML DOM 模型被构造为对象的树 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bxkfxnz8-1678454197317)(https://qiushiju-tuchuang.oss-cn-hangzhou.aliyuncs.com/image/dom%E6%A0%91.jpg)] 有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式 JavaScript 能够改变页面中的所有 HTML 元素。 JavaScript 能够改变页面中的所有 HTML 属性。 JavaScript 能够改变页面中的所有 CSS 样式。 JavaScript 能够对页面中的所有事件做出反应。 2.2 查找元素 查找元素(标签)有很多方式 通过id查找元素 document.getElementById(“id属性值”);如果找到该元素则该方法将以对象在 x 中的形式返回该元素。如果未找到该元素则 x 将包含 null。 通过标签名查找元素 方法getElementsByTagName(“合法的元素名”);如果找到,返回的是数组 通过class查找元素 方法getElementsByClassName(“class属性的值”)如果找到,返回的是数组 body!-- 给标签设置id属性,id值要唯一 --button idbtn按钮/buttonulli貂蝉/lili西施/lili王昭君/lili杨玉环/lili classxd黎姿/lili classxd利智/lili classxd张曼玉/lili classxd朱茵/li/ulscript// 方式1:通过id获得标签对象(对象是唯一)var btn document.getElementById(btn);// console.log(btn);// 方式2:通过标签名来获得// 因为有同名,返回的是所有同名标签对象,放入数组中返回var liArr document.getElementsByTagName(li);// console.log(liArr);for (var i 0; i liArr.length; i) {// console.log(liArr[i]);}// 方式3: 通过类名获得标签对象var mvArr document.getElementsByClassName(xd);console.log(mvArr);/script/body2.3 元素内容的查找和设置 元素内容,是指标签开闭之间的内容. p这就是内容/p
pspan这就是内容/span/p查找和设置使用的是相同的属性 innerHTML 获得或设置标签的内容innerText 获得或设置标签的内容 bodyp idp1span你好啊,JavaScript/span/pbutton idbtn1设置innerHTML/buttonbutton idbtn2设置innerText/buttonscriptvar p1 document.getElementById(p1);// 获得内容,innerHTML获得是标签和内容var innerHTML p1.innerHTML;console.log(innerHTML);// 获得内容,innerText获得的只是文本内容var innerText p1.innerText;console.log(innerText);var btn1 document.getElementById(btn1);btn1.onclick function () {// 给p标签设置内容,内容中有标签会解析成标签p1.innerHTML span你好啊,李焕英/span;};var btn2 document.getElementById(btn2);btn2.onclick function () {// 给p标签设置内容,内容全部解析为文本p1.innerText span你好啊,李焕英/span;};/script/body2.4 元素属性的查找和设置 元素属性,是指开标签内的属性,通过dom对象直接调用操作.比如 domObj.iddomObj.namedomObj.value… bodyinput idi1 classc1 typetext value默认值 /button idbtn1点击获得属性值/buttonbutton idbtn2点击设置属性值/buttonscriptvar btn1 document.getElementById(btn1);var i1 document.getElementById(i1);btn1.onclick function () {// 获得属性值console.log(i1.id); // 获得id属性值console.log(i1.class); // 没有获得class属性console.log(i1.type); // 获得type属性值console.log(i1.value); // 获得value属性值【重要】};btn2.onclick function () {// 设置属性值i1.type password;i1.value 123456; // 【重要】};/script/body2.5 元素CSS样式的查找和设置 元素css样式的查找和设置,是指标签中style的属性值的获得和设置 获得属性值 元素对象.style.属性 设置属性值 元素对象.style.属性 “” bodydividboxstylewidth: 200px; height: 200px; background-color: red/divbutton idbtn1获得css样式/buttonbutton idbtn2设置css样式/buttonscriptvar box document.getElementById(box);var btn1 document.getElementById(btn1);btn1.onclick function () {// 获得样式,主要是style的属性值var style box.style;// console.log(style);// 获得具体样式,可以再继续调用console.log(box.style.width);console.log(box.style.height);// 有连字符的,要去掉,后面首字母变大写console.log(box.style.backgroundColor);};var btn2 document.getElementById(btn2);btn2.onclick function () {// 设置box样式,尺寸越来越大// 获得原来的尺寸var width box.style.width; // 200pxvar height box.style.height;// 获得宽度,截取数值// var newWidth width.substring(0, width.length - 2);// 自带属性获得不带px的宽度var newWidth2 box.clientWidth;var newHeight box.clientHeight;// 设置尺寸box.style.width newWidth2 10 px;box.style.height newHeight 10 px;// 只能获得,不能这样设置!// box.clientWidth newWidth2 10;// box.clientHeight newHeight 10;};/script/body练习: 输入框失去焦点边框变红,后面给出红色提示语
练习: 红色圆圈div,越点越大
2.6 操作元素 如需向 HTML DOM 添加新元素必须首先创建该元素元素节点然后向一个已存在的元素追加该元素。 创建元素document.createElement() 追加元素appendChild() 创建出一个文本内容,这个内容是值开闭标签间的文本内容 document.createTextNode(“文本内容”); 删除已有的 HTML 元素,使用方法removeChild() bodybutton idbtn点击时创建p标签,以及内容/buttondiv idbox/divscriptvar btn document.getElementById(btn);btn.onclick function () {// 创建元素pvar p document.createElement(p); // p/p// 创建文本内容var text document.createTextNode(你好啊,Java); // 你好啊,Java// 在p标签内,追加文本p.appendChild(text); // p你好啊,Java/pvar box document.getElementById(box);// 把内容追加到div中box.appendChild(p);};/script/body2.7 删除元素 删除子节点 元素对象.removeChild(子元素); bodyul idulli刘德华/lili吴彦祖/lili彭于晏/li/ulbutton idbtn点击删除子元素/buttonscriptvar btn document.getElementById(btn);btn.onclick function () {// 获得父元素var ul document.getElementById(ul);// 获得所有li元素var liArr document.getElementsByTagName(li);// 遍历for (var i 0; i liArr.length; i) {// 通过父元素,删除子元素ul.removeChild(liArr[i]);i--; //下标回退}};/script/body2.8 改变HTML 改变HTML输出流document.write() 可用于直接向 HTML 输出流写内容 !DOCTYPE html
html
body
script
document.write(Hello world,Im JavaScript);
/script
/body
/html三、案例 练习1 输入框,点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失 事件: 获得焦点,失去焦点 要设置css样式 !-- 点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失 --input idi1 /scriptvar i1 document.getElementById(i1);i1.onfocus function () {i1.style.height 300px;i1.style.width 300px;// i1.style.borderColor blue;i1.style.border 30px yellow solid;i1.style.backgroundColor red;};i1.onblur function () {i1.style.height ;i1.style.width ;i1.style.border ;i1.style.backgroundColor ;// 重置样式i1.style reset;// i1.style ;};/script/body设置div,高300宽300,鼠标进入div,div背景变红,离开div背景变绿 dividboxstylewidth: 300px; height: 300px; border: 2px red solid/divscriptvar box document.getElementById(box);// 鼠标进入div,div背景变红,离开div背景变绿box.onmouseover function () {box.style.backgroundColor red;};box.onmouseout function () {box.style.backgroundColor green;};
/script练习: 设置输入框,输入内容,点击按钮,将内容追加到div后 body请输入内容:input idi1 /button idbtn追加内容/buttondiv idbox/divscriptvar btn document.getElementById(btn);btn.onclick function () {// 获得输入框的内容var text document.getElementById(i1).value;// 创建p标签var p document.createElement(p);// 创建文本节点var textNode document.createTextNode(text);// 追加内容p.appendChild(textNode);// 给div追加内容var box document.getElementById(box);box.appendChild(p);document.getElementById(i1).value ;};/script/body作业
见作业.txt
