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

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

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

好了我們總結(jié)一下操作屬性的幾個函數(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類
當(dāng)我們需要給一個節(jié)點比如
<div></div>
來添加一個css的樣式 那我們需要怎么做呢
我們按照上面屬性的方法 我們先在css中寫一個class樣式.sty{……}，我們選擇這個div 然后給他添加一個class $(“div”).attr(“class”,”sty”),
后來我們發(fā)現(xiàn)這樣是不是太麻煩了，所以就發(fā)明了addClass（class）來對上面的進行簡寫
$(“div”).addClass(“sty”)就完事了。
既然有添加當(dāng)然也就免不了刪除了 $(“div”).removeClass(“sty”) 刪除sty這個類

還有一個函數(shù)toggleClass（class）如果存在就刪除，不存在就添加。
這個確實是一個很怪異的函數(shù)這個有什么用呢，比如我們在一組一個
<ul>
<li><li>
<li><li>
<li><li>
</ul>
上我們在對li上面的鼠標進入和鼠標移出都添加上這個函數(shù)的話 ，就可以實現(xiàn)鼠標移動的效果了

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

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

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


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

最新評論