2-1 jQuery选择器

选中的元素为红色虚线边框和粉红背景

基本选择器

层次选择器

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

class="one" id="one"的div
class="mini"
class="one" id="two" title="test"的div
class="mini" title="other"
class="mini" title="test"
class="mini"
内嵌的.mini
class="mini"
内嵌的.mini
class="mini"
class="mini"
class="mini"
class="mini" title="teest"
class="mini" title="tesst"
class="testHide"
包含input的type为hidden的div,点击可测试右边的动画。动画执行过程中可通过上方基本过滤选择器中按钮$(":animated")来观察选中情况。
点击执行动画正在执行动画的span
title="en"
class="mini" title="en-UK"
class="mini" title="english"
class="mini" title="en uk"
class="mini" title="uken"

子元素过滤选择器

这是h2标题

这是P段落

这是h3标题

这是span元素

这是h4标题

这是div段落
这是h5标题
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6

表单对象属性过滤器

表单选择器

表单选择练习
可用元素 不可用元素
可用元素 不可用元素








注意事项：

  1. 其中的:first/last指的是选择所有元素后集合里面的第一个/最后一个，而不是像css中看元素在DOM中的位置来判断。
  2. :odd、:even、:eq、:gt、:lt 都是从0开始计数，:lt()和:gt()不包括当前下标
  3. :only-child可以在兄弟位置包含文本内容/li>
  4. :empty选择的元素不包括任何文本和任何子元素;
  5. :parent选择的元素包括任何文本或者子元素
  6. :nth()计数从0开始，:nth-child()计数从1开始
  7. $('select :selected').val())只能获取到选中集合里面第一个元素的值；而$('select :selected').text())会自动遍历所有集合的文本再合并
  8. 表单选择器:input包括input(文本框，密码框，单选框，复选框等等),select,button,textarea
  9. 类似的，表单选择器也可以对表单里类型为radio、checked、submit（提交按钮）、image（图像按钮）、reset、button、file的元素进行选取。