jQuery选择器详解与实例解析

"本文详细解析了jQuery选择器的分类和用法，通过实例帮助读者理解和学习。文章涵盖了基本、层次、简单过滤、内容过滤以及可见性过滤等选择器，旨在提高开发者对jQuery选择器的掌握程度。" jQuery选择器是jQuery库中的核心功能之一，它极大地简化了DOM元素的选择和操作，使得JavaScript代码更加简洁高效。以下是各类jQuery选择器的详细说明： 1. 基本选择器： - `#id`：根据ID属性匹配唯一的元素，例如`$("#myID")`将选取ID为`myID`的元素。 - `.class`：根据类名匹配元素，例如`$(".myClass")`将选取所有类名为`myClass`的元素。 - `element`：根据元素名称匹配，如`$("div")`选取所有`<div>`元素。 - `*`：匹配所有元素，`$("*")`将选取页面上的每一个元素。 - `selector1,selector2`：并集选择器，返回两个选择器匹配到的所有元素。 2. 层次选择器： - `ancestor descendant`：选取祖先元素下的所有后代元素，如`$("div p")`选取所有在`<div>`内的`<p>`元素。 - `parent > child`：选取父元素的直接子元素，如`$("ul > li")`选取`<ul>`下的直接子`<li>`元素。 - `prev + next`：选取紧跟在前一个元素后的兄弟元素，如`$("h1 + p")`选取紧跟在`<h1>`后的第一个`<p>`元素。 - `prev ~ siblings`：选取前一个元素后面的所有兄弟元素，如`$("img ~ p")`选取所有在`<img>`之后的`<p>`元素。 3. 简单过滤选择器： - `:first`或`.first()`：选取第一个元素，如`$("div:first")`选取第一个`<div>`元素。 - `:last`或`.last()`：选取最后一个元素，如`$("p:last")`选取最后一个`<p>`元素。 - `:not(selector)`：选取非`selector`匹配的元素，如`$("input:not([type='hidden'])")`选取非隐藏的`<input>`元素。 - `:even`：选取索引值为偶数的元素（从0开始），如`$("tr:even")`选取表格的偶数行。 - `:odd`：选取索引值为奇数的元素（从0开始），如`$("div:odd")`选取`<div>`的奇数元素。 - `:eq(index)`：选取指定索引号的元素，如`$("li:eq(2)")`选取第三个`<li>`元素。 - `:gt(index)`：选取索引号大于给定值的元素，如`$("img:gt(3)")`选取第四及以后的`<img>`元素。 - `:lt(index)`：选取索引号小于给定值的元素，如`$("p:lt(2)")`选取前两个`<p>`元素。 - `:header`：选取所有标题元素，包括`<h1>`至`<h6>`。 - `:animated`：选取正在执行动画的元素。 4. 内容过滤选择器： - `:contains(text)`：选取包含指定文本的元素，如`$("p:contains('Hello')")`选取包含“Hello”的`<p>`元素。 - `:empty`：选取没有子元素和文本的空元素，如`$("div:empty")`选取没有内容的`<div>`。 - `:has(selector)`：选取后代中包含指定选择器匹配元素的父元素，如`$("div:has(p)")`选取含有`<p>`的`<div>`。 - `:parent`：选取有子元素或文本的元素，如`$("div:parent")`选取非空的`<div>`。 5. 可见性过滤选择器： - `:hidden`：选取不可见元素，包括`type="hidden"`的元素和`display:none`的元素。 - `:visible`：选取可见元素，即非`:hidden`的元素。 6. 属性过滤选择器： - `[attribute]`：选取含有指定属性的元素，如`$("input[type='text']")`选取所有`type`属性为`text`的`<input>`元素。 - `[attribute=value]`：选取属性值等于指定值的元素，如`$("a[target='_blank']")`选取`target`属性为`_blank`的`<a>`元素。 - `[attribute!=value]`：选取属性值不等于指定值的元素，如`$("input[name!='password']")`选取`name`属性不是`password`的`<input>`元素。 - `[attribute^=value]`：选取属性值以指定字符串开头的元素，如`$("img[src^='https://']")`选取`src`属性以`https://`开头的`<img>`元素。 - `[attribute$=value]`：选取属性值以指定字符串结尾的元素。 - `[attribute*=value]`：选取属性值包含指定字符串的元素。 通过这些选择器，开发者可以精确地定位到DOM树中的特定元素，进行进一步的操作，如添加样式、修改内容、绑定事件等。熟练掌握jQuery选择器是提升JavaScript开发效率的关键步骤。