python走起之第十七話

選擇器

#id

概述

根據給定的ID匹配一個元素。

使用任何的元字符（如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~）做爲名稱的文本部分， 它必須被兩個反斜槓轉義：\\。 參見示例。

參數

idStringV1.0

用於搜索的，經過元素的 id 屬性中給定的值

示例

描述:

查找 ID 爲"myDiv"的元素。

HTML 代碼:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代碼:

$("#myDiv");

結果:

[ <div id="myDiv">id="myDiv"</div> ]

描述:

查找含有特殊字符的元素

HTML 代碼:

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>

jQuery 代碼:

#foo\\[bar\\]

結果:

[ <span id="foo[bar]"></span>]

element

概述

根據給定的元素標籤名匹配全部元素

 

參數

elementStringV1.0

一個用於搜索的元素。指向 DOM 節點的標籤名。

示例

描述:

查找一個 DIV 元素。

HTML 代碼:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代碼:

$("div");

結果:

[ <div>DIV1</div>, <div>DIV2</div> ]

.class

概述

根據給定的css類名匹配元素。

 

參數

classStringV1.0

一個用以搜索的類。一個元素能夠有多個類，只要有一個符合就能被匹配到。

示例

描述:

查找全部類是 "myClass" 的元素.

HTML 代碼:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery 代碼:

$(".myClass");

結果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

篩選

eq(index|-index)

概述

獲取當前鏈式操做中第N個jQuery對象，返回jQuery對象，當參數大於等於0時爲正向選取，好比0表明第一個，1表明第二個。當參數爲負數時爲反向選取，好比-1爲倒數第一個，具體能夠看如下示例。

相似的有get(index),不過get(index)返回的是DOM對象。

 

參數

indexIntegerV1.1.2

一個整數，指示元素基於0的位置,這個元素的位置是從0算起。

-indexIntegerV1.4

一個整數，指示元素的位置，從集合中的最後一個元素開始倒數。(-1算起)

示例

參數index描述:

獲取匹配的第二個元素

HTML 代碼:

<p> This is just a test.</p> <p> So is this</p>

jQuery 代碼:

$("p").eq(1)

結果:

[ <p> So is this</p> ]

參數-index描述:

獲取匹配的第二個元素

HTML 代碼:

<p> This is just a test.</p> <p> So is this</p>

jQuery 代碼:

$("p").eq(-2)

結果:

[ <p> This is just a test.</p> ]

hasClass(class)

概述

檢查當前的元素是否含有某個特定的類，若是有，則返回true。

這其實就是 is("." + class)。

參數

classStringV1.2

用於匹配的類名

示例

描述:

給包含有某個類的元素進行一個動畫。

HTML 代碼:

<div class="protected"></div><div></div>

jQuery 代碼:

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

last()

V1.4概述

獲取最後個元素

 

示例

描述:

獲取匹配的最後個元素

HTML 代碼:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代碼:

$('li').last()

結果:

[ <li>list item 5</li> ]

first()

V1.4概述

獲取第一個元素

 

示例

描述:

獲取匹配的第一個元素

HTML 代碼:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代碼:

$('li').first()

結果:

[ <li>list item 1</li> ]

屬性

 

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 });