Maison >interface Web >js tutoriel >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
h2 a{ /添加CSS属性/ }
$("h2 a")(2) La syntaxe générale des sélecteurs dans jquery est la suivante :
$(selector)
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 e388a4556c0f65e1904146cc1a846bee 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")
$("td:nth-child(1)")
$("li > a")
=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 difficileLa 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 = $("e388a4556c0f65e1904146cc1a846beeThis is a good story5f557f62ae7ac7a14e0b1cb564790dfc")
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!