recherche

Maison  >  Article  >  interface Web  >  La merveilleuse utilisation de la fonction d'usine de jQuery $()

La merveilleuse utilisation de la fonction d'usine de jQuery $()

无忌哥哥
无忌哥哥original
2018-06-29 10:49:223515parcourir

La merveilleuse utilisation de la fonction d'usine de jQuery $()

1 Comprendre la structure du DOM : éléments ancêtres, éléments parents, éléments enfants, éléments frères, chaque élément est un objet DOM

. 2. Vous devez d'abord utiliser la fonction d'usine $() pour convertir l'objet DOM en objet jQuery avant de pouvoir utiliser les méthodes de jQuery

3 $ (sélecteur) : Pack/convertir l'objet DOM obtenu par. sélection dans l'objet jquery

4. La différence entre l'objet jQuery et l'objet DOM :

4-1 : l'objet jquery consiste à empaqueter un ou un groupe d'objets DOM et à les traiter uniformément par défaut. , il est livré avec une boucle Itération

4-2 : L'objet DOM correspond à un ou plusieurs éléments visuels de la page, qui fournissent des matières premières pour l'objet jquery

Conversion entre DOM. objet et objet jquery :

5-1 : Convertir l'objet DOM en objet jquery : $()

5-2 : Convertir l'objet jquery en objet DOM : get(index) ou [index]

Remarque : $() est un packager d'objets DOM Tant que vous le supprimez un par un, ce sera un objet DOM

6.$() Résumé : Convertir les objets DOM. dans des objets jQuery afin que vous puissiez utiliser les méthodes jQuery pour traiter les éléments de la page de manière uniforme et rapide 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的工厂函数$()的妙用</title>
</head>
<body>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ul>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//任务:将第一个列表项背景换成天蓝色
//1.先用原生的js来实现:getElementsByTagName()是原生DOM对象上的方法
// document.getElementsByTagName(&#39;li&#39;)[0].style.backgroundColor = &#39;skyblue&#39;
//2.用jqery来实现 :css()是定义在jquery对象上的方法
// $(&#39;li:first-child&#39;).css(&#39;backgroundColor&#39;,&#39;skyblue&#39;)
//思考?能不能直接在jQuery对象上调用原生DOM对象的方法呢?答案是否定的
// $(&#39;li:first-child&#39;).style.backgroundColor = &#39;skyblue&#39;
//思考?能不能在原生DOM对象上面调用jquery中的方法呢?答案是否定的
// document.getElementsByTagName(&#39;li&#39;)[0].css(&#39;backgroundColor&#39;,&#39;skyblue&#39;)
//这是为什么呢?,因为这是二个不同的对象,下面我们进行测试
// document.write((document.getElementsByTagName(&#39;li&#39;)[0] === $(&#39;li:first-child&#39;)) ? &#39;我们完全一样&#39; : &#39;我们不一样&#39;)
//将jquery对象转为DOM对象,再调用原生对象方法
$(&#39;li&#39;)[0].style.backgroundColor = &#39;coral&#39;
$(&#39;li&#39;).get(2).style.backgroundColor = &#39;cyan&#39;
//将DOM对象转为jquery对象,就是使用工厂函数 $(),前面已说过,不更多言
</script>
</body>
</html>
.

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!

jquery 循环 对象 dom 选择器
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Téléchargement et introduction de jQueryArticle suivant：Téléchargement et introduction de jQuery

Articles Liés

Voir plus