jQuery基礎DOM和CSS操作

學習要點

• DOM操作
• 設定元素及內容
• 元素屬性操作
• 元素樣式操作
• css方法

jquery已經將最常用的DOM操作方法進行了有效封裝。不需要考慮相容性

DOM 簡介

（一）設定元素及其內容

• 方法名html() 獲取元素中HTML內容
• 方法名html(value) 設定元素中HTML內容
• 方法名 text() 獲取元素中文字內容
• 方法名text(value) 設定源生中文字內容
• 方法名val() 獲取表單中的文字
• 方法名val(value) 設定表單中的文字內容

在常規DOM元素中，我們可以使用html() text()方法來獲取內部的資料。
html()方法可以獲取或設定html內容,text()可以獲取或設定文字內容
$("#box").html()             //獲取html內容
$("#box").text()             //獲取文字內容，會自動清理HTML標籤
$("#box").html("<div>www.abc.com</div>") //設定HTML內容
$("#box").text("<div>www.abc.com</div>") //會自動轉義HTML標籤

特別注意的就是當我們使用html()或text()設定元素內容的時候，會清空原來的資料。而我們期待追加資料的話可以

$("#box").html($("#box").html()+"<div>123</div>");//追加資料

如果元素是表單的話，jQuery提供了val()進行獲取或設定內部的文字資料.

$("input").val()    //獲取表單的內容
$("input").val("www.abc.com")  //設定表單內容

(二) 元素屬性操作

$("div").attr("title");               //獲取屬性的屬性值
$("div").attr({                       //設定屬性
   "title":"123",
   "bbb": "234"
})

移除屬性

$("div").removeAttr("title"); //刪除指定的屬性

(三) 元素樣式操作

元素樣式操作包括直接設定CSS方法，增加css類別，類別切換，刪除類別這幾種。

$("#div1").css({
   "width" : "100px",
   "height" : "200px"
})   //設定某個行內多個css樣式

addClass(class) 給某個元素新增一個css類
addClass(class1 class2 class3) 給某個元素新增多個css類
removeClass(class) 刪除某個元素的css類
removeClass(class1 class2 class3) 刪除某個元素的多個css類
toggleClass(class) 來回切換預設樣式和指定樣式

在jquery中提供了一個遍歷的工具專門來處理物件的陣列$.each()方法

$.each(box,function(attr,value){
  alert(attr+"||"+value);
})
//第一次迴圈

$("p").each(function(index,element){
   console.log(index+element.innerHTML)
})
//第二次迴圈標籤

CSS 方法

比如.css(), addClass()等。

• width()長度

width() 獲取某個元素的長度
width(value) 設定某個元素的長度
width(function(index,width){})  //通過匿名函式設定元素長度
$("div").width();  //獲取元素的長度，返回型別為number
$("div").width(500);  //設定元素的長度。直接傳數值。
$("div").width(function(index,value){   //index是索引value是原本值
   return value-500
})

• height() 高度

$("div"),height()   //獲取元素的高度返回型別是num
$("div").height(500);   //設定元素的高度。預設加PX

• innerWidth() 獲取元素的寬度包括內邊距padding
• innerHeight() 獲取元素的高度包括內邊距padding
• outerWidth() 獲取元素的寬度包括邊框border和內邊距padding
• outerHeight() 獲取元素的高度包括border和內邊距padding
• outerWidth(true) 全部包含包括外邊距
• outerHeight(true) 全部包含包括外邊距
• offset() 獲取某個元素相對於視口的偏移位置
• position() 獲取某個元素相對於父元素的便宜位置
• scrollTop() 獲取垂直滾動條的值
• scrollTop(value) 設定垂直滾動條的距離
• scrollLeft() 獲取水平滾動條的值
• scrollLeft(value) 設定水平滾動條的值

$("div").offset().left     //獲取左邊的偏移
$("div").offset().top   //獲取上邊的偏移
$(window).scrollTop()  //獲取當前滾動條距離必須是window
$(window).scrollTop(300)  //設定當前滾動條的距離