只有jQuery對象才能調用jQuery類庫的各種函數,同樣有些dom對象的屬性和方法在jQuery上也是無法調用的,不過基本上jQuery類庫提供的函數包含了所有的dom操作。這就需要我們知道如何將jQuery對象和DOM的相互轉換的方法。
1.jQuery對象就是通過jQuery包裝DOM對象后產生的對象。
2.jQuery對象和DOM對象的相互轉換。
良好的書寫風格:
jQuery獲取的對象在變量前面加上$。
<1>jQUery對象轉成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對象轉成jQuery對象
var cr=document.getElementById("cr"); //DOM對象
var $cr=$(cr);
3.解決與其他庫的沖突
jQuery.noConflict()。
jQuery用$作為自身的快捷方式。
4.使用jQuery的優點
<1>簡潔的寫法
<2>支持CC1到CCS3
<3>完善的處理機制
運行上面的代碼瀏覽器就會報錯!
但是如果這么寫的話:
瀏覽器不會因為沒有這個元素而報錯!
5.jQuery選擇器
jQuery選擇器是jQuery的重中之重!
jQuery過濾選擇器與CSS中的偽類選擇器相似。
<1>偶數與奇數選擇器
偶數:$("tr:even")
奇數:$("tr:odd")
<2>CSS3 偽類選擇器奇偶數
<2>表單類型選擇器
<3>轉義選擇器防止出錯
6.DOM操作分類(1:DOM Core 2.HTML-DOM 3.CSS-DOM)
1.DOM Core
DOM Core并不專屬于JavaScript,任何一種支持DOM的程序設計語言都可以使用它。它的用途并不僅限于處理網頁。也可以用來處理任何一種使用標記語言編寫出來的文檔,例如:XML。
2.HTML_DOM
在使用JavaScript和DOM為HTML文件編寫腳本時,有許多專屬于HTML――DOM的屬性。
HTML_DOM提供了一些更加簡明的記號來描述各種HTML元素的屬性。
如:
只能用于WEB
3.CSS_DOM
CSS_DOM是針對CSS的操作。主要是獲取和設置style對象的各種屬性。
通過改變style對象的各種屬性。改變不同效果。
7.遍歷節點
1.children()
2.next()
3.prev()
4.siblings()
5.closest()
8.jquey的css
<1>可以使用opacity設置透明度,jQuery已經處理好了兼容性問題。
$("p").css("opacity","0.5");
<2>$("p").height(100) //100默認單位是px,如果要用別的單位,必須要用字符串
<3>offset()方法
返回相對視窗的偏移
<4>position()
<5>scrollTop()和scrollLeft()
<6>pageX與pageY,獲取鼠標在頁面上的位置
新聞熱點
疑難解答