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