Comment utiliser le sélecteur de filtre d'attribut jQuery-js tutoriel-php.cn

Comment utiliser le sélecteur de filtre d'attribut jQuery

小云云

Libérer： 2018-02-08 13:30:32

original

1693 Les gens l'ont consulté

Cet article vous apporte principalement une explication détaillée de l'utilisation du sélecteur de filtre d'attribut du sélecteur jQuery. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Parmi tant de sélecteurs d'attributs, [attr="value"] et [attr*="value"] sont les plus pratiques Le

[attr="value"] peut nous aider à localiser différents types d'éléments, notamment le fonctionnement des éléments de formulaire, tels que input[type="text"], input[ type ="checkbox"] etc.

[attr*="value"] peut nous aider à faire correspondre différents types de fichiers sur le site Web

<!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>

Copier après la connexion

Recommandations associées :

Exemples détaillés de sélecteur de filtrage d'attributs d'objet de formulaire jQuery

10 recommandations de cours sur le filtrage d'attributs

Sélecteur d'élément de formulaire jQuery et obtention de l'instance de sélecteur d'élément sélectionné

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!