Que fait le signe dollar $ dans jQuery ?

Le rôle du signe dollar "$" dans jQuery : 1. En tant que wrapper jQuery, en utilisant des sélecteurs pour sélectionner les éléments du DOM ; 2. En tant que préfixe pour l'espace de noms de plusieurs fonctions utilitaires courantes ; éléments ; 4. Étendre jQuery ; 5. Résoudre les conflits dans la fonction "window.onload".

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.12.4, ordinateur Dell G3.

Tutoriels recommandés : Tutoriel jq

1. Sélecteur

Sélecteur en CSS La fonction de. consiste à sélectionner un certain élément de catégorie (sélecteur de catégorie) ou un certain élément (sélecteur d'ID)

sur la page, tandis que "$" dans jQuery est utilisé comme sélecteur pour sélectionner également une certaine catégorie ou élément A. type d'élément, mais jQuery propose

des méthodes de sélection de plus en plus complètes. Et il gère les problèmes de compatibilité du navigateur pour les utilisateurs

(1) CSS peut utiliser le code suivant pour sélectionner toutes les sous-balises contenues sous la balise

h2 a{
/添加CSS属性/
}

Dans jquery, vous pouvez utiliser le code suivant pour sélectionner toutes les sous-balises contenues sous la balise

, en tant que tableau d'objets à utiliser par javascript

$("h2 a")

(2) La syntaxe générale des sélecteurs dans jquery est la suivante :

$(selector)

ou

jQuery(selector)

où le sélecteur est conforme aux normes CSS3

(3) sélecteur d'identifiant, équivalent à document.getElementById dans javascript ("#showp"")

Vous pouvez voir que la méthode de représentation de jQuery est beaucoup plus simple

$("#showp“)

(3) Sélecteur de catégorie, sélectionnez la catégorie CSS comme tous les éléments de nœud de "SomeClass", en javascript Pour réaliser la même sélection,

doit utiliser une boucle for pour parcourir tout le DOM

$(".SomeClass")

(4) Sélectionnez toutes les balises

situées sur les lignes impaires, presque toutes les balises peuvent être utilisées. : impair" ou ": pair" pour obtenir une sélection impaire et paire

$("p : odd")

(5) La première cellule de toutes les lignes du tableau est la première colonne. Ceci est très utile lors de la modification des propriétés. d'une colonne du tableau Utile. Plus besoin de parcourir le tableau ligne par ligne

$("td:nth-child(1)")

(6) sélecteur enfant, renvoie tous les éléments enfants de la balise

, à l'exclusion de la balise petit-enfant <🎜. >

$("li > a")

(7) Sélectionnez tous les hyperliens, et les attributs href de ces hyperliens se terminent par "pdf". Avec le sélecteur d'attribut, vous pouvez sélectionner divers éléments caractéristiques dans la page

(. "a[href

=pdf]")

Remarque

 : Le signe dollar "$" dans jQuery est en fait équivalent à "jQuery", de It On peut voir dans le code source de jQuery que

pour faciliter l'écriture du code, "$" est généralement utilisé à la place de "jQuery"

2. Préfixe de fonction En JavaScript, les développeurs doivent souvent exécuter quelques petites fonctions pour gérer divers détails d'opération. Par exemple, lorsque l'utilisateur soumet un formulaire,

doit modifier le. l'avant de la zone de texte et le dernier espace sont nettoyés. JavaScript ne fournit pas de fonction similaire à trim() Après avoir introduit

jQuery, vous pouvez utiliser directement la fonction trim(), par exemple <. 🎜>

$.trim(sString);

Le code ci-dessus est équivalent à :

jQuery.trim(sString);

La fonction trim() est une méthode de l'objet jQuery.

3. Résolvez le conflit de la fonction window.onload

Étant donné que le framework HMTL de la page doit être complètement chargé avant de pouvoir être utilisé, donc dans le DOM La fonction window.onload

est fréquemment utilisée lors de la programmation. Si cette fonction doit être utilisée à plusieurs endroits de la page, ou si d'autres fichiers .js contiennent également la fonction window.onload,

Le problème de conflit est très difficile

La méthode ready() dans jQuery est très bon. Il résout le problème ci-dessus, il peut exécuter automatiquement les fonctions après le chargement de la page,

et plusieurs méthodes ready() peuvent être utilisées dans la même page sans entrer en conflit les unes avec les autres. Par exemple,

$(document).ready(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});

jQuery fournit également une abréviation pour le code ci-dessus. Vous pouvez omettre la partie "(document).ready". Le code est le suivant :

$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});

<. 🎜> 4. Créez des éléments DOM

utilisez les méthodes DOM pour créer des nœuds d'éléments. Généralement, document.createElement(), document.create TextNode() et appendChild. () doivent être utilisés ensemble, ce qui est très gênant, et le symbole "$" peut être utilisé pour créer directement des éléments DOM dans jQuery. Par exemple

var oNewP = $("

This is a good story")

Le code ci-dessus est équivalent au code suivant en javascript :

var oNewP = document.createElement("p");// 新建节点

var oText = document.createTextNode("这是一个好故事");

oNewP.appendChild(oText);

De plus, jQuery fournit également la méthode insertAfter() des éléments DOM. Le pseudo-code est le suivant :

$(function(){           // ready函数

var oNewP = $("<p>这是一个好故事</>");// 创建DOM元素

oNewP.insertAfter("#myTarget");// insertAfter()方法

});

<body>

<p id="myTarget">插入到这行文字之后</p>

<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>

</body>

5. Personnalisez et ajoutez "$"

.

jQuery ne peut pas répondre à tous les besoins de tous les utilisateurs, et certains besoins particuliers sont très spécialisés et ne conviennent pas à l'inclusion dans l'ensemble du framework jQuery Les utilisateurs peuvent personnaliser cette méthode. Le code est le suivant :

$.fn.disable = function(){

return this.each(function(){

if(typeof this.disabled != "undefined") this.disabled = true;

});

}

以上代码首先设置".fn.disable",表明为""添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的

然后利用匿名函数定义这个方法，即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在)

6、解决"$"的冲突

如果其他框架也是用了“",会引起冲突，jQuery同样提供了noConflict()方法来解决""冲突问题

jQuery.noConflict();

以上代码可以使""按照其他javascript框架的方式运算，这时再jQuery中便不能在使用“”，而必须使用jQuery，

例如$("p p") 必须写成jQuery("p p").

更多编程相关知识，请访问：编程入门！！

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!