Partager des exemples d'idées de conception jQuery

Quel que soit le langage, la réflexion est très importante. Avant de vous plonger dans les détails de jQuery, vous devez avoir une compréhension générale des idées de conception de jQuery. Lorsque vous rencontrez un problème, sachez quelle fonction de jQuery vous devez utiliser, puis trouvez rapidement l'utilisation spécifique dans le manuel. Cet article présentera en détail les idées de conception de jQuery. Jetons un coup d'œil avec l'éditeur ci-dessous.

Sélectionner des éléments

L'idée de conception de base et l'utilisation principale de jQuery est de "sélectionner un élément de page Web, puis d'effectuer une opération dessus". C'est la caractéristique fondamentale qui la distingue des autres bibliothèques JavaScript

La première étape de l'utilisation de jQuery consiste souvent à insérer une expression de sélection dans le constructeur jQuery() (en abrégé $), puis à obtenir l'élément sélectionné

[Élément de sélection CSS simulé]

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('p.myClass') // 选择class为myClass的p元素
$('input[name=first]') // 选择name属性等于first的input元素

[Sélection d'expression unique]

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

[Méthodes de filtrage multiples]

$('p').has('p'); // 选择包含p元素的p元素
$('p').not('.myClass'); //选择class不等于myClass的p元素
$('p').filter('.myClass'); //选择class等于myClass的p元素
$('p').first(); //选择第1个p元素
$('p').eq(5); //选择第6个p元素

Écriture

[Fonctionnalisation de la méthode]

En JavaScript natif, l'opérateur d'affectation est utilisé plus souvent. Dans jQuery, la méthode de transmission des paramètres de fonction est principalement utilisée, c'est-à-dire la fonctionnalisation de la méthode

//原生
window.onload = function(){};
//jQuery
$(function(){});
//原生
p.onclick = function(){};
//jQuery
p.click(function(){});
//原生
p.innerHTML = '123';
//jQuery
p.html('123');

[Opération en chaîne]

Après avoir sélectionné un élément de page Web, vous pouvez effectuer une série de opérations dessus, et toutes les opérations peuvent être connectées ensemble et écrites sous la forme d'une chaîne

$('p').find('h3').eq(2).html('Hello') ;

En panne, cela ressemble à ceci :

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

C'est la fonctionnalité la plus louable et la plus pratique de jQuery. Son principe est que chaque opération jQuery renvoie un objet jQuery, donc différentes opérations peuvent être connectées ensemble

jQuery fournit également la méthode .end(), afin que l'ensemble de résultats puisse être reculé d'un pas

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

【Obtention et attribution de valeurs】

Lors de l'utilisation d'éléments de page Web, l'exigence la plus courante est d'obtenir leurs valeurs ou de leur attribuer des valeurs. jQuery utilise la même fonction pour compléter la valeur (getter) et l'affectation (setter), c'est-à-dire que le "getter" et "assignor" sont combinés en un seul. L'obtention ou l'attribution d'une valeur est déterminée par les paramètres de la fonction

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

Les fonctions communes d'acquisition et d'attribution de valeur sont les suivantes

.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值

Il est à noter que si la L'ensemble de résultats contient plusieurs éléments, puis lors de l'attribution, tous les éléments seront attribués ; lors de la prise de la valeur, seule la valeur du premier élément sera supprimée

[Note].text() est une exception, il supprime le texte de tous les éléments du contenu.

J'espère que cet article vous sera utile.

Recommandations associées :

Pratique du mode proxy et séparation de la lecture et de l'écriture dans les idées de conception PHP

Idées de conception jQuery complètes_jquery

Partage d'idées de conception de mécanismes d'héritage Javascript_compétences Javascript

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!