我們常常需要對節點屬性,內容,文本進行變更,就需要用到這裡的幾個函數了 。
1屬性 這裡我們看到了一個 attr()函數,有四種形式其中 attr(name)是得到一個所選擇的屬性值,attr(properties)attr(key,value) attr(key,fn)是為一個屬性賦值
這裡要說一下的是在Jquery中有這樣的設計,得到一個對象的值和給一個對象賦值使用的是同樣的函數,用fn(name)來給一個對象賦值,用fn(name,value)來給一個對象賦值。
先看attr(name)是如何來得到一個屬性值的
我們有
<img src="1.jpg"/>
這樣我們希望得到img中stc的值 首先我們使用選擇器來選中這個img $(“img”)得到了上面的那個節點,然後我們用attr()來得到src的值:$(”img”).attr(“src”)
這樣我們就得到了1.jpg這個值
現在我們希望把1.jpg這個圖想換成2.jpg這個圖像:就用 $(“img”).attr(“src”,”2.jpg”) ,這個就是fn(name,key)這種形式,當然我們知道javascript中比如 onclick中可能是一個函數,當然其他的屬性也可以是函數,所以我們這個key也可以是一個函數 $(“img”).attr(“src”,function(){return ‘3.jpg'}),這是第二種形式其實和第一種是一樣的
第三種,也就是attr(properties)這種是以josn格式來以name:value來對屬性進行賦值,在Jquery中,這種方式是很常用的,結構也非常的清晰
比如我們要設置 img的alt和src 可以直接寫成$(“img”).attr({src:”4.jpg”,alt:”說明”})
一般我們做系統都要有增加、修改、刪除。前面我們說了前兩個了,那如何刪除一個屬性呢
這裡有要用到 removeAttr(name)這裡就很容易理解了 和arrt(name)剛好相反,一個是得到一個屬性,一個是刪除一個屬性 $(“img”).removeAttr(“alt”)
好了我們總結一下操作屬性的幾個函數
查找:$(”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類
當我們需要給一個節點比如
<div></div>
來添加一個css的樣式 那我們需要怎麼做呢
我們按照上面屬性的方法 我們先在css中寫一個class樣式.sty{……},我們選擇這個div 然後給他添加一個class $(“div”).attr(“class”,”sty”),
後來我們發現這樣是不是太麻煩了,所以就發明了addClass(class)來對上面的進行簡寫
$(“div”).addClass(“sty”)就完事了。
既然有添加當然也就免不了刪除了 $(“div”).removeClass(“sty”) 刪除sty這個類
還有一個函數toggleClass(class)如果存在就刪除,不存在就添加。
這個確實是一個很怪異的函數這個有什麼用呢,比如我們在一組一個
<ul>
<li><li>
<li><li>
<li><li>
</ul>
上我們在對li上面的鼠標進入和鼠標移出都添加上這個函數的話 ,就可以實現鼠標移動的效果了
3 html 這裡我們看到了一個html()和一個html(val)就是我們前面說的fn(name)fn(name,value)這種類型的函數
Html()是取得第一個匹配元素的html類容
Html(val)是設置匹配的節點的html的類容
4 文本
這裡同樣有兩個函數 text()text(val)一個是取值 一個是設置值 和html差不多
取值不同的是html()是取匹配的第一個元素的html類容,而text是取得的所有的text而忽略了html節點
而賦值的話text()對html的類容比如<a></a>會轉換成文本 而html()仍然解釋為html元素
5值 這裡還是一樣 val()和val(val)一個是獲取值,一個是設置值 比如
<input value="some text"/>
我們獲取這個值 some text $(“input”).val()
設置這個值$(“input”).val(“xxiu”)
這裡我們對屬性就看完了 我們發現我們只看了幾個函數而已
attr(name[,val,|fn]) removeAttr(name) 添加設置刪除一個屬性
addClass(class) removeClass(class) 添加設置刪除一個類
html([val]) 得到/設置一個heml
text([val]) 得到/設置一個text
val([val]) 得到/設置一個value