Que fait $ dans jquery ?

Les fonctions sont : 1. En tant que wrapper jQuery, utilisez des sélecteurs pour sélectionner les éléments DOM, la syntaxe "$("selector""); 2. Préfixe de fonction, comme préfixe de l'espace de noms des fonctions utilitaires générales, par exemple " $.trim(sString);"; 3. Résolvez le conflit dans la fonction window.onload; 4. Créez un élément DOM, par exemple "$("

This is a good story")" ; 5. Personnaliser les méthodes pour étendre jQuery ; 6. Utiliser jQuery et d'autres bibliothèques ; 7. Configurer les gestionnaires de préparation des documents.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.

1. En tant que wrapper jQuery, utilisez des sélecteurs pour sélectionner les éléments DOM

Le rôle d'un sélecteur en CSS est de sélectionner un certain type d'élément (sélecteur de catégorie) ou un certain élément (sélecteur d'ID) sur le page )

, et le "$" dans jQuery en tant que sélecteur sélectionne également un certain type ou type d'éléments, mais jQuery fournit

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

, puis ajouter le style correspondant

h2 a{
/添加CSS属性/
}

Et 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("#showp"") en javascript

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

$("#showp“)

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

doit utiliser une boucle for pour parcourir l'ensemble du DOM

$(".SomeClass")

(4) Sélectionnez tout < p> situé dans les lignes impaires Mark, presque tous les marqueurs peuvent utiliser ": 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. une certaine partie du tableau est très utile lorsque l'attribut d'une colonne n'est plus nécessaire pour 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 sun

$("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". Il peut être vu à partir du code source de jQuery

Pour faciliter l'écriture du code, "$" est généralement utilisé au lieu de "jQuery"

2. Préfixe de fonction

En JavaScript, les développeurs doivent souvent utiliser quelques petites fonctions pour gérer divers détails d'opération, par exemple, lorsque l'utilisateur soumet un formulaire. ,

doit mettre la zone de texte dans Nettoyer les espaces avant et arrière. JavaScript ne fournit pas de fonction similaire à trim() Après avoir introduit

jQuery, vous pouvez utiliser directement la fonction trim(), telle que

$.trim(sString);

.

Le code ci-dessus est équivalent à :

jQuery.trim(sString);

C'est-à-dire La fonction trim() est une méthode de l'objet jQuery

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

Depuis le framework HMTL de. la page doit être complètement chargée avant de pouvoir être utilisée, window.onload est utilisé lors de la programmation du DOM. La fonction

est fréquemment utilisée. 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 résout très bien le problème ci-dessus. Exécutez automatiquement les fonctions une fois la page chargée,

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 des abréviations 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éer des éléments DOM

Utilisez les méthodes DOM. pour créer des nœuds d'éléments, il est généralement nécessaire d'utiliser document.createElement(), document.create TextNode() et appendChild() ensemble, ce qui est très gênant. Cependant, le symbole "$" peut être utilisé dans jQuery pour. créer directement des éléments DOM. 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 insertAfter de Méthode 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. Étendre jQuery - Personnaliser en ajoutant "$"

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 convient pas pour être placé dans l'ensemble du framework jQuery,

用户可以自定义该方法。代码如下：

$.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和其他库

例如：Prototype库也是使用$符号，jQuery提供noConflict函数避免冲突，jQuery.noConflict();把$符号还原到非jQuery库定义的含义。

7、文档就绪处理程序，相当于$(document).ready(...)

例如：

$(function(){...}); //里面的函数会在DOM树加载完之后执行

扩展知识：解决"$"的冲突

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

jQuery.noConflict();

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

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

【推荐学习：jQuery视频教程、web前端视频】

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!