jquery使用經(jīng)驗(yàn)小結(jié)

更新時(shí)間：2015年05月20日 09:27:35 投稿：hebedich

本文給大家分享的是個(gè)人在使用jQuery的過(guò)程中總結(jié)的5點(diǎn)比較重要的知識(shí)點(diǎn)，這里推薦給小伙伴們，有需要的童鞋可以參考下。

1，今天發(fā)現(xiàn)jquery獲取的dom對(duì)象除了jquery對(duì)象外，還可以訪(fǎng)問(wèn)原來(lái)的對(duì)象，只要加一個(gè)[]就行了，原來(lái)還有這樣的功能，之前沒(méi)仔細(xì)研究。

2，用了first-child,nth-child(n)，獲取元素集合里面的第幾個(gè)元素。

3，用Jquery訪(fǎng)問(wèn)nodeText節(jié)點(diǎn)，通過(guò)訪(fǎng)問(wèn)原來(lái)的對(duì)象，nextSibling訪(fǎng)問(wèn)。訪(fǎng)問(wèn)是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.DOM對(duì)象和jQuery對(duì)象轉(zhuǎn)換

獲取DOM對(duì)象代碼如下：

//獲取DOM對(duì)象
var div1 = document.getElementById("div1");
div1.innerHTML = "oec2003";

獲取jQuery對(duì)象代碼如下:

//獲取jQuery對(duì)象
var div1 = $("#div1");
div1.html("oec2003");

jQuery對(duì)象轉(zhuǎn)DOM對(duì)象

//因?yàn)閍jQuery對(duì)象是一個(gè)數(shù)組對(duì)象，所以轉(zhuǎn)換為DOM對(duì)象時(shí)要用索引的形式
var $div1 = $("#div1"); //jQuery對(duì)象
var div1 = $div1[0]; //轉(zhuǎn)換為了DOM對(duì)象
var div2 = $div1.get(0); //和上面一行效果一樣
div1.innerHTML = "oec2003";

DOM對(duì)象轉(zhuǎn)jQuery對(duì)象

//DOM對(duì)象轉(zhuǎn)jQuery只需用$包裝即可
var div1 = document.getElementById("div1");
var $div1 = $(div1); //轉(zhuǎn)換為了jQuery對(duì)象
$div1.html("oec2003");

5.解決沖突

有時(shí)會(huì)有jQuery和其他的庫(kù)或自己寫(xiě)的一些公共腳本文件一起使用的場(chǎng)景，就有可能會(huì)出現(xiàn)$沖突的問(wèn)題，沖突的解決分兩種情況：

1、jQuery庫(kù)在其他庫(kù)之后引用，如下所示：

復(fù)制代碼代碼如下:

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>

<script type="text/javascript" src="Scripts/common.js"></script>

在common.js中有對(duì)$重新定義，代碼如下：

function $(id) {

  return document.getElementById(id);
}

下面是在jQuery中解決沖突的代碼，有四種方式：

//方式1
jQuery.noConflict(); //將$控制權(quán)移交出去，以前使用$的地方都改用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(); //在函數(shù)內(nèi)部繼續(xù)使用$
jQuery(function ($) {
  alert($("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式4
jQuery.noConflict(); //在函數(shù)內(nèi)部繼續(xù)使用$另一種方式
(function ($) {
  $(function(){
    alert($("#span1").html());
  });
})(jQuery);
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

2、jQuery庫(kù)在其他庫(kù)之前使用

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

以上所述就是本文給大家分享的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: