史上最全JQuery选择器与过滤器教程

"本文档提供了一份详尽的JQuery选择器与过滤器的汇总，包括各种选择元素和进行筛选的方法，适用于需要理解和应用JQuery选择器的开发者。" 在JavaScript的世界里，jQuery库极大地简化了DOM操作，其中选择器和过滤器是其核心功能之一。它们允许开发者高效地选取页面中的特定元素，以便进行样式修改、事件绑定等操作。本篇文档整理了JQuery选择器和过滤器的全面知识，旨在帮助开发者快速掌握这一强大的工具。 1. **基础选择器**： - `$()`：这是jQuery的基本选择器，可以接受CSS选择器作为参数，如`$("#myID")`选取ID为`myID`的元素，`$(".myClass")`选取所有class为`myClass`的元素。 - `$("#id1, #id2")`：通过逗号分隔，可以同时选取多个元素。 - `$("tagname")`：选取指定标签名的所有元素，如`$("p")`选取所有`<p>`标签。 2. **上下文选择器**： - `$(selector, context)`：在特定上下文中寻找匹配的选择器，例如`$("div", "#container")`在ID为`container`的元素内找`<div>`。 3. **属性选择器**： - `$("[attr]")`：选取具有指定属性的元素，如`$("[href]")`选取所有有`href`属性的元素。 - `$("[attr=value]")`：选取属性值等于指定值的元素，如`$("[type=checkbox]")`选取所有`type`属性为`checkbox`的元素。 - `$("[attr^=value]")`：选取属性值以指定字符串开头的元素。 - `$("[attr$=value]")`：选取属性值以指定字符串结尾的元素。 - `$("[attr*=value]")`：选取属性值包含指定字符串的元素。 4. **子元素选择器**： - `$("parent > child")`：选取父元素下的直接子元素，如`$("div > p")`选取所有`<div>`下的直接子`<p>`元素。 5. **相邻兄弟选择器**： - `$("prev + next")`：选取紧跟在前一个元素后面的兄弟元素，如`$("div + span")`选取每个`<div>`后面紧跟的`<span>`。 6. **一般兄弟选择器**： - `$("prev ~ siblings")`：选取前一个元素后面的所有兄弟元素，如`$("div ~ p")`选取每个`<div>`后面的所有`<p>`。 7. **过滤器**： - `.first()`：选取集合中的第一个元素。 - `.last()`：选取集合中的最后一个元素。 - `.eq(index)`：根据索引选取元素，索引从0开始。 - `.gt(index)`：选取索引大于指定值的元素。 - `.lt(index)`：选取索引小于指定值的元素。 - `.even()` / `.odd()`：选取偶数或奇数索引的元素。 - `.has(selector)`：选取包含特定后代元素的元素。 - `.not(selector)`：移除匹配选择器的元素。 - `.is(selector)`：检查元素是否匹配给定的选择器，返回布尔值。 8. **内容过滤器**： - `.empty()`：选取没有子节点（包括文本节点）的元素。 - `.contains(text)`：选取包含指定文本的元素。 - `.parent()`：选取元素的直接父元素。 - `.parents()`：选取元素的所有祖先元素。 9. **可见性过滤器**： - `.visible()`：选取在CSS中设置为显示的元素。 - `.hidden()`：选取在CSS中设置为隐藏的元素。 10. **表单过滤器**： - `.input()`：选取所有的表单输入元素，如`<input>`, `<select>`, `<textarea>`。 - `.button()`：选取所有`<button>`元素。 - `.checked()`：选取被选中的复选框或单选按钮。 以上只是jQuery选择器和过滤器的一小部分，实际使用中还有更多高级和复杂的选择方式。理解并熟练运用这些选择器和过滤器，能让你的前端开发工作变得更加高效。记得在实际项目中结合HTML代码进行实践，以加深理解和记忆。