我們常常需要對(duì)節(jié)點(diǎn)屬性，內(nèi)容，文本進(jìn)行變更，就需要用到這里的幾個(gè)函數(shù)了 。

1屬性
這里我們看到了一個(gè) attr（）函數(shù)，有四種形式其中 attr（name）是得到一個(gè)所選擇的屬性值，attr（properties）attr（key，value） attr（key，fn）是為一個(gè)屬性賦值
這里要說(shuō)一下的是在Jquery中有這樣的設(shè)計(jì)，得到一個(gè)對(duì)象的值和給一個(gè)對(duì)象賦值使用的是同樣的函數(shù)，用fn（name）來(lái)給一個(gè)對(duì)象賦值，用fn（name，value）來(lái)給一個(gè)對(duì)象賦值。
先看attr（name）是如何來(lái)得到一個(gè)屬性值的
我們有
<img src="1.jpg"/>
這樣我們希望得到img中stc的值 首先我們使用選擇器來(lái)選中這個(gè)img $(“img”)得到了上面的那個(gè)節(jié)點(diǎn)，然后我們用attr（）來(lái)得到src的值：$(”img”).attr(“src”)
這樣我們就得到了1.jpg這個(gè)值

現(xiàn)在我們希望把1.jpg這個(gè)圖想換成2.jpg這個(gè)圖像：就用 $(“img”).attr(“src”,”2.jpg”) ,這個(gè)就是fn（name，key）這種形式，當(dāng)然我們知道javascript中比如 onclick中可能是一個(gè)函數(shù),當(dāng)然其他的屬性也可以是函數(shù)，所以我們這個(gè)key也可以是一個(gè)函數(shù) $(“img”).attr(“src”,function(){return ‘3.jpg'})，這是第二種形式其實(shí)和第一種是一樣的
第三種，也就是attr（properties）這種是以josn格式來(lái)以name：value來(lái)對(duì)屬性進(jìn)行賦值，在Jquery中，這種方式是很常用的，結(jié)構(gòu)也非常的清晰
比如我們要設(shè)置 img的alt和src 可以直接寫(xiě)成$(“img”).attr({src:”4.jpg”,alt:”說(shuō)明”})
一般我們做系統(tǒng)都要有增加、修改、刪除。前面我們說(shuō)了前兩個(gè)了，那如何刪除一個(gè)屬性呢
這里有要用到 removeAttr（name）這里就很容易理解了 和arrt（name）剛好相反，一個(gè)是得到一個(gè)屬性，一個(gè)是刪除一個(gè)屬性 $(“img”).removeAttr(“alt”)

好了我們總結(jié)一下操作屬性的幾個(gè)函數(shù)
查找：$(”img”).attr(“src”) 查找出src的值
添加/修改$(“img”).attr(“src”,”2.jpg”) $(“img”).attr(“src”,function(){return “2.jpg”}) $(“img”).attr({src:”2.jpg”})
刪除 $(“img”).removeAttr(“src”)
2 css類(lèi)
當(dāng)我們需要給一個(gè)節(jié)點(diǎn)比如
<div></div>
來(lái)添加一個(gè)css的樣式 那我們需要怎么做呢
我們按照上面屬性的方法 我們先在css中寫(xiě)一個(gè)class樣式.sty{……}，我們選擇這個(gè)div 然后給他添加一個(gè)class $(“div”).attr(“class”,”sty”),
后來(lái)我們發(fā)現(xiàn)這樣是不是太麻煩了，所以就發(fā)明了addClass（class）來(lái)對(duì)上面的進(jìn)行簡(jiǎn)寫(xiě)
$(“div”).addClass(“sty”)就完事了。
既然有添加當(dāng)然也就免不了刪除了 $(“div”).removeClass(“sty”) 刪除sty這個(gè)類(lèi)

還有一個(gè)函數(shù)toggleClass（class）如果存在就刪除，不存在就添加。
這個(gè)確實(shí)是一個(gè)很怪異的函數(shù)這個(gè)有什么用呢，比如我們?cè)谝唤M一個(gè)
<ul>
<li><li>
<li><li>
<li><li>
</ul>
上我們?cè)趯?duì)li上面的鼠標(biāo)進(jìn)入和鼠標(biāo)移出都添加上這個(gè)函數(shù)的話(huà) ，就可以實(shí)現(xiàn)鼠標(biāo)移動(dòng)的效果了

3 html
這里我們看到了一個(gè)html（）和一個(gè)html（val）就是我們前面說(shuō)的fn（name）fn（name，value）這種類(lèi)型的函數(shù)
Html（）是取得第一個(gè)匹配元素的html類(lèi)容
Html（val）是設(shè)置匹配的節(jié)點(diǎn)的html的類(lèi)容

4 文本
這里同樣有兩個(gè)函數(shù) text（）text（val）一個(gè)是取值 一個(gè)是設(shè)置值 和html差不多
取值不同的是html（）是取匹配的第一個(gè)元素的html類(lèi)容，而text是取得的所有的text而忽略了html節(jié)點(diǎn)
而賦值的話(huà)text（）對(duì)html的類(lèi)容比如<a></a>會(huì)轉(zhuǎn)換成文本 而html（）仍然解釋為html元素

5值
這里還是一樣 val（）和val（val）一個(gè)是獲取值，一個(gè)是設(shè)置值 比如
<input value="some text"/>
我們獲取這個(gè)值 some text $(“input”).val()
設(shè)置這個(gè)值$(“input”).val(“xxiu”)


這里我們對(duì)屬性就看完了 我們發(fā)現(xiàn)我們只看了幾個(gè)函數(shù)而已
attr(name[,val,|fn]) removeAttr(name) 添加設(shè)置刪除一個(gè)屬性
addClass(class) removeClass(class) 添加設(shè)置刪除一個(gè)類(lèi)
html([val]) 得到/設(shè)置一個(gè)heml
text([val]) 得到/設(shè)置一個(gè)text
val([val]) 得到/設(shè)置一個(gè)value

最新評(píng)論