jquery 學習隨筆 下

內容參考:http://www.php100.com/manual/jquery/


each(callback)

概述

以每一個匹配的元素作爲上下文來執行一個函數。

意味着,每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。而且,在每次執行函數時,都會給函數傳遞一個表示作爲執行環境的元素在匹配的元素集合中所處位置的數字值作爲參數(從零開始的整型)。 返回 'false' 將停止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

示例

描述:

迭代兩個圖像,並設置它們的 src 屬性。注意:此處 this 指代的是 DOM 對象而非 jQuery 對象。

HTML 代碼:
<img/><img/>
jQuery 代碼:
$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });
結果:
[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

attr(name|properties|key,value|fn)

概述

設置或返回被選元素的屬性值。


參數

nameStringV1.0

屬性名稱

propertiesMapV1.0

作爲屬性的“名/值對”對象

key,valueString,ObjectV1.0

屬性名稱,屬性值

key,function(index, attr)String,FunctionV1.1

1:屬性名稱。

2:返回屬性值的函數,第一個參數爲當前元素的索引值,第二個參數爲原先的屬性值。

示例

參數name 描述:

返回文檔中所有圖像的src屬性值。

jQuery 代碼:
$("img").attr("src");

參數properties 描述:

爲所有圖像設置src和alt屬性。

jQuery 代碼:
$("img").attr({ src: "test.jpg", alt: "Test Image" });

參數key,value 描述:

爲所有圖像設置src屬性。

jQuery 代碼:
$("img").attr("src","test.jpg");

參數key,回調函數 描述:

把src屬性的值設置爲title屬性的值。

jQuery 代碼:
$("img").attr("title", function() { return this.src });

addClass(class|fn)

概述

爲每個匹配的元素添加指定的類名。


參數

classStringV1.0

一個或多個要添加到元素中的CSS類名,請用空格分開

function(index, class)FunctionV1.4

此函數必須返回一個或多個空格分隔的class名。接受兩個參數,index參數爲對象在這個集合中的索引值,class參數爲這個對象原先的class屬性值。

示例


參數class 描述:

爲匹配的元素加上 'selected' 類

jQuery 代碼:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

回調函數 描述:

給li加上不同的class

HTML 代碼:
<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>
jQuery 代碼:
$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

html([val|fn])

概述

取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔。

在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容。 如果選擇器匹配多於一個的元素,那麼只有第一個匹配元素的 HTML 內容會被獲取。

參數

valStringV1.0

用於設定HTML內容的值

function(index, html)FunctionV1.4

此函數返回一個HTML字符串。接受兩個參數,index爲元素在集合中的索引位置,html爲原先的HTML值。

示例

無參數 描述:

返回p元素的內容。

jQuery 代碼:
$('p').html();

參數val 描述:

設置所有 p 元素的內容

jQuery 代碼:
$("p").html("Hello <b>world</b>!");

回調函數描述:

使用函數來設置所有匹配元素的內容。

jQuery 代碼:
$("p").html(function(n){
    return "這個 p 元素的 index 是:" + n;
    });

l

[attribute]

概述

匹配包含給定屬性的元素。注意,在jQuery 1.3中,前導的@符號已經被廢除!如果想要兼容最新版本,只需要簡單去掉@符號即可。


參數

attributeStringV1.0

屬性名

示例

描述:

查找所有含有 id 屬性的 div 元素

HTML 代碼:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代碼:
$("div[id]")
結果:
[ <div id="test2"></div> ]


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章