JQuery干貨篇之處理元素
注意這里用的還是我前兩篇用的例子星立，詳情請看我的博客
attr
attr()方法設(shè)置或返回被選元素的屬性值爽茴。
語法：
$(selector).attr(attribute)返回被選元素的屬性值。$(selector).attr(attribute,value)設(shè)置被選元素的屬性和值$(selector).attr(attribute,function(index,oldvalue))設(shè)置被選元素的屬性和值绰垂。
參數(shù) 描述 attribute規(guī)定屬性的名稱室奏。 function(index,oldvalue)規(guī)定返回屬性值的數(shù)。該函數(shù)可接收并使用選擇器的 index 值和當(dāng)前屬性值劲装。
實(shí)例：
$("img").filter(":first").attr('src'); //得到屬性
$("img").each(function (index,elem) {
if(index%2==0)
$(elem).attr("src",'lily.png'); //設(shè)置屬性
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={ //使用映射對象一次設(shè)置多個(gè)值
src:'lily.png',
style: 'border: thick double red'
};
$("img:eq(1)").attr(attrs);
removeAttr
removeAttr()方法從被選元素中移除屬性。
語法：
$(selector).removeAttr(attribute)這里的attribute是屬性的名字
實(shí)例：
$("img:first").removeAttr("src"); //刪除屬性src
addClass
addClass()方法向被選元素添加一個(gè)或多個(gè)類
語法：
$(selector).addClass(class)這里的class是類名如果需要添加多個(gè)類，中間用空格隔開
$(selector).addClass(function(index,oldclass))這里的index是索引六剥，oldClass是原來就有的類名该默，都是可選參數(shù)栓袖。這個(gè)函數(shù)的返回的就是要添加的類名
實(shí)例：
$("img:even").addClass("redBar"); //向偶數(shù)的img添加類redBar
$("img").addClass(function (index,currentClass) { //這里的currentClass就是原來有的類名，可選
if(index==1)
return 'blueBar'; //第二個(gè)img應(yīng)用blueBar這個(gè)類
else
return 'redBar'; //這里需要注意的是必指，對同一個(gè)img應(yīng)用類的時(shí)候梅割，因?yàn)檫@個(gè)類的定義有優(yōu)先級泌类，上面定義會(huì)被后面定義的覆蓋，所以要注意類定義的位置
})
$("img").filter(":odd").addClass("redBar").end().filter(":even").addClass("blueBar"); //鏈?zhǔn)秸{(diào)用
$("img").addClass("blueBar redBar"); //添加兩個(gè)類
hasClass
hasClass()方法檢查被選元素是否包含指定的class
語法：
$(selector).hasClass(class)//返回值是false和true
實(shí)例：
console.log($("img:odd").hasClass("redBar"));
toggleClass
toggleClass() 對設(shè)置或移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。該方法檢查每個(gè)元素中指定的類苞轿。如果不存在則添加類，如果已設(shè)置則刪除之契邀。這就是所謂的切換效果
語法：
$(selector).toggleClass(class,switch)class必需的椭迎，用來規(guī)定添加或移除class的指定元素，如需規(guī)定若干class简软，請使用空格來分隔類名痹升。switch是boolean可選參數(shù)，規(guī)定是否添加或移除class
$(selector).toggleClass(function(index,class),switch)index表示索引，class表示選擇器當(dāng)前擁有的類
實(shí)例：
$("img").toggleClass("redBar"); //這里對所有的img在redBar這個(gè)類之間切換
$("img").toggleClass("redBar blueBar"); //在兩個(gè)類之間來回的切換
$("<button>ToggleClass</button>").appendTo("#buttonDiv").click(function (e) {
$("img").toggleClass('redBar blueBar'); //在兩種class之間切換皮钠，如果有就刪除，沒有的就添加
e.preventDefault();
})
//下面添加一個(gè)按鈕款侵，完成同時(shí)添加多個(gè)圖片的效果
$("<button>ToggleClass</button>").appendTo("#buttonDiv").click(function (e) {
$("img").toggleClass(function (index,currentClass) {
if(index%2==0)
return 'blueBar'; //動(dòng)態(tài)的切換，這里是偶數(shù)就切換blue
else
return 'redBar blueBar'; //這里是奇數(shù)的圖片在兩種顏色來回的切換
});
e.preventDefault();
})
css
css()方法返回或設(shè)置匹配的元素的一個(gè)或多個(gè)樣式屬性，這里只說css晾浴，還有其他的設(shè)置css樣式請看w3School
語法：
$(selector).css(name)返回第一個(gè)匹配元素的CSS屬性值。name是css屬性的名稱
$(selector).css(name,value)設(shè)置所有匹配元素的指定CSS屬性切省。name表示屬性名稱，value表示屬性的值
$(selector).css(name,function(index,value))此函數(shù)返回要設(shè)置的屬性值芙盘。接受兩個(gè)參數(shù)，index為元素在對象集合中的索引位置，value是原先的屬性值囚衔。name表示要設(shè)置的屬性名稱曙聂，返回值就是要設(shè)置的屬性值
實(shí)例：
$("label").css('font-size','30px'); //設(shè)置字體大小
$("label").css('font-size','+=10'); //使用相對值設(shè)置屬性值断国，在原有的基礎(chǔ)上加上10
console.log($("h1").css('font-family')); //獲取h1標(biāo)簽的字體
var cssValues={
'border':'thick double red',
'font-size':'1.5em'
};
$("label").css(cssValues); //同時(shí)設(shè)置多個(gè)屬性
text
text()方法方法設(shè)置或返回被選元素的文本內(nèi)容坐漏。當(dāng)該方法用于返回一個(gè)值時(shí)街夭，它會(huì)返回所有匹配元素的組合的文本內(nèi)容(會(huì)刪除HTML標(biāo)記)
語法：
$(selector).text()當(dāng)該方法用于返回一個(gè)值時(shí)，它會(huì)返回所有匹配元素的組合的文本內(nèi)容（會(huì)刪除HTML標(biāo)記）埃碱。$(selector).text(content)當(dāng)該方法用于設(shè)置值時(shí)啃憎，它會(huì)覆蓋被選元素的所有內(nèi)容。$(selector).text(function(index,oldcontent))index表示索引,oldcontent表示選擇器當(dāng)前的文本內(nèi)容
html
html()方法返回或設(shè)置被選元素的內(nèi)容(inner HTML)叹阔。如果該方法未設(shè)置參數(shù)，則返回被選元素的當(dāng)前內(nèi)容。
語法：
$(selector).html()當(dāng)使用該方法返回一個(gè)值時(shí)店印，它會(huì)返回第一個(gè)匹配元素的內(nèi)容炫贤。
$(selector).html(content)當(dāng)使用該方法設(shè)置一個(gè)值時(shí)，它會(huì)覆蓋所有匹配元素的內(nèi)容。
$(selector).html(function(index,oldcontent))使用函數(shù)來設(shè)置所有匹配元素的內(nèi)容。index- 可選跃闹。接收選擇器的index位置,oldcontent- 可選。接收選擇器的當(dāng)前內(nèi)容
val
val()方法返回或設(shè)置被選元素的值,元素的值是通過value屬性設(shè)置的。該方法大多用于input元素,如果該方法未設(shè)置參數(shù)，則返回被選元素的當(dāng)前值
語法：
$(selector).val(value)設(shè)置文本域的值為value$(selector).val()得到文本域的值$(selector).val(function(index,oldvalue))設(shè)置文本域的值，這里函數(shù)的返回值將會(huì)用來設(shè)置文本域的值，index表示元素索引囤萤，oldvalue表示選擇器當(dāng)前文本域的值
