Comprendre les opérations de base de jquery sur les éléments en dix minutes

Cet article vous présente un résumé des fonctions courantes de jquery, y compris comment obtenir, déplacer, créer et modifier des éléments. J'espère qu'il sera utile à tout le monde.

Introduction à jQuery

jQuery est une bibliothèque de classes de JS qui encapsule certaines fonctions dans JS, rendant les opérations DOM simples, rendant le code concis et facile à utiliser, et prend en charge l'écriture en chaîne, une bonne compatibilité.

L'idée de conception et l'utilisation principale de jQuery sont les suivantes : sélectionnez un élément de page Web, puis effectuez certaines opérations dessus.

La particularité de jQuery est qu'après avoir utilisé jQuery pour obtenir les éléments correspondants, il ne renvoie pas ces éléments correspondants. Au lieu de cela, il renvoie des objets jQuery (objets construits par jQuery), et cet objet peut opérer sur ces éléments correspondants.

Les fonctions que jQuery peut réaliser peuvent certainement être réalisées par JS, mais pas nécessairement l'inverse.

Laissez window.jQuery = window.$ et abrégez jQuery en $.

Comment obtenir des éléments avec jQuery

Il suffit de mettre une expression de sélection dans le constructeur $(), puis d'obtenir l'élément sélectionné. L'expression de sélection peut être un sélecteur CSS ou une expression spécifique à jQuery.

// CSS选择器
$(document) // 选择整个文档对象
$('#xxxID') // 选择ID为xxx的元素
$('div.xxxClass') // 选择Class为xxx的元素
$('input[name=first]') // 选择类名属性为first的元素

// jQuery特有表达式
$('a:first') // 选择网页中第一个a元素
$('tr:odd') // 选择表格的奇数行
$('#myForm:input') // 选择表单中的input元素
$('div:visible') // 选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

Comment créer des éléments avec jQuery

Passez simplement le nouvel élément directement dans le constructeur jQuery.

Le nouvel élément créé ne sera pas automatiquement inséré dans la page. Nous devons également spécifier explicitement l'emplacement où il est inséré dans la page.

Par exemple : créez une paire de balises 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a

$(function(){
let $h1 = $(&#39;<h1></h1>&#39;) // 创建元素h1
$(&#39;body&#39;).append($h1) // 将元素h1放入到body里（用append表示成为body的最后一个子元素）
}

Utilisez div par exemple :

$('div').prepend('') // 给div添加一个大儿子（即添加到最前）
$('div').append(选择器/jQuery对象) // 给div添加一个小儿子（即添加到最后）
$(&#39;<h2>xxx</h2>&#39;).appendTo(选择器/jQuery对象) // 在选择器选中的元素的子元素里，将“xxx”添加到最后

Comment jQuery déplace les éléments

Méthode 1 : déplacer l'élément directement

$('div').insertAfter($('p')) // 将元素div移动到元素p后面

méthode deux : Déplacez les autres éléments pour que la fonction objectif atteigne la position souhaitée

$('p').after($('div')) // 把元素p放到元素div前

La différence entre ces deux méthodes : les objets renvoyés sont différents. L'objet renvoyé par la première méthode est div et l'objet renvoyé par la deuxième méthode est p.

Différentes façons de déplacer des éléments :

.insertAfter()和.after() // 在现存元素的外部，从后面插入元素
.insertBefore()和.before() // 在现存元素的外部，从前面插入元素
.appendTo()和.append() // 在现存元素的内部，从后面插入元素
.prependTo()和.prepend() // 在现存元素的内部，从前面插入元素

Comment jQuery modifie les attributs des éléments

Utilisez attr() pour modifier les attributs des éléments et leur contenu attr est l'abréviation d'attribut, qui est l'abréviation de setAttribute&getAttribute dans JS. Le fait que attr prenne une valeur ou attribue une valeur est déterminé par les paramètres de la fonction.

Par exemple :

$('img').attr('width','100px') // 为属性'width'赋值'100px'

Utilisation :

$(selector).attr(attribute) // 返回被选元素的属性值
$(selector).attr(attribute.value) // 返回被选元素的属性&值
$(selector).attr(attribute,function(index,oldvalue)) // 用函数返回值设置被选元素的属性&值
$(selector).attr({attribute1:value,attribute2:value...}) // 为被选一个及以上的元素设置属性&值，可一次修改多个属性的属性值

Supplément : La troisième façon d'utiliser ci-dessus signifie : utiliser la valeur de retour de la fonction pour attribuer des valeurs d'attribut à l'attribut. le sélecteur et la valeur actuelle de la propriété. Par exemple :

$('button').click(function(){
    $('img').attr('width',function(n,v){
     return v-50;  // 点击按钮图片宽度减少50
    })
})

Opération en chaîne de jQuery

Après avoir sélectionné un élément de page Web, effectuez une série d'opérations dessus, et toutes les opérations peuvent être connectées ensemble et écrites sous la forme d'une chaîne. Il s'agit du type de chaîne de jQuery. opération.

Par exemple : $('div').find('h3').eq(2).html('Hello'); Cette ligne de code peut être divisée comme suit

$('div') // 找到div元素
  .find('h3') // 选择其中的h3元素
  .eq(2) // 选择第3个h3元素
  .html('Hello'); // 将它的内容改为Hello

jQuery fournit également une opération de retour. end (), afin que le résultat de l'opération puisse être reculé d'un pas.

$('div')
　.find('h3')
　.eq(2)
　.html('Hello')
　.end() // 退回到选中所有的h3元素的那一步
　.eq(0) // 选中第一个h3元素
　.html('World') // 将它的内容改为World

Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery

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!