Tutoriel de base jQuery pour utiliser divers elements_jquery

Les exemples de cet article décrivent les opérations de jQuery sur les éléments, y compris les opérations de base, la sélection des éléments sur lesquels opérer et le traitement des éléments DOM. Il a une bonne valeur de référence pour apprendre jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Les bases

ensemble d'objets jquery :

$() : collection d'objets jquery

Obtenir des éléments dans l'ensemble d'objets jquery :

Récupérez l'élément javascript dans le wrapper en utilisant index :

var temp = $('img[alt]')[0]

Utilisez la méthode get de jquery pour obtenir les éléments javascript dans l'ensemble d'objets jquery :

var temp = $('img[alt]').get(0)

Utilisez la méthode eq de jquery pour obtenir les éléments de l'objet jquery dans l'ensemble d'objets jquery :

$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()

Convertir l'objet jquery défini en tableau javascript :

var arr = $('label+button').toArray()

Tous les éléments de bouton du même niveau derrière l'étiquette sont convertis en tableaux JavaScript

Index de l'ensemble d'objets jquery :
var n = $('img').index($('img#id')[0]) Remarque : Le paramètre index() est un élément javascript
var n = $('img').index('img#id') est équivalent à la ligne précédente S'il n'est pas trouvé, renvoie -1
. var n = $('img').index() obtient l'index de img dans le même élément de niveau

Ajoutez plus de jeux d'objets jquery à l'ensemble d'objets jquery :
Utilisez des virgules :

$('img[alt],img[title]')

Utilisez la méthode d'ajout :

$('img[alt]').add('img[title]')

Prenez différentes méthodes pour différents objets jquery :

$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');

Ajouter des éléments nouvellement créés à l'ensemble d'objets jquery :

$('p').add('<div></div>');

Supprimer des éléments de l'ensemble d'objets jquery :

$('img[title]').not('[title*=pu]')
$('img').not(function(){return !$(this).hasClass('someClassname')})

Filtrer l'ensemble d'objets jquery :
$('td').filter(function(){return this.innerHTML.match(^d $)}) filtre td

contenant des nombres

Obtenir un sous-ensemble d'objets jquery

$('*').slice(0,4) Un nouvel ensemble d'objets jquery contenant les 4 premiers éléments
$('*').slice(4) Un nouvel ensemble d'objets jquery contenant les 4 premiers éléments
$('div').has('img[alt]')

Convertir les éléments dans l'ensemble d'objets jquery :

var allIds = $('div').map(function(){
 return (this.id==undefined) ? null : this.id;
}).get();

L'exemple ci-dessus peut être converti en un tableau javascript via la méthode get.

Parcourez les éléments dans l'ensemble d'objets jquery :

$('img').each(function(n){
 this.alt = '这是第['+n+']张图片，图片的id是' + this.id;
})
$([1,2,3]).each(function(){alert(this);})

Obtenez un ensemble d'objets jquery en utilisant les relations entre les éléments :

$(this).closest('div') Par exemple, dans quel div le bouton déclenché se produit
$(this).siblings('button[title="Close"]')Tous les éléments frères, à l'exclusion de lui-même
$(this).children('.someclassname')Tous les éléments du nœud enfant, à l'exclusion des nœuds enfants en double
$(this).closest('') est proche de l'élément ancêtre
$(this).contents() est un ensemble d'objets jquery composés de contenus d'éléments. Par exemple, vous pouvez obtenir le contenu de l'élément