jQuery——入門（三）JQuery DOM操作（屬性操作/樣式操作/文件過濾）
jQuery——入門（三）JQuery DOM操作（屬性操作/樣式操作/文件過濾）
一、DOM屬性操作
1、屬性
(1)、attr() 方法
語法：$(selector).attr(name|property|key, value|fn)
設定或獲取被選元素的屬性值，設定多個值時，與css()方法用法相似
使用attr()函式來操作元素的屬性，包含查詢、賦值
name：屬性名稱
key，function（index,attr）：屬性名稱，函式賦值操作
案例1：name描述：返回文件中所有影象的src屬性值。
JQuery程式碼：$("img").attr("src");
案例2：property描述：為所有影象設定src和alt屬性
JQuery程式碼：$("img").attr({scr："test.jpg"，alt："Test Image"});
案例3：key,value 描述：為所有影象設定src屬性
JQuery程式碼：$("img").attr("src"，"test.jpg");
案例4：key,回撥函式描述：把src屬性的值設定為title屬性的值
JQuery程式碼：$("img").attr("title",function(){return this.src});
(2)、removeAttr() 方法
語法：$(selector).removeAttr(name);
刪除匹配元素的name屬性（從每一個匹配的元素中刪除一個屬性）
name：要刪除的屬性名稱
案例：將文件中影象的src屬性刪除
HTML程式碼：<img src = "test.jpg">
JQuery：$("img").removeAttr("src");
輸出結果：<img />
(3)、prop() 方法
語法：$(selector).prop(name|property|key, value);
獲取或者設定匹配元素selector的屬性值。（獲取在匹配的元素集中的第一個元素的屬性值。）
案例1：name描述：選中複選框為true，沒選中為false
JQuery程式碼：$("input[type='checkbox']").prop("checked");
案例2：properties描述：禁用頁面上的所有複選框
JQuery程式碼：$("input[type='checkbox']").prop({
disabled：true
});
案例3：key,value 描述：禁用和選中所有頁面上的複選框
JQuery程式碼：$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
案例4：key，回撥函式描述：通過函式來設定所有頁面上的複選框被選中
JQuery程式碼：$("input[type='checkbox']").prop("checked",function(i,val){
return !val;
});
(4)、removeProp() 方法
語法：$(selector).removeProp(name);
移除匹配元素selector的屬性值（用來刪除由.prop()方法設定的屬性集）
案例：設定一個段落數字屬性，然後將其刪除。
HTML程式碼：<p> </p>
JQuery程式碼：
var $para = $("p");
$para.prop("新增的屬性值", 1234);
$para.append("新增的屬性值追加到p標籤裡面的值為: ", String($para.prop("新增的屬性值")), ". ");
$para.removeProp("新增的屬性值");
$para.append("移除後的屬性值為: ", String($para.prop("新增的屬性值)), ". ");
輸出結果：新增的屬性值追加到p標籤裡面的值為: 1234. 移除後的屬性值為:undefined.
2、CSS操作（設定和切換CSS類）
(1)、addClass()
語法：$(selector).addClass(class_name); 給指定的元素新增一個class樣式名稱
案例1：為匹配的元素加上“active”類
CSS程式碼：.active{color:red;}
.bg{background:#0000FF;}
HTML程式碼：<p>我是一個p標籤</p>
JQuery程式碼：
$("p").addClass("red");
$("p").addClass("active bg");
輸出結果：HTML為：<p class="active">我是一個p標籤</p>
<p class="active bg">我是一個p標籤</p>
案例2：給li加上不同的class
HTML程式碼：
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
JQuery程式碼：
$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});
(2)、removeClass()
語法：$(selector).removeClass(class_name); 移除指定元素的樣式名稱
案例1：為匹配的元素刪除“red”類
HTML程式碼：<p class="active">我是一個p標籤</p>
JQuery程式碼：$("p").removeClass("active");
輸出結果：HTML為：<p>我是一個p標籤</p>
案例2：刪除匹配元素的所有類
JQuery程式碼：$("p").removeClass();
案例3：刪除最後一個元素上與前面重複的class
JQuery程式碼：
$("li:last").removeClass(function() {
return $(this).prev().attr('class');
});
(3)、toggleClass()
語法：$(selector).toggleClass(class_name); 如果不存在就新增一個class_name樣式名稱，反之亦然！
案例1：為匹配的切換“active”類
HTML程式碼：<p>我是一個p標籤</p>
JQuery程式碼：$("p").toggleClass("active");
案例2：每點選三下加上一次 'highlight' 類HTML程式碼：
<p>JQuery程式碼：</p>
JQuery程式碼：
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
案例3：根據父元素來設定class屬性
JQuery程式碼：
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});
注：jquery物件.addClass("類名1 類名2 ...")
jquery物件.removeClass("類名1 類名2 ....")
jquery物件.toggleClass("類名1 類名2 ....",引數2) 是一個互斥的方法，它是addClass和removeClass的一個結合
引數2是一個布林值 可選 如果為true 就等價於addClass()只能增加類
如果為false 就等價於removeClass()只能刪除類
$(this).toggleClass("active",false);
3、HTML程式碼/文字/值
(1)、html()
語法：$(selector).html();
獲取第一個匹配元素的html內容，內容包含子元素
注意：不能用於XML文件
擴充套件：$(selector).html(value); 給匹配的元素中間新增value資料,並替換掉原來的內容
案例1：返回p元素的內容
HTML程式碼：
<p>
hello world
<span>我是p標籤裡面的span</span>
</p>
JQuery程式碼：$('p').html();
輸出結果：
hello world
<span>我是p標籤裡面的span</span>
案例2：設定所有 p 元素的內容
HTML程式碼：<p></p>
JQuery程式碼：$("p").html("Hello <b>world</b>!");
輸出結果：hello world
注：獲取 === jquery物件.html() 可以獲取jquery物件裡所有的內容，包含標籤 並且應用到多個jquery物件時，只能獲取第一個jquery裡內容
設定 === jquery物件.html(內容) 內容可以是純文字還可以是標籤
(2)、text()
語法：$(selector).text();
獲取第一個匹配元素的文字內容，內容不包含元素標籤——文字中的標籤會被解析成普通文字。
擴充套件：$(selector).text(value); 給指定元素內容設定文字內容，並替換掉原來的值
案例1：返回p元素的文字內容。
HTML程式碼：
<p>
hello world
<span>我是p標籤裡面的span</span>
</p>
JQuery程式碼：$("p").text();
輸出結果：
hello world
我是p標籤裡面的span
案例2：設定所有p元素的文字內容。
HTML程式碼：<p></p> <p></p>
JQuery程式碼：$("p").text("Hello world!");
輸出結果：hello world hello world
案例3：使用函式來設定所有匹配元素的文字內容。
JQuery程式碼：
$("p").text(function(n){
return "這個 p 元素的 index 是：" + n;
});
注：獲取 === jquery物件.text() 可以獲取jquery物件裡所有的內容，不包含標籤，只獲取純文字 應用到多個jquery物件時，可以獲取所有的jquery物件裡的純文字
設定 === jquery物件.text(內容) 內容只能是純文字
(3)、val() 獲取表單元素中的值
語法：val(value) 給匹配的表單元素賦值
案例1：獲取文字框中的值
JQuery程式碼：$("input").val();
案例2：設定文字框的值
JQuery程式碼：$("input").val("hello world!");
案例3：設定文字框的值
JQuery程式碼：
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
注： 獲取表單裡的值用val() jquery物件.val()
設定時 jquery物件.val(內容)
二、樣式操作（CSS屬性操作）
1、css()方法
語法：$(selector).css(); 獲取或者設定指定元素的樣式
擴充套件：
$(selector).css(c_key)；獲取元素指定名稱c_key的樣式值
$(selector).css(c_key, c_value)；給指定元素的樣式c_key賦值c_value
$(selector).css({c_key:c_value[,c_key:c_value]});給指定元素賦多個樣式屬性
案例1：取得第一個段落的color樣式屬性的值。
JQuery程式碼：$("p").css("color");
案例2：將所有段落的字型顏色設為紅色並且背景為藍色。
JQuery程式碼：$("p").css({ "color": "#ff0011", "background": "blue" });
案例3：將所有段落字型設為紅色
JQuery程式碼：
$("p").css("color","red");
案例4：逐漸增加div的大小
JQuery程式碼：
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
2、位置
(1)、offset()
返回或設定匹配元素相對於文件的偏移（位置）
獲取指定元素的偏移值，只針對可見元素有效。備註：可以設定屬性值
有兩個整數型別屬性：left、top,單位畫素；不包含邊距邊框。
語法： $(selector).offset();
擴充套件：
$(selector).offset().left/top 獲取
$(selector).offset({x:100,y:100}), 設定 自動設定成了定位
案例：HTML程式碼：
<div>hello,我有偏移量</div>
CSS程式碼：div{width:100px;height:100px;background-color:pink;margin:100px;}
JQuery程式碼1：
var a=$("div").offset().top;獲取距離文件的偏移量 用offset()
var b=$("div").offset().left;
alert(a); //100
alert(b); //108
JQuery程式碼2：$("div").offset({top:500});
===》相當於 div的css被設定為.div{position:relative;top:500px;}
注： jquery物件.offset().top 距離上部的偏移量
jquery物件.offset().left 距離左邊的偏移 ，一般是沒有right和bottom
設定距離文件的偏移量：
jquery物件.offset({top:數值,left:數值}) 數值是沒有單位的，設定時 引數就算有一對也得用{}
屬性名和屬性值之間用:隔開，設定時需要注意：如果之前正常文件流，設定偏移量後，元素自動設定為定位了。
(2)、position()
獲取指定元素相對於父元素的偏移值; 備註：不能設定屬性值
有兩個整數型別屬性：left、top，單位畫素；包含邊距邊框的計算
語法：$(selector).position();
案例：獲取div的偏移量
HTML程式碼：
<div class="box">
hello
<div class="content">hello2</div>
</div>
CSS程式碼：
.box{width:300px;height:300px;background:#0000FF;position:relative}
.content{width: 50px;height: 50px;background: red;position:absolute;top:100px;left:100px;}
JQuery程式碼：
$("div").offset().top;
$(".content").offset().left;
$("div").position().top;
$(".content").position().left; //相對於父元素的一個偏移量
輸出結果：8 8 8 100
注：position()這個方法只有獲取
備註：子元素絕對定位，父元素相對定位的情況下，position()和offset()的值有操作的必要性，如果都是預設定位的情況下position()和offset()的值都是相對視窗的
1.正常情況下，position()和offset()表示的都是某個物件在瀏覽器視窗中的位置
2.如果某個元素使用了margin進行了偏移，offset()就要計算偏移值。position()不會計算偏移值
3.如果A元素包含在B元素中，A元素和B元素使用預設定位，offset()和position()值，參考1和2
4.如果A元素包含在B元素中，A元素絕對定位，B元素相對定位
A元素身為子元素offset()偏移，還是原來的相對瀏覽器視窗的偏移left和top
但是position()的值，就是相對於父元素左上角座標的left和top
(3)、scrollTop()
返回或設定匹配元素的滾動條的垂直位置 （獲取匹配元素相對滾動條頂部的偏移）
語法：$(selector).scrollTop();
案例：HTML程式碼：
<div class="parent">
<div class="child">
hello，我是child內容<br />
hello，我是child內容<br />
hello，我是child內容<br />
hello，我是child內容<br />
</div>
</div>
<button>點選獲取</button>
CSS程式碼：
.parent{width:100px;height:100px;border:1px solid red;overflow:auto}
.child{width:200px;height:200px;}
JQuery程式碼1：
$(function(){
$("button").click(function(){
var st=$(".parent").scrollTop();
console.log(st);//控制檯日誌 0
console.info(st);//控制檯資訊 0
console.error(st);//控制檯錯誤資訊 0
console.warn(st);//控制檯警告資訊 0
});
});
JQuery程式碼2：
$(function(){
$("button").click(function(){
$(".parent").scrollTop(50); //設定相對滾動條頂部的偏移
});
});
(4)、scrollLeft()
返回或設定匹配元素的滾動條的水平位置（獲取匹配元素相對滾動條左側的偏移）
語法：$(selector).scrollLeft();
案例：HTML程式碼：
<div class="parent">
<div class="child">
hello，我是child內容<br />
hello，我是child內容<br />
hello，我是child內容<br />
hello，我是child內容<br />
</div>
</div>
<button>點選獲取</button>
CSS程式碼：
.parent{width:100px;height:100px;border:1px solid red;overflow:auto}
.child{width:200px;height:200px;}
JQuery程式碼1：
$(function(){
$("button").click(function(){
var st=$(".parent").scrollLeft();
console.log(st);//控制檯日誌 0
});
});
JQuery程式碼2：
$(function(){
$("button").click(function(){
$(".parent").scrollLeft(50); //設定相對滾動條左側的偏移
});
});
3、尺寸
(1)、width()
獲取匹配元素的設定寬度值
語法：$(selector).width();
(2)、height()
獲取匹配元素的設定高度值
語法：$(selector).height();
(3)、innerWidth()
獲取匹配元素的寬度值，不包括邊框，包含padding值
語法： $(selector).innerWidth();
(4)、innerHeight()
獲取匹配元素的寬高度值，不包括邊框，包含padding值
語法： $(selector).innerHeight();
(5)、outerWidth()
獲取匹配元素的寬度值，包含padding、border值
語法： $(selector).outerWidth();
(6)、outerHeight()
獲取匹配元素的高度值，包含padding、border值
語法： $(selector).outerHeight();
案例：HTML程式碼：
<div class="p">
<div class="c"></div>
</div>
CSS程式碼：.p{width:500px;height:500px;background-color:red}
.c{width:200px;height:200px;background-color:#0000FF;border:10px solid #000;padding:10px;margin: 10px;}
JQuery程式碼：$(function(){
var cW=$(".c").width(); //width 就是設定的width的值 得到的是一個數值
var cH=$(".c").height(); //height 就是設定的width的值 得到的是一個數值
var innerW=$(".c").innerWidth(); //width+padding
var innerH=$(".c").innerHeight(); //height+padding
var outW=$(".c").outerWidth(); //width+padding+border
var outH=$(".c").outerHeight(); //height+padding+border
var outW2=$(".c").outerWidth(true); //width+padding+border
alert(cW); //200
alert(cH); //200
alert(innerW);//220
alert(innerH);//220
alert(outW);//240
alert(outH);//240
alert(outW2);//260
// $(".p").height("800px"); 設定高度
// $(".c").innerHeight(260);
})
注：width === width
innerWidth ==== width+padding
outerWidth ==== width+padding+border
outerWidth(引數) 引數是一個布林值 預設是false 不包含margin值 如果引數為true時 得到的值是width+padding+border+margin
三、文件過濾（篩選）
1、過濾
(1)、eq()
語法：$(selector).eq(index); 匹配一個給定索引值的元素
(2)、first()
語法：$(selector).first(); 獲取匹配的第一個元素
(3)、last() 獲取匹配的最後一個元素
語法：$(selector).last();
(4)、has() 匹配含有選擇器所匹配的元素的元素
語法：$(selector).has();
(5)、hasClass()
語法：$(selector).hasClass(c_value); // 判斷（true/false）
獲取class樣式包含指定值c_value的元素
(6)、filter() 篩選出與指定表示式匹配的元素集合，這個方法用於縮小匹配的範圍。用逗號分隔多個表示式
語法： $(selector).filter(expr|obj|ele|fn)
(7)、is()
根據選擇器、DOM元素或 jQuery 物件來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表示式就返回true。
語法： $(selector).is(expr|obj|ele|fn)
(8)、not() 從選中元素列表中，刪除與表示式expr匹配的元素
語法：$(selector).not(expr); // :not(expr)
(9)、slice() 選取一個匹配的子集
語法： slice(start,[end])
start：開始選取子集的位置。第一個元素是0.如果是負數，則可以從集合的尾部開始選起。
end：結束選取自己的位置，如果不指定，則就是本身的結尾。
(10)、gt(); 匹配所有大於給定索引值的元素
語法：$(selector).gt(index);
2、查詢
(1)、children() 獲取包含指定元素所有子元素的集合
語法：$(selector).children(); 獲取包含指定元素所有子元素的集合
(2)、find()
語法：$(selector).find(expr); 常用，要從選中的元素中，查詢匹配find選擇器選中所有的滿足表示式expr的元素
(3)、next() 獲取匹配元素後面緊鄰的同級別元素
語法：$(selector).next();
(4)、nextAll() 查詢當前匹配元素之後的所有同級別元素
語法：$(selector).nextAll(); //a~b
(5)、nextUntil() 查詢當前元素之後所有的同輩元素，直到遇到匹配的那個元素為止。
語法：$(selector).nextUntil();
(6)、parent() 獲取包含指定元素唯一父元素的集合
語法：$(selector).parent();
(7)、parents() 獲取包含所有祖先元素的集合，不包括根元素
語法：$(selector).parents();
(8)、parentsUntil() 根據表示式選擇器獲取指定的祖先元素下面所有的元素。
語法：語法：$(selector).parentsUntil(expr);
(9)、siblings() 查詢當前匹配元素的所有兄弟元素
語法：$(selector).siblings();
(10)、prev() 獲取匹配元素前面緊鄰的同級別元素
語法：$(selector).prev();
(11)、prevAll() 查詢當前元素之前所有的同級別的元素
語法：$(selector).prevAll();
案例1：eq()、first()、last()、not()、even()、gt() 應用
HTML程式碼：
JQuery程式碼及結果：
案例2：prev()、prevAll()、siblings() 應用
HTML程式碼：
JQuery程式碼及結果：
3、串聯
add()
addBack()
end()
contents()
注：串聯語法以及案例請參考: http://jquery.cuishifeng.cn/
五、術語解釋以及疑難問題
prop（）和attr（）
JQuery中，prop()操作的DOM屬性，attr()操作的是HTML屬性，某些情況下HTML屬性和DOM屬性有一定的差異
如標籤元素的DOM屬性有nodeName、nodeType等等，但是沒有對應的HTML屬性。在操作的過程中注意即可。