communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

filtre d'attribut jQuery

Les sélecteurs d'attributs vous permettent de cibler un élément en fonction d'attributs. Vous pouvez spécifier uniquement un certain attribut de l'élément, de sorte que tous les éléments qui utilisent cet attribut, quelle que soit sa valeur, soient localisés. Vous pouvez également cibler des éléments plus spécifiques qui utilisent des valeurs spécifiques sur ces attributs. affichage du sélecteur du lieu de leur puissance.

est décrit comme suit :


QQ截图20161022102442.png

<style type="text/css">
  /*高亮显示*/
  .highlight{   
   background-color: gray
  }
 </style>
rrree

[attribut] Utilisation<🎜. >Définition : Mettre en correspondance les éléments contenant l'attribut donné

Le code est le suivant :

<body>
   <div>
      <p>Hello</p>
   </div>
   <div id="test">ID为test的DIV</div>
   <input type="checkbox" id="s1" name="football" value="足球" />足球
   <input type="checkbox" name="volleyball" value="排球" />排球
   <input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
   <input type="checkbox" id="s4" name="other" value="其他" />其他
  </body>

2 [attribut=valeur] UtilisationDéfinition : Correspond à ce qui est donné L'attribut est un élément avec une valeur spécifique

Le code est le suivant :

$("div[id]").addClass("highlight"); //查找所有含有ID属性的div元素

3 [attribut!=value] UtilisationDéfinition : Correspond à ce qui est donné L'attribut est un élément qui ne contient pas de valeur spécifique

Le code est le suivant :

$("input[name='basketball']").attr("checked",true);   //name属性值为basketball的input元素选中

4 [attribut^= value] Utilisation définition : Le code correspondant à l'attribut donné est un élément commençant par une valeur

comme suit : 

$("input[name!='basketball']").attr("checked",true);   //name属性值不为basketball的input元素选中 
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

5. attribut$=value] Utilisation Définition : correspond à l'attribut donné qui se termine par une valeur

Le code est le suivant :

$("input[name^='foot']").attr("checked",true);  //查找所有 name 以 'foot' 开始的 input 元素

6. [attribute*=value] UtilisationDéfinition : La correspondance d'un attribut donné est un élément contenant certaines valeurs

Le code est le suivant :

$("input[name$='ball']").attr("checked",true); //查找所有 name 以 'ball' 结尾的 input 元素

7. [selector1][selector2][selectorN] Utilisation définition : sélecteur d'attribut composé, utilisez

lorsque plusieurs conditions doivent être remplies en même temps. est le suivant : 

$("input[name*='sket']").attr("checked",true);  //查找所有 name 包含 'sket' 的 input 元素
Formation continue
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .left { width: auto; height: 120px; } .left div { width: 100px; height: 70px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } .bottom { width: 800px; } .bottom div, .bottom span { display: block; width: 80px; height: 80px; margin: 5px; background: #bbffaa; float: left; font-size: 14px; } .bottom .small { width: 60px; height: 25px; font-size: 12px; background: #fab; } </style> </head> <body> <h2>属性筛选选择器</h2> <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3> <div class="left" testattr="true" > <div class="div" testattr="true" name='p1'> <a>[att=val]</a> </div> <div class="div" testattr="true" p2> <a>[att]</a> </div> <div class="div" testattr="true" name="a-b"> <a>[att|=val]</a> </div> <div class="div" testattr="true" name="a b"> <a>[att~=val]</a> </div> </div> <script type="text/javascript"> //查找所有div中，属性name=p1的div元素 $('div[name=p1]').css("border", "3px groove red"); </script> <script type="text/javascript"> //查找所有div中，有属性p2的div元素 $('div[p2]').css("border", "3px groove blue"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个连字符“-”的div元素 $('div[name|="a"]').css("border", "3px groove #00FF09"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个连字符“空”的div元素 $('div[name~="a"]').css("border", "3px groove #668B8B"); </script> <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3> <div class="left" testattr="true" > <div class="div" testattr="true" name='php-aaorn'> <a>[att^=val]</a> </div> <div class="div" testattr="true" name='aaorn-php'> <a>[att$=val]</a> </div> <div class="div" testattr="true" name="attr-test-selector"> <a>[att*=val]</a> </div> <div class="div" name="a b"> <a>[att!=val]</a> </div> </div> <script type="text/javascript"> //查找所有div中，属性name的值是用php开头的 $('div[name^=php]').css("border", "3px groove red"); </script> <script type="text/javascript"> //查找所有div中，属性name的值是用php结尾的 $('div[name$=php]').css("border", "3px groove blue"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div[name*="test"]').css("border", "3px groove #00FF00"); </script> <script type="text/javascript"> //查找所有div中，有属性testattr中的值没有包含"true"的div $('div[testattr!="true"]').css("border", "3px groove #668B8B"); </script> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492873 joue