jQuery知识总结(最全 最精美)

使用:

<script src="jquery-3.5.1/jquery-3.3.1.min.js"></script> 注意: 如果<script> 在body前面,应该使用 jQuery独有的预加载 $(function(){ 这里写代码 })

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

选择器:

所有选择器 * 标签选择器 标签名 ID选择器 #id 类选择器 .className 群组选择器 .one,.two 多个选择器使用逗号分隔，取并集 复合选择器 .one.two 多个选择器组合使用，取交集 $(document) //选择整个文档对象 　 　$('#myId') //选择ID为myId的网页元素 　 　$('div.myClass') // 选择class为myClass的div元素 　　 $('input[name=first]') // 选择name属性等于first的input元素

后代选择器 后代选择器 .one .two 两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。 子代选择器 .one>.two 两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。 兄弟选择器: 下一个兄弟选择器 .one+.two 两个选择器使用+隔开，表示可以获取当前元素的下一个兄弟元素，下一个兄弟元素要能符合.two。 之后所有子代选择器 .one~.two 两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。

过滤器:

selector:first 获取所有已选择到的元素中的第一个元素 selector:last 获取所有已选择到的元素中的最后一个元素 selector:even 获取所有已选择到的元素中的索引为偶数的元素 selector:odd 获取所有已选择到的元素中的索引为奇数的元素 selector:eq(index) 获取所有已选择到的元素中的索引为index的元素 selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素 selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素 selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素 selector:header 获取所有已选择到的元素中的标题元素(h1~h6) selector:contains(text) 获取所有已选择到的元素中文本包含text的元素 selector:empty 获取所有已选择到的元素中的空元素(没有子节点) selector:parent 获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent"); selector1:has(selector2) 获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')"); ​​​​​​​ selector[attrKey] 获取所有已选择到的元素中具有属性attrKey的元素 selector[attrKey=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素 selector[attrKey^=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素 selector[attrKey$=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素 selector[attrKey*=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素 selector[attrKey!=attrVal] 获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素

$('div').has('p'); // 选择包含p元素的div元素 　　$('div').not('.myClass'); //选择class不等于myClass的div元素 　　$('div').filter('.myClass'); //选择class等于myClass的div元素 　　$('div').first(); //选择第1个div元素 　　$('div').eq(5); //选择第6个div元素 $('div').next('p'); //选择div元素后面的第一个兄弟 p元素 　　$('div').parent(); //选择div元素的父元素 　　$('div').closest('form'); //选择离div最近的那个form父元素 　　$('div').children(); //选择div的所有子元素

$('a:first') //选择网页中第一个a元素 　　$('tr:odd') //选择表格的奇数行 　　$('#myForm :input') // 选择表单中的input元素 　　$('div:visible') //选择可见的div元素 　　$('div:gt(2)') // 选择所有的div元素，除了前三个 　　$('div:animated') // 选择当前处于动画状态的div元素

创建元素:

创建元素节点：var newTd = $("<td></td>") 创建文本节点：var newTd = $("<td>文本内容</td>") 1) $A.append(B) 将B追加到A的末尾处，作为它的最后一个子元素 2) $A.appendTo(B) 将A追加到B的末尾，作为它的最后一个子元素 3) prepend() $A.prependTo(B) 将A追加到B的前面，作为它的第一个子元素 $A.after(B) 在A之后追加B，作为它的兄弟元素 $A.insertAfter(B) 在B之后追加A，作为它的兄弟元素 $A.before(B) 在A之前追加B，作为它的兄弟元素 $A.insertBefore(B) 在B之前追加A，作为它的兄弟元素

删除节点:

remove([selector]) 从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。 该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。 detach([selector]) 与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。 empty() 无参数。从DOM中清空集合中匹配元素的所有的子节点。

复制节点:

$("#id").clone(false); 该方法返回的是一个节点的引用，参数默认为false，为浅复制； 参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件。

替换节点:

replaceWith(newContent); 用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。 该方法会删除与节点相关联的所有数据和事件处理程序。 replaceAll(target); 用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。

包裹节点

wrap([wrappingElement]) 在每个匹配的元素外层包上一个html元素 warpAll([wrappingElement]) 将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包裹一层HTML结构 warpInner([wrappingElement]) 每个匹配元素里面内容(子元素)都会被这种结构包裹

遍历节点:

children([selector]) children() 方法返回返回被选元素的所有直接子元素。 $("div").children(".selected").css("color", "blue"); find(selector) 在当前对象元素中的子元素查找，和参数所匹配的所有的后代元素 next([selector]) 取得匹配的元素集合中每一个元素紧邻的后面兄弟元素 nextAll([selector]) 查找当前元素之后所有的同辈元素 prev([selector]) 取得匹配元素前面紧邻的兄弟元素 prevAll([selector]) 取得当前元素之前所有的同辈元素 silibinng([selector]) 取得匹配元素的前后所有的兄弟元素 closest(selector) 取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素 filter(selector) 把当前所选择的所有元素再进行筛选过滤 parent([selector]) 取得匹配元素的集合中，每个元素的父元素 parents([selector]) 获得集合中每个匹配元素的祖先元素

事件:

on() 在选定的元素上绑定一个或多个事件处理函数。 off() 移除一个事件处理函数。 trigger() 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。 鼠标事件: click() 单击 dblclick() 双击 hover() 悬停 mousedown() 按下 mouseup() 抬起 mouseenter() 移入 不支持子元素 mouseleave() 离开 不支持子元素 mouseout() 离开 支持子元素 mouseover() 进入 支持子元素 mousemove() 移动 键盘事件: keypress() 按键按下 keyup() 按键抬起 keydown() 按键按下 表单时间: focus() 聚焦事件 blur() 失去焦点事件 change() 当元素的值发生改变时激发的事件 select() 当textarea或文本类型的input元素中的文本被选择时触发的事件 submit() 表单提交事件，绑定在form上

方法:

html() 无参：获取html的值 有参数html：设置html的值 text() 无参：获取文本值 有参数text：设置文本值 val() 无参：获取value的值 有参数value：设置value的值 1) get(); //以数组的形式返回DOM节点。 console.log(('div').get()); 2) toArray(); //返回一个包含jQuery对象结合中的所有DOM元素数组。 console.log(('div').toArray()); 3) eq(index); //返回index位置上的jQuery对象。 console.log($('div').eq(1).get(0)); 4) filter(function(index,item){}); //过滤器函数，返回jQuery对象。 var result = ('div').filter(function(index,item){ return index == 2; }); 5) map(function(index,item){}); //用于获取或设置元素集合中的值。 var result = ('div').map(function(index,item){ return (item).html() }); 6) each(function(index,item){}); //遍历一个jQuery对象。 ('div').each(function(index,item){ console.log(index,'--',item); }); 7) slice(0,3); //截取 var result = ('div').slice(0,3); console.log( 8) not() 9) first() 10) last() 11) is() 12) has() 属性相关: //获取属性值 attr(key) prop(key) //删除属性 removeAttr(attributeName) removeProp(propertyName) //批量设置属性 css(key) //添加类 addClass(className) //判断有没有指定的类，有，返回true，否则返回false hasClass(className) //删除类 removeClass(className)

动画:

1.基本效果 1）隐藏 hide() 2）显示 show() 3）隐藏与显示 toggle() 2.淡入淡出效果 1）淡入 fadeIn() 2）淡出 fadeOut() 3）淡入到 fadeTo() 4）淡入与淡出 fadeToggle() 3.滑动效果 1）滑下 slideDown() 2）滑上 slideUp() 3）滑上与滑下 slideToggle() 4.自定义效果 animate()

位置:

//获取视口区的宽高： 1、$(window).height() 2、$(window).width() //获取内容区的宽高： $('div').width(); $('div').height(); pageX() 属性是鼠标指针的位置，相对于文档的左边缘。 //获取相对于文档的偏移 7、.offset() //获取相对于定位父元素的偏移 8、.position() //横向滚动条左侧的偏移 9、.scrollLeft() //横向滚动条上侧的偏移 10、.scrollTop() //获取离它最近的父定位元素 11、.offsetParent()