JQuery乾貨篇之處理元素
注意這裡用的還是我前兩篇用的例子，詳情請看我的部落格
attr
attr()方法設定或返回被選元素的屬性值。語法：
$(selector).attr(attribute)返回被選元素的屬性值。
$(selector).attr(attribute,value)設定被選元素的屬性和值
$(selector).attr(attribute,function(index,oldvalue))設定被選元素的屬性和值。
引數 描述 attribute規定屬性的名稱。 function(index,oldvalue)規定返回屬性值的數。該函式可接收並使用選擇器的 index 值和當前屬性值。 例項：
$("img").filter(":first").attr(`src`); //得到屬性
$("img").each(function (index,elem) {
if(index%2==0)
$(elem).attr("src",`lily.png`); //設定屬性
console.log($(elem).attr("src"));
})
$("img").attr(`src`,function (index,oldValue) { //這裡的oldValue表示原來屬性的值，index是索引
if(oldValue=="rose.png")
return `lily.png`;
else
return `astor.png`;
})
attrs={ //使用對映物件一次設定多個值
src:`lily.png`,
style: `border: thick double red`
};
$("img:eq(1)").attr(attrs);removeAttr
removeAttr()方法從被選元素中移除屬性。語法：
$(selector).removeAttr(attribute)這裡的attribute是屬性的名字例項：
$("img:first").removeAttr("src"); //刪除屬性srcaddClass
addClass()方法向被選元素新增一個或多個類語法：
$(selector).addClass(class)這裡的class是類名如果需要新增多個類，中間用空格隔開
$(selector).addClass(function(index,oldclass))這裡的index是索引，oldClass是原來就有的類名，都是可選引數。這個函式的返回的就是要新增的類名例項：
$("img:even").addClass("redBar"); //向偶數的img新增類redBar
$("img").addClass(function (index,currentClass) { //這裡的currentClass就是原來有的類名，可選
if(index==1)
return `blueBar`; //第二個img應用blueBar這個類
else
return `redBar`; //這裡需要注意的是，對同一個img應用類的時候，因為這個類的定義有優先順序，上面定義會被後面定義的覆蓋，所以要注意類定義的位置
})
$("img").filter(":odd").addClass("redBar").end().filter(":even").addClass("blueBar"); //鏈式呼叫
$("img").addClass("blueBar redBar"); //新增兩個類
hasClass
hasClass()方法檢查被選元素是否包含指定的class語法：
$(selector).hasClass(class)//返回值是false和true例項：
console.log($("img:odd").hasClass("redBar"));
toggleClass
toggleClass() 對設定或移除被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類。如果不存在則新增類，如果已設定則刪除之。這就是所謂的切換效果
語法：
$(selector).toggleClass(class,switch)class必需的，用來規定新增或移除class的指定元素，如需規定若干class，請使用空格來分隔類名。switch是boolean可選引數，規定是否新增或移除class
$(selector).toggleClass(function(index,class),switch)index表示索引，class表示選擇器當前擁有的類例項：
$("img").toggleClass("redBar"); //這裡對所有的img在redBar這個類之間切換
$("img").toggleClass("redBar blueBar"); //在兩個類之間來回的切換
$("<button>ToggleClass</button>").appendTo("#buttonDiv").click(function (e) {
$("img").toggleClass(`redBar blueBar`); //在兩種class之間切換，如果有就刪除，沒有的就新增
e.preventDefault();
})
//下面新增一個按鈕，完成同時新增多個圖片的效果
$("<button>ToggleClass</button>").appendTo("#buttonDiv").click(function (e) {
$("img").toggleClass(function (index,currentClass) {
if(index%2==0)
return `blueBar`; //動態的切換，這裡是偶數就切換blue
else
return `redBar blueBar`; //這裡是奇數的圖片在兩種顏色來回的切換
});
e.preventDefault();
})css
css()方法返回或設定匹配的元素的一個或多個樣式屬性，這裡只說css，還有其他的設定css樣式請看w3School語法：
$(selector).css(name)返回第一個匹配元素的CSS屬性值。name是css屬性的名稱
$(selector).css(name,value)設定所有匹配元素的指定CSS屬性。name表示屬性名稱，value表示屬性的值
$(selector).css(name,function(index,value))此函式返回要設定的屬性值。接受兩個引數，index為元素在物件集合中的索引位置，value是原先的屬性值。name表示要設定的屬性名稱，返回值就是要設定的屬性值例項：
$("label").css(`font-size`,`30px`); //設定字型大小
$("label").css(`font-size`,`+=10`); //使用相對值設定屬性值，在原有的基礎上加上10
console.log($("h1").css(`font-family`)); //獲取h1標籤的字型
var cssValues={
`border`:`thick double red`,
`font-size`:`1.5em`
};
$("label").css(cssValues); //同時設定多個屬性
text
text()方法方法設定或返回被選元素的文字內容。當該方法用於返回一個值時，它會返回所有匹配元素的組合的文字內容(會刪除HTML標記)語法：
$(selector).text()當該方法用於返回一個值時，它會返回所有匹配元素的組合的文字內容（會刪除HTML標記）。
$(selector).text(content)當該方法用於設定值時，它會覆蓋被選元素的所有內容。
$(selector).text(function(index,oldcontent))index表示索引,oldcontent表示選擇器當前的文字內容
html
html()方法返回或設定被選元素的內容(inner HTML)。如果該方法未設定引數，則返回被選元素的當前內容。語法：
$(selector).html()當使用該方法返回一個值時，它會返回第一個匹配元素的內容。
$(selector).html(content)當使用該方法設定一個值時，它會覆蓋所有匹配元素的內容。
$(selector).html(function(index,oldcontent))使用函式來設定所有匹配元素的內容。index– 可選。接收選擇器的index位置,oldcontent– 可選。接收選擇器的當前內容
val
val()方法返回或設定被選元素的值,元素的值是通過value屬性設定的。該方法大多用於input元素,如果該方法未設定引數，則返回被選元素的當前值語法：
$(selector).val(value)設定文字域的值為value
$(selector).val()得到文字域的值
$(selector).val(function(index,oldvalue))設定文字域的值，這裡函式的返回值將會用來設定文字域的值，index表示元素索引，oldvalue表示選擇器當前文字域的值