Rumah > Artikel > hujung hadapan web > Ringkasan pengalaman menggunakan jquery_jquery

Ringkasan pengalaman menggunakan jquery_jquery

WBOYasal: 2016-05-16 15:58:271030semak imbas

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>

4.objek DOM dan penukaran objek jQuery

Kod untuk mendapatkan objek DOM adalah seperti berikut:

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

Kod untuk mendapatkan objek jQuery adalah seperti berikut:

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

objek jQuery ke objek DOM

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

objek DOM ke objek jQuery

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

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:

8f1d350f4a973a900d7bfaf7df3086202cacc6d41bbb37262a98f745aa00fbf0

a1b1be49b9eeb0917b64e1bfac5836be2cacc6d41bbb37262a98f745aa00fbf0

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

function $(id) {

  return document.getElementById(id);
}

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";
}

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";
}

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Berkongsi pengalaman menggunakan kaedah Ganti dalam kemahiran JS_javascriptArtikel seterusnya：Berkongsi pengalaman menggunakan kaedah Ganti dalam kemahiran JS_javascript

Artikel berkaitan

Lihat lagi