jQuery 选择符详细介绍及整理

jQuery 选择符 CSS选择符， 如： $(‘#title1 > li’)为取得ID为title1(#title)的子元素(>)中所有的列表项(li)。 $(‘#title1 li:not(.class1)’)为取得ID为title的后代元素中没有(not)class1类的所有列表项。 jQuery库支持XPath选择符。 如： $(‘a[@title]’)为取得所有带title属性的链接。也可以不用@符号。 如： $(‘div[ol]’)为取得所以包含一个ol属性的div元素。当然，还允许以正则表达式中的^(开始)$(结尾)*(任意)， 示例如下： $(‘a[href^=”mailto: jQuery选择符是jQuery库的核心部分，它使得在JavaScript中选取DOM元素变得更加简单和高效。jQuery支持多种选择方式，包括CSS选择符、XPath选择符以及一些自定义的选择符，这些选择符帮助开发者更精确地定位页面上的元素。 1. CSS选择符： - ID选择符：`$('#title1')` 用于选取具有指定ID（如`title1`）的元素。 - 类选择符：`$('.class1')` 用于选取具有指定类名（如`class1`）的元素。 - 子元素选择符：`$('#title1 > li')` 选取ID为`title1`的元素下的直接子元素li。 - 后代元素选择符：`$('#title1 li')` 选取ID为`title1`的元素下的所有后代li元素。 - 非选择符：`$('#title1 li:not(.class1)')` 选取ID为`title1`的元素下不具有`class1`类的li元素。 2. XPath选择符： - 属性选择符：`$('a[@title]')` 选取所有具有`title`属性的`a`元素，不使用`@`符号时，如`$('div[ol]')` 选取所有包含`ol`属性的`div`元素。 3. 正则表达式选择符： - 开头匹配：`$('a[href^="mailto:"]')` 选取所有href属性以`mailto:`开头的`a`元素，即电子邮件链接。 - 结尾匹配：`$('a[href$=".rar"]')` 选取所有href属性以`.rar`结尾的`a`元素，即指向RAR文件的链接。 - 包含匹配：`$('a[href*="tao028.com"]')` 选取所有href属性包含`tao028.com`的`a`元素，无论在哪个位置。 4. 自定义选择符： - 序列选择符：`$('div:eq(1)')` 选取`div`元素集合中的第二个元素（索引从0开始）。 - 奇偶选择符：`$('tr:odd')` 选取所有表格行中的奇数行，`$('tr:even')` 选取偶数行。 - 内容包含选择符：`$('td:contains("hahaha")')` 选取所有包含文本`hahaha`的`td`元素。 jQuery选择符的灵活性和强大性使得开发人员能够快速定位页面上特定的元素，进行样式修改、事件绑定等操作，极大地提高了JavaScript的开发效率。熟练掌握jQuery选择符，是提升网页动态效果和交互体验的关键。在实际应用中，可以结合这些选择符灵活组合，满足各种复杂的需求。