JQ，mdash，mdash，选择器

JQuery是一款优秀的JavaScript库，它的核心理念是写出更少、做更多的代码，可以使我们更加优雅地处理常见的网页交互问题，比如处理DOM、事件、AJAX请求等等。其中JQuery选择器的使用极为广泛，JQuery选择器是一组可以通过属性、标签名、类名、伪类等条件来查找DOM元素的方法。

一、基本选择器

1.元素选择器

基本语法写法： $("标签名")，例如：$("p")

案例说明：以下例子可以查找到页面中所有的p标签：$("p")。

2.ID选择器

基本语法写法：$("#id名")，例如：$("#header")

案例说明：以下例子可以查找到页面中ID为header的元素：$("#header")。

3.类选择器

基本语法写法：$(".class名")，例如：$(".intro")

案例说明：以下例子可以查找到页面中所有class为intro的元素：$(".intro")。

二、层级选择器

层级选择器指的是通过嵌套查找到特定标签。常见的层级选择器有子选择器、后代选择器和兄弟选择器。

1.后代选择器

后代选择器，通过选择器中的空格来连接多个选择器，可以选到多层的子元素，例如：$("ul li a")将会选到所有ul里面的li里面的所有a元素，其中空格表示后代选择器。

案例说明：以下例子可以查找到所有class为container的div下的所有p标签：$(".container p")。

2.子选择器

子选择器，是通过">"来连接多个选择器，它选择某个元素的子元素，而不是所有子孙元素。

案例说明：以下例子可以查找到所有class为container的div下的所有直接子元素p标签：$(".container > p")。

3.兄弟选择器

兄弟选择器指的是选中某个元素下面的所有直接兄弟元素，常常用于选中某个元素之后的某个元素。

案例说明：以下例子可以查找第一个class为intro的p标签后的所有p标签：$("p.intro ~ p")。

三、筛选选择器

筛选选择器会从所有匹配的元素中返回一个或多个元素。可以使用筛选器来选择某一属性或内容符合某个条件的元素。

1. :first 筛选选择器

:first 筛选选择器表示选择全部符合条件的第一个元素。基本语法为：$(":first")。

案例说明：以下例子可以查找页面中的第一个表格：$("table:first")。

2. :last 筛选选择器

用于选择全部符合条件的最后一个元素。基本语法为：$(":last")。

案例说明：以下例子可以查找页面中的最后一个表格：$("table:last")。

3. :even / :odd 筛选选择器

用于选择所有偶数/奇数位置的元素。基本语法为：$(":even")/$(":odd")。

案例说明：以下例子可以查找所有偶数行后代元素tr：$("tr:even")。

4. :eq() 筛选选择器

用于选择给定索引的元素。索引从0开始计数。基本语法为：$(":eq(index)")。

案例说明：以下例子可以查找第二个段落：$("p:eq(1)")。

5. :not() 筛选选择器

用于选择所有函数参数不被选中的元素。基本语法为：$(":not(condition)")。

案例说明：以下例子可以查找所有不带title属性的a标签：$("a:not([title])")。

6. :contains() 筛选选择器

用于选择所有包含指定文本的元素。基本语法为：$(":contains(text)")。

案例说明：以下例子可以查找所有包含“JQuery”的元素：$(":contains('JQuery')")。

四、属性选择器

属性选择器是一种特殊的筛选选择器，通过属性值来选择匹配的元素。

1. [attribute] 属性选择器

用于选择带有指定属性的元素。"attribute"将被替换为实际的属性名。

案例说明：以下例子可以查找所有带有title属性的a标签：$("a[title]")。

2. [attribute='value'] 属性选择器

用于选择带有指定属性和值的元素。属性是一个字面值，value是属性的字面值。

案例说明：以下例子可以查找所有href属性值为“http://www.baidu.com”的a标签：$("a[href='http://www.baidu.com']")。

3. [attribute!=value] 属性选择器

用于选择不带有指定属性值的元素。

案例说明：以下例子可以查找所有不包含title属性的a标签：$("a[title!='']")。

4. [attribute^=value] 属性选择器

用于选择某个属性是以指定值开头的元素。value是属性的字面值。

案例说明：以下例子可以查找class以“intro”开头的元素：$("[class^='intro']")。

5. [attribute$=value] 属性选择器

用于选择某个属性是以指定值结尾的元素。value是属性的字面值。

案例说明：以下例子可以查找href以“.pdf”结尾的a标签：$("a[href$='.pdf']")。

综上所述，JQuery选择器是一组可以通过属性、标签名、类名、伪类等条件来查找DOM元素的方法，通过多种选择器的组合、使用可以轻松地操作DOM元素，方便快捷。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/