jquery学习之常用选择器的总结,这是jquery基础性知识

无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。

隐式迭代

$(“选择器”).css(“background-color”,”red”)则是为这组元素中每个元素的样式都加上红色背景。jQuery会自动迭代每个元素,这就免去了我们编写代码遍历每个元素对象的操作。

基本选择器

$("#id值")

$("标签名")

$("*")匹配所有元素,只要是标签所有都匹配,所用于集合上下文

$("","","")将每一个匹配器匹配的结果在一起返回,取并集,不是交集,每一个匹配器之间用逗号隔开

层级选择器

$(a b)匹配a下的所有b元素,只要是a下的就行

$(a>b)匹配a下的所有子元素b,只有b是a的子元素才行

$(a+b)匹配紧邻在a标签后的一个同级b元素,注意a和b必须同级紧邻,中间不能有一个同级的c

$(a~b)匹配所有a标签的同级元素b,不管前后,只要同辈元素就ok了

$("#two").siblings() id为two的所有兄弟(上下都有)

$("#two").siblings(“div”) id为two的所有div兄弟(上下都有)

$("#two").nextAll(“div”) id为two的所有兄弟div(同级下)

$("#two").nextAll(“div:first”)id为two的第一个兄弟div(同级下)(不必紧邻)

$("#two").next() id为two的紧邻的哪个同级元素

$("#two").next(“div”) id为two的紧邻同级元素div,如果不是紧邻获取不到(紧邻是指a和b必须同级紧邻,中间不能有一个同级的c)

$("#two").prev()id为two的紧邻的上一个同级元素

$("#two")。preAll("div")id为two的上面的所有div

要注意是否需要紧邻,还要注意是否是上一个兄弟,还是下一个兄弟,还要注意的是是获取一个兄弟,还是获取多个兄弟,还要注意是否获取兄弟还是获取孩子

过滤选择器

过滤选择器主要通过特定的规则来筛选出所需要的dom元素,该选择器都以:开头,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤,表单对象属性过滤选择器等。

:a

冒号a是修饰前面的

$("body div:first")这个意思是body第一个div

$("body div:last")这个意思是body最后一个div

$("body div:even")这个意思是body下的所有奇数div(body下指的所有下面的,不是只有子元素,按照body下的div顺序,从0开始排)

$("body div:odd")这个意思是body下的所有偶数div(body下指的所有下面的,不是只有子ddiv,按照body下的div顺序,从0开始排)

$("div :not(.one)")div中类名不是one的

$("div :gt(3)")div 索引大于3的

$("div :lt(3)")div索引小于3的

$(":header")选取所有标题节点《h1》《h2》

$(":animated")选取所有正在执行动画的

$("div :animated")取所有正在执行动画的div

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

:contains(text) 选取含有文本内容为text的元素

:empty 选取不包含文本元素或者子元素的空元素

:has(selector)选取(儿子,孙子。。)含有选择器匹配元素的元素

:parent 选取含有子元素或者文本的元素(非空元素)

举例:

$("div :contains('di')")含有文本内容为di的div

$("div :not(:contains('di'))")不含文本内容为di的div

$("div :empty")无子元素或者文本元素的div

$("div :has(.mini)") (儿子 孙子。。)中class为mini的div

$("div :not(:empty)")含有子元素或者文本元素的div

$("div :parent)含有子元素或者文本元素的div,可以理解为div为一个父亲,必须要有儿子

可见性过滤选择器

根据元素的可见和不可见状态来选择相应的元素

:hidden 选取不可见元素

:visible 选取可见元素

hidden不仅是包含样式属性display为none的元素,也包含文本隐藏域(<input type="hidden">)和visible:hidden之类的元素

jquery中的很多方法支持方法的连缀,即方法的返回值调用该方法的jquery对象,可以用来继续调用该对象的其他方法

属性选择器

$("div[id]")这个表示有id属性的div

$("div[id='two']")这个表示有id属性值为two的div

$("div[id!='two']")这个表示有id属性值不为two的div

$("div[id^='two']")id以two开始

$("div[id$='two']")id以two结束

$("div[id*='two']")id包含two

【selector】【selector】复合选择器,同时满足多个条件,且每选择一次缩小一次范围,比如 $("div[title][title!='test']")有title属性,且title不等于test的div。

子元素过滤选择器

:nth-child(index/even/odd/equation)选取每个选择器中的第index元素(从1开始算),奇元素,偶元素

:first-child 选取第一个子元素

:last-child 选取最后一个子元素

:only-child(唯一的孩子) 如果某个元素是他父类中唯一的子元素,那么这个子元素将被匹配

:nth-child(。。)详解

:nth-child(even/odd):能选取每个父类元素下的索引值为偶数或者奇数元素的孩子

:nth-child(2) 选取每个父元素下的索引值为2的子元素,索引从1开始、

:nth-child(3n)选取每个父元素下索引为3的倍数子元素

:nth-child(3n+1)选取每个父元素下索引为3n+1的倍数子元素

表单选择器

$(":input")匹配所有 input, textarea, select 和 button 元素

$(":text")匹配所有的单行文本框(type=text的)

jquery学习之常用选择器的总结,这是jquery基础性知识

jquery学习之常用选择器的总结,这是jquery基础性知识

jquery学习之常用选择器的总结,这是jquery基础性知识

表单对象属性选择器中用法为$("input:checked")这个语句表示为被checked=checked的input们

总结一下:表单选择器直接用就ok,比如直接:input,直接:button,表单对象的属性需要先用一个选择器,然后在过滤一下$(input:checked),这个就是先用一个input选择器,选择input标签,然后再用:checked给过滤一下

每天分享编程语言知识。欢迎关注

相关推荐