jq常用过滤器_jquery常用过滤器选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都可以一个冒号(：)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤选择器，内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1.基本过滤选择器选择器描述返回示例

:first选取第一个元素单个元素$(“div:first”)选取所有

元素中第一个

元素

:last选取最后一个元素单个元素$(“div:last”)选取所有

元素中最后一个

元素

:not(selector)去除所有与给定选择器匹配的元素集合元素$(“input:not(.myClass)”)选取class不是myClass的元素

:even选取索引是偶数的所有元素，索引从0开始集合元素$(“input:even”)选取索引是偶数的元素

:odd选取索引是奇数的所有元素，索引从0开始集合元素$(“input:odd”)选取索引是奇数的元素

:eq(index)选取索引等于index的元素(index从0开始)集合元素$(“input:eq(1)”)选取索引等于1的元素

:gt(index)选取索引大于index的元素(index从0开始)集合元素$(“input:gt(1)”)选取索引大于1的元素(注：大于1，而不包括1)

:lt(index)选取索引小于index的元素(index从0开始)集合元素$(“input:lt(1)”)选取索引小于1的元素(注：小于1，而不包括1)

:header选取所有的标题元素，例如h1,h2,h3等等集合元素$(“:header”)选取网页中所有的

，

，

……

:animated选取当前正在执行动画的所有元素集合元素$(“div:animated”)选取当前正在执行动画的

元素

2．内容过滤选择器选择器描述返回示例

:contains(text)选取含有文本内容为“text”的元素集合元素$(“div:contains(‘我”)”)选取含有文本“我”的

元素

:empty选取不包含子元素或者文本的空元素元素集合$(“div:empty”)选取不包含子元素(包括文本元素)的

元素

:has(selector)选取含有选择器所匹配的元素的元素元素集合$(“div:has(p)”)选取含有

元素的

:parent选取含有子元素或者文本的元素元素集合$(“div:parent”)选取拥有子元素(包括文本元素)的

3．可见性过滤选择器选择器描述返回示例

:hidden选取所有不可见的元素集合元素$(“:hidden”)选取所有不可见的元素，包括，

和等元素，如果只想选取元素，可以使用$(“input:hidden”)

:visible选取所有可见元素集合元素$(“div:visible”)选取所有可见的

4．属性过滤选择器选择器描述返回示例

[attribute]选取拥有此属性的元素集合元素$(“div[id]”)选取拥有属性id的元素

[attribute=value]选取属性的值为value的元素集合元素$(“div[title=test]”)选取属性title为“test”的

元素

[attribute!=value]选取属性的值不等于value的元素集合元素$(“div[title!=test]”)选取属性title不等于“test”的

元素(注：没有属性title的

元素也会被选取)

[attribute^=value]选取属性的值以value开始的元素集合元素$(“div[title^=test]”)选取属性title以“test”开头的

元素

[attribute$=value]选取属性的值以value结尾的元素集合元素$(“div[title$=test]”)选取属性title以“test”结束的

元素

[attribute*=value]选取属性的值含有value的元素集合元素$(“div[title$=test]”)选取属性title含有“test”的

元素

[selector1][selector2][selector]用属性选择器合并成一个复合的属性选择器，满足多个条件。没选取一次，缩小一次范围集合元素$(“div[id][title$=’test’]”)选取拥有属性id，并且属性title以“test”结束的

元素

5．子元素过滤选择器选择器描述返回示例

:nth-child

(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇(odd)偶(even)元素，(index从1开始)集合元素:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0开始的

:first-child选取每个父元素的第一个子元素集合元素:first只返回单个元素，而:first-child将为每个父元素匹配第一个子元素。

例如：$(“ul li:first-child”)选取每个

• 中第一个
• 元素

  :last-child选取父元素的最后一个子元素集合元素:last只返回单个元素，而:last-child将为每个父元素匹配最后一个子元素。

  例如：$(“ul li:last-child”)选取每个

  • 中最后一个
  • 元素

    :only-child如果某个元素的它父亲中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配集合元素$(“ul  li:only-child”)在

    • 中选取是唯一子元素的
    • 元素

      6．表单对象属性过滤选择器选择器描述返回示例

      :enabled选取所有可用元素集合元素$(“#form1 :enabled”)选取id为“form1”的表单中所有可用元素

      :disabled选取所有不可用元素集合元素$(“#form1 :disabled”)选取id为“form1”的表单中所有不可用元素

      :checked选取所有被选中的元素(单选框，复选框)集合元素$(“input :checked”)选取所有被选中的元素

      :selected选取所有被选中的选项元素(下拉列表)集合元素$(“select :selected”)选取所有被选中的选项元素

      改变表单内可用元素的值，代码如下：

      $(“form1 input:enabled”).val(“这里的值改变了”);

      获取多选框选中的个数，代码如下：

      $(“input : checked”).length;

      获取下拉框选中的内容，代码如下：

      $(“select:selected”).text();

      同理，其他对象属性选择器的操作与此类似

      7．表单对象属性过滤选择器选择器描述返回示例

      :input选取所有的,,

      ,元素集合元素$(“:input)选取所有的,,,

      元素

      :text选取所有的单行文本框集合元素$(“:text”) 选取所有的单行文本框

      :password选取所有的密码框集合元素$(“:password”) 选取所有的密码框

      :radio选取所有的单选框集合元素$(“:radio”) 选取所有的单选框

      :checkbox选取所有的多选框集合元素$(“:checkbox”) 选取所有的多选框

      :submit选取所有的提交按钮集合元素$(“:submit”) 选取所有的提交按钮

      :p_w_picpath选取所有的图形按钮集合元素$(“:p_w_picpath”) 选取所有的图形按钮

      :reset选取所有的重置按钮集合元素$(“:reset”) 选取所有的重置按钮

      :button选取所有的按钮集合元素$(“:button”)选取所有的按钮

      :file选取所有的上传域集合元素$(“:file”)选取所有的上传域

      :hidden选取所有的不可见元素集合元素$(“:hidden”)选取所有的不可见元素

      得到表单内表单元素的个数，代码如下：

      $(“form1 :input”).length;

      得到表单内单行文本的个数，代码如下：

      $(“form1 :text”).length;

      得到表单内密码框的个数，代码如下：

      $(“form1 :password”).length;

      同理，其他表单选择器的操作与此类似