Ringkasan pengalaman menggunakan jquery

Ringkasan pengalaman menggunakan jquery_jquery

WBOY

Lepaskan： 2016-05-16 15:58:27

asal

1029 orang telah melayarinya

1. Hari ini saya mendapati bahawa sebagai tambahan kepada objek jquery, objek dom yang diperolehi oleh jquery juga boleh mengakses objek asal. Ternyata terdapat fungsi sedemikian, tetapi saya tidak kaji dengan teliti sebelum ini.

2, gunakan first-child, nth-child(n) untuk mendapatkan elemen pertama dalam set elemen.

3. Gunakan Jquery untuk mengakses nod nodeText dengan mengakses objek asal dan nextSibling. Akses ialah 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>

Salin selepas log masuk

4.objek DOM dan penukaran objek jQuery

Kod untuk mendapatkan objek DOM adalah seperti berikut:

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

Salin selepas log masuk

Kod untuk mendapatkan objek jQuery adalah seperti berikut:

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

Salin selepas log masuk

objek jQuery ke objek DOM

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

Salin selepas log masuk

objek DOM ke objek jQuery

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

Salin selepas log masuk

5. Selesaikan konflik

Kadangkala terdapat senario di mana jQuery digunakan bersama-sama dengan perpustakaan lain atau beberapa fail skrip awam yang ditulis oleh anda sendiri, dan mungkin terdapat masalah konflik $ Terdapat dua situasi untuk menyelesaikan konflik:

1. Pustaka jQuery dirujuk selepas perpustakaan lain, seperti yang ditunjukkan di bawah:

Salin kod Kod adalah seperti berikut:

Terdapat takrifan semula $ in common.js, kodnya adalah seperti berikut:

function $(id) {

  return document.getElementById(id);
}

Salin selepas log masuk

Berikut ialah kod untuk menyelesaikan konflik dalam jQuery Terdapat empat cara:

//方式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";
}

Salin selepas log masuk

2. Gunakan perpustakaan jQuery sebelum perpustakaan lain

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

Salin selepas log masuk

Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini saya harap anda akan menyukainya.