《深刻PHP與jQuery開發》讀書筆記——Chapter1

因爲去實習事後，發現真正的後臺也要懂前端啊，感受javascript不懂，可是以前用過jQuery感受不錯，很方便，省去了一些內部函數的實現。

看了這一本《深刻PHP與jQuery開發》，感受深刻淺出，值得推薦。

 

Chapter1.jQuery簡介

1.jQuery工做方式本質

先建立一個jQuery對象實例，而後對傳遞給該實例的參數表達式求值，最後根據這個值做出相應的響應或者修改自身。

2.利用CSS語法選擇dom元素(基本選擇器)

咱們知道，jQuery說白了就是對網頁上的內容進行選擇器的新建與操做。

• 經過標籤類型選擇元素

直接選用標籤的元素來做爲選擇器：

$("p")

• 經過class選擇元素

通用格式：.class

$(".foo")

• 經過ID選擇元素

通用格式：#id

$("#bar")

• 使用組合選擇題

只要元素匹配組合選擇器中任意一個選擇器，都會被選中並出如今返回結果中：

$("p.foo,#bar")

 

3.層次選擇器

• 選擇後代元素

祖先元素  後代元素

例:選擇body下的span元素

>>>$("body span")

• 選擇子元素

父元素>子元素(只匹配直接子元素)

>>>$("body>span")
>>>[]

• 選擇下一個兄弟(next)元素

起始元素標識+下一個兄弟元素標識

注意是在DOM中選擇一個元素以後緊跟的下一個兄弟元素！！

 

>>>$(".foo+p");

 

• 選擇兄弟元素

兄弟元素(sibling elements)是指被同一個元素包裹的同一級的所有元素。選擇兄弟元素很是相似於選擇下一個元素，只是它返回起始元素以後匹配的所有兄弟元素，而不是隻返回下一個。

起始元素標識~匹配兄弟元素

>>>$(".foo~p");

 

4.基本過濾器

• 選擇第一個或最後一個元素

只要在任意選擇器以後追加:first或:last便可：

>>>$("p:first");
>>>$("p:last");

• 選擇不匹配某個選擇器的元素

使用:not()過濾器。

>>>$("p:not(.foo)");

• 選擇索引爲奇數或偶數的元素

:even 和 :odd

>>>$("p:odd");
>>>$("p:even");

• 選擇特定索引的元素

:eq()過濾器。

>>>$("p:eq(3)");

 

5.內容過濾器

•  匹配包含特定文本的元素

要匹配包含特定文本的元素，使用:contains()過濾器。（僅匹配標籤內的文本）

>>>$("p:contains(Another)");

• 匹配包含特定元素的元素

:has()過濾器用來匹配包含特定元素的元素。

>>>$("p:has(span)");

• 選擇空元素

:empty()選擇出那些不包含任何文本也不包含任何其餘元素的空元素。

>>>$(":empty");

• 選擇父元素

與:empty相反，:parent只匹配那些擁有子元素的元素，無論它包含的是其餘元素，仍是文本內容，或者兼而有之。

>>>$("p:parent");

 

6.可見性過濾器

利用:hidden和:visible,分別用來選擇被隱藏的元素和可看到的元素。

>>>$("p:visible");  //可見的
>>>$("p:hidden"); //隱藏的

 

7.屬性過濾器

• 根據屬性及屬性的值選擇元素:

[屬性名=屬性值]

>>>$("[class=foo]");

• 選擇沒有某個屬性的元素或屬性值不匹配的元素

[屬性名!=屬性值]

$("[class!=foo]");

 

8.子元素過濾器

• 匹配奇數索引值/偶數索引值/特定索引值的元素

:nth-child()在匹配元素時提供了4個參數:even,odd,index和equation。

>>>$("p:nth-child(odd)");
>>>$("p:nth-child(even)");

 

• 選擇第一個或最後一個子元素

使用:first-child;last-child

>>>$("p span:last-child");

關於選擇器:last()和:last-child()的區別：

這兩個選擇器都是匹配集合中的最後一個元素，差異在於 :last 將匹配全部的集合中的最後一個元素。而 :last-child 將匹配集合中的全部位置爲最後一個的子元素。:last 將永遠返回一個元素，而 :last-child可能返回一批元素。

 

9.表單過濾器

目前可用的表單選擇器（暗含對input框內type的選擇）有:button,:checkbox,:file,:image,:input,:password,:radio,:submit,:text.

如：

>>>$("input:radio");

• 匹配可用或禁用的表單元素

>>>$(":enabled");
>>>$(":disabled");

 

• 匹配選中或未選中的表單元素

過濾器:checked和:selected分別用於獲取checked爲真和selected爲真的表單元素。

>>>$(":checked");
>>>$(":selected");

 

就這樣吧。