jquery使用經(jīng)驗(yàn)小結(jié)
1,今天發(fā)現(xiàn)jquery獲取的dom對象除了jquery對象外,還可以訪問原來的對象,只要加一個[]就行了,原來還有這樣的功能,之前沒仔細(xì)研究。
2,用了first-child,nth-child(n),獲取元素集合里面的第幾個元素。
3,用Jquery訪問nodeText節(jié)點(diǎn),通過訪問原來的對象,nextSibling訪問。訪問是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對象和jQuery對象轉(zhuǎn)換
獲取DOM對象代碼如下:
//獲取DOM對象 var div1 = document.getElementById("div1"); div1.innerHTML = "oec2003";
獲取jQuery對象代碼如下:
//獲取jQuery對象 var div1 = $("#div1"); div1.html("oec2003");
jQuery對象轉(zhuǎn)DOM對象
//因?yàn)閍jQuery對象是一個數(shù)組對象,所以轉(zhuǎn)換為DOM對象時要用索引的形式 var $div1 = $("#div1"); //jQuery對象 var div1 = $div1[0]; //轉(zhuǎn)換為了DOM對象 var div2 = $div1.get(0); //和上面一行效果一樣 div1.innerHTML = "oec2003";
DOM對象轉(zhuǎn)jQuery對象
//DOM對象轉(zhuǎn)jQuery只需用$包裝即可 var div1 = document.getElementById("div1"); var $div1 = $(div1); //轉(zhuǎn)換為了jQuery對象 $div1.html("oec2003");
5.解決沖突
有時會有jQuery和其他的庫或自己寫的一些公共腳本文件一起使用的場景,就有可能會出現(xiàn)$沖突的問題,沖突的解決分兩種情況:
1、jQuery庫在其他庫之后引用,如下所示:
<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="Scripts/common.js"></script>
在common.js中有對$重新定義,代碼如下:
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庫在其他庫之前使用
//如果先引用jQuery腳本,可以不使用noConflict //jQuery.noConflict(); jQuery(document).ready(function () { alert(jQuery("#span1").html()); }); window.onload = function () { $("span1").innerHTML = "oec2003"; }
以上所述就是本文給大家分享的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery通過ajax方法獲取json數(shù)據(jù)不執(zhí)行success的原因及解決方法
這篇文章主要介紹了jQuery通過ajax方法獲取json數(shù)據(jù)不執(zhí)行success的原因及解決方法的相關(guān)資料,需要的朋友可以參考下2016-10-10jQuery實(shí)現(xiàn)單擊和鼠標(biāo)感應(yīng)事件
這篇文章主要介紹了jQuery實(shí)現(xiàn)單擊和鼠標(biāo)感應(yīng)事件的方法的相關(guān)資料,需要的朋友可以參考下2015-02-02jquery動畫3.創(chuàng)建一個帶遮罩效果的圖片走廊
今天我們要完成的是一個帶有遮罩效果(補(bǔ)間動畫)的圖片走廊jquery插件:jquery.tranzify.js2012-08-08基于jquery實(shí)現(xiàn)二級聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了基于jquery二級聯(lián)動效果的代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們?nèi)粘i_發(fā)中經(jīng)常會使用到.bind()、.live()、.delegate()和.on(),有些同學(xué)會對這四者存在一些疑慮,所以下面這篇文章主要給大家介紹了關(guān)于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關(guān)資料,需要的朋友可以參考借鑒。2017-08-08jquery實(shí)現(xiàn)商品sku多屬性選擇功能(商品詳情頁)
這篇文章主要介紹了jquery實(shí)現(xiàn)商品sku多屬性選擇功能(商品詳情頁),文中簡單給大家介紹了sku的概念,需要的朋友可以參考下2019-12-12jquery下拉select控件操作方法分享(jquery操作select)
這篇文章主要介紹了jquery下拉select控件操作方法分享(jquery操作select),需要的朋友可以參考下2014-03-03基于jQuery實(shí)現(xiàn)圖片推拉門動畫效果的兩種方法
本文給大家分享兩種方法實(shí)現(xiàn)''推拉門''動畫效果也可以稱作是手風(fēng)琴效果,具體實(shí)現(xiàn)方法大家通過本文一起學(xué)習(xí)吧2017-08-08