jquery选择器与常用方法

65 阅读 0 评论 43 点赞

我是靠谱客的博主真实白云，最近开发中收集的这篇文章主要介绍jquery选择器与常用方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

选择器：
1、基本选择器：
$("标签名") 选择满足标签名的所有标签
$("#id")    选择满足id的所有标签
$(".class") 选择满足class的所有标签
$("*")      所有标签
2、组合选择器(用基本选择器组合)
$("xx,xx")       至少满足两个要求之一的所有标签
$("祖先后代")    满足第一个条件的标签内，所有满足第二个条件的标签
$("祖先>后代")    满足第一个条件的标签内，所有满足第二个条件的下一级标签
$("prev+next")   匹配所有前一个元素满足prev的next标签(平级)
$("prev~next")   匹配在prev后的所有next标签(平级)
2、基本过滤选择器：
:first            留第一个元素
:last             留最后一个元素
:not(selector)    过滤选择器中的元素
:even             匹配索引是偶数(从0开始)的标签
:odd              匹配索引是奇数(从0开始)的标签
:eq(i)            匹配索引值等于i的标签
:gt(i)            匹配索引值大于i的标签
:lt(i)            匹配索引值小于i的标签
:header           匹配h1,h2,h3标签
:animated         匹配正在执行动画的标签
:focus            匹配具有焦点的标签
3、内容过滤选择器：
:contains(text)   匹配文本含有text的标签
:empty            匹配空标签(既没有子代也没有文本)
:parent           匹配非空标签
:has(selector)    匹配/含有符合选择器元素的子代/的元素(选出的是父代元素)
4、属性过滤器：
[attribute]       匹配含有attribute属性的标签
[att=val]         匹配含有att属性且att值为val的标签
[att!=val]        匹配不含有att属性或att属性值不为val的标签
[att^=val]        att属性值以val开头
[att$=val]        att属性值以val结尾
[att*=val]        att属性值包含val
[att1][att2]...   可同时使用多个内容过滤器
5、表单过滤：
:input            获取所有表单项
:type值           获取对应type值的表单项

jquery提供的方法：
1、each()方法遍历jquery数组
jquery对象.each(function(){});
对jquery对象进行遍历操作，遍历中`this`代表jquery对象中的dom对象
2、按索引查找
eq(i)
得到索引值等于i的dom对象
first()
数组中第一个dom对象
last()
数组中最后一个dom对象
3、filter(...)实现过滤操作
可传入参数:
①选择器表达式String
②jquery对象用来匹配现有元素
③dom对象匹配现有元素
④function(index) 接受当前索引值作为参数，通过返回值true、false确定是否保留
4、is(...)
可传入一个或多个参数，同上，只要有一个匹配就返回true
5、has(...)
返回匹配的元素
6、not(...)
过滤匹配的元素
7、children(...)
返回匹配的子元素
8、find(...)
返回匹配的后代元素
9、next()
返回当前元素的下一个兄弟元素
10、nextAll(...)
返回当前元素后面的所有兄弟元素
11、nextUtil(...)
返回当前元素之后到指定元素间的元素
12、parent()
返回父元素
13、prev()
返回当前元素的上一个元素
14、prevAll(...)
返回当前元素前面的所有元素
15、prevUtil(...)
返回当前元素之前到指定元素间的元素
16、siblings(...)
返回所有的兄弟元素
17、add(...)
将匹配的元素添加到当前jquery对象中