jQueryInAction Reading Note 3.

標籤：style   blog   java   color   使用   strong   io   for   

屬性和特性操作元素屬性

jQuery沒有用於擷取或者修改元素屬性的命令。需要利用javascript，首先需要做的就是獲得元素的引用。

each(function)

　　對封裝集中的各個元素，進行function操作，function有預設的參數為當前元素的位置，function具有當前對象this的引用。

$("img").each(function(n){    this.alt = "this is " + n+1 + "th img, id is " + this.id;});

 

擷取元素特性

attr(name)

　　返回當前封裝集中第一個元素的name屬性的值，如果沒有設定該屬性傳回值為undefined。其中name不區分大小寫

$(‘div‘).attr("name")

 

this.id vs. $(‘#id‘).attr(‘id‘)

this.id 傳回值為DOM中的值，如果沒有設定id，那麼id為空白""；

$(‘#id‘).attr(‘id‘)，它的傳回值為html中指定的id的值，如果沒有指定的話，傳回值為undefined。

 

屬性和特性的區別

屬性是與生俱來的，即使使用者沒有設定值他也是有預設值的，能夠通過javascript直接改變或者擷取；

特性是使用者設定的，標準的特效能夠通過javascript擷取，非標準的只能通過attr(name)來擷取。

 

設定元素特性

attr(name, value)

　　這個方法的作用是把value的值設定

　　name跟上面一樣；

　　value可以是一個字串，這很簡單

　　value可以是一個函數，這能夠理解，就是把傳回值作為值

 

attr(attributes)

　　attributes是一個對象，而這個對象是一個屬性<->值所組成的對象，如{id:"some", value:"0"}。

 

以上兩個方法會把封裝集中所有的元素的屬性都進行修改。

IE中input元素的name屬性是不能夠進行修改的，如果想要達到相同的效果的話，需要移除原來的input，再追加一個新的input。

 

刪除特性

removeAttr(name)

　　移除封裝集元素中的name特性。特性是能夠被刪除的，但是屬性還是存在的，只不過值發生變化了。

 

元素樣式修改

元素樣式，屬性為className，特性為class。

對它的修改或者操作不使用className屬性或者attr(name)命令，jQuery提供了更加優雅的方式。

 

追加樣式

addClass(names)

　　給所有的封裝集元素追加names樣式類。

　　names可以是一個classs樣式，也可以是以空格分隔的多個class樣式。

 

刪除樣式

removeClass(names)

　　把指定的樣式從封裝集元素的樣式中移除。

　　names可以是一個classs樣式，也可以是以空格分隔的多個class樣式。

 

樣式更迭

toggleClass(name)

　　對於封裝集元素，如果有name指定的樣式類，那麼刪除這個樣式類，如果沒有這個樣式類的話，追加這個樣式類。

        function swap() {            $(‘tr‘).toggleClass("bg-blue");        }

 

 

直接操作css

css(name, value)

css(properties)

　　這兩個跟attr很像，相當直接了。

css(name)

　　返回封裝集中第一個元素的css中name屬性的值。

 

width(value) / width

height(value) / height

用來設定和擷取元素的高度或高度，單位為px

 

hasClass(name)

name是一個樣式類的名稱，不帶"."。

 is(selector) vs. hasClass(name)

他倆在樣式判斷這方面可以替換，只不過is的參數是一個jQuery選取器，而hasClass的參數是一個樣式類；

selector的基本樣式為：.className

name的基本樣式為className

 

操作HTML

html()　　// 擷取封裝集第一個元素的html

html(text)　　// 設定封裝集元素的html

 

text()　　// 擷取封裝集裡元素的所有文本(連不串連起來，不知道。。。)

text(content)　　// 設定封裝集元素的內容，會把<翻譯成&lt;。。。

 

append(content)

　　content可以是html片段或者是元素(需要用$("")選擇出來，，，)

　　會把content追加到封裝集元素內，所有的既有元素之後。

　　$(‘table‘).append("<h1>some</h1>");　　// 產生的h1會存在於table裡面，這裡需要注意

 

appendTo(target)

　　target是一個jQuery選取器，或DOM元素

　　該方法會把封裝集裡的所有元素追加到target獲得的所有的元素內，既有元素之後。

 

$("source selector").appendTo("target selector")

如果target有一個的話，那麼source會被移動；

如果target有多個的話，那麼source會被複製。

 

與append和appendTo相似的有

prepend和prependTo

　　在目標元素內，所有元素之前插入；

before和insertBefore

　　在目標元素之外，前面插入；

after和insertAfter

　　在目標元素值外，後面插入。

A.append(B), A.prepend(B), A.before(B), A.after(B) : 在A中處理B，A是目標，B是處理對象；

A.appendTo(B), A.prependTo(B), A.innertBefore(B), A.innertAfter(B): 把A處理到B中，A是處理對象，B是目標。

包裹元素

實在不知道這個東西的用途。。。

　　...可以實現全文檢索搜尋，將搜尋結果用某種特殊的樣式表現出來。。。

wrap(wrapper)

　　wrapper是封裝器，用來封裝封裝集元素的

　　封裝集中的每一個元素都會被封裝器封裝

wrapAll(wrapper)

　　封裝集中的每一個元素都會被封裝在一個封裝器中

wrapInner(wrapper)

　　把封裝集中的每一個元素的內容用封裝器封裝起來

<ul>  <li title=‘蘋果‘>蘋果</li>  <li title=‘橘子‘>橘子</li>  <li title=‘菠蘿‘>菠蘿</li></ul>$(‘li‘)wrap("<div></div>")-----------------------------------------<ul>  <div><li title="蘋果">蘋果</li></div>  <div><li title="橘子">橘子</li></div>  <div><li title="菠蘿">菠蘿</li></div></ul>$(‘li‘)wrapAll("<div></div>")-----------------------------------------<ul>  <div>    <li title="蘋果">蘋果</li>    <li title="橘子">橘子</li>    <li title="菠蘿">菠蘿</li>  </div></ul>$(‘li‘)wrapInner("<div></div>")-----------------------------------------<ul>    <li title="蘋果"><div>蘋果</div></li>    <li title="橘子"><div>橘子</div></li>    <li title="菠蘿"><div>菠蘿</div></li></ul>

 

刪除元素

remove()

　　將DOM中的封裝集元素刪除

　　這個方法仍然對封裝集元素具有引用，這些元素可以進行其它操作，如insertAfter等。

　　$("div.elementToReplace").after("<p>New Element!</p>").remove();// 建立的p，放到div.elementToReplace後，然後把div.elementToReplace刪除；

　　$("div.elementToReplace").remove().after("<p>New Element!</p>");// 先把div.elementToReplace刪除了，又把它放到了建立的p之後。。。

 

empty()

　　將封裝集元素的內部節點都刪除

 

複製元素

clone(copyHandlers)

　　將封裝集中的元素進行複製，進而進行其它的操作。

　　copyHandlers是一個boolean型的值，是否將節點上的事件一起複製，一起複製的話，true，反之，false。

 

表單元素

val()

　　擷取封裝集中第一個元素的value的值，注意，如果第一個元素不存在value屬性的話，會拋出javascript錯誤。

　　對radio不友好，因為它總會獲得第一個radio的value值，但是可以這麼擷取：$(‘input[type=radio, name=some]:checked‘).val();

　　如果radis一個也沒有選擇的話，上述代碼傳回值為undefined。

　　

val(value)

　　把value的值設定給封裝集中的每一個元素，需要注意！！！

　　設定的貌似只限於輸入型的

 

val(values)

　　values是一個數組，數組中提供多個值[a, b, c]

　　這個方法會作用於各種類型的input，select等。但是結果挺亂的

輸入型的input：會把值a, b, c輸入到文字框內

select的話，會把value相匹配的選項選中

radio的話，沒有找到什麼規律，不敢亂講

checkbox的話，會把value相匹配的選項選中