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 () {
🎜). > });
$(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');
});
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>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
