前端 jQuery
jQuery介绍
jQuery的优势
1.js代码对浏览器的兼容性做的更好了
2.隐式循环
3.链式操作
高度封装了js代码的模块
封装了dom节点
封装了操作dom节点的简便方法
jQuery引入
下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，
然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
https://code.jquery.com/jquery-3.4.1.js 未压缩版
https://code.jquery.com/jquery-3.4.1.min.js 压缩版
下载到本地文件中
<script src="jquery.js"></script> <script>jquery代码+js</script>
jquery找到的标签对象称为 -- jquery对象 原生js找到的标签对象称为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jquery对象的方法 jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换: jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0]
dom转成jquery : jQuery(dom对象) $(dom对象)
dom对象转jquery对象 -- $(dom对象)
jquery转成dom : jq对象[index]
jQuery('#d1') -- $('#d1')
基本选择器（同css）
id选择器：
$("#id") #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，
通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，
看我们上面的jQuery对象部分的内容
#id选择器 .类选择器 标签选择器 *通用选择器
标签选择器： $("tagName") $('div') class选择器： $(".className") 配合使用： $("div.c1") // 找到有c1 class类的div标签 所有元素选择器： $("*") 组合选择器： $("#id, .className, tagName")
选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,
意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,
可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象
空格 后代选择器 >子代选择器 +毗邻选择器 ~弟弟选择器 $('div li') $('div>ul>li') $('.baidu+li') k.fn.init [prevObject: k.fn.init(1)] $('.baidu~li') k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]
属性选择器
$('[属性名]') 必须是含有某属性的标签 $('a[属性名]') 含有某属性的a标签 $('选择器[属性名]') 含有某属性的符合前面选择器的标签 $('选择器[属性名="aaaa"]') 属性名=aaa的符合选择器要求标签 $('选择器[属性名$="xxx"]') 属性值以xxx结尾的 $('选择器[属性名^="xxx"]') 属性值以xxx开头的 $('选择器[属性名*="xxx"]') 属性值包含xxx $('选择器[属性名1][属性名2="xxx]') 拥有属性1,且属性二的值='xxx',符合前面选择器要求的
jQuery筛选器
$('选择器:筛选器') $('选择器:first') 作用于选择器选择出来的结果 first 找第一个 last 最后一个 eq(index) 通过索引找 even 找偶数索引 odd 找奇数索引 gt(index) 大于某索引的 lt(index) 小于某索引的 not(选择器) 不含 符合选择器 要求的 has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)
$(':text') $(':password') $(':radio') $(':checkbox') $(':file') $(':submit') $(':reset') $(':button') 注意 : date type的input是找不到的
:enabled #可用的标签 :disabled #不可用的标签 :checked #选中的input标签 :selected #选中的option标签
$(':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)]
找兄弟 :$('ul p').siblings() 找哥哥 $('ul p').prev() 找上一个哥哥 $('ul p').prevAll() 找所有哥哥 $('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了 找弟弟 : next() nextAll() nextUntil('选择器') 找祖宗 : parent() parents() parentsUntil('选择器') 找儿子 : children()
筛选方法 first() last() eq(index) not('选择器') 去掉满足选择器条件的 filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的 find('选择器') 后代选择器 找所有结果中符合选择器要求的后代 has('选择器') 通过后代关系找当代 后代中有符合选择器要求的就把当代的留下
html()//取得第一个匹配元素的html内容，包含标签内容 html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果 text()// 取得所有匹配元素的内容，只有文本内容，没有标签 text(val)//设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去 示例: $('.c1').text('<h3>你好,太白</h3>'); $('.c1').html('<h3>你好,太白</h3>');
父子关系:
追加儿子 :(父).append(子) (子).appendTo(父)
头部添加 :(父).prepend(子) (子).prependTo(父)
兄弟关系:
添加哥哥 :参考点.before(要插入的) 要插入的.insertbefore(参考点)
添加弟弟 :参考点.after(要插入的) 要插入的.insertAfter(参考点)
如果被添加的标签原本就在文档树中,就相当于移动
例子
例子append var li = document.createElement('li') var jq = $(li).text('张艺兴') $('ul').append(jq) var li = document.createElement('li') var jq = $(li).text('张艺兴') $('ul').append(jq[0]) var li = document.createElement('li') var jq = $(li).text('张艺兴') $('ul').append('<li>鹿晗</li>') 例子appendTo var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo('ul') var dom_ul = document.getElementsByTagName('ul')[0] var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo(dom_ul) var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo($('ul')) 对已经存在的内容进行添加 -- 移动 $('li:first').appendTo('ul')
$('li:last').prependTo('ul') $('ul').prepend('<li>李东宇</li>') $('<li>邓帅</li>').prependTo('ul')
$('#l2').before('<li>李东宇</li>') $('<li>李东宇222</li>').insertBefore('#l2') $('#l2').after('<li>邓帅</li>') $('<li>邓帅222</li>').insertAfter('#l2')
删除
删除 : remove detach empty remove : 删除标签和事件,被删掉的对象做返回值 detach : 删除标签,保留事件,被删掉的对象做返回值 empty : 清空内容标签,自己被保留 $('div').remove(); $('div').empty();
替换
修改 : replaceWith replaceAll
replaceWith : a.replaceWith(b) 用b替换a
replaceAll : a.replaceAll(b) 用a替换b
例子
示例： var a = document.createElement('a') a.href = 'http://www.baidu.com'; a.innerText = 'xxx'; $('span').replaceWith(a); $(a).replaceAll('span');
clone()克隆（事件）
var btn = $(this).clone() //克隆标签但不能克隆事件
var btn = $(this).clone(true) //克隆标签和事件
例子
clone()克隆 <button class="btn">屠龙宝刀,点击就送!</button> $('.btn').click(function () { // var a = $(this).clone(); //克隆标签 var a = $(this).clone(true); //连带事件一起克隆 $(this).after(a); })
attr获取属性值
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属性
prop（标签：true false）
如果一个标签只有true和false两种情况,适合用prop处理 $(':checkbox:checked').prop('checked') //获取值 $(':checkbox:checked').prop('checked',false) //表示取消选中 如果设置/获取的结果是true表示选中,false表示取消选中
添加类 addClass $('div').addClass('red') //添加一个类 $('div').addClass('red bigger') //添加多个类 删除类 removeClass $('div').removeClass('bigger') //删除一个类 $('div').removeClass('red bigger') 转换类 toggleClass //有即删 无即加 $('div').toggleClass('red') $('div').toggleClass('red bigger')
$(input).val() $(':text').val('值') $(':password').val('值') 对于选择框 : 单选 多选 下拉选择 设置选中的值需要放在数组中 : $(':radio').val([1]) $(':radio').val([1,2,3])
css('样式名称','值') css({'样式名1':'值1','样式名2':'值2'}) $('div').css('background-color','red') //设置一个样式 $('div').css({'height':'100px','width':'100px'}) //设置多个样式
scrollTop()
scrollLeft()
$(window).scrollLeft()
$(window).scrollTop()
$('.c1').height(); //content 高度 $('.c1').width(); //content 宽度 $('.c1').innerHeight();//content高度+padding高度 $('.c1').innerWidth(); //content宽度+padding宽度 $('.c1').outerHeight();//content高度+padding高度 + border高度 $('.c1').outerWidth();//content宽度+padding宽度+ border宽度
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100px; height: 100px; border: 2px solid red; background-color: green; padding: 20px 30px; } </style> </head> <body> <div class="c1"></div> <script src="jquery.js"></script> </body> </html>
$(':submit').click( function () { return false } ) 如果返回false不提交 如果返回true不提交
for（jQuery的序列）
let 声明的变量的作用域只在for循环中
// 1.不要用for(i in li_list){}的方式循环一个jq对象 for(let i=0;i<li_list.length;i++){ //let 声明的变量的作用域只在for循环中 console.log(i) }
事件
click（点击事件）
<body>
<button>点击1</button>
<button>点击2</button>
</body>
<script src="jquery.3.4.1.js"></script>
<script>
$('button').click(
function () {
alert('你点了我一下!')
}
)
</script>
点击事件和滚动事件示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 100px; width: 100px; } .c2{ background-color: green; height: 1000px; width: 100px; } .c3{ background-color: blue; height: 1000px; width: 100px; } .s1{ position: fixed; left:20px; bottom: 20px; height: 40px; width: 80px; background-color: purple; line-height: 40px; text-align: center; } .s1 a{ color: white; font-size: 14px; text-decoration: none; } .hide{ display: none; } </style> </head> <body> <!--<a name="top">这里是顶部</a>--> <!--<a>这里是顶部</a>--> <span>顶部位置</span> <div class="c1"></div> <button class="change-postion">走你</button> <div class="c2"></div> <div class="c3"></div> <span class="s1 hide"> <!--<a href="#top">返回顶部</a>--> <span>返回顶部</span> </span> <script src="jquery.js"></script> <script> //点击事件来改变标签位置 $('.change-postion').click(function () { $('.c1').offset({top:200,left:200}); }); //滚动事件,监听滚动距离来显示或者隐藏标签 $(window).scroll(function () { console.log($(window).scrollTop()); if ($(window).scrollTop() >=200){ $('.s1').removeClass('hide'); }else { $('.s1').addClass('hide'); } }); // 回到顶部,scrollTop设置值 $('.s1').click(function () { $(window).scrollTop(0); }) </script> </body> </html>
<script src="jquery.js"></script> <script> //方式1 // $('#d1').click(function () { // $(this).css({'background-color':'green'}); // }); //方式2 $('#d1').on('click',function () { $(this).css({'background-color':'green'}); }) </script>
click 左键点击事件 //获取光标触发的事件 $('[type="text"]').focus(function () { $('.c1').css({'background-color':'black'}); }); //失去光标(焦点)触发的事件 $('[type="text"]').blur(function () { $('.c1').css({'background-color':'purple'}); }); //域内容发生改变时触发的事件 $('select').change(function () { $('.c1').toggleClass('cc'); }); //鼠标悬浮触发的事件 // $('.c1').hover( // //第一步:鼠标放上去 // function () { // $(this).css({'background-color':'blue'}); // }, // //第二步,鼠标移走 // function () { // $(this).css({'background-color':'yellow'}); // } // ) // 鼠标悬浮 等同于hover事件 // 鼠标进入 // $('.c1').mouseenter(function () { // $(this).css({'background-color':'blue'}); // }); // 鼠标移出 // $('.c1').mouseout(function () { // $(this).css({'background-color':'yellow'}); // }); // $('.c2').mouseenter(function () { // console.log('得港绿了'); // }); // 鼠标悬浮事件 // $('.c2').mouseover(function () { // console.log('得港绿了'); // }); // mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象 //键盘按下触发的事件 e\event事件对象 $(window).keydown(function (e) { // console.log(e.keyCode); //每个键都有一个keyCode值,通过不同的值来触发不同的事件 //左方向键37 ,右方向键39 if (e.keyCode === 37){ $('.c1').css({'background-color':'red'}); }else if(e.keyCode === 39){ $('.c1').css({'background-color':'green'}); } else { $('.c1').css({'background-color':'black'}); } }) // 键盘抬起触发的事件 $(window).keyup(function (e) { console.log(e.keyCode); }) input事件: 22期百度:<input type="text" id="search"> <script src="jquery.js"></script> <script> $('#search').on('input',function () { console.log($(this).val()); }) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ background-color: red; height: 200px; } #d2{ background-color: green; height: 100px; width: 100px; } </style> </head> <body> <div id="d1"> <div id="d2"></div> </div> <script src="jquery.js"></script> <script> $('#d1').click(function () { alert('父级标签'); }); $('#d2').click(function () { alert('子级标签'); }); </script> </body> </html>
$('#d1').click(function () { alert('父级标签'); }); $('#d2').click(function (e) { alert('子级标签'); return false; // e.stopPropagation(); });
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="d1"> <button class="c1">爱的魔力转圈圈</button> </div> <script src="jquery.js"></script> <script> // $('.c1').on('click',function () { // alert('得港被雪飞调教了,大壮很难受!'); // var btn = document.createElement('button'); // $(btn).text('爱的魔力转圈圈'); // $(btn).addClass('c1'); // console.log(btn); // //添加到div标签里面的后面 // $('#d1').append(btn); // // }); #将'button' 选择器选中的标签的点击事件委托给了$('#d1'); $('#d1').on('click','button',function () { alert('得港被雪飞调教了,大壮很难受!'); var btn = document.createElement('button'); $(btn).text('爱的魔力转圈圈'); $(btn).addClass('c1'); console.log(btn); console.log($(this)) //还是我们点击的那个button按钮 //添加到div标签里面的后面 $('#d1').append(btn); }); </script> </body> </html>
1. jquery文件要在使用jquery的代码之前引入 2. js代码最好都放到body标签下面或者里面的最下面来写 3.window.onload // window.onload = function () { // $('.c1').click(function () { // $(this).css({'background-color':'green'}); // }) // } 4.页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){}); 页面载入与window.onload的区别 1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用 2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数） 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容 // window.onload 有覆盖现象,会被后面的window.onload给重新赋值 // window.onload = function () { // $('.c1').click(function () { // $(this).css({'background-color':'green'}); // }) // } $(function () { $('.c1').click(function () { $(this).css({'background-color':'green'}); }) }); </script> <script src="xx.js"></script> <style> .c1{ background-color: red; height: 200px; width: 200px; } </style> </head> <body> <div class="c1"></div> <img src="" alt=""> </body> </html>
show（基本）
// 基本 show() $('.c1').show() //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果， hide() $('.c1').hide() toggle() //这几个toggle的意思就是你原来是什么效果，我就反着来
滑动（拉窗帘一样）
// 滑动（拉窗帘一样） slideDown() //使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0 //还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的 slideUp() slideToggle()
淡入淡出（控制透明度）
fadeIn() fadeOut() fadeTo() o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读 fadeToggle() // 自定义（了解即可） animate()
循环标签对象数组 $('li').each(function(k,v){ console.log(k,v); }); 循环普通数组 var d1 = ['aa','bb','cc']; $.each(d1,function(k,v){ console.log(k,v); }) 跳出循环 return false; 类似于break $('li').each(function(k,v){ console.log(k,v.innerText); if (k === 1){ return false; } }); 跳出本次循环 return; 类似于continue $('li').each(function(k,v){ if (k === 1){ return; } console.log(k,v.innerText); });
data
给标签对象添加数据,类似于添加了全局变量
.data(key, value): 设置值
.data(key) 取值
.removeData(key) 删除值
<script> jQuery.extend({ //$.extend({}) min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function max:function(a, b){return a > b ? a : b;} }); jQuery.min(2,3);// => 2 jQuery.max(4,5);// => 5 $('div').min(1,2);不能通过标签对象来调用 </script> <script> jQuery.fn.extend({ //给任意的jQuery标签对象添加一个方法 check:function(){ return this.each(function(){this.checked =true;}); }, uncheck:function(){ return this.each(function(){this.checked =false;}); } }); // jQuery对象可以使用新添加的check()方法了。 $("input[type='checkbox']").check(); </script>
