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中文網(wǎng)(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>標(biāo)題</h2>
<p>段落。</p>
<p>另一個段落。</p>
<button>點擊隱藏P標(biāo)簽內(nèi)容</button>
</body>
</html>2. Sélecteur #id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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中文網(wǎng)(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">標(biāo)題</h2>
<p class="test">段落。</p>
<button>點擊隱藏所有class</button>
</body>
</html>
