sélecteur jQuery

Que sont les sélecteurs jQuery ?

Le sélecteur jQuery est l'une des parties très importantes de la bibliothèque jQuery. Il prend en charge la syntaxe CSS bien connue des développeurs Web pour configurer des pages rapidement et facilement. Comprendre les sélecteurs jQuery est la clé pour ouvrir la porte à un développement jQuery efficace. Une forme de syntaxe de sélecteur jQuery typique :
$(selector).methodName();
selector est une expression de chaîne utilisée pour identifier des éléments dans le DOM et est ensuite fournie à l'aide d'un ensemble jQuery de méthodes.
Dans la plupart des cas, jQuery prend en charge de telles opérations :
$(selector).method1().method2().method3();
Cette instance représente l'identifiant dans le DOM implicite = "goAway", puis ajoutez-y un attribut class="incognito".
$('#goAway').hide().addClass('incognito');
Conseils : lorsque l'expression du sélecteur correspond à plusieurs éléments, elle peut être utilisée de manière pratique et flexible comme les opérations de tableau JavaScript Pointeur de tableau pour la sélection . Voici un exemple :
var element = $('img')[0]; Parmi les éléments représentés par l'expression correspondante
, le premier objet élément sera attribué à l'élément variable.

Sélecteur de base

1. Sélecteur d'éléments

Le sélecteur d'éléments jQuery est basé sur les éléments. nom de l'élément sélectionné.

<!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").hide();
  });
});
</script>
</head>
<body>
<h2>标题</h2>
<p>段落。</p>
<p>另一个段落。</p>
<button>点击隐藏P标签内容</button>
</body>
</html>

2. Sélecteur #id

<!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>
<p>段落</p>
<p id="test">另一个段落</p>
<button>点击隐藏id</button>
</body>
</html>

3. >4.sélecteur d'éléments

Définissez la taille du texte de l'élément p sur 12px :

$(document).ready(function () {
, '12px');
});

5. * Sélecteur

$(document ).ready(function () {
🎜). > });

6. Sélecteur parallèle

$(document).ready(function () { // Définissez la marge de l'élément p et de l'élément div sur 0 $('p, div').css('margin', '0');
});

D'autres sélecteurs de niveau et sélecteurs de filtres seront introduits étape par étape dans les chapitres suivants.

Utilisez les fonctions jQuery dans des fichiers séparés

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

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

<!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 class="test">标题</h2>
<p class="test">段落。</p>
<button>点击隐藏所有class</button>
</body>
</html>

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> </head> <body> <script> $(document).ready(function () { $('.cube').css('background', 'pink'); }); </script> <p class="cube" style="width: 50%;">选择器是jQuery最基础的东西</p> <p>选择器是jQuery最基础的东西</p> </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]