Maison > Article > interface Web > Résumé des connaissances de base de jQuery_jquery
1、基础
jquery对象集:
$():jquery对象集合
获取jquery对象集中的元素:
使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0]
使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0)
使用jquery的eq方法获取jquery对象集中的jquery对象元素:
$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()
jquery对象集转换成javascript数组:
var arr = $('label+button').toArray()label后面所有同级button元素,转换成javascript数组
jquery对象集的索引:
var n = $('img').index($('img#id')[0])注意:index()参数是javascript元素
var n = $('img').index('img#id') 等同于上一行 找不到返回-1
var n = $('img').index()img在同级元素中的索引
向jquery对象集中添加更多的jquery对象集:
使用逗号:$('img[alt],img[title]')
使用add方法:$('img[alt]').add('img[title]')
对不同的jquery对象集中采取不同的方法:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
向jquery对象集中添加新创建的元素:
$('p').add('
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
Obtenez 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(){
Retour (this.id==undefined) ? null : this.id;
}).get();Convertir en tableau javascript via la méthode get
Parcourez les éléments dans l'ensemble d'objets jquery
$('img').each(function(n){
This.alt = 'Ceci est la [' n ']ième image, l'identifiant de l'image est' this.id;
})
$([1,2,3]).each(function(){alert(this);})
Utiliser la relation entre les éléments pour obtenir un ensemble d'objets jquery
$(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 adjacent à 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
$(this).find(p span)
var hasImg = $('*').is('img');
$().hide()
$().addClass('')
$().html('')
$('a').size()Nombre d'éléments
$('p:pair')
$('tr:ntième-enfant(1)')
$('body > div') élément enfant direct
$('a[href=$='pdf']')Sélectionner
en fonction des attributs
$(div:has(a)) filtre
$.trim()
$(document).ready(function(){});
$(function(){});
$('
').insertAfter();
if(item)(){}else{} test lâche
If(item != null) Test recommandé, peut distinguer nul et indéfini
2. Sélectionnez l'élément à exploiter
Selon le nom de la balise : $('a')
Basé sur l'identifiant : $('#id')
Selon le nom de la classe : $('.someclassname')
Remplissez plusieurs conditions : $('a#id.someclassname') ou $('div,span')
Tous les nœuds enfants d'un élément : $(p a.someclassname)
Nœud enfant direct d'un élément : $(ul.myList > li)
Selon le nom de l'attribut :
$(a[href^='http://']) commence par...
$(href$='.pdf') se termine par...
$(form[method]) form
contenant l'attribut de méthode
$(intput[type='text'])
$(intput[nom!=''])
$(href*='some')contient
Le premier élément après un certain élément : $(E F) correspond à F, et F est le premier élément après E
Un élément après un certain élément : $(E~F) correspond à F, et F est un élément après E
Position de passage :
$(li:first)Le premier li
$(li:dernier)dernier li
$(li:even)pair ligne li
$(li:impair)ligne impaire li
$(li:eq(n))Le nième élément, l'index commence à 0
$(li:gt(n))Les éléments après le nième élément, l'index commence à 0
$(li:lt(n))L'élément avant le nième élément, l'index commence à 0
$(ul:first-child)Le premier li
de la liste
$(ul:last-child)Le dernier li de la liste
$(ul:nth-child(n))Le nième li
dans la liste
$(ul:enfant unique)ul sans frère li
$(ul:nth-child(even))La ligne paire li dans la liste, impaire est le nombre de lignes li
$(ul:nth-child(5n 1))li
dans la liste divisé par 5 avec le reste 1
Par filtre :
$(input:not(:checkbox))
$(':not(img[src*="dog"])')
$('img:not([src*="chien"])')
$(div:has(span))
$('tr:has(img[src$="pu.png"])')
$(tr:animated)tr
dans un état animé
$(input:button) inclut une entrée
de type bouton, réinitialiser, soumettre
$(input:checkbox) équivaut à $(input[type=checkbox])
$(span:contains(food))span
contenant le texte food
$(input:disabled)désactiver
$(input:enabled)Activer
$(input:file) équivaut à $(input[type=file])
$(:en-tête)h1 à h6
$(entrée : caché)
$(input:image) équivaut à $(input[type=image])
$(:input) inclut les éléments d'entrée, de sélection, de zone de texte et de bouton
$(tr:parent)
$(input:password) équivaut à $(input[type=password])
$(input:radio) équivaut à $(input[type=radio])
$(input:reset) est équivalent à $(input[type=reset]) ou $(button[type=reset])
$('.clssname:selected')
$(input:submit) est équivalent à $(input[type=submit]) ou $(button[type=submit])
$(input:text) équivaut à $(input[type=text])
$(div:visible)
3. Traitement des éléments DOM
Manipuler les attributs des éléments :
$('*').each(function(n){
This.id = this.tagName n;
})
Obtenir la valeur de l'attribut : $('').attr('');
Définir la valeur de l'attribut :
$('*').attr('title', function(index, previousValue){
Return previousValue 'Je suis l'élément 'index' et mon nom est 'this.id;
}) Définir une valeur pour un attribut
$('entrée').attr({
Valeur : '',
titre : ''
}); Définir des valeurs pour plusieurs attributs
Supprimer les attributs :
$('p').removeAttr('value');
Ouvrez tous les liens dans de nouvelles fenêtres :
$('a[href^="http://"]').attr('target',"_blank");
Évitez de soumettre le formulaire plusieurs fois :
$("form").submit(function(){
$(":submit", this).attr("disabled","disabled");
})
Ajouter le nom de la classe : $('#id').addClass('')
Supprimer le nom de la classe : $('#id').removeClass('')
Changer le nom de la classe : $('#id').toggleClass('') supprime le nom de la classe s'il existe, ajoute le nom de la classe s'il n'existe pas
Déterminez s'il contient un nom de classe : $('p:first').hasClass('') $('p:first').is('')
Renvoie une liste de noms de classes sous forme de tableau :
$.fn.getClassNames = fonction(){
var nom = this.attr('someclsssname');
si(nom != null){
Renvoie nom.split(" ");
>
d'autre
{
Retourner [];
>
>
Définir le style :
$('div.someclassname').css(function(index, currentWidth){
Renvoie la largeur actuelle 20 ;
});
$('div').css({
Curseur : 'pointeur',
Bordure : '1px noir uni',
Remplissage : '12px 12px 20px 20x',
fondCouleur : 'Blanc'
});
À propos de la taille :
$(div).width(500)
$('div').hauteur()
$('div').innerHeight()
$('div').innerWidth()
$('div').outerHeight(true)
$('div').outerWidth(false)
À propos du positionnement :
Position de référence $('p').offset() par rapport au document
$('p').position() compense la position relative de l'élément parent
$('p').scrollLeft() valeur de décalage de la barre de défilement horizontale
$('p').scrollLeft(value)
$('p').scrollTop()
$('p').scrollTop(value)
Contenu de l'élément pertinent :
$('p').html()
$('p').html('')
$('p').text()
$('p').text('')
Contenu supplémentaire
Ajoutez un morceau de code HTML à la fin de l'élément : $('p').append('some text');
Éléments existants dans le dom à la fin de l'élément : $('p').append($(a.someclassname))
Ajouter au début de l'élément : $("p").prepend()
Ajouter devant l'élément : $("span").before()
Ajouter après l'élément : $("span")after()
Ajouter du contenu à la fin : appendTo(targets)
Ajouter du contenu au début : prependTo(targets)
Ajouter du contenu au début de l'élément : insertBefore(targets)
Ajouter du contenu à la fin de l'élément : $('
Élément d'enveloppe :
$('a.someclassname').wrap("
Supprimer l'élément :
$('.classname').remove() supprime l'élément, et les événements et données liés à l'élément seront également supprimés
$('.classname').detach() supprime les éléments mais conserve les événements et les données
$('.classname').empty() ne supprime pas l'élément, mais efface le contenu de l'élément
Copier l'élément :
$('img').clone().appendTo('p.someclassname')
$('ul').clone().insertBefore('#id')
Élément de remplacement :
$('img[alt]').each(function(){
$(this).replaceWith('' $(this).attr('alt') '');
})
$("p").replaceAll("")
À propos de la valeur de l'élément de formulaire :
$('[name="radioGroup"]:checked').val() obtient la valeur du bouton radio Si aucun n'est sélectionné, il renvoie undefined
.
var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
Renvoie $(this).val();
}).toArray(); Récupère la valeur de la zone de sélection multiple
Pour