jQuery
目录：
一、jQuery是什么
二、什么是jQuery对象
三、选择器和筛选器
3.1选择器
3.2塞选器
四、操作元素(属性 CSS 和 文档处理)
4.1属性操作
4.2CSS操作
4.3文档处理
4.4事件
4.5动画效果
4.6扩展自定义函数 私有域
一、jQuery是什么？
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
二、什么是jQuery对象
- jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
比如：
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
基本语法：$(selector).action()
三、选择器和筛选器
选择器：
基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签
$("input:checked")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.4.1.js"></script> </head> <body> <div>Jquery <p>QQQQ</p> <div id="U">UUUU</div> </div> <p>EEEE</p> <div>JJJJ <div>YYYY1</div> <p class="R">RRRR</p> <div id="Y">YYYY2</div> <p>BBBB2</p> </div> <div class="R">AAAA1</div> <div class="R" query="Jquery">AAAA2</div> <input type="text"> <input type="button"> <script> /*基础选择器*/ // $("*").css("color","red"); // $("#U").css("color","red"); // $(".R").css("color","red"); // $("p").css("color","red"); // $("#U,.R,P").css("color","red"); /* 层级选择器 */ // $("div p").css("color","red"); // $("div>p").css("color","red"); // div里的所有p标签 // $("div+p").css("color","red"); // 对于同级div紧跟着的p标签 // $("div~p").css("color","red"); /* 基本筛选器 */ // $("div:first").css("color","red"); //第一层div // $("div:eq(2)").css("color","red"); //第三级 div // $("div:even").css("color","red"); //基数层 // $("div:gt(3)").css("color","red"); /* 属性筛选器 */ // $('[query="Jquery"]').css("color","red"); // $('[class="R"]').css("color","red"); /* 表单选择器 */ // $("[type='text']").css("background","red"); //只适用于input标签 </script> </body> </html>
筛选器：
过滤筛选器 $("li").eq(2) $("li").first() $("ul li").hasclass("test")
查找筛选器
$("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery_demo2</title> <script src="jquery-3.4.1.js"></script> </head> <body> <div>hello <div class="div">hello2</div> <div>hello3</div> <div class="div1">hello4 <div class="div3">hello5</div> <div class="div4">hello5</div> <div class="div5">hello5</div> <div id="test">hello6</div> <div class="div2">hello7 <p>hello9</p> <div id="parents">parents</div> </div> <p>hello8</p> </div> </div> <p>hello word</p> </body> <script> // $("div").eq(3).css("color","red"); // $("div").first().css("color","red"); // alert($("div").hasClass("class")); //判断div标签下面class是否有"cls"。会返回布尔值 // $(".div1").children("#test").css("color","red"); // $(".div1").find(".div2").css("color","red"); // $(".div").next().css("color","red"); // $(".div").nextAll().css("color","red"); // $(".div").nextUntil(".div1").css("color","red"); //从.div渲染到.div2 nextUntil 表示一段区间的渲染 // $(".div2").prev().css("color","red"); //prev表示前一个元素 // $(".div2").prevAll().css("color","red"); //表示元素前的所有同级元素 // $(".div2").prevUntil(".div3").css("color","red"); // 向上一段空间的渲染 // $("#test").parent().css("color","red"); // 父级元素的渲染 // $("#parents").parents().css("color","red"); // 渲染所有元素，会查找到根 // $("#parents").parentsUntil(".div1").css("color","red"); // 渲染#parents向上到.div1 // $("#parents").parentsUntil(".div1").find('p').css("color","red"); //渲染#parents向上到.div1中查找p元素 // $("#test").siblings().css("color","red"); //兄弟元素 </script> </html>
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些： addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 jQuery 提供多个处理尺寸的重要方法： width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery 父级（祖先）方法： parent() 该元素上一级父级 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>) parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素 jQuery 后代方法： children() 返回被选元素的所有直接子元素 find() 返回被选元素的后代元素，一路向下直到最后一个后代 jQuery 水平遍历方法： siblings() 返回被选元素的所有同胞元素（注意不包含被选元素） next() 返回被选元素的下一个同胞元素 nextAll() 返回被选元素的所有跟随的同胞元素 nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素 prev() 返回被选元素的上一个同胞元素 prevAll() 返回被选元素的前所有的同胞元素 prevUntil() 返回介于两个给定参数之间的前所有的同胞元素 jQuery 过滤方法： first() 返回被选元素的首个元素 last() 返回被选元素的最后一个元素 eq() 返回被选元素中带有指定索引号的元素 $("p").eq(1); filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回. $("p").filter(".url"); not() 返回不匹配标准的所有元素 $("p").not(".url");
https://www.runoob.com/jquery/jquery-ref-selectors.html
四、操作元素(属性 CSS 和 文档处理)
1、属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide") 添加class属性
.html()用为读取和修改元素的HTML标签 对应js中的innerHTML
.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素
.text()用来读取或修改元素的纯文本内容 对应js中的innerText
text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上
.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作属性元素</title> </head> <body> <div id="outer">DIV 元素 <p>P0元素</p> <p>P1元素</p> <div id="context"> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </div> </div> <input id="chke1" type="checkbox" />记住密码 <input id="chke2" type="checkbox" checked="checked" />记住密码 </body> <script src="jquery-3.4.1.js"></script> <script> // $("#context").text("jquery"); // $("#context").html("jquery"); // $("#context").attr("con","jquery"); // $("#cheke1").prop("checkbox"); // $("#cheke1").prop("checkbox"); // $("#cheke2").attr("checkbox","true"); // $("#cheke2").prop("checkbox"); // $("#context").addClass("jquery"); </script> </html>
2、CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置 scrollLeft()
(尺寸) height() width() 返回整个窗口的大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作属性元素2</title> </head> <body> <div id="context1"><h1>第一行</h1></div> <div id="context2"> <h1>第一行</h1> <h1>第一行</h1> <h1>第一行</h1> <h1>第一行</h1> <h1>第一行</h1> <h1>第一行</h1> <h1>第一行</h1> <h1>第一行</h1> </div> <div id="context3"><h1>第一行</h1></div> <div id="context4"><h1>第一行</h1></div> </body> <style> *{ margin: 0px; } #context1{ background: aqua; border: #f0ad4e; height: 500px; } #context2{ background: deeppink; border: #f0ad4e; height: 100px; width: 500px; overflow: auto; } #context3{ background: cornflowerblue; border: #f0ad4e; height: 300px; } #context4{ background:violet; border: #f0ad4e; height: 600px; } </style> <script src="jquery-3.4.1.js"></script> <script> window.onscroll=function () { var leng = $(window).scrollTop(); console.log(leng); } </script> </html>
3、文档处理
内部插入 $("#c1").append("<b>hello</b>") 插入元素前 $("p").appendTo("div") 被插入
prepend() prependTo()
外部插入 before() insertBefore() after insertAfter()
replaceWith() remove() empty() clone()
补充：
a. onscroll事件 鼠标滚动事件
b. $(..).scrollTop() $(..).scrollTop(10) =>$(..).scrollLeft(10) 匹配元素到顶部的距离
c. 如何获取某个标签距离顶部高度
$(..).offset() 获取当前标签距离文档顶部高度
$(..).height() 永远获取自己的高度； 获取当前标签自己的高度
$(..).innerHeight() 永远获取自己高度+padding; 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
$(..).outerHeight()
参数一：false:
永远获取自己高度+padding+border; 获取第一个匹配元素外部高度（默认包括补白和边框）设置为 true 时，计算边距在内。
参数二：true
永远获取自己高度+padding+border+margin;
五、事件处理
加载
$(document).ready(function(){}) ==简写== $(function(){}) 加载完后渲染，通常用于scrip放在body前时使用，同onLoad
定义事件方式：
$("p").click(function(){}) 点击事件，执行function
$("p").bind("click",function(){}) bing的参数为事件click和function
$("p").on("click",function(){}) on的参数为事件click和function 与bing相同
$("ul").delegate("li","click",function(){}) 筛选参数，事件，方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> </head> <script src="jquery-3.4.1.js"></script> <body> <div id="outer"> <h1>事件</h1> <p id="vent">启动事件</p> <ul> <li>1111</li> <li>2222</li> <li>3333</li> </ul> </div> </body> <script> // $(document).ready(function (){ // $("#outer").css("color","red") //}); // 简写 //$(function () { // $("#outer").css("color","blue") //}); $("h1").click(function () { alert(989) }); $("p").bind("click",function () { $(this).css("color","red") }); $("p").on("click",function () { alert(666); $("#outer").on("click",{data:123},Func); function Func(self){ alert(self.data.data); } }); $("ul").delegate("li","click",function () { $(this).css("color","red") }) </script> </html>
六、动画效果
隐藏和显示 hide show toggle
淡入淡出 fadeIn fadeOut fadeToggle fadeTo
滑动 slideUp slideDown slideToggle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏显示</title> </head> <body> <div id="text">BOX</div> <button id="show">显示</button> <button id="hide">隐藏</button> <button id="toggle">显示/隐藏</button> </body> <style> #text{ line-height: 200px; width: 200px; height: 200px; background: aqua; border: solid; border-width: 2px; text-align: center; } *{ margin: 0px; } </style> <script src="jquery-3.4.1.js"></script> <script> $("#show").click(function () { $("#text").show(2000); }); $("#hide").bind("click",function () { $("#text").hide(2000); }); $("#toggle").on("click",function () { $("#text").toggle(2000); }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>淡入淡出</title> </head> <body> <div class="text">BOX</div> <button id="In">显示</button> <button id="Out">隐藏</button> <button id="Toggle">显示/隐藏</button> <button id="To">遮盖</button> </body> <style> .text{ line-height: 200px; width: 200px; height: 200px; background: aqua; border: solid; border-width: 2px; text-align: center; } *{ margin: 0px; } </style> <script src="jquery-3.4.1.js"></script> <script> $("#In").click(function () { $(".text").fadeIn(2000) //淡入 }); $("#Out").click(function () { $(".text").fadeOut(2000) // 淡出 }); $("#Toggle").click(function () { $(".text").fadeToggle(2000) //淡入淡出 }); $("#To").click(function () { $("#text").fadeTo(2000,0.3) //淡入淡出，遮罩 }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑动</title> </head> <body> <div id="text">BOX</div> <button id="slideUp">拉起</button> <button id="slideDown">放下来</button> <button id="slideToggle">拉起/放下</button> </body> <style> #text{ line-height: 200px; width: 200px; height: 200px; background: aqua; border: solid; border-width: 2px; text-align: center; } *{ margin: 0px; } </style> <script src="jquery-3.4.1.js"></script> <script> $("#slideDown").click(function () { $("#text").slideDown(2000) //滑入 }); $("#slideUp").click(function () { $("#text").slideUp(2000) // 滑出 }); $("#slideToggle").click(function () { $("#text").slideToggle(4000) //滑入滑出 }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回调函数</title> </head> <style> #text{ line-height: 200px; width: 200px; height: 200px; background: aqua; border: solid; border-width: 2px; text-align: center; } *{ margin: 0px; } </style> <body> <div id="text">BOX</div> <button id="slideToggle">拉起/放下</button> </body> <script src="jquery-3.4.1.js"></script> <script> $("#slideToggle").click(function () { $("#text").slideToggle(4000,function () { alert("回调函数") // slideToggle 执行完后 执行回调函数alert("回调函数") }) }); </script> </html>
八、扩展自定义函数（插入机制） 私有域定义
jquery.extend({}) 不加fn，可以添加参数
jquery.fn.extend({})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>私有域</title> </head> <style> #text{ line-height: 200px; width: 200px; height: 200px; background: aqua; border: solid; border-width: 2px; text-align: center; } *{ margin: 0px; } </style> <body> <div id="text">扩展插入机制3</div> <button id="content">拉起/放下</button> </body> <script src="jquery-3.4.1.js"></script> <script> $("#content").click(function () { $("#text").slideToggle(4000) }); //$.fn.extend({ // add:function () { // console.log($(this).text()) // } //}); // 私有域定义方式1 //(function () { // $.fn.extend({ // add:function () { // console.log($(this).text()) //} //}); //})(); // 私有域定义方式2 //(function ($) { // $.fn.extend({ //add:function () { // console.log($(this).text()) // } // }); //})(jQuery); // $("#text").add() (function ($) { $.extend({ //没有加fn，可以加参数 x y add:function (x,y) { return x<y?x:y // 三元运算符 x<y为ture输出x，false输出y } }); })(jQuery); alert($.add(3,5)); </script> </html>
