jQuery Attributes 筆記 @ 飛翔部落

Bookmark:

本篇文章是我在jquery官網看的說明文件的筆記,介紹如何用jquery取值的一些方法

@addClass( class )
// 在 <p> 節點裡加入class = "selected"
// 移除 : removeClass( class ).
$("p").addClass("selected")

@attr( name ) 
// 取得<img src="test"> 裡的src值
// before : <img src="test.jpg"/>
// Result :  test.jpg
$("img").attr("src");

@attr( properties ) 
// 將<img>  加入 src="test.jpg" alt="Test Image"
// before : <img/>
// Result :  <img src="test.jpg" alt="Test Image"/>
$("img").attr({ src: "test.jpg", alt: "Test Image" });

@attr( key, value ) 
// 指定物件 的 key 並 設定 value
// 將 <img> 加入 src = "test.jpg"
// before : <img/>
// Result :  <img src="test.jpg" />
$("img").attr("src","test.jpg");
// 將 <input> 加入 value = "test.jpg"
// before : <input>
// Result : <input value="test.jpg">
$("input").attr("value","test.jpg");

@attr( key, fn ) 
// 在<img>裡加入 title 
//title 值 則是用function 回傳
//Before: <img src="test.jpg" />
//Result: <img src="test.jpg" title="test.jpg" />
$("img").attr("title", function() { return this.src });
//Before : <img title="pic" /><img title="pic" /><img title="pic" />
//Result: <img title="pic1" /><img title="pic2" /><img title="pic3" />
$("img").attr("title", function(index) { return this.title + (++index); });

@html() 
// 取得 <div> xxx </div> xxx <= 取得的東西
// Before : <div> xxx </div>
// Result : xxx 
$("div").html()

@html( val ) 
// 改變 <div>xxx</div> 為 <div><b>new stuff</b></div>
// Before : <div> xxx </div>
// Result : <div><b>new stuff</b></div>
$("div").html("<b>new stuff</b>");

@removeAttr( name ) 
//移除<input disabled="disabled">
// Before : <input disabled="disabled"/>
// Result : <input/>
$("input").removeAttr("disabled")

@removeClass( class )
//移除 <p> 裡的 class
// Before : <p class="selected">Hello</p>
// Result : <p>Hello</p>
$("p").removeClass()

// Before : <p class="selected first">Hello</p>
// Result : <p class="first">Hello</p>
$("p").removeClass("selected")

// Before : <p class="highlight selected first">Hello</p>
// Result : <p class="first">Hello</p>
$("p").removeClass("selected highlight")

@text() 
//取得  <p> 裡的字串
// Before : <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
// Result : Test Paragraph.Paraparagraph
$("p").text();

@text( val ) 
//取代<p>內的字串
// Before : <p>Test Paragraph.</p>
// Result :  <p><b>Some</b> new text.</p>
$("p").text("<b>Some</b> new text.");

// Before : <p>Test Paragraph.</p>
// Result :  <p><b>Some</b> new text.</p>
$("p").text("<b>Some</b> new text.", true);

@toggleClass( class )
// 將<P>有 class="selected" 移除 , 如果<P>沒有 class="selected" 則加入 
// Before :  <p>Hello</p><p class="selected">Hello Again</p>
// Result : <p class="selected">Hello</p>, <p>Hello Again</p>
$("p").toggleClass("selected")

@val()
// 抓取 INPUT 的 VALUE值
// Before :  <input type="text" value="some text"/>
// Result :  "some text"
$("input").val();

@val( val ) 
// 將INPUT 的 VALUE 值 改變為指定
// Before :  <input type="text" value="some text"/>
// Result :  <input type="text" value="test"/>
$("input").val("test");

Posted by shian0745 at 痞客邦 PIXNET Comments(0) Trackback(0) Hits(1570)