sélecteur jQuery

Le composant principal de jQuery est : le moteur de sélection, qui hérite de la syntaxe CSS et peut sélectionner rapidement et précisément le nom de la balise, le nom de l'attribut, le statut, etc. des éléments DOM sans se soucier de la compatibilité du navigateur. >Ainsi, la plupart des sélecteurs jQuery que nous présentons ci-dessous sont similaires aux sélecteurs CSS que nous avons appris auparavant

Les sélecteurs CSS sont utilisés pour rechercher et localiser des éléments sur la page, et définir des styles. Accédez à l'élément

Le sélecteur jQuery est également utilisé pour trouver l'élément. Après avoir trouvé l'élément, nous pouvons utiliser certaines méthodes données pour modifier, supprimer ou même déplacer l'élément

<. 🎜>
Lors de l'utilisation du sélecteur jQuery, nous devons utiliser la fonction "$()" pour envelopper nos règles CSS, et les règles CSS sont passées en paramètres à l'objet jQuery et renvoyées Contient le jQuery objet de l'élément correspondant dans la page. Ensuite, nous pouvons effectuer des opérations comportementales sur le nœud DOM obtenu.

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")

Exemple

Une fois que l'utilisateur a cliqué sur le bouton, tous les <p> changeront de couleur :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").css('color','red');           //添加一个行为
            });
        });
     </script>

</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

Exécutez le programme pour l'essayer

#id selector

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

Remarque : l'ID ne peut apparaître qu'une seule fois sur la page. Nous demandons généralement aux développeurs de respecter et de maintenir cette règle. Mais si vous apparaissez trois fois dans la page et utilisez des styles CSS, alors ces trois éléments feront toujours l'effet. Mais si vous faites cela dans jQuery, vous rencontrerez des problèmes. Un seul identifiant prendra effet, nous devons donc en faire un. habitude de n'utiliser qu'un seul identifiant sur la page

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

$("#test")

Instance

Lorsque l'utilisateur clique sur le bouton, l'élément avec l'attribut id="test" deviendra rouge :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#test").css('color','red');
            });
        });
    </script>
</head>
<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">我变颜色了</p>
<button>点我</button>
</body>
</html>

Exécutez le programme pour l'essayer

.class selector

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

La syntaxe est la suivante :

$(".test")

Exemple

Une fois que l'utilisateur a cliqué sur le bouton, tous les éléments avec les attributs class="test" changeront de couleur :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $(".test").css('color','blue');
            });
        });
    </script>
</head>
<body>
<h2 class="test">class选择器</h2>
<p class="test">class选择器</p>
<button>点我</button>
</body>
</html>

Exécutez le programme pour l'essayer

Plus d'instances de sélecteur

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <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">#id选择器，点击我会隐藏</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]