11.4 Jquery
jQuery的优势
-
js代码对浏览器的兼容性更好
-
隐式循环
-
链式操作
jQuery是什么? -- 高度封装了js代码块的模块,封装了dom节点,封装了操作dom节点的简便方法
$: 就是jQuery的简写.
jQuery对象和DOM对象的互相转换
jQuery封装了DOM
DOM转换成jQuery : jQuery(DOM对象) / $(DOM对象)
jQuery转成DOM : jQuery对象[index]
</ jQuery对象转换成了 DOM 对象之后,可以直接调用 DOM 提供的一些功能
11.4.1 jQuery选择器
1. 基础选择器
代码 | 解释 |
---|---|
$("#id") | id选择器 |
$("tagName") | 标签选择器 |
$(".className") | 类选择器 |
$("*") | 通用选择器 |
$("div.className") | 交集选择器(含有className的div标签 |
$("#id, .className, tagName") | 并集选择器 |
2. 层级选择器
代码 | 解释 |
---|---|
$("div li") | 后代选择器,div下面的所有li标签 |
$("div>ul>li") | 子代选择器,div下面的ul标签里的所有里标签 |
$(".xxx+li") | 毗邻选择器,有类名xxx标签的下一个li标签 |
$(".xxx~li") | 弟弟选择器,有类名xxx标签的下面的所有li标签 |
3. 属性选择器
代码 | 解释 |
---|---|
$('[属性名]') | 含有某属性的标签 |
$('xxx[属性名]') | 含有某属性的xxx标签 |
$('选择器[属性名]') | 符合选择器且含有某属性的标签 |
$('选择器[属性名='xxx']') | 符合选择器且某属性值='xxx'的标签 |
$('选择器[属性名$='xxx']') | 符合选择器且某属性值以xxx结尾的标签 |
$('选择器[属性名^='xxx']') | 符合选择器且某属性值以xxx开头的标签 |
$('选择器[属性名*='xxx']') | 符合选择器且某属性值包含xxx的标签 |
$('选择器[属性名1] [属性名2='xxx']') | 符合选择器且拥有属性1和属性2,且属性2的值为xxx的标签 |
11.4.2 jQuery筛选器
1. 基础筛选器
代码 | 解释 |
---|---|
$('选择器:筛选器') | 作用域选择器选择出来的结果 |
$('选择器:first') | 找第一个的标签 |
$('选择器:last') | 找最后一个的标签 |
$('选择器:eq(index)') | 通过索引找的标签 |
$('选择器:even') | 找偶数索引的标签 |
$('选择器:odd') | 找奇数索引的标签 |
$('选择器:gt(index)') | 找大于索引的标签 |
$('选择器:lt(index)') | 找小于索引的标签 |
$('选择器:not(选择器)') | 找没有某选择器的标签 |
$('选择器:has(标签)') | 找含有xxx标签的的标签 |
2. 表单筛选器
type筛选器
代码 | 解释 |
---|---|
$(':text') | 找type属性值为text的标签(文本框) |
$(':password') | 找type属性值为password的标签(密码框) |
$(':radio') | 找type属性值为radio的标签(单选框) |
$(':checkbox') | 找type属性值为checkbox的标签(多选框) |
$(':file') | 找type属性值为file的标签(文件选择框) |
$(':submit') | 找type属性值为submit的标签(提交按钮框) |
$(':reset') | 找type属性值为reset的标签(重置按钮框) |
$(':button') | 找type属性值为button的标签(普通按钮框) |
<!-- date , type的input是找不到的 -->
状态筛选器
enabled //可选择的 disabled //不可选择 checked //默认选择 selected //默认选择 $(':disabled') jQuery.fn.init [input, prevObject: jQuery.fn.init(1)] $(':enabled') jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option, prevObject: jQuery.fn.init(1)] $(':checked') jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)] $(':selected') $(':checkbox:checked') jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)] $('input:checkbox:checked') jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
11.4.3 jQuery筛选器方法
代码 | 解释 |
---|---|
$('ul p').siblings() | 找兄弟 |
$('ul p').prev() / next() / parent() | 找上一个哥哥 / 弟弟 / 祖宗 |
$('ul p').prevAll() / nextAll() / parents() | 找所有哥哥 / 弟弟 / 祖宗 |
$('ul p').prevUntil('选择器') / nextUntil('选择器') parentsUnitil('选择器') | 找哥哥 / 弟弟 / 祖宗到某一个地方就停止 |
$('ul').children() | 找儿子 |
// 筛选方法
first()
last()
eq(index)
not('选择器') 去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器') 后代选择器,找所有结果中符合选择器要求的后代
has('选择器') 通过后代关系找当代
<!-- 注意:内容补充 -->
// 不要用for(i in li_list){}的方式循环一个jq对象,每个对象会封装方法 for(let i=0;i<li_list.length;i++){ //let 声明的变量的作用域只在for循环中 console.log(i) }
11.4.5 事件绑定
为button按钮绑定单击事件,单机按钮弹出警告框 $('button').click( function () { alert('别点我啊') } )
11.4.6 标签的文本操作
$('li:first').text() //获取第一个列表的文本内容 $('li:first').text('小白') //将第一个列表的文本值改为小白 $('li:last').html() //获取最后一个列表的内容 $('li:last').html('大白') //将最后一个列表的内容改为xxx $('li:first').html('<a href="https://www.baidu.com">百度一下</ a>') // 设置a标签属性 var a = document.createElement('a') a.innerText = 'AD钙' $('li:last').html(a) // a 是dom对象 var a2 = document.createElement('a') var jqobj = $(a2) jqobj.text('旺仔') $('li:last').html(jqobj) // jqobj是jquery对象 </ html可以接受 标签,dom对象,jq对象
11.4.7 标签的操作
1. 增加
父子关系: (父).append(子) //给父级的最后添加一个子 (子).appendTo(父) //将子添加到父级的最后 (父).prepend(子) //给父级的最前添加一个子 (子).prependTo(父) //将子添加到父级的最前 兄弟关系: 参考点.before(插入内容) //在参考点之前插入内容 $(插入内容).insertBefore(参考点) //将内容插入在参考点之前 参考点.after(插入内容) //在参考点之后插入内容 $(插入内容).insertAfter(参考点) //将内容插入在参考点之前 </ 如果被添加的标签原本就在文档树中,就相当于移动,参考点可以是标签,id,class等
2. 删除
remove / detach / empty var obj = $('button').remove() //删除标签和事件,被删除的对象做返回值,将对象重新添加回去,有标签但没有事件 var obj = $('button').detach() //删除标签保留事件,被删掉的对象做返回值,将对象重新添加回去,有标签也有事件 $('ul').empty() //清空ul里面的li标签,ul标签仍保留(清空内部内容,保留本身)
3. 修改
$('li').replaceWith(p) //用p对象内容替换所有的li标签 $(p).replaceAll('li') //将所有的li标签替换成p对象内容
4. 复制
var btn = $(this).clone() //克隆标签但不能克隆事件 var btn = $(this).clone(true) //克隆标签和事件 $('button').click( function () { var btn = $(this).clone(true); $(this).after(btn); } )
11.4.8 标签的属性操作
1. 通用属性
attr 获取属性的值 $('a').attr('href') 设置/修改属性的值 $('a').attr('href','http://www.baidu.com') 设置多个属性值 $('a').attr({'href':'http://www.baidu.com','title':'baidu'}) removeAttr $('a').removeAttr('title') //删除title属性 # 如果一个标签只有true和false两种情况,适合用prop处理 $('input').prop('checked'); //查看是否有某属性,返回true或false $('input').prop('checked',false); //取消全部选择 $('input').prop('checked',true); //全部选择
2. 类的操作
添加类 addClass $('div').addClass('red') //添加一个类 $('div').addClass('red bigger') //添加多个类 删除类 removeClass $('div').removeClass('bigger') //删除一个类 $('div').removeClass('red bigger') //删除多个类 转换类 toggleClass //有就删除,没有就添加 $('div').toggleClass('red') $('div').toggleClass('red bigger')
3. 值的操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> </head> <body> <input type="text"> <input type="password"> <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="2">女 <input type="checkbox" name="hobby" value="1" checked>足球 <input type="checkbox" name="hobby" value="2">音乐 <input type="checkbox" name="hobby" value="3">游戏 <input type="checkbox" name="hobby" value="4">电影 <select name="city" id=""> <option value="1">北京</option> <option value="2">上海</option> <option value="3">天津</option> <option value="4">山东</option> <option value="5">河南</option> </select> </body> <script> $(':text').val() //查看值 $(':text').val('123456'); //设置value值为xxx $(':password').val('456456');//设置value值为xxx $(':radio').val([2]); //选择value值为2的选择 $(':checkbox').val([1,3]); //选择value值为1,3的选项 $('select').val([5]) //选择value值为5的城市 </script> </html> # 对于选择框 : 单选,多选,下拉选择 -- 设置选中的值需要放在数组中.
11.4.9 css样式
$('div').css('background-color','red') //设置一个样式 $('div').css({'height':'100px','width':'100px'}) //设置多个样式
11.4.10 滚动条
$(window).scrollLeft() //水平滚动条距离左边的距离 $(window).scrollTop() //垂直滚动条距离顶部的距离
11.4.11 盒子模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: tomato; } </style> <script src="../jQuery3.4.1.js"></script> </head> <body> <div></div> </body> <script> // $('div').css({'width':'100px','height':'100px'}) $('div').height(100); //设置content高度 $('div').height(); //查看content中content的高度 $('div').width(100); //设置content宽度 $('div').width(); //查看content中content的宽度 $('div').css('padding','20px'); //设置padding距离 $('div').innerHeight(); //查看content+padding的高度 $('div').innerWidth(); //查看content+padding的宽度 $('div').css({'border':'5px','border-style':'solid'}); //设置border的宽度 $('div').outerHeight(); //查看content+padding+border的高度 $('div').outerWidth(); //查看content+padding+border的宽度 $('div').css('margin','10px'); //设置margin的距离 $('div').outerHeight(true); //查看content+padding+border+margin的高度 $('div').outerWidth(true); //查看content+padding+border+margin的宽度 $('div').innerHeight(500) //设置值,改变的是content的高度 </script> </html> # 设置值:变得永远是content的值
11.4.12 动画
slied滑动系列 sliedDown : 向下滑动显示 siledUp : 向上滑动隐藏 sliedToggle : down和up交替 # 动画时间用毫秒表示,也可以加回调函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ position: relative; float: right; height: 40px; width: 120px; background-color: lightblue; } .box{ position: absolute; height: 100px; width: 300px; background-color: lightcoral; top: 40px; right: 0; display: none; } .car{ position: absolute; width: 120px; line-height: 40px; text-align: center; top: 0; right: 0; } </style> <script src="../jQuery3.4.1.js"></script> </head> <body> <div class="container"> <div class="car">购物车(<span>0</span>)</div> <div class="box"></div> </div> </body> <script> var block = false; $('.car').click( function () { // $('.box').slideToggle(500); if(block){ $('.box').slideUp(500,fn2); //fn1 , fn2 是回调函数 block = false; }else { $('.box').slideDown(500,fn1); block = true; } function fn1() { $('.car').css('color','orange') } function fn2() { $('.car').css('color','black') } } ) </script> </html>
show系列 show : 对角滑动显示 hide : 对角滑动隐藏 toggle : show和hide交替 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> <style> div{ height: 200px; width: 200px; background-color: lawngreen; display: block; } </style> </head> <body> <button>显示</button> <div></div> </body> <script> $('button').click( function () { $('div').stop(); //如果没有stop,连续点击,执行完当前动作,才会执行下一个动作 // $('div').show(1000) //显示 // $('div').hide(1000) //隐藏 $('div').toggle(1000,fn) //交替 } ) function fn() { if($('button').text()==='显示'){ $('button').text('隐藏') }else { $('button').text('显示') } } </script> </html>
11.4.13 事件的绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> </head> <body> <button>点击</button> </body> <script> // 方式一 $('button').click({'a':'b'},fn); //可以不传参 function fn(e){ console.log(e.data); console.log(e.data.a); console.log('小白') } // 方式二 $('button').bind('click',{'a':'b'},fn); //可以不传参 function fn(e) { console.log(e); //打印事件 console.log(e.data); //打印事件参数 console.log(e.data.a); //打印事件参数的值 console.log('参数') } //解除绑定事件 $('button').unbind('click',fn); </script> </html>
11.4.14 各种事件
事件 | 解释 |
---|---|
click(function(){...}) | 单击事件.点击触发 |
blur(function(){...}) | 失去焦点 |
focus(function(){...}) | 获得焦点 |
change(function(){...}) | input框鼠标离开时,内容改变触发 |
keyup(function(){...}) | 按下键盘触发事件, 获取字符编号: e.keyCode |
hover(function(){...}) | 鼠标悬浮触发 |
mouseover / mouseout | 父元素绑定此事件,如果有子元素出入子元素也会触发 |
mouseenter / mouseleave | 鼠标悬浮触发,鼠标进入 / 离开 |
1. 获得 / 失去焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> </head> <body> <input type="text"> </body> <script> $('input').focus( function () { console.log('获得焦点') } ); $('input').blur( function () { console.log('失去焦点') } ); $('input').change( function () { console.log('内容改变') } ) </script> </html>
2. keyup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> <style> .mask{ position: absolute; background-color: rgba(255,255,0,0.3); width: 100%; height: 100%; top: 0; left: 0; } .tk{ position: absolute; width: 400px; height: 300px; background-color: lightblue; top: 50%; left: 50%; margin-left: -200px; margin-top: -150px; } </style> </head> <body> <input type="text"> <h1>那女孩对我说,说我保护她的梦</h1> <div class="mask"> <div class="tk"></div> </div> </body> <script> // $('input').keyup( // function (e) { // console.log(e.keyCode) //keyCode:字符的ASCLL编号 // } // ) $(window).keyup( function (e) { if(e.keyCode===27){ $('.mask').css('display','none') } } ) </script> </html>
3. mouseenter / leave
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ position: relative; float: right; height: 40px; width: 120px; background-color: lightblue; } .box{ position: absolute; height: 100px; width: 300px; background-color: lightcoral; top: 40px; right: 0; display: none; } .car{ position: absolute; width: 120px; line-height: 40px; text-align: center; top: 0; right: 0; } </style> <script src="../jQuery3.4.1.js"></script> </head> <body> <div class="container"> <div class="car">购物车(<span>0</span>)</div> <div class="box"></div> </div> </body> <script> $('.container').mouseenter( //鼠标悬浮触发 function () { $('.box').stop(); $('.box').slideDown(500); } ); $('.container') .mouseleave( function () { $('.box').stop(); $('.box').slideUp(500); } ) $('.container').hover( //鼠标悬浮触发,上面两个结合 function(){ $('.box').stop(); $('.box').toggle(500); } ) </script> </html>
4. mouseover / out
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> <style> .out{ width: 500px; height: 500px; background-color: lightpink; } .inner{ position: absolute; width: 200px; height: 200px; left: 150px; top: 150px; background-color: purple; } </style> </head> <body> <div class="out"> <div class="inner"></div> </div> </body> <script> $('.out').mouseover( //进入父元素打印,进入子元素打印 function () { console.log('enter') } ); $('.out').mouseout( //出来父元素打印,出来子元素打印 function () { console.log('out') } ) </script> </html>
11.4.15 事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .out{ width: 500px; height: 500px; background-color: lightpink; } .inner{ position: absolute; width: 200px; height: 200px; left: 150px; top: 150px; background-color: purple; } </style> <script src="../jQuery3.4.1.js"></script> </head> <body> <div class="out"> <div class="inner"></div> </div> </body> <script> $('.out').click( function () { alert('out') } ); $('.inner').click( //点击子元素的同时,也相当于点击了父元素 function (e) { alert('inner'); return false //阻止事件冒泡1 // e.stopPropagation() //阻止事件冒泡2 } ) </script> </html>
11.4.16 事件委托
# 后来添加的标签,可以拥有之前绑定的事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> </head> <body> <div> <button>点击1</button> </div> </body> <script> $('div').on('click','button',function () { alert('点我干嘛') }); var btn = document.createElement('button'); $(btn).text('点击2').appendTo('div') </script> </html>
11.4.17 页面加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> <script> window.onload = function(){ //window.onload要等到所有的文档 音视频都加在完毕才触发. $('button').click( //window.onload 只能绑定一次.多次绑定,只有最后一次生效 function () { alert('点我干嘛') } ) }; window.onload = function(){ alert('点我干嘛') }; $(document).ready( //jQuery的方式,只等待文档加载完毕之后就可以执行 function () { //在同一个html页面上可以多次使用 $('button').click( function () { alert('别点我') } ) } ); $(document).ready( function () { alert('别点了') } ); //jQuery的简写方式 $(function () { $('button').click( function () { alert('就这样吧') }) }) </script> </head> <body> <button>点击</button> </body> <!--<script>--> <!-- $('button').click(--> <!-- function () {--> <!-- alert('点我干嘛')--> <!-- }--> <!-- )--> <!--</script>--> </html>
11.4.18 each
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jQuery3.4.1.js"></script> </head> <body> <ul> <li>那女孩对我说</li> <li>请先说你好</li> <li>明天,你好</li> </ul> </body> <script> $('li').each( function (index,val) { //主动传index:每一项的索引,val:每一项的标签对象 console.log(index,val) } ) </script> </html>