Résumé des méthodes courantes pour mieux utiliser jQuery

Le fait que jQuery soit si simple à utiliser a beaucoup à voir avec son utilisation d'une syntaxe compatible avec les sélecteurs CSS lors de l'obtention d'objets. Après tout, tout le monde connaît les sélecteurs CSS (vous pouvez en savoir plus sur les sélecteurs CSS dans . dix minutes) sélecteur CSS), mais sa puissance est compatible avec les sélecteurs CSS3, et même bien plus encore.

Sélecteur

Une fois que vous avez les bases des sélecteurs CSS, il est très simple de regarder les sélecteurs jQuery.

$("E:impair")                                                                                                                                                                                                  🎜>Tous les éléments en E avec indice n$("E:gt(n)")                                                                                        Tous les éléments de E avec un indice inférieur à nSélectionnez les éléments h1~h7Sélectionnez l'élément qui exécute l'effet d'animationFiltre de contenu$ ("E:contains(value)')$('E:empty')L'élément avec F dans l'élément enfant, $('p:has(a)' ): p$('E: parent')L'élément parent est l'élément de E, $('td: parent') : l'élément parent est l'élément de td$(' E:caché')Tous cachés E$('E:visible')Tous visibles E$('E[attr]')E avec attribut attr$('E[attr=value]')E avec l'attribut attr=value$( 'E[attr !=value]') Attribut attr !=value E pour l'attribut attr commençant par la valeur

Sélecteur de base
$('*' )	correspond à tous les éléments de la page
$('#id')	sélecteur d'identifiant
$('.class')	Sélecteur de classe
$('element')	Sélecteur de balises
Sélecteur de composition/niveau
$('E,F')	Sélecteur multi-éléments , séparé par ",, correspond simultanément à l'élément E ou à l'élément F
$('E F')	Le sélecteur de descendant , séparé par des espaces, correspond à tous les descendants de l'élément E (pas seulement les éléments enfants, les éléments enfants sont récursifs vers le bas) Élément F
$(E>F)	Sélecteur d'élément enfant, séparés par ">", correspond à tous les éléments enfants directs de l'élément E
$('E+F')	sélecteur adjacent direct, correspond à l'élément E après l'élément adjacent de frère de
$('E~F')	Sélecteur adjacent ordinaire (sélecteur de frère cadet), correspond à l'élément frère F de après l'élément E (qu'il soit directement adjacent ou non)
$('.class1.class2')	Faire correspondre les éléments dont le nom de classe contient à la fois class1 et class2
Sélecteur de filtrage de base
$("E:first")	Le premier de tous les E
$("E :last")	Le dernier de tous les E
$("E:not(selector)")	Filtrer E selon le sélecteur
$("E:even")
	$("E :ll(n)")
	$(": header")
	$("p:animated")
Éléments dont le contenu contient une valeur
Éléments dont le contenu est vide	$('E:has(F)')
	Visual Selector
	sélecteur de filtre d'attribut
$('E[attr ^=value]')	E
$('E[attr $=value]')	E avec l'attribut attr se terminant par value
$('E[attr *=value] ' )	E
$('E[attr][attr *=value]')	peuvent être utilisés ensemble
Filtre d'élément enfant
$('E:ntième-enfant(n) ')	Le nième nœud enfant de E
$('E:nth-child(3n+1)')	L'index des nœuds E Child qui sont conformes à l'expression 3n+1
$('E:nth-child(even)')	Le nœud enfant de E avec un nombre pair
$('E:nth-child(odd)')	Le nœud enfant de E dont l'index est un nombre impair
$ ('E :first-clild')	Le premier nœud enfant de tous les E
$('E:last-clild')	Le dernier enfant nœud de tous les E
$('E:only-clild')	Le nœud enfant de E avec un seul nœud enfant unique
Sélecteur d'élément de formulaire
$('E:type')	Saisie de type spécifique
$(':checked')	La case à cocher ou la radio sélectionnée
$('option : selected')	Option sélectionnée

Méthode de filtrage

.find(sélecteur) Rechercher la collection Les nœuds enfants de chaque élément

$('li.item-ii').find('li').css('background-color', 'red');

.filter(selector) Filtrer les éléments de la collection actuelle

$('li').filter(':even').css('background-color', 'red');

Méthode de base

.ready(handler ) Méthode exécutée une fois le chargement du document terminé, différente de window.onload

$(document).ready(function() {  // Handler for .ready() called.});

.each(function(index,element)) traversant la collection Chaque élément

$("li" ).each(function( index ) {
  console.log( index + ": " + $(this).text() );
});

jQuery.extend( target [, object1 ] [, objectN ] ) Fusionner des objets

var object = $.extend({}, object1, object2);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!