What are the filter selectors in jQuery?-JS Tutorial-php.cn

What are the filter selectors in jQuery?

yulia

Release： 2018-09-18 16:02:13

Original

1671 people have browsed it

There are many selectors in jQuery, such as child element selectors, descendant selectors, filter selectors, etc. This article will tell you about the filter selectors in jQuery for those who are learning selectors. You can refer to it, I hope it will be helpful to you.

:first and :last filter selectors

:first gets the first element in a group of elements with the same tag
:last gets one The last element in the group with the same tag element
For example:

<body>
  <div>改变最后一行"苹果"背景颜色：</div>
  <ol>
    <li>葡萄</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
    <li>苹果</li>
  </ol>       
<script type="text/javascript">
  $("li:last").css("background-color", "red");
</script>

Copy after login

:contains(text) filter selector

:contains(text) selects the specified inclusion All elements of the string, it is usually used in combination with other elements to obtain all element objects containing the content of the "text" string
For example:

<body>
  <div>改变包含"jQuery"字符内容的背景色：</div>
  <ol>
    <li>强大的"jQuery"</li>
    <li>"javascript"也很实用</li>
    <li>"jQuery"前端必学</li>
    <li>"java"是一种开发语言</li>
    <li>前端利器——"jQuery"</li>
  </ol>
<script type="text/javascript">
  $("li:contains(&#39;jQuery&#39;)").css("background", "green");
</script>
</body>

Copy after login

:has(selector) filter selector

: The function of has(selector) filter selector is to get all elements in the selector that contain the specified element name
For example:

<body>
  <div>改变包含"label"元素的背景色：</div>
  <ol>
    <li><p>我是P先生</p></li>
    <li><label>L妹纸就是我</label></li>
    <li><p>我也是P先生</p></li>
    <li><label>我也是L妹纸哦</label></li>
    <li><p>P先生就是我哦</p></li>
  </ol>
<script type="text/javascript">
  $("li:has(&#39;label&#39;)").css("background-color", "blue");
</script>
</body>

Copy after login

:hidden filter selector

: The function of the hidden filter selector is to obtain all invisible elements. These invisible elements include elements whose type attribute value is hidden.
For example:

<body>
  <h3>显示隐藏元素的内容</h3>
  <input id="hidstr" type="hidden" value="我已隐藏起来"/>
  <div></div>
  <script type="text/javascript">
    var $strHTML = $("input:hidden").val();
    $("div").html($strHTML);
  </script>
</body>

Copy after login

:visible filter selector

: The visible filter selector obtains all visible elements, that is, as long as the display attribute value of the element is not set to "none", then, can be obtained through this selector.
For example:

<body>
  <h3>修改可见“水果”的背景色</h3>
  <ul>
    <li style="display:none">橘子</li>
    <li style="display:block">香蕉</li>
    <li style="display:">葡萄</li>
    <li>苹果</li>
    <li style="display:none">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li:visible").css("background-color","blue");
  </script>
</body>

Copy after login

[attribute=value]Attribute selector

[attribute=value]The function of the attribute selector is to obtain the complete attribute name and attribute value. All the same elements, where [] is the bracket symbol used specifically for attribute selectors, the parameter attribute represents the attribute name, and the value parameter represents the attribute value.
For example:

<body>
  <h3>改变"title"属性值为"蔬菜"的背景色</h3>
  <ul>
    <li title="蔬菜">茄子</li>
    <li title="水果">香蕉</li>
    <li title="蔬菜">芹菜</li>
    <li title="水果">苹果</li>
    <li title="水果">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li[title=&#39;蔬菜&#39;]").css("background-color", "green");
  </script>
</body>

Copy after login

[attribute!=value]Attribute selector

[attribute!=value]The function of the attribute selector is to get the attribute name that does not contain , or all elements that are different from the attribute name and attribute value, where [] is the bracket symbol dedicated to the attribute selector, the parameter attribute represents the attribute name, and the value parameter represents the attribute value.

[attribute*=value] Attribute selector

[attribute*=value] It can get all elements whose attribute value contains the specified content, where [] is Brackets used exclusively for attribute selectors. The attribute parameter represents the attribute name, and the value parameter represents the corresponding attribute value.
For example:

<body>
  <h3>改变"title"属性值包含"果"的背景色</h3>
  <ul>
    <li title="蔬菜">茄子</li>
    <li title="水果">香蕉</li>
    <li title="蔬菜">芹菜</li>
    <li title="人参果">小西红柿</li>
    <li title="水果">西瓜</li>
  </ul>
  <script type="text/javascript">
    $("li[title*=&#39;果&#39;]").css("background-color", "green");
  </script>
</body>

Copy after login

:first-child sub-element filter selector

:first-child sub-element filter selector can obtain each parent element The first child element returned is a collection, which is commonly used for selecting data from multiple collections.
For example:

<body>
  <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
  <ol>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ol>
  <ol>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ol>
  <script type="text/javascript">
    $("li:first-child").css("background-color", "green");
  </script>
</body>

Copy after login

:last-child sub-element filter selector

The function of :first-child sub-element filter selector is opposite, :last-child The function of the child element filter selector is to obtain the last child element returned in each parent element. It is also a collection and is commonly used for selection processing of multiple collection data.

The above is the detailed content of What are the filter selectors in jQuery?. For more information, please follow other related articles on the PHP Chinese website!