jQuery CSS选择器详解

一、jQuery Class选择器

1、在CSS中，class选择器有一个点来表示。在jQuery选择器中，class选择器也用一个点来表示。例如，选取class为“example”的元素：

$(' .example')

2、可以在一起选择多个class名相同的元素。举例：

$(' .example, .sample')

3、也可以选择某一个父级下特定class名的元素。举例：

$('div .example')

二、jQuery CSS选择器可分为

1、基本选择器：使用标签名称、ID或class名称来选取元素。

2、层次选择器：匹配位于某个元素之下的元素。

3、属性选择器：选择具有特定属性的元素。

4、筛选选择器：通过匹配特定的选择条件来筛选出元素。

三、jQuery选择器的分类

1、基本选择器

这种选择器是根据元素的标签名称、ID或者class等基本属性来选取元素。

$('p')

选取所有段落元素。

$('#example')

选择ID为“example”的元素。

$('.example')

选择class为“example”的元素。

2、层次选择器

这种选择器是根据元素在HTML文档中的层次顺序进行选取，比较常用的有上文提到的父子选择器，当然，还有其他的层次选择器。

$('p span')

选取所有包含在段落中的span元素。

$('parent>child')

选取所有在parent元素下的child元素。

3、属性选择器

这种选择器是通过元素的属性来选取元素，有三种：

选择所有包含特定属性的元素
选择所有属性值等于特定值的元素
选择所有属性值以特定值开头、包含特定值、以特定值结尾的元素

$('[href]')

选择所有包含“href”属性的元素。

$('[name=example]')

选择所有name属性等于“example”的元素。

$('[class^=ex]')

选择所有class属性以“ex”开头的元素。

4、筛选选择器

这种选择器是通过某些条件来筛选出合适的元素，比如过滤、查找、动态筛选等不同类型的筛选器。

$('p:first')

选取所有第一个段落元素。

$('p:even')

选取所有偶数索引段落元素。

$('p:contains("example")')

选取所有包含文本“example”的段落元素。

四、jQuery选择器类型

有两种类型的选择器：

基本选择器：通过元素的标签名称、ID或者class等基本属性来选取元素。
组合选择器：通过组合多个基本选择器或者其他选择器来同时匹配多个元素，可以根据不同情况来使用不同类型的组合方式。

五、jQuery选择器有哪些

1、基本选择器

选择所有元素：$(‘*’)

按照ID选择元素：$(‘#example’)

按照class选择元素：$(‘.example’)

按照元素名称选择元素：$(‘p’)

2、组合选择器

选择子元素：$(‘parent>child’)

选择相邻的兄弟元素：$(‘prev+next’)

选择所有的兄弟元素：$(‘prev~siblings’)

3、过滤选择器

选择第一个元素：$(‘elem:first’)

选择最后一个元素：$(‘elem:last’)

选择偶数序号的元素：$(‘elem:even’)

选择奇数序号的元素：$(‘elem:odd’)

根据属性选择元素：$(‘elem[attribute]’)

根据属性值选择元素：$(‘elem[attribute=value]’)

六、jQuery选择器注意

1、使用形式：jQuery选择器需要使用$()对其进行包裹。

2、选择器类型：jQuery选择器有基本选择器和组合选择器两种类型，可以根据不同情况来使用不同的类型。

3、选择器的灵活配置：jQuery选择器支持多个选择器的同时匹配，还可以通过组合不同的选择器进行更灵活的选择。

4、选择器效率问题：在选择元素时，过多的使用通配符或者嵌套的选择器会降低选择器的效率，应尽量避免不必要的选择器。

七、jQuery类选择器选取

1、类选择器：

$(document).ready(function() {
    $('button').click(function() {
        $('.example').hide();
    });
});

2、选取类名为example的元素：

$('.example')

3、选取同时含有example和sample类的元素：

$('.example.sample')

原创文章，作者：ZCIN，如若转载，请注明出处：https://www.506064.com/n/144322.html