jquery四种常用选择器(jquery基本选择器)

JQuery的选择器总结

jquery四种常用选择器(jquery基本选择器)

选择器是获取元素并进行操作的一种方式,在使用CSS选择器时,开发人员有时候需要考虑浏览器是否支持某些选择器。而在JQuery中,使用选择器则不需要考虑这些问题,与传统的JS获取元素的方式相比,JQuery有着更加完善的机制,即使文档中没有所获取的元素,也不会像JS中的那样报错。

JQuery的选择器主要分为4种,分别是基本选择器,层级选择器,过滤选择器和表单选择器。下面我们对这些选择器一一进行介绍。

一、基本选择器

基本选择器是JQuery中最常用的一些选择器,也是我们开发人员一定要掌握的几个选择器,分别是:

(1)#id 根据给定的id匹配一个元素。

(2).class 根据给定的类名匹配元素。

(3)element 根据给定的元素名匹配元素。

(4)* 匹配所有元素。

(5)selector1,selector2…selectorN 将所有匹配的选择器合并一起匹配操作。

二、层次选择器

层次选择器则是根据DOM元素之间的层级关系获取需要的元素,不需要操作指定的DOM元素,而是根据其所在的位置层级进行获取操作,有效减少了我们元素的命名,让代码更加简洁易读,而层级选择器分别有:

(1)$(“A B”)

选取A元素里面所有的B(后代)元素。

(2)$(“parent>child”)

选取parent元素下的child(子)元素。

(3)$(“prev next”)

选取紧挨着在prev后面的nex同辈元素。

(4)$(“prev~siblings”)

选取prev元素之后的所有siblings同辈元素。

注意:在实际开发过程中,我们可以使用next( )方法来代替$(“prev next”) 选择器;而nextAll( )方法可以用来替代$(“prev~siblings”)选择器,但是相比之下方法sinlings()方法则更加方便,无需考虑前后位置关系。

三、过滤选择器

过滤选择器是JQuery中比较复杂的一种方式,它通过特定的过滤规则来筛选出所需的DOM元素,其规则与CSS中的伪类选择器语法相同,而过滤选择器可分为:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤。

(1)$(“A B”)

选取A元素里面所有的B(后代)元素。

(2)$(“parent>child”)

选取parent元素下的child(子)元素。

(3)$(“prev next”)

选取紧挨着在prev后面的nex同辈元素。

(4)$(“prev~siblings”)

选取prev元素之后的所有siblings同辈元素。

注意:在实际开发过程中,我们可以使用next( )方法来代替$(“prev next”) 选择器;而nextAll( )方法可以用来替代$(“prev~siblings”)选择器,但是相比之下方法sinlings()方法则更加方便,无需考虑前后位置关系。

发表评论

登录后才能评论