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('li')[0].style.backgroundColor = 'skyblue' //2.用jqery来实现 :css()是定义在jquery对象上的方法 // $('li:first-child').css('backgroundColor','skyblue') //思考?能不能直接在jQuery对象上调用原生DOM对象的方法呢?答案是否定的 // $('li:first-child').style.backgroundColor = 'skyblue' //思考?能不能在原生DOM对象上面调用jquery中的方法呢?答案是否定的 // document.getElementsByTagName('li')[0].css('backgroundColor','skyblue') //这是为什么呢?,因为这是二个不同的对象,下面我们进行测试 // document.write((document.getElementsByTagName('li')[0] === $('li:first-child')) ? '我们完全一样' : '我们不一样') //将jquery对象转为DOM对象,再调用原生对象方法 $('li')[0].style.backgroundColor = 'coral' $('li').get(2).style.backgroundColor = 'cyan' //将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!