Maison > Article > interface Web > Résumé de l'expérience d'utilisation de jquery_jquery

Résumé de l'expérience d'utilisation de jquery_jquery

WBOYoriginal: 2016-05-16 15:58:271024parcourir

1. Aujourd'hui, j'ai découvert qu'en plus de l'objet jquery, l'objet dom obtenu par jquery peut également accéder à l'objet d'origine. Il s'avère qu'il existe une telle fonction, mais je ne l'ai pas fait. étudiez-le attentivement avant.

2, utilisez first-child, nth-child(n) pour obtenir le premier élément de l'ensemble d'éléments.

3. Utilisez Jquery pour accéder au nœud nodeText en accédant à l'objet d'origine et à nextSibling. L'accès est nextSibling.nodeValue;

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>Zephyr's Document</title>
  <script src="http://common.cnblogs.com/script/jquery.js"></script>
  <style type="text/css" media="screen">
  /*<![CDATA[*/
 
  /*]]>*/
  </style>
  <script type="text/javascript">
  $(function(){
  var tempBr=$("br");
  tempBr.each(function(index,doElem){
    doElem.nextSibling.nodeValue=doElem.nextSibling.nodeValue.replace(/\s{6}/g,"");
  })})
  </script>
  </head>
  <body>
  asdf
    <br />
    "   asdf"
    <br />
    "   asdf"
    <br />
    "   asdf"
  </body>
</html>

4.Conversion d'objets DOM et d'objets jQuery

Le code pour obtenir l'objet DOM est le suivant :

//获取DOM对象
var div1 = document.getElementById("div1");
div1.innerHTML = "oec2003";

Le code pour obtenir l'objet jQuery est le suivant :

//获取jQuery对象
var div1 = $("#div1");
div1.html("oec2003");

Objet jQuery en objet DOM

//因为ajQuery对象是一个数组对象，所以转换为DOM对象时要用索引的形式
var $div1 = $("#div1"); //jQuery对象
var div1 = $div1[0]; //转换为了DOM对象
var div2 = $div1.get(0); //和上面一行效果一样
div1.innerHTML = "oec2003";

Objet DOM en objet jQuery

//DOM对象转jQuery只需用$包装即可
var div1 = document.getElementById("div1");
var $div1 = $(div1); //转换为了jQuery对象
$div1.html("oec2003");

5. Résoudre les conflits

Parfois, il existe des scénarios dans lesquels jQuery est utilisé avec d'autres bibliothèques ou des fichiers de script publics écrits par vous-même, et il peut y avoir un problème de conflit $. Il existe deux situations pour résoudre le conflit :

1. La bibliothèque jQuery est référencée après les autres bibliothèques, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

8f1d350f4a973a900d7bfaf7df3086202cacc6d41bbb37262a98f745aa00fbf0

a1b1be49b9eeb0917b64e1bfac5836be2cacc6d41bbb37262a98f745aa00fbf0

Il y a une redéfinition de $ dans common.js, le code est le suivant :

function $(id) {

  return document.getElementById(id);
}

Voici le code pour résoudre les conflits dans jQuery. Il existe quatre manières :

//方式1
jQuery.noConflict(); //将$控制权移交出去，以前使用$的地方都改用jQuery
jQuery(document).ready(function () {
  alert(jQuery("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式2
var $j=jQuery.noConflict(); //定义快捷方式
$j(document).ready(function () {
  alert($j("#span1").html());
});

window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式3
jQuery.noConflict(); //在函数内部继续使用$
jQuery(function ($) {
  alert($("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式4
jQuery.noConflict(); //在函数内部继续使用$另一种方式
(function ($) {
  $(function(){
    alert($("#span1").html());
  });
})(jQuery);
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

2. Utilisez la bibliothèque jQuery avant les autres bibliothèques

//如果先引用jQuery脚本，可以不使用noConflict
//jQuery.noConflict(); 
jQuery(document).ready(function () {
  alert(jQuery("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

Ce qui précède est tout le contenu partagé avec vous dans cet article. J'espère que vous l'aimerez.

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：Partage d'expérience dans l'utilisation de la méthode Replace dans les compétences JS_javascriptArticle suivant：Partage d'expérience dans l'utilisation de la méthode Replace dans les compétences JS_javascript

Articles Liés

Voir plus