Maison  >  Article  >  interface Web  >  Comment jQuery convertit les objets sélectionnés en objets DOM d'origine_jquery

Comment jQuery convertit les objets sélectionnés en objets DOM d'origine_jquery

WBOY
WBOYoriginal
2016-05-16 16:45:091267parcourir

Dans jQuery, la collection renvoyée par la sélection d'éléments sur une page est un objet jQuery plutôt que l'objet DOM d'origine. Ainsi, seules les méthodes jQuery peuvent être exécutées. Si vous souhaitez exécuter des méthodes et des propriétés DOM sur l'ensemble de sélection, la collection doit être convertie. à un objet DOM

Par exemple, vous ne pouvez pas l'utiliser comme ceci :

$('div').innerHTML = "hello world"; propriété du DOM et non une propriété de l'objet jQuery. Si vous voulez vraiment faire cela, vous devez alors convertir l'objet jQuery en objet DOM. Il existe deux méthodes

①jQuery fournit une méthode de base. get(), donc ce qui précède peut être écrit comme $('div') .get().innerHTML = "hello world"

Bien sûr, cela correspond à la situation où il n'y a qu'un seul div dans la page. S'il y a plusieurs div.

Alors cette méthode n'est pas facile à utiliser, vous devez modifier le code pour sélectionner en passant la valeur d'index pour get(index). $("div").get(0).innerHTML = "hello world";

Bien sûr, vous pouvez utiliser la boucle $.each intégrée de jQuery pour effectuer toutes les opérations d'affectation
$div1 = $("div").get();




Copier le code

Le code est le suivant : $.each($div1 , function(index, val) { val.innerHTML = 'lc' index; });

②Nous pouvons utiliser [ ] pour utiliser des tableaux. Obtenez le contenu sous la forme

Par exemple, $('div')[0] .innerHTML = "hello world";
Jetons un coup d'œil à un exemple complet




Copier le code
Le. le code est le suivant : </ titre> </div></head> <div class="codebody" id="code86237"><corps> <br><h3>Livres</h3> <br><li>Structure de données et algorithme avec Javascript</li> <br><li>Nodejs opérationnel</li> <br><li>Node js avec expert PHP</li> ><li>Sharp jQuery</li> <br><li>Javascript professionnel</li> <br></ol> 1.10.2.min.js"></script> <br><script type="text/javascript"> <br>$(document).ready(function() { <br>var lis = $('ol li').get().reverse(); <br>$ol = $('ol'); <br> $ol1 = $ol.clone(false, false); .empty(); <br>$.each(lis, function(index, val) { <br>$ol1.append('< li>' val.innerHTML '</li>'); <br> }); <br>$ol1.appendTo('body'); <br></script> ;/span> <br><br> <br>Je vais maintenant ajouter le processus de conversion des objets DOM en objets jQuery <br><br>Ici, j'utilise cet exemple <br><br><br><.><br>Copiez le code<br><br><br> Le code est le suivant :<br><br> <br><html> </titre> </.> </div><style type="text/css"> <br>.cliqué{ <br>largeur : 100 px  hauteur : 40 px <br>bordure : 1px solide #cba ; <br>rayon de bordure : 3px ; <div class="codetitle">} <span></style> <a style="CURSOR: pointer" data="64211" class="copybut" id="copybut64211" onclick="doCopy('code64211')"></head> <u><corps> ; cli" onclick="click(this)">Cliquez sur moi</a> </u><script type="text/javascript" src="jquery -1.10.2.min.js"></script> ; </a><script type="text/javascript"> </span>function click(it){ </div>$(it).addClass( <div class="codebody" id="code64211">console.log('yes'); ); <br>} <br></script> <br></body> <br></html> <br><br> <br>Voici le processus de conversion de notre objet DOM en un Objet jQuery. <br><br>Remarque : en fait, il fait référence à notre objet lien a. C'est un objet DOM ordinaire, et nous l'utilisons dans l'événement onclick. Transmettez-le. <br><br> Ensuite, nous utilisons $() pour encapsuler l'objet DOM, puis nous pouvons utiliser la fonction addClass.</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration:</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent:<a class="dBlack" title="JS génère du code de fonction pour les compétences arrays_javascript aléatoires non répétitives" href="http://m.php.cn/fr/faq/12594.html">JS génère du code de fonction pour les compétences arrays_javascript aléatoires non répétitives</a></span><span>Article suivant:<a class="dBlack" title="JS génère du code de fonction pour les compétences arrays_javascript aléatoires non répétitives" href="http://m.php.cn/fr/faq/12599.html">JS génère du code de fonction pour les compétences arrays_javascript aléatoires non répétitives</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!</p></div><div class="footermid"><a href="http://m.php.cn/fr/about/us.html">À propos de nous</a><a href="http://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="http://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>