jquery 第二章
上次講了jquery如何選取元素候齿，這次說(shuō)一下如何修改元素屬性
添加元素
append()
在選擇元素最后位置添加
prepend()
在選擇元素最開(kāi)始位置添加
after()
before()
原先的代碼是
<div id=div1>
<div>1</div>
</div>
<div id=div2>
<div>2</div>
</div>
比如同樣是添加<div>nihao</div>
$(#div1).append('<div>nihao</div>')
結(jié)果是
<div id=div1>
<div>1</div>
<div>nihao</div>
</div>
<div id=div2>
<div>2</div>
</div>
$(#div1).prepend('<div>nihao</div>')
結(jié)果是
<div id=div1>
<div>nihao</div>
<div>1</div>
</div>
<div id=div2>
<div>2</div>
</div>
$(#div1).after('<div>nihao</div>')
結(jié)果是
<div id=div1>
<div>nihao</div>
</div>
<div>1</div>
<div id=div2>
<div>2</div>
</div>
$(#div1).before('<div>nihao</div>')
結(jié)果是
<div>1</div>
<div id=div1>
<div>nihao</div>
</div>
<div id=div2>
<div>2</div>
</div>
append/prepend 是在選擇元素內(nèi)部嵌入
after/before 是在元素外面追加
獲取修改內(nèi)容和屬性
1.text()
設(shè)置或返回所選元素的文本內(nèi)容
2.html()
設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記)
3.val()
設(shè)置或返回表單字段的值
以上3個(gè)函數(shù)說(shuō)明很清楚了 設(shè)置（括號(hào)內(nèi)不為空未設(shè)置）或者返回（括號(hào)內(nèi)為空時(shí)返回）html跟text區(qū)別是html取到的子元素包含元素的html標(biāo)簽
4.attr()
方法用于獲取或修改屬性值拷邢，但是跟上面三個(gè)函數(shù)有所不同
取值$("#nihao").attr("href")
設(shè)值$("#nihao").attr("href","https://www.baidu.com")
5.removeAttr()
div.removeAttr('name');
刪除name屬性
6.prop()
prop()跟attr()很類(lèi)似润歉，兩點(diǎn)不同
prop只能添加非自定義屬性渔彰，而attr都可以
$(p).prop('nihao')是不可以的，因?yàn)槟愫檬俏覀冏远x的屬性
prop()跟attr()返回值不同
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
刪除元素
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
注意區(qū)別remove() 刪除該元素 empty()刪除該元素內(nèi)的子元素 但是保留該元素
CSS操作
addClass() 向被選元素添加一個(gè)或多個(gè)類(lèi)
removeClass() 從被選元素刪除一個(gè)或多個(gè)類(lèi)
toggleClass() 對(duì)被選元素進(jìn)行添加/刪除類(lèi)的切換操作
css() 設(shè)置或返回樣式屬性
顧名思義 add是添加一個(gè)css類(lèi) remove是刪除一個(gè)css類(lèi) toggle呢 是開(kāi)關(guān)的意思 下面做演示
toggleClass()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">標(biāo)題 1</h1>
<h2 class="blue">標(biāo)題 2</h2>
<p class="blue">這是一個(gè)段落男韧。</p>
<p>這是另外一個(gè)段落皇型。</p>
<br>
<button>切換 class</button>
</body>
</html>
就像一個(gè)開(kāi)關(guān)，點(diǎn)擊button css類(lèi)blue有效 再點(diǎn)擊一下無(wú)效 有效->無(wú)效->有效->...
如果用addClass跟removeClass的話(huà)需要做if判斷當(dāng)前的判斷
css()
獲取$("p")的css屬性
$("p")的css屬性.css("background-color");
設(shè)置$("p")的css屬性
$("p").css("background-color","yellow");
設(shè)置多個(gè) CSS 屬性
$("p").css({"background-color":"yellow","font-size":"200%"});
