常用 jQuery 选择器汇总
在前端开发中,jQuery 是一个广泛使用的 JavaScript 库,它可以方便地操作 HTML 页面元素,其中选择器是 jQuery 最重要的功能之一。本文将详细介绍 jQuery 中几种常用的选择器,包括基础选择器、层次选择器、过滤选择器和属性选择器。
基础选择器
基础选择器是最简单的选择器,可以根据标签名、类名或 ID 等属性选择元素。下面是几个常见的基础选择器:
标签选择器
使用标签名称来选择元素。例如,选择所有段落元素:
------
类选择器
使用 "." 符号来选择特定类名的元素。例如,选择所有带有 "example" 类的元素:
-------------
ID 选择器
使用 "#" 符号来选择特定 ID 的元素。例如,选择 ID 为 "myDiv" 的元素:
-----------
层次选择器
层次选择器可以选择元素之间的关系,比如选择某个元素的子元素、父级元素或者兄弟元素等。下面是几个常见的层次选择器:
后代选择器
选择某个元素内部的所有符合条件的后代元素。例如,选择 ID 为 "container" 元素内所有段落元素:
------------- ---
子元素选择器
选择某个元素的直接子元素。例如,选择 ID 为 "list" 元素下的所有列表项元素:
-------- - ----
相邻兄弟选择器
选择与当前元素相邻的元素。例如,选择 ID 为 "first" 元素后面紧跟着的一个段落元素:
--------- - ---
过滤选择器
过滤选择器可以根据条件来选择元素,比如选择第一个、最后一个或者特定位置的元素等。下面是几个常见的过滤选择器:
:first 选择器
选择第一个符合条件的元素。例如,选择文档中第一个段落元素:
------------
:last 选择器
选择最后一个符合条件的元素。例如,选择文档中最后一个段落元素:
-----------
:even 选择器
选择偶数位置的元素。例如,选择文档中所有偶数位置的段落元素:
-----------
:odd 选择器
选择奇数位置的元素。例如,选择文档中所有奇数位置的段落元素:
----------
属性选择器
属性选择器可以根据元素的属性来选择元素,比如选择某个元素的 href 属性为特定值的元素等。下面是几个常见的属性选择器:
[attribute] 选择器
选择带有特定属性的元素。例如,选择所有带有 href 属性的链接元素:
------------
[attribute=value] 选择器
选择带有特定属性和值的元素。例如,选择 href 属性值为 "https://example.com" 的链接元素:
----------------------------------
[attribute^=value] 选择器
选择属性值以特定值开头的元素。例如,选择所有 href 属性值以 "https://" 开头的链接元素:
------------------------
[attribute$=value] 选择器
选择属性值以特定值结尾的元素。例如,选择所有 href 属性值以 ".pdf" 结尾的链接元素:
---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------