日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

發(fā)布時間:2023/12/10 编程问答 38 豆豆
生活随笔 收集整理的這篇文章主要介紹了 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。 ? 2.jQuery對象和DOM對象的相互轉(zhuǎn)換。 ? 良好的書寫風(fēng)格: var $input=$("input") jQuery獲取的對象在變量前面加上$。 <1>jQUery對象轉(zhuǎn)成DOM對象,兩種方法:[index]和get(index) a:var $cr=$("#cr") ? ?//jQuery對象 ? ? var cr=$cr[0] ? ?//DOM對象 b:var $cr=$("#cr") ? ?//jQuery對象 ? ? var cr=$cr.get(0); ? ?//DOM對象 ? <2>DOM對象轉(zhuǎn)成jQuery對象 var cr=document.getElementById("cr"); ? ?//DOM對象 var $cr=$(cr); ? ? 3.解決與其他庫的沖突 jQuery.noConflict()。 jQuery用$作為自身的快捷方式。 ? 4.使用jQuery的優(yōu)點 <1>簡潔的寫法 <2>支持CC1到CCS3 <3>完善的處理機制 ? ? 運行上面的代碼瀏覽器就會報錯! 但是如果這么寫的話: ? $('#tt').css("color","red"); ? 瀏覽器不會因為沒有這個元素而報錯! ? 5.jQuery選擇器 jQuery選擇器是jQuery的重中之重! ? jQuery過濾選擇器與CSS中的偽類選擇器相似。 ? <1>偶數(shù)與奇數(shù)選擇器 偶數(shù):$("tr:even") 奇數(shù):$("tr:odd") ? <2>CSS3 偽類選擇器奇偶數(shù) p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; } <2>表單類型選擇器 ? <3>轉(zhuǎn)義選擇器防止出錯 ? ? 6.DOM操作分類(1:DOM Core 2.HTML-DOM 3.CSS-DOM) 1.DOM Core DOM Core并不專屬于JavaScript,任何一種支持DOM的程序設(shè)計語言都可以使用它。它的用途并不僅限于處理網(wǎng)頁。也可以用來處理任何一種使用標記語言編寫出來的文檔,例如:XML? 2.HTML_DOM 在使用JavaScript和DOM為HTML文件編寫腳本時,有許多專屬于HTML——DOM的屬性。 HTML_DOM提供了一些更加簡明的記號來描述各種HTML元素的屬性。 如: document.forms element.src 只能用于WEB ? 3.CSS_DOM
CSS_DOM是針對CSS的操作。主要是獲取和設(shè)置style對象的各種屬性。 通過改變style對象的各種屬性。改變不同效果。 ? element.style.color=“red”; ? 7.遍歷節(jié)點 1.children() 2.next() 3.prev() 4.siblings() 5.closest() ? ? 8.jquey的css <1>可以使用opacity設(shè)置透明度,jQuery已經(jīng)處理好了兼容性問題。 $("p").css("opacity","0.5"); ? <2>$("p").height(100) ? ?//100默認單位是px,如果要用別的單位,必須要用字符串 ? <3>offset()方法 返回相對視窗的偏移 var offset=$("p").offset(); var left=offset.left; var top=offset.top; ? <4>position() //返回相對最近一個position樣式的偏移。 var position=$("p").position(); var left=position.left; var top=position.top; ? <5>scrollTop()和scrollLeft() //返回滾動條距離頂端的距離與距離左側(cè)的距離。 var $p=$("p"); var top=$p.scrollTop(); var left=$p.scrollLeft(); //同樣可以設(shè)置滾動到指定位置: $("ab").scrollTop(300);

?

? <6>pageX與pageY,獲取鼠標在頁面上的位置 $(document).mousemove(function(e){$("span").text("X: " + e.pageX + ", Y: " + e.pageY); });

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/zqzjs/p/4918841.html

總結(jié)

以上是生活随笔為你收集整理的锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。