修改时间：1月27日
作者：pp_x
邮箱：pp_x12138@
文章目录
jQueryjQuery介绍jQuery能做什么jQuery的优势jQuery的基础语法jQuery对象和DOM对象的转换选择器元素选择器层次选择器属性选择器过滤选择器jQuery事件鼠标事件键盘事件表单事件鼠标悬停复合事件绑定事件的另一种写法（动态绑定）jQuery效果隐藏显示淡入淡出效果滑动效果动画效果callbackjQuery的DOM操作获取和设置值的操作节点的操作类样式的操作jQuery遍历祖先元素遍历后代元素遍历同辈元素遍历过滤遍历元素jQuery
jQuery介绍
jQuery由美国人ohn Resig（约翰·莱西格）于创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do morejQuery能做什么
访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合jQuery的优势
体积小，压缩后只有100KB左右强大的选择器（基于css选择器，但强大于css）出色的DOM封装可靠的事件处理机制出色的浏览器兼容性jQuery的基础语法
$(selector).action();
$()：工厂函数，将DOM对象转换为jQuery对象selector：选择器，获取需要操作的DOM对象action()：jQuery中提供的方法
jQuery对象和DOM对象的转换
DOM对象转jQuery对象var a = document.getElementById("name"); // a是DOM对象 var b = $(a); // b是jQuery对象
jQuery对象转DOM对象
var a = $("#name"); // a是jQuery对象 var b = jqObject.get(0); // b是DOM对象
选择器
元素选择器
*：所有元素#id：id选择器.class：类选择器.class.class：交集选择器层次选择器
ancestor descendant：ancestor后代中所有的descendant选择器parent>child：parent直接子代中的child选择器prev+next：prev选择器紧随着的next选择器prev~sibings：prev选择器之后的虽有siblings选择器属性选择器
[attribute]：含有attribute属性的元素[attribute=value]：含有attribute属性且值为value的元素[attribute !=value]：含有attribute属性且值不是value的元素[attribute^=value]：含有attribute属性且值以value开头的元素[attribute$=value]：含有attribute属性且值以value结尾的元素[attribute*=value]：含有attribute属性且值包含value的元素[s1] [s2] [sN]：满足多个条件符合属性的的元素过滤选择器
:first：选取其中的第一个元素:last：选取其中的最后一元素:even：选取索引是偶数的元素:odd：选取索引是奇数的元素:eq(index)：选取索引等于index的元素:gt(index)：选取索引大于index的元素:lt(index)：选取索引小于index的元素:not(selector)：选取不满足条件的元素:header：选取所有的标题元素:animated：选取所有的动画元素:contains(text)：选取包含text的元素:empty()：选取无子节点的元素:checked：选取选中的元素hidden：选取隐藏的元素visible：选取可见的元素jQuery事件
鼠标事件
click()：单击鼠标事件dblclick()：双击鼠标事件mouseover()：鼠标移入事件mouseout()：鼠标移出事件<img src="img/1.jpg" width="300"><img src="img/1.jpg" width="300"><img src="img/1.jpg" width="300"><script src="js/jquery-3.4.1.min.js"></script><script>$("img").click( function(){//点击一下，换照片$(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头} );$("img").mouseover( function(){//移动到元素上$(this).css( "border","2px solid red" );} );$("img").mouseout( function(){//离开元素$(this).css( "border","2px solid white" );} );</script>
键盘事件
keydown()：按下键盘时keyup()：弹出键盘时<body><input type="text"><h3></h3><script src="js/jquery-3.4.1.min.js"></script><script>$("input").keyup(function() {var str = $(this).val();$("h3").html(str);});</script></body>
表单事件
focus()：获得焦点时blur()：失去焦点时<form action=""><p>帐号: <input id="a" value="请输入帐号..."> </p><p>电话: <input id="b"> </p></form><script src="js/jquery-3.4.1.min.js"></script><script>//获得焦点（激活/点击一下）$("#a").focus(function(){$(this).val("");});//失去焦点（未激活/未点击）$("#a").blur(function(){$(this).val("请输入帐号...");});</script>
鼠标悬停复合事件
hover()：相当于mouseover()和mouseout()的组合<img src="img/3.jpg" width="400px"><script src="js/jquery-3.4.1.min.js"></script><script>$("img").hover(function(){$(this).css("display","none");},function(){$(this).css("display","block");});</script>
绑定事件的另一种写法（动态绑定）
//绑定一个事件<script src="js/jquery-3.4.1.min.js"></script><script>$("h2").on("click",function(){alert("试试就逝世");});//绑定多个事件$("h2").on("click mouseover mouseout",function(){alert("试试就逝世");});</script>
jQuery效果
隐藏显示
hide(speed,callback)：隐藏文本show(speed,callback)：显示文本toggle()：切换hide()和show()speed：规定隐藏显示的速度callback ：隐藏后显示后执行函数的名称$("button").click(function(){$("p").hide(1000);});
淡入淡出效果
fadeIn(speed,callback)：淡入已隐藏的元素fadeout(speed,callback)：淡出可见元素fadeToggle(speed,callback)：切换上面两种方法fadeTo(speed,opacity,callback)：可以给定透明度$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);});$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});$("button").click(function(){$("#div1").fadeTo("slow",0.15);$("#div2").fadeTo("slow",0.4);$("#div3").fadeTo("slow",0.7);});
滑动效果
slideDown(speed,callback)：向下滑动元素slideUp(speed,callback)：向上滑动元素slideToggle：切换上面两种方法$("#flip").click(function(){$("#panel").slideDown();});$("#flip").click(function(){$("#panel").slideUp();});$("#flip").click(function(){$("#panel").slideToggle();});
动画效果
animate({params},speed,callback)：创建自定义动画可以使用相对值+=或者-=可以使用与定制show、hide、toggle等可以使用队列功能，多个效果依次执行$("button").click(function(){var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");});
callback
动画执行到100后执行的函数错误的$("p").hide(1000);alert("The paragraph is now hidden");
正确的
$("p").hide(1000,function(){alert("The paragraph is now hidden");});
jQuery的DOM操作
获取和设置值的操作
text()- 设置或返回所选元素的文本内容html()- 设置或返回所选元素的内容（包括 HTML 标记）val()- 设置或返回表单字段的值attr()- 获取属性<script src="js/jquery-3.4.1.min.js"></script><script>$("button").click(function(){//alert($("input").val()); //input框中的值//$("input").val("哈哈哈"); //修改input框中的值 //alert( $("div").html() ); //获得div中的内容（包含标签信息）//alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容）//$("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖）$("div").html("<i>祖国万岁!</i>")//全部覆盖 写进去的是html语句});</script></body></html>
节点的操作
子节点插入操作$(A)append(B)：B追加到A的末尾$(A)appendTo(B)：A追加到B的末尾$(A)prepend(B)：B插入到A的前面$(A)prepend(B)：A插入到B的前面同辈节点插入操作$(A).after (B)：表示将B插入到A之后$(A). insertAfter (B)：表示将A插入到B之后$(A). before (B)：)表示将B插入至A之前$(A). insertBefore (B)：表示将A插入到B之前其他操作replaceWith()：将参数替换调用对象replaceAll()：将调用对象替换成参数clone()：复制当前节点remove()：删除整个节点empty()：清空节点内容<script src="js/jquery-3.4.1.min.js"></script><script>$("#test").click(function(){var bookname = $("input").val();var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点/*添加子节点*///$("ul").append(newli); // newli添加到ul后面//newli.appendTo("ul"); // newli添加到ul后面//$("ul").prepend(newli); // newli添加到ul前面//newli.prependTo("ul");/*添加同辈节点*///$("li:last").after( newli ); // newli添加到最后的li的后面//newli.insertAfter("li:last");//$("li:last").before(newli); //newli添加到最后的li的前面//newli.insertBefore("li:last");/*替换节点*///$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli//newli.replaceAll( "li:eq(1)" );/*复制节点*///$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面$("ul").clone().insertAfter("ul");/*删除节点*///$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）//$("li:eq(1)").remove(); //删除节点});</script>
类样式的操作
addClass：为元素添加类样式removeClass：将元素的类样式移出toggleClass()：上述两者的切换<style>div{width: 100px;height: 100px;background-color: #000;} .a{background: palevioletred;border-radius: 50%;} .b{border:5px dashed darkcyan;opacity: 0.6;}.cn{background: #000;color:#FFF; font-family: 字魂49号-逍遥行书;}</style><body><button id="btn1">试试</button><button id="btn2">取消透明度</button><button id="btn3">样式切换</button><hr><div></div><h1>中华人民共和国，万岁！</h1><script src="js/jquery-3.4.1.min.js"></script><script>$("#btn1").click(function(){// $("div").addClass("a");$("div").addClass("a b");});$("#btn2").click(function(){$("div").removeClass("b");});$("#btn3").click(function(){$("h1").toggleClass("cn");});</script>
jQuery遍历
祖先元素遍历
parent()：返回被选元素的直接父元素。parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素parentsUntil()：方法返回介于两个给定元素之间的所有祖先元素//返回直接父元素$(document).ready(function(){$("span").parents();});//返回span父元素中为ul的父元素$(document).ready(function(){$("span").parents("ul");});//返回span到div之间的所有父元素$(document).ready(function(){$("span").parentsUntil("div");});
后代元素遍历
children()：返回被选元素的所有直接子元素。find()：返回被选元素的后代元素，一路向下直到最后一个后代。(必须传参)//返回每个 <div> 元素的所有直接子元素：$(document).ready(function(){$("div").children();});//返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素$(document).ready(function(){$("div").children("p.1");});//返回属于 <div> 后代的所有 <span> 元素：$(document).ready(function(){$("div").find("span");});//返回 <div> 的所有后代：$(document).ready(function(){$("div").find("*");});
同辈元素遍历
siblings()：返回被选元素的所有同胞元素。next()：返回被选元素的下一个同胞元素。nextAll()：返回被选元素的所有跟随的同胞元素。nextUntil():返回介于两个给定参数之间的所有跟随的同胞元素。prev()：返回被选元素的上一个同胞元素prevAll()：返回被选元素的所有上面的同胞元素。prevUntil()：返回介于两个给定参数之间的所有上面的同胞元素。$(document).ready(function(){$("h2").siblings();});$(document).ready(function(){$("h2").siblings("p");});$(document).ready(function(){$("h2").next();});$(document).ready(function(){$("h2").nextAll();});$(document).ready(function(){$("h2").nextUntil("h6");});
过滤遍历元素
first()：返回被选元素第一个元素。lasr()：返回被选元素的最后一个元素。eq()：返回被选元素中带有指定索引号的元素。filter()：返回匹配标准的元素not()：返回不匹配标准的所有元素is()：返回布尔，判断是不是这种元素<script src="js/jquery-3.4.1.min.js"></script><script>$("button").click(function(){//var x = $("li").first().text(); // 第一个li//var x = $("li").last().text(); // 最后一个li//var x = $("li").eq(1).text(); // 下标为1的li//var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有livar x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ulalert(x);});</script>
