jQuery 是一个 JavaScript 库，将 JS 底层的一些方法进行封装，更简单更好用。兼容各种浏览器。
引入：
-
在
<body></body>中引入<script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script >； -
或者，将jQuery下载到工程的项目目录下，引入jQuery文件。
语法：
$(selector).action()，选取HTML元素，并对选取的元素执行某些操作。
美元符号$定义jQuery；selector选择符查找HTML元素；action()执行对元素的操作。
文档就绪函数：
文档就绪函数：为了防止文档在完全加载就绪之前运行代码。也就是说，要在DOM加载完成后才可以对DOM进行操作，否则无法获取到DOM元素。
$(function(){})用于替换window.onload事件，通过使用这个方法，可以在DOM载入就绪能够读取并操作时立即调用所绑定的函数，极大地提高web应用程序的响应速度。
语法：$(document).ready(function(){})
简写：$(function(){})
load和ready的区别：
- 执行时机：load必须等待网页全部加载完毕，然后再执行包裹代码；ready只需等待网页中的DOM结构加载完毕，就能执行包裹的代码。
- 执行次数：load只能执行一次，如果第二次，那么第一次的执行会被覆盖；ready可以执行多次，第n次都不会被上一次覆盖。
window.onload=function(){alert(1);} window.onload=function(){alert(2);}//只弹出2
选择器：
类似css选择器。
基本选择器：
- id选择器：$(“#idName”)
- class选择器：$(“.className”)
- 元素选择器：$(“元素名”)
- 合并基本选择器：将多个选择器用逗号隔开进行组合。$(“selector1,selector2…”)
<body> <div id=”d1”>hello</div> <div class=”s1”>world</div> <p>你好</p> </body> $(“#d1,.s1,p”).css(“font-size”,”30px”); - 作用于所有页面元素，很少使用。$(“*”)
层次选择器：
- $(基准节点 空格 目标节点)：获取基准节点所有后代中的目标节点。
$(“ul li”)//获取ul下的所有li - $( 基准节点>目标节点)：只获取基准节点直接子节点中的目标节点。
- $(基准节点~目标节点)：获取基准节点之后的兄弟节点中的目标节点。
- $(基准节点+目标节点)：获取基准节点之后的相邻节点中的目标节点，只选择一个。
属性选择器：
- 获取有某属性值的元素：
$(“标签名[属性名=‘属性值’]”)$(“input[type=’text’]”).css(“boder”,”1px solid red“) - 获取有某属性的元素：$(“标签名[属性名]”)
- 获取属性值以xx结尾的元素：
$(“标签名[属性名$='']”) - 获取属性值以xx开头的元素：
$(“标签名[属性名^='']”) - 获取属性值中包含某个字符串的元素：
$(“标签名[属性名*=’属性值’]”) - 获取属性值等于某个字符串或以字符串-开头的所有元素：
$(“标签名[属性名|=’属性值’]”)<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p> *[lang|="en"] {color: red;}//选择 lang 属性等于 en 或以 en- 开头的所有元素。前三个元素将被选中。 - 根据属性值中词列表的某个词进行选择：：$(“标签名[属性名~=’属性值’]”)
p[class~="important"] {color: red;}//class属性值有多个，想选择 class 属性中包含 important 的元素 - 对于多个属性条件同时生效的情况，可以通过增加多个[]来使用多条件筛选。
$(“input[type=’radio’][checked=’checked’]).css(“width”,”50px”)
位置选择器：
- 获取第一个元素：$(“标签名：first”)
$(“li:first”)//获取第一个li - 获取最后一个元素：$(“标签名：last”)
- 获取某个元素的偶数行：$(“ 标签名：even”)，从0开始
- 获取某个元素的奇数行：$(“ 标签名：odd”)，从0开始
- 获取指定位置的元素：$(“标签名：eq( )”)，从0开始
- 获取指定位置之后的元素：$(“标签名:gt( )”)
- 获取指定位置之前的元素：$(“标签名:lt( )”)
- 把某个元素除在外：$(“标签名:not( )”)
子元素选择器：
- $(“标记名：first-child”)：获取标记名，并且标记名必须位于其父元素的第一位。
<ul>
<div>世界</div>
<li>你好</li>
<li>韩颖</li>
<li>动漫</li>
</ul>
$(“li:first-child”).css(“border”,”1px solid red”)//没有标红，因为li的父元素ul的第一位不是li
- $(“标记名：last-child”)：获取标记名，并且标记名必须位于其父元素的最后一位。
- $(“标记名：nth-child(n)”)：获取位于其父元素第n个位置的标记名，n从一开始。
DOM操作：
DOM获取/设置：
- $().html()：返回或设置节点的HTML内容(包括HTML标记)。
- $().text()：返回或设置节点的文本内容。
$(“#bj”).text()//读取#bj的文本内容 $(“#bj”).text(“山西”)//修改#bj的文本内容为山西 - $().val()：返回或设置表单的value属性值。
- $().attr()：返回或设置节点的属性。
DOM创建：
$(“<标记名>内容</标记名>”)
DOM插入：
- $().append()：作为最后一个子节点添加进来。
$(“body”).append(“<div>hello</div>”); - $().prepend()：作为第一个子节点添加进来。
- $().after()：作为下一个兄弟节点添加进来。
- $().before()：作为上一个兄弟节点添加进来。
DOM删除
- $().remove()：删除被选元素及其子元素。
- $().empty()：只删除被选元素的子元素。
DOM复制
- $().clone()：复制匹配的DOM元素，返回值为复制后的副本，复制的新节点不具有任何行为。
- $().clone(ture)：复制元素的同时也复制元素中的事件。
复制节点时需要注意复制后节点的id属性值，若原节点有id属性，复制后一个文档中就会有两个id相同的节点。
DOM遍历：
jQuery遍历，意为“移动"，用于根据其相对于其他元素的关系来查找HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。
下图展示了一个家族树。通过jQuery遍历，能够从被选的当前元素开始，在家族树中向上移动(祖先)，向下移动(子孙)，水平移动(同胞)，这种移动被称为对DOM进行遍历。
- 向上遍历DOM树：
$().parent()：返回被选元素的直接父元素。
$().parents()：返回被选元素的所有祖先元素，直到文档的根元素$(“span“).parent();<html>。
$().parentsUntil()：返回介于两个给定元素之间的所有祖先元素。$(“ span“).parentsUntil(“div”); - 向下遍历DOM树：
$().children()：返回被选元素的直接子元素。也可以使用可选参数来过滤对子元素的搜索。
$().find()：返回被选元素的所有后代元素。也可以使用可选参数来过滤对子元素的搜索。$(“div”).children(“p.p1”);//返回div的直接子元素中所有类名为p1的p元素。 - 在DOM树中水平遍历：
$().siblings()：返回被选元素的所有同胞元素。也可以使用可选参数来过滤对同胞元素的搜索。
$().pre()：返回被选元素的上一个同胞元素。
$().preAll()：返回被选元素的前面的所有同胞元素。
$().preUntil()：返回介于两个给定元素之间的所有同胞元素。
$().next();
$().nextAll();
$().nextUntil(); - 过滤：
$().first()：返回被选元素的首个元素。
$().last()：返回被选元素的最后一个元素。
$().eq()：返回被选元素中带有指定索引号的元素。从0开始。
$().filter()：允许规定一个标准，匹配的元素会被返回。$(“p”).eq(1);//返回第二个p
$().not()：允许规定一个标准，不匹配的元素会被返回。$(“p”).filter(“.blue”);//返回带有类名blue的所有p元素
样式操作：
- $().css()：设置或返回被选元素的样式属性。只设置一个css属性时，属性与属性值之间用逗号分割；设置多个css属性时，加大括号，属性与属性值之间用冒号，多个属性之间用逗号连接。
$(“p”).css(“color”,”red”); $(“p”).css({ color:”red”, backgroundColor:'black"//属性有连字符，可以使用驼峰命名法，或者给它加上引号 }); $().width()/$().height()：设置或返回元素的宽度和高度(不包括内边距、边框和外边距)。
$().innerWidth()/$().innerHeight()：设置或返回元素的宽度和高度(包括内边距)。
$().outerWidth()/$().outerHeight()：设置或返回元素的宽度和高度(包括内边距、边框)。- $().addClass()：向元素添加class类名。多个类用空格隔开。
.blue{ color:blue; } $(“P”).addClass(“blue”); - $().removeClass()：删除元素的一个或多个class属性。
- $().toggleClass()：点击一下向元素添加class属性，再点击一下删除元素的class属性，以此循环。
- $().hasClass()：判断是否有某个类，返回布尔值。
事件：
jQuery有四种绑定事件的方式：
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
<li>第五</li>
</ul>
bind/unbind：
语法：$().bind(type,[data],fn)。
参数：type是事件类型；data是可选的传入监听函数的参数，可以通过event.data获取到；fn是监听函数。
//bind源码：
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('ul li').bind('click',getHtml);
bind方法将监听器绑定到了目标元素上，会将所有匹配的元素都绑定一次事件，动态添加的元素不会被绑定。这种写法导致上面其实是绑定了5次li标签，比较消耗性能。
live/die：
live的参数和bind一样。
//live源码：
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了，通常可以认为context就是document。
$('ul li').live('click',getHtml);
live方法利用了事件委托机制，把监听器绑定到了document上了，绑定的事件也会匹配到动态添加的元素，因此提高了性能。
delegate/undelegate：
//delegate源码：
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
$('ul').delegate('li','click',getHtml);
delegate方法也利用了事件委托机制，会将监听器绑定到指定的元素上，而不是document上，因此提高了性能。
on/off：
bind、live、delegate都是通过on方法实现的，推荐使用。
$().one()：元素绑定的事件只触发一次。
动画：
- $().show/hide(执行时间，回调函数)：通过同时改变元素的宽度和高度来实现显示或隐藏的动画效果。
$().toggle(执行时间，回调函数)：在隐藏显示之间循环切换。 - $().slideDown/slideUp(执行时间，回调函数)：通过改变高度来实现上下滑动式的动画效果（下滑显式，上滑隐藏）。
$().slideToggle(执行时间，回调函数)：在上下滑动之间循环切换。 - $().fadeIn/fadeOut(执行时间，回调函数)：通过改变不透明度opacity来实现淡出淡入式的动画效果。
$().fadeToggle(执行时间，回调函数)：在淡入淡出之间循环切换。 - $().animate(css属性，执行时间，回调函数)：自定义动画效果。
$(“div”).click(function(){ $(this).animate((‘left’:’500px’),4000); }); - $().stop()：用于在动画或效果完成前使其停止。
3033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
