一、DOM之事件
1.鼠标事件
1.1拖拽事件
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width: 100px; height: 200px; background-color: orange; /*定位方式：参照物是body*/ position: absolute; } </style> </head> <body> <!-- 拖拽事件的实现思路 1.拖拽发生的条件，在元素上有按下动作之后，才可以实现拖拽 onmousedown 鼠标按下的时候触发 2.在移动过程中，记录鼠标相对于窗口的位置【注意：鼠标相对于元素的位置不需要发生变化】 left top 3.释放资源 onmouseup 鼠标抬起的时候触发 --> <div class="box"></div> <script> //获取标签的对象 var box = document.getElementsByClassName("box")[0]; //2.添加鼠标按下的事件 box.onmousedown = function(event){ var e = event || window.event; //记录鼠标按下的位置在当前元素中的偏移量 offset var offsetX = e.offsetX; var offsetY = e.offsetY; //移动的时候，鼠标是不能抬起的，移动事件+按下事件同时进行 //注意：鼠标相对于div的位置始终没有发生改变，移动的时候，相对改变的是和整个文档的位置 document.onmousemove = function(event){ var e = event || window.event; //在移动的过程中，获取移动到的位置 var clientX = e.clientX; var clientY = e.clientY; //设置上下左右的距离 box.style.left = clientX - offsetX + "px"; box.style.top = clientY - offsetY + "px"; } document.onmouseup = function(){ document.onmousemove = null; } } </script> </body> </html>
1.2阻止表单提交事件
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="form" action="#" method="get"> <input id="user" type="text" name="username" placeholder="请输入用户名"/><br /> <input id="pwd" type="password" name="pwd" placeholder="请输入密码" /><br /> <input type="submit" value="提交" /> </form> <script> window.onload = function(){ var form = document.getElementById("form"); //给表单对象添加事件 form.onsubmit = function(){ //进行用户名和密码的校验 //获取用户名和密码对应的input标签对象 var user = document.getElementById("user"); var pwd = document.getElementById("pwd"); if(!(/^[a-zA-Z0-9]{6,16}$/.test(user.value))){ //阻止提交,是通过函数返回值是true还是false进行判断的 return false; } } } </script> </body> </html>学生案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; padding: 0px; } #box{ position: relative; } form{ position: absolute; top: 100px; left: 30%; } span{ display: none; color: red; font-size: 12px; } input{ margin: 10px; border: solid 1px black; border-radius: 1px; background-color: lightgoldenrodyellow; height: 25px; width: 300px; } #sub{ position: absolute; left: 200px; width: 60px; border: solid 1px black; border-radius: 1px; background-color: lightgoldenrodyellow; height: 25px; } </style> </head> <body> <div id="box"> <form id="form"> 用户名： <input id="user" type="text" placeholder="请输入10个字符以内的用户名"/><span id="userInfo">*用户名格式不正确</span><br /> 密码：  <input id="pw" type="password" placeholder="请输入密码"/><span id="pwInfo">*请包含数字和字母</span><br /> 确认密码：<input id="cpw" type="password" placeholder="请确认密码"/><span id="checkPw">*两次输入不一致</span><br />      <input type="submit" value="提交" /> </form> </div> <script> var form = document.getElementById("form"); var btn = document.getElementById("sub") var user = document.getElementById("user") var pwd = document.getElementById("pw") var cpwd = document.getElementById("cpw") var userSpan = document.getElementById("userInfo") var pwSpan = document.getElementById("pwInfo") var cpwSpan = document.getElementById("checkPw") // userSpan.style.display = "block" form.onsubmit = function(){ console.log("进入函数") if (user.value.length>10||user.value.length<1) { userSpan.style.display = "inline-block" return false; } else{ if (pwd.value.length<6||(typeof pwd.value == Number)) { pwSpan.style.display = "inline-block" return false; } else{ if (pwd.value!=cpwd.value) { cpwSpan.style.display = "inline-block" return false; } else{ document.write("表单成功提交") } } } } </script> </body> </html>
2.键盘事件
键盘事件：按下键盘上任意键的时候触发的事件
注意：键盘事件必须绑定到document上
常用键盘事件：
onkeydown:按下键盘的任意键【连续调用】
onkeyup:抬起键盘的任意键【连续调用】
onkeypress:按下键盘上的非功能键【功能键：ctrl/shift/alt/caps lock等】【连续调用】
和鼠标事件类似，只要触发了事件则会自动产生一个事件对象，事件对象包含了本次事件的所有信息
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //按下任意键 document.onkeydown = function(event){ var evt = event || window.event; console.log(evt); //xxxKey:代表的是功能键，如果按下功能键，则获取到true //keyCode：按下的按钮所表示的字符【ASCII码】 console.log(evt.altKey,evt.shiftKey,evt.ctrlKey,evt.keyCode); } //抬起任意键 document.onkeyup = function(event){ var evt = event || window.event; console.log(evt); //xxxKey:代表的是功能键，如果按下功能键，则获取到true //keyCode：按下的按钮所表示的字符【ASCII码】 console.log(evt.altKey,evt.shiftKey,evt.ctrlKey,evt.keyCode); } //按下非功能键 document.onkeypress = function(event){ var evt = event || window.event; console.log(evt); //xxxKey:代表的是功能键，如果按下功能键，则获取到true //keyCode：按下的按钮所表示的字符【ASCII码】 console.log(evt.altKey,evt.shiftKey,evt.ctrlKey,evt.keyCode); } </script> </body> </html>案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{width: 100px;height: 100px;background-color: orange;position: absolute;} </style> </head> <body> <!-- 需求： 1.页面上有一个div，按下shift+c键的时候给div随机更改颜色 2.通过上下左右键来控制div的移动 --> <div id="box"></div> <!--引入外部js文件--> <script type="text/javascript" src="js/randomColor.js"></script> <script type="text/javascript"> //1. //a.获取div的标签对象 var divObj = document.getElementById("box"); //b.添加键盘事件 document.onkeydown = function(event){ var e = event || window.event; if(e.shiftKey == true && e.keyCode == 67){ divObj.style.backgroundColor = randomColor(); } } //2. document.addEventListener("keydown",func,false); function func(event){ //alert("hello") var e = event || window.event; switch(e.keyCode){ //左键 case 37:{ divObj.style.left = divObj.offsetLeft - 5 + "px"; break; } case 38:{ divObj.style.top = divObj.offsetTop - 5 + "px"; break; } case 39:{ divObj.style.left = divObj.offsetLeft + 5 + "px"; break; } case 40:{ divObj.style.top = divObj.offsetTop + 5 + "px"; break; } } } </script> </body> </html>
3.事件的监听
事件监听器
添加监听【给元素或者标签添加事件，divObj.onclick 】
target.addEventListener("事件名称"，事件需要触发的函数，布尔值)
用于向指定的元素添加事件
注意：
事件名称不能带有on，例如：click
函数：传函数名或者匿名函数即可
布尔值：事件传递的模式：捕捉或者冒泡
移除监听
target.removeEventListener("事件名称"，事件需要触发的函数)
4.事件的传递
事件流：描述的是从页面接受事件的顺序，当几个具有事件的元素层叠在一起的时候，当点击其中一个元素，并不是只有当前元素会触发事件，跟它有关联的元素都会触发事件，只不过触发的顺序可能不同
事件流包括两种模式：
事件捕获：是从外往里进行逐个触发
事件冒泡：是从里往外进行逐个触发
注意：现代的浏览器默认情况下都是冒泡模式
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box1{width: 200px;height: 200px;background-color: red;} #box2{width: 100px;height: 100px;background-color: blue;} #box3{width: 50px;height: 50px;background-color: yellow;} </style> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"> </div> </div> </div> <script> var divObj1 = document.getElementById("box1"); var divObj2 = document.getElementById("box2"); var divObj3 = document.getElementById("box3"); //给三个div分别进行事件监听【click】 /* * true:box1-->box2--->box3 ，从外往里触发，事件捕获 * false:box3--->box2--->box1 ,从里往外触发，事件冒泡 */ divObj1.addEventListener("click",func,false); divObj2.addEventListener("click",func,false); divObj3.addEventListener("click",func,false); function func(){ console.log(this); } </script> </body> </html>
5.综合案例
5.1图片轮播
css文件
*{ padding: 0px; margin: 0px; } /*整体效果*/ #box{ width: 800px; height: 400px; margin: auto; position: relative; background-color: red; } /*数字列表*/ #list{ /*取消项目符号*/ list-style: none; position: absolute; left: 270px; bottom: 20px; } /*小圆点*/ #list li{ /*将li的显示从竖向改为横向*/ float: left; width: 20px; height: 20px; border-radius: 50%; background-color: gray; margin-left: 10px; /*让文字居中显示*/ text-align: center; line-height: 20px; } /*左右按钮*/ /*共性*/ .bt{ width: 50px; height: 80px; background-color: rgba(0,0,0,0.2); color: white; font-size: 30px; /*让文字居中显示*/ line-height: 80px; text-align: center; /*初始状态下，左右按钮是处于隐藏状态*/ display: none; /*定位*/ position: absolute; top: 160px; } /*个性*/ #left{ left: 0px; } #right{ right: 0px; } #pic{ width: 800px; height: 400px; position: absolute; left: 0px; top: 0px; }js文件
//1.获取所有的标签对象 var jsBox = document.getElementById("box"); var jsPic = document.getElementById("pic"); var jsLeft= document.getElementById("left"); var jsRight = document.getElementById("right"); var jsLiArr = document.getElementsByTagName("li"); //2.将第一个li设置为红色 jsLiArr[0].style.backgroundColor = "red"; //3.启动一个间歇性定时器：更改pic的图片，更改li的选中状态 var currentPage = 1; var timer = setInterval(startLoop,2000); function startLoop(){ currentPage++; changePage(); } function changePage(){ //边界判断 if(currentPage == 9){ currentPage = 1; } else if(currentPage == 0){ currentPage = 8; } //根据currentPage的值切换图片 jsPic.src = "img/" + currentPage + ".jpg"; //更改圆点的颜色 //重置所有圆点的颜色为灰色 for(var i = 0;i < jsLiArr.length;i++){ jsLiArr[i].style.backgroundColor = "gray"; } //将目前选中的圆点设置为红色 jsLiArr[currentPage - 1].style.backgroundColor = "red"; } //鼠标事件 //4.鼠标移入和移出box【监听事件】 jsBox.addEventListener("mouseover",overFunc,false); function overFunc(){ //停止定时器 clearInterval(timer); //将左右按钮显示出来 jsLeft.style.display = "block"; jsRight.style.display = "block"; } jsBox.addEventListener("mouseout",outFunc,false); function outFunc(){ //重启定时器 timer = setInterval(startLoop,2000); //将左右按钮显示出来 jsLeft.style.display = "none"; jsRight.style.display = "none"; } //5.鼠标移入和移出左右按钮【监听事件】 jsLeft.addEventListener("mouseover",deepDiv,false); jsRight.addEventListener("mouseover",deepDiv,false); function deepDiv(){ this.style.backgroundColor = "rgba(0,0,0,0.6)"; } jsLeft.addEventListener("mouseout",noDeep,false); jsRight.addEventListener("mouseout",noDeep,false); function noDeep(){ this.style.backgroundColor = "rgba(0,0,0,0.2)"; } //6.鼠标点击左右按钮 jsLeft.addEventListener("click",function(){ currentPage--; changePage(); },false); jsRight.addEventListener("click",function(){ currentPage++; changePage(); },false); //7.鼠标移入圆点的时候，切换图片 for(var i = 0;i < jsLiArr.length;i++){ //给每个圆点的li做一个标记 jsLiArr[i].index = i + 1; //给每个li添加监听 jsLiArr[i].addEventListener("mouseover",function(){ currentPage = this.index; changePage(); },false); }html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入css文件--> <link href="css/imageLoop.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="box"> <!--初始图片--> <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="left" class="bt"><</div> <div id="right" class="bt">></div> </div> <!--引入js文件--> <script type="text/javascript" src="js/imageLoop.js"></script> </body> </html>
5.2省份城市二级关联
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="init()"> <!--省份--> <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> <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(){ //方式一：创建元素和文本对象 //方式二 //获取city对应的select标签对象 var city = document.getElementById("city"); //获取北京对应的所有的区 var cityArr = arr[0].split(","); for(var i = 0;i < cityArr.length;i++){ //<option value="东城">东城</option> //<option value="str2">str1</option> //new Option(str1,str2),一般用于动态创建选项 city[i] = new Option(cityArr[i],cityArr[i]); } } //选择每个省份 function getCity(){ //获取省份和城市对应的select标前对象 var pro = document.getElementById("province"); var city = document.getElementById("city"); //获取当前选中的省份 var index = pro.selectedIndex; var cityArr = arr[index].split(","); //重置 city.length = 0; for(var i = 0;i < cityArr.length;i++){ city[i] = new Option(cityArr[i],cityArr[i]); } } </script> </body> </html>
二、jQuery简介
1.什么是jQuery
jQuery是一个轻量级的js库，简化了js编程
jQuery库包含的功能：
html元素获取
html元素操作
css操作
html事件函数
js的特效和动画
DOM的遍历和修改
AJAX
使用jq的好处：
a.将之前的js的复杂操作简单化
b.不需要关心兼容问题
c.提供了大量实用的方法
使用jq的思想
a.模拟css选择元素【选择器】
b.特有的表达式的方法
c.多种筛选方式
jq的写法
a.函数化
b.取值赋值一体化
c.选择器选择元素
2.jQuery选择器
选择器是jQuery的核心
特点:可以支持css语法，能够对页面进行设置
举例：
<div id="box"></div>
js:var jsDiv = document.getElmentById("box")
jQuery:var jqDiv = $("#box")
选择器的分类：
基本选择器【5种，id，类，通配符，标签名称，复合（组合）】
层次选择器【4种，类似于css中的包含选择器】
过滤选择器【5种】
属性选择器【1种】
表单选择器【1种】
3.安装
方式一：当做外部的js文件引入
方式二：加载网络资源
4.第一个jQuery程序
4.1简单程序
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--引入jQuery库，相当于引入一个外部的js文件--> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script> //js /*window.onload = function(){ alert("hello"); } window.onload = function(){ alert("hello~~~~~111"); } window.onload = function(){ alert("hello~~~~222"); }*/ //注意：window.onload事件在同一各html文件中只能出现一次，只加载最后一次出现的 //jQuery $(document).ready(function(){ alert("hello"); }) $(document).ready(function(){ alert("hello~~~111"); }) $(document).ready(function(){ alert("hello~~~222"); }) //注意：jQuery中的页面加载函数$(document).ready(function()）在同一个html文件中可以出现多次，按照顺序执行 </script> </body> </html>
4.2基础语法
通过美元符定义jQuery
基本语法：$(选择器),method()
说明：
选择器是一个字符串表达式，用于识别DOM中的元素，然后通过jQuery提供的函数设置
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box1{ width: 200px; height: 100px; background-color: red; } </style> </head> <body> <div id="box1"></div> <!--引入jQuery库，相当于引入一个外部的js文件--> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <!--js语法--> <!--<script> window.onload = function(){ var jsDiv = document.getElementById("box1"); jsDiv.innerHTML = "hello"; } </script>--> <!--jQuery语法--> <script> $(document).ready(function(){ var $jqDiv = $("#box1"); $jqDiv.html("hello~~~~~~"); //js对象和jq对象可以相互转化,但是，两者之间的函数不能相互调用 //jQuery----->DOM var jsDiv1 = $jqDiv[0]; var jsDiv2 = $jqDiv.get(0); //DOM----->jQuery var $jqDiv1 = $(jsDiv1); }) </script> </body> </html>
643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
