sélecteur jQuery

Sélecteurs jQuery

Les sélecteurs jQuery vous permettent d'opérer sur des groupes d'éléments HTML ou des éléments individuels.

Sélecteurs jQuery

Les sélecteurs jQuery vous permettent d'opérer sur des groupes d'éléments HTML ou des éléments individuels.

Les sélecteurs jQuery "trouver" (ou sélectionnent) des éléments HTML en fonction de l'identifiant, de la classe, du type, des attributs, des valeurs d'attribut de l'élément, etc. Il est basé sur des sélecteurs CSS existants, en plus de certains sélecteurs personnalisés.

Tous les sélecteurs dans jQuery commencent par un signe dollar : $().

Sélecteur d'éléments

Le sélecteur d'éléments jQuery sélectionne les éléments en fonction de leur nom.

Sélectionnez tous les éléments <p> de la page :

$("p")

Instance

Une fois que l'utilisateur clique sur le bouton, tous < p> Les éléments sont masqués :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>jQuery示例</title> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

#id selector

jQuery #id selector sélectionne l'élément spécifié via l'attribut id du Élément HTML .

L'identifiant de l'élément dans la page doit être unique, donc si vous souhaitez sélectionner l'élément unique dans la page, vous devez passer le sélecteur #id.

La syntaxe de sélection des éléments par identifiant est la suivante :

$("#test")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>
<h2>好好学习</h2>
<p>天天向上</p>
<p id="test">PHP测试</p>
<button>点我</button>
</body>
</html>

.class selector

Le sélecteur de classe jQuery peut trouver des éléments par classe spécifiée.

La syntaxe est la suivante :

$(".test")

Syntaxe 🎜>$("* ") Sélectionner tous les éléments $("p.intro") Sélectionnez le <p> dont la classe est l'élément d'introduction

$("p:first") Sélectionne le premier élément <p> li> éléments

$("ul li:first-child") Sélectionne le premier < ;li> élément de chaque < ;ul> élément

$("[href]" ) "a[target!='_blank']") Sélectionner tout< a> éléments dont la valeur de l'attribut cible n'est pas égale à "_blank"

$(":button") Sélectionner tous les éléments< de type="button" ;input> et <button> Sélectionner des positions impaires L'élément <tr>

Utilisation des fonctions jQuery dans fichiers autonomes

Si votre site Web contient de nombreuses pages et que vous souhaitez que vos fonctions jQuery soient faciles à maintenir, veuillez placer vos fonctions jQuery dans des fichiers .js séparés.

Lorsque nous démontrons jQuery dans le didacticiel, nous ajoutons la fonction directement dans la section <head> Il serait cependant préférable de les mettre dans un fichier à part, comme ceci (en référençant le fichier via l'attribut src) :

<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">你马上就看不见我了</h2> <p class="test">你就要看不见我了</p> <p>为什么还能看见我</p> <button>点我</button> </body> </html>

soumettre Réinitialiser le code

Opération automatique

sélecteur jQuery

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]