Detailed explanation of jQuery attribute filter selector usage examples-JS Tutorial-php.cn

Detailed explanation of jQuery attribute filter selector usage examples

小云云

Release： 2017-12-27 16:46:21

Original

1672 people have browsed it

This article mainly brings you a detailed explanation of the usage of the attribute filter selector of jQuery selector. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Among so many attribute selectors, [attr="value"] and [attr*="value"] are the most practical

[attr="value"] can help us locate different types of elements, especially the operation of form elements, such as input[type="text"], input[type=" checkbox"] etc.

[attr*="value"] can help us match different types of files on the website

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>属性筛选选择器</h2>
  <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
  <p class="left" testattr="true" >
    <p class="p" testattr="true" name=&#39;p1&#39;>
      <a>[att=val]</a>
    </p>
    <p class="p" testattr="true" p2>
      <a>[att]</a>
    </p>
    <p class="p" testattr="true" name="-">
      <a>[att|=val]</a>
    </p>
    <p class="p" testattr="true" name="a b">
      <a>[att~=val]</a>
    </p>
  </p>

  <script type="text/javascript">
     //查找所有p中，属性name=p1的p元素
     $("p[name = p1]").css("border", "3px groove red"); 
  </script>

  <script type="text/javascript">
    //查找所有p中，有属性p2的p元素
    $("p[p2]").css("border", "3px groove blue"); 
  </script>

  <script type="text/javascript">
    //查找所有p中，有属性name中的值只包含一个连字符“-”的p元素
    $("p[name|=&#39;-&#39;]").css("border", "3px groove #00FF00"); 
  </script>

  <script type="text/javascript">
    //查找所有p中，有属性name中的值包含一个连字符“空”和“a”的p元素
    $("p[name~=&#39;a&#39;]").css("border", "3px groove #668B8B"); 
  </script>


  <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
  <p class="left" testattr="true" >
    <p class="p" testattr="true" name=&#39;imooc-aaorn&#39;>
      <a>[att^=val]</a>
    </p>
    <p class="p" testattr="true" name=&#39;aaorn-imooc&#39;>
      <a>[att$=val]</a>
    </p>
    <p class="p" testattr="true" name="attr-test-selector">
      <a>[att*=val]</a>
    </p>
    <p class="p" name="a b">
      <a>[att!=val]</a>
    </p>
  </p>


  <script type="text/javascript">
     //查找所有p中，属性name的值是用imooc开头的
     $("p[name ^= imooc]").css("border", "3px groove red"); 
  </script>

  <script type="text/javascript">
     //查找所有p中，属性name的值是用imooc结尾的
     $("p[name $= imooc]").css("border", "3px groove blue"); 
  </script>

  <script type="text/javascript">
    //查找所有p中，有属性name中的值包含一个test字符串的p元素
    $("p[name*=&#39;test&#39;]").css("border", "3px groove #00FF00"); 
  </script>

  <script type="text/javascript">
    //查找所有p中，有属性testattr中的值没有包含"true"的p
    $("p[testattr != &#39;true&#39;]").css("border", "3px groove #668B8B"); 
  </script>


</body>

</html>

Copy after login

Related recommendations ：

Detailed explanation of jQuery form element selector

Example sharing JQuery selector and DOM node operation exercises

JQuery sub-element filter selector detailed explanation

The above is the detailed content of Detailed explanation of jQuery attribute filter selector usage examples. For more information, please follow other related articles on the PHP Chinese website!