一、上堂回顾
1.DOM简介
节点树：浏览器加载一个html页面的时候，会在内部生成一个节点树，将一个文档中的所有的内容【标签，属性，文本】封装成对象
2.常用方法
a.获取标签对象的方式
getElementByXxxx 【Name,Id,ClassName,TagName】
b.创建增删改【了解】
3.常用属性
a.innerHTML:设置文本内容【可以简化增】
b.firstChild/lastChild:
c.childNodes:结果为NodeList,考虑空白符
d.【面试题】nodeName,nodeType,nodeValue
4.事件
事件模式：内联模式和脚本模式
事件对象：但凡涉及到事件，函数中都会有一个默认的参数,
var event = e || window.event ，作用：为了兼容不同的浏览器
鼠标事件：
键盘事件：注意：一般绑定给document
二、DOM事件
1.事件的监听
事件监听器
addEventListener(事件类型，事件需要执行的函数，布尔值):监听指定的元素是否有指定的事件
事件类型：click,dblclick等，以字符串的形式体现
事件需要执行的函数：如果是普通函数，此时则只需要使用函数名，要么直接书写一个匿名函数
布尔值：事件传递的方式，true:捕捉，false：冒泡
删除事件监听器
removeEventListener(事件类型，事件需要执行的函数)
【
删除事件监听器，必须明确：哪个对象，对象上的哪个事件
】
2.事件的传递【面试题】
事件流
描述的是从页面开始接收某个事件的顺序【当几个具有一定关系的标签层叠在一起的时候，那么你点击其中的一个元素，并不是只有当前被点击的元素才能触发事件，而层叠在你点击范围内的标签都有可能会触发事件】
事件传递的模式：
事件冒泡：从里往外逐个触发
事件捕获：从外往里逐个触发
注意：现在的浏览器默认都使用的冒泡模式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: cyan; } #box2{ width: 100px; height: 100px; background-color: red; } #box3{ width: 50px; height: 50px; background-color: purple; } </style> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"> </div> </div> </div> <script> //需求：给三个div分别添加事件的监听，当事件被触发之后，执行的函数同一个 //获取div的对象 var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); //分别监听事件 /* * true 事件捕获：从外往里，当点击box3的时候，box1---->box2---->box3、 *false 事件冒泡：从里往外，当点击box3的时候，box3---->box2---->box1 */ box1.addEventListener("click",func,true); box2.addEventListener("click",func,true); box3.addEventListener("click",func,true); //定义执行的函数 function func(){ //this:单击的时候出发了该单击事件的元素对象 console.log(this); } </script> </body> </html>
3.案例
3.1图片轮播
/*设置轮播图的整体效果*/ #image{ width: 100%; height: 400px; margin: 10px auto; /*设置有效定位*/ position: relative; } #image > img{ width: 100%; height: 100%; } /*数字列表*/ #list{ /*去除无序列表的项目符号*/ list-style: none; /*设置定位属性*/ position: absolute; bottom: 10px; left: 30%; } /*设置小圆点*/ #list li{ float: left; width: 20px; height: 20px; border-radius: 50%; background-color: gray; /*文字居中显示*/ text-align: center; line-height: 20px; /*设置外边距，让li之间有一定的间隙*/ margin-left: 10px; } /*设置左右按钮*/ .btn{ width: 50px; height: 80px; /*rgba(0,0,0,xx)表示黑色，a的取值为1则表示不透明，为0表示全透明*/ background-color: rgba(0,0,0,0.2); color: rgba(255,255,255,0.7); font-size: 30px; text-align: center; line-height: 80px; /*设置定位属性*/ position: absolute; top: 160px; /*初始情况下，不显示*/ display: none; } #leftbtn{ left: 0px; } #rightbtn{ right: 0px; }*{ margin: 0px; padding: 0px; } /*设置头部*/ #head{ width: 100%; height: 50px; /*background-color: gray;*/ } /*设置logo图*/ #head > img{ margin: 10px 15px; } /*设置搜索框和搜索按钮*/ #search{ /*设置浮动属性*/ float: right; margin: 10px 15px; } /*设置搜索框和按钮平齐*/ #search input{ float: left; height: 26px; } #search button{ float: left; border: 0px; } /*设置导航*/ #nav{ width: 100%; height: 50px; background-color: black; } #nav div{ /*将竖向排列的div改成横向排列*/ float: left; color: white; height: 100%; } /*设置每个导航标题和线条的样式*/ .navinfo{ width: 19.9%; /*内容居中显示*/ text-align: center; line-height: 50px; font-size: 15px; } .navline{ width: 0.7px; background-color: white; }//1.获取标签对象 var jsBox = document.getElementById("image"); var jsPic = document.getElementById("pic"); //通过标签名称获取标签对象，注意查找的范围 var jsUl = document.getElementById("list"); var jsLiArr = jsUl.getElementsByTagName("li"); //左右按钮 var leftBtn = document.getElementById("leftbtn"); var rightBtn = document.getElementById("rightbtn"); //2.设置初始状态 //设置第一个li为红色 jsLiArr[0].style.backgroundColor = "red"; //3.创建间歇性定时器 //每隔一段时间切换一张图片，需要将原来的圆点恢复成灰色，当前选中的设置为红色 //定义一个整型变量，用于记录当前选中的图片和小圆点 var currentPage = 1; var timer = setInterval(startLoop,2000); function startLoop(){ //每隔两秒，currentPage需要递增1 currentPage++; changeImage(); } function changeImage(){ //边界判断 if(currentPage == 9){ currentPage = 1; }else if(currentPage == 0){ currentPage = 8; } //重新设置图片 jsPic.src = "img/" + currentPage + ".jpg"; //重新设置小圆点的选中状态 //思路：重新设置新的选中状态的时候，需要将之前所有选中的全部清除掉 for(var i = 0;i < jsLiArr.length;i++){ jsLiArr[i].style.backgroundColor = "gray"; } jsLiArr[currentPage - 1].style.backgroundColor = "red"; } //鼠标进入box jsBox.addEventListener("mouseover",overFunc,false); function overFunc(){ //停止定时器 clearInterval(timer); //显示左右按钮 leftBtn.style.display = "block"; rightBtn.style.display = "block"; } //鼠标移出box jsBox.addEventListener("mouseout",outFunc,false); function outFunc(){ //重新启动定时器 timer = setInterval(startLoop,2000); //显示左右按钮 leftBtn.style.display = "none"; rightBtn.style.display = "none"; } //鼠标进入左右按钮 //左右按钮的颜色加深，表示可能需要点击 leftBtn.addEventListener("mouseover",deepFunc,false); rightBtn.addEventListener("mouseover",deepFunc,false); function deepFunc(){ //this:表示当前正在执行指定函数的对象 this.style.backgroundColor = "rgba(0,0,0,0.5)"; } //鼠标移出左右按钮 leftBtn.addEventListener("mouseout",nodeepFunc,false); rightBtn.addEventListener("mouseout",nodeepFunc,false); function nodeepFunc(){ this.style.backgroundColor = "rgba(0,0,0,0.2)"; } //点击左右按钮的时候 leftBtn.addEventListener("click",function(){ //递减 currentPage--; changeImage(); },false); rightBtn.addEventListener("click",function(){ currentPage++; changeImage(); },false); //当鼠标进入小圆点的时候 for(var i = 0;i < jsLiArr.length;i++){ //给每个小圆点做一个标记，使用index属性实现，用于区分哪张图片 jsLiArr[i].index = i + 1; jsLiArr[i].addEventListener("mouseover",function(){ //给currentPage重新赋值 currentPage = this.index; changeImage(); },false); }<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--链接css文件--> <link href="css/loopstyle.css" type="text/css" rel="stylesheet" /> <link href="css/wlstyle.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="box"> <!--头部--> <div id="head"> <img src="img/WLImages/logo_01.jpg" /> <div id="search"> <form action="#" method="get"> <input type="text" name="keywd" placeholder="请输入要搜索的内容" /> <button><img src="img/WLImages/button.jpg" /></button> </form> </div> </div> <!--导航--> <div id="nav"> <div class="navinfo"><a>集团介绍</a></div> <div class="navline"></div> <div class="navinfo"><a>集团介绍</a></div> <div class="navline"></div> <div class="navinfo"><a>集团介绍</a></div> <div class="navline"></div> <div class="navinfo"><a>集团介绍</a></div> <div class="navline"></div> <div class="navinfo"><a>集团介绍</a></div> </div> <!--轮播图--> <div id="image"> <!--初始图--> <img src="img/1.jpg" id="pic" /> <!--显示数字--> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <!--左右按钮--> <div id="leftbtn" class="btn"><</div> <div id="rightbtn" class="btn">></div> </div> <!--新闻资讯，人才招聘，卧龙介绍--> <div id="forth"> <div id="news"> <h3>新闻资讯</h3> <ul> <li>召开理事会 2018-9-18</li> <li>召开理事会 2018-9-1</li> <li>召开理事会 2018-9-1</li> </ul> </div> <div id="detail"> </div> <div id="invite"> </div> </div> <!--卧龙市场--> <div id="market"> <h3>卧龙市场</h3> <ul> <li> <img src="" /> <p>培养一流的人才</p> </li> <li> <img src="" /> <p>培养一流的人才</p> </li> <li> <img src="" /> <p>培养一流的人才</p> </li> <li> <img src="" /> <p>培养一流的人才</p> </li> </ul> </div> </div> <!--引入js文件--> <script type="text/javascript" src="js/loopevent.js"></script> </body> </html>
3.2省份城市选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="init();"> <!--省份--> <!--change事件一般用于select标签中，表示监测select状态的改变--> <select id="province" onchange="getCity();"> <option value= 0 >北京</option> <option value= 1 >上海</option> <option value= 2 >天津</option> <option value= 3 >重庆</option> <option value= 4 >河北</option> <option value= 5 >山西</option> <option value= 6 >内蒙古</option> <option value= 7 >辽宁</option> <option value= 8 >吉林</option> <option value= 9 >黑龙江</option> <option value= 10 >江苏</option> <option value= 11 >浙江</option> <option value= 12 >安徽</option> <option value= 13 >福建</option> <option value= 14 >江西</option> <option value= 15 >山东</option> <option value= 16 >河南</option> <option value= 17 >湖北</option> <option value= 18 >湖南</option> <option value= 19 >广东</option> <option value= 20 >广西</option> <option value= 21 >海南</option> <option value= 22 >四川</option> <option value= 23 >贵州</option> <option value= 24 >云南</option> <option value= 25 >西藏</option> <option value= 26 >陕西</option> <option value= 27 >甘肃</option> <option value= 28 >宁夏</option> <option value= 29 >青海</option> <option value= 30 >新疆</option> <option value= 31 >香港</option> <option value= 32 >澳门</option> <option value= 33 >台湾</option> </select> <!--区域或者城市 不同的省份中的城市个数是不一致的，所以需要具体的数据进行动态的实现 --> <select id="city"> </select> <!-- 需求： 1.初始化的状态下，省份默认选中北京，城市默认选中东城 2.如果切换省份，则城市也随着切换 --> <script> //定义一个数组，用于保存城市的信息 var arr = new Array(); arr[0 ]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"; arr[1 ]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"; arr[2 ]="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县"; arr[3 ]="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川"; arr[4 ]="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水"; arr[5 ]="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城"; arr[6 ]="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟"; arr[7 ]="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛"; arr[8 ]="长春,吉林,四平,辽源,通化,白山,松原,白城,延边"; arr[9 ]="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭"; arr[10 ]="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安"; arr[11 ]="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水"; arr[12 ]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州"; arr[13 ]="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德"; arr[14 ]="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶"; arr[15 ]="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽"; arr[16 ]="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源"; arr[17 ]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州"; arr[18 ]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界" arr[19 ]="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮"; arr[20 ]="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池"; arr[21 ]="海口,三亚"; arr[22 ]="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州"; arr[23 ]="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南"; arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧"; arr[25 ]="拉萨,日喀则,山南,林芝,昌都,阿里,那曲"; arr[26 ]="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛"; arr[27 ]="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南" arr[28 ]="银川,石嘴山,吴忠,固原"; arr[29 ]="西宁,海东,海南,海北,黄南,玉树,果洛,海西"; arr[30 ]="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏"; arr[31 ]="香港"; arr[32 ]="澳门"; arr[33 ]="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖"; //初始化状态 function init(){ //获取城市的select标签对象 var citySelect = document.getElementById("city"); //获取所有的区域 var areaArr = arr[0].split(","); //方式二中需要定义一个字符串,拼接所有的option result = ""; //遍历数组，并创建节点 for(var i =0;i < areaArr.length;i++){ //方式一 /*//创建option节点 var optionEle = document.createElement("option"); //创建文本节点 var areaText = document.createTextNode(areaArr[i]); //将文本节点添加为option节点的子节点 optionEle.appendChild(areaText); //将option添加为select节点的子节点 citySelect.appendChild(optionEle);*/ //方式二 //"<option>东城</option><option>西城</option><option>朝阳</option>" //result += "<option>" + areaArr[i] + "</option>"; //方式三 //new Option(str1,str2),一般用于动态生成选择项目 //等价于<option value=str2>str1</option> //例如：<option value="东城">东城</option> //类似select这种标签，如果其中有多个选项的时候，则可以当做一个容器【数组】进行处理， //向其中添加标签相当于给数组中的每个变量进行赋值 citySelect[i] = new Option(areaArr[i],areaArr[i]); } //方式二 //citySelect.innerHTML = result; } //当切换省份的时候，城市随着切换 function getCity(){ //获取标签对象 var proSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); //获取省份中当前被选择的option var index = proSelect.selectedIndex; //根据选中的index值获取数组中对应的城市或者区域 var cityArr = arr[index].split(","); //每一次需要给select重新设置option选项的时候，需要将上一次的option选项清空 citySelect.length = 0; //将获取到的城市填充到城市的select中 for(var i = 0; i < cityArr.length;i++){ citySelect[i] = new Option(cityArr[i],cityArr[i]); } } </script> </body> </html>
三、jQuery简介
jq是一个轻量级的javascript库，极大地简化了js编程
比如：
js:document.getElemenyById(“id的值”)
jq:$("#id的值")
jq包含的功能：
html元素获取和操作
css操作
js中的特效和动画【DOM】
AJAX:网络请求
jq的好处：
a.简化js代码
b.不需要关心兼容问题
c.提供了额外的方法
jq的设计思想：
a.模拟css的选择器
b.独有的语法表达方式【$】
c.多种筛选方式【选择器】
jq的写法：
a.函数化
b.链式操作
c.取值赋值一体化
2.jq的语法
jq是对html元素进行筛选，并对筛选出来的元素进行操作
通过美元符定义jq
语法：
$(selector).methodName()
说明：
a.selector是字符串，通过选择器筛选html元素
b.$(selector)表示一个对象【html标签对象或者集合对象】
c.jq对象调用函数的时候，可以采用链式方式，例如：$(selector).method1().method2()…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引用本地的jQuery库--> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <script type="text/javascript"> //jq写法 $(document).ready(function(){ }); //简写 $().ready(function(){ }); //简写 $(function(){ }) //js写法 // window.onload = function(){ // } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引用本地的jQuery库--> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="box"></div> <script type="text/javascript"> //js：获取标签对象并给对象设置文本 var jsDiv = document.getElementById("box"); jsDiv.innerHTML = "hello"; //jq:获取标签对象并给对象设置文本 var $jqDiv = $("#box"); $jqDiv.html("jQuery"); //注意：js对象和jq对象不能交叉调用函数 //但是，js对象和jq对象之间可以进行转换 //js----->jq var $jqObj = $(jsDiv); //jq---->js var jsObj1 = $jqDiv[0]; var jsObj2 = $jqDiv.get(0); </script> </body> </html>
3.jq的选择器
选择器是jq的核心
分类：
基本选择器【id选择器，类选择器，元素选择器，复合选择器，通配符选择器】
层次选择器
过滤选择器
属性选择器
表单选择器
3.1基本选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引用本地的jQuery库--> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="box" class="cls"></div> <p></p> <h1 id="h"></h1> <script type="text/javascript"> $(document).ready(function(){ //1.id选择器 /* * $("#id的值") * 相当于document.getElementById("id的值") */ var $jqDiv1 = $("#box"); //2.元素选择器【标签名称选择器】 /* * $("html标签名称") * 相当于document.getElementByTagName("html标签名称") */ var $jqDiv2 = $("div"); //3.类选择器 /* * $(".class的值") * 相当于document.getElementByClassName("class的值") */ var $jqDiv3 = $(".cls"); //4.复合选择器 var $jqDiv4 = $("#box,p,#h"); //5.通配符选择器 var $jqDiv5 = $("*"); }); </script> </body> </html>