JAVAScript強大的框架：Jquery（一）

一：jQuery是什麼

爲了簡化 JavaScript 的開發, 一些 JavsScript 庫誕生了. JavaScript 庫封裝了不少預約義的對象和實用函數。能幫助使用者創建有高難度交互的 Web2.0 特性的富客戶端頁面, 而且兼容各大瀏覽器

jQuery可以使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需定義id便可。

二：基本選擇器

      基本選擇器是 jQuery 中最經常使用的選擇器, 也是最簡單的選擇器, 它經過元素 id, class 和標籤名來查找 DOM 元素(在網頁中 id 只能使用一次, class 容許重複使用).

一、#id     用法: $(」#myDiv」);    返回值  單個元素的組成的集合

       說明: 這個就是直接選擇html中的id=」myDiv」

二、Element       用法: $(」div」)     返回值  集合元素

       說明: element的英文翻譯過來是」元素」,因此element其實就是html已經定義的標籤元素,例如 div, input, a 等等.

三、class          用法: $(」.myClass」)      返回值  集合元素

       說明: 這個標籤是直接選擇html代碼中class=」myClass」的元素或元素組(由於在同一html頁面中class是能夠存在多個一樣值的).

四、*          用法: $(」*」)      返回值  集合元素

      說明: 匹配全部元素,多用於結合上下文來搜索

五、selector1, selector2, selectorN      用法: $(」div,span,p.myClass」)    返回值  集合元素

      說明: 將每個選擇器匹配到的元素合併後一塊兒返回.你能夠指定任意多個選擇器, 並將匹配到的元素合併到一個結果內.其中p.myClass是表示匹配元素

       p class=」myClass」

三 層次選擇器

若是想經過 DOM 元素之間的層次關係來獲取特定元素, 例如後代元素, 子元素, 相鄰元素, 兄弟元素等, 則須要使用層次選擇器.

1 、ancestor descendant

      用法: $(」form input」) ;   返回值  集合元素

      說明: 在給定的祖先元素下匹配全部後代元素.這個要下面講的」parent > child」區分開.

二、parent > child用法: $(」form > input」) ;    返回值  集合元素

      說明: 在給定的父元素下匹配全部子元素.注意:要區分好後代元素與子元素

三、prev + next

      用法: $(」label + input」) ;   返回值  集合元素

      說明: 匹配全部緊接在 prev 元素後的 next 元素

四、prev ~ siblings

      用法: $(」form ~ input」) ;    返回值  集合元素

      說明: 匹配 prev 元素以後的全部 siblings 元素.注意:是匹配以後的元素,不包含該元素在內,而且siblings匹配的是和prev同輩的元素,其後輩元素不被匹配.

      注意:  (「prev ~ div」) 選擇器只能選擇 「# prev 」 元素後面的同輩元素; 而 jQuery 中的方法 siblings() 與先後位置無關, 只要是同輩節點就能夠選取

三 基礎過濾選擇器

一、:first用法: $(」tr:first」) ;   返回值  單個元素的組成的集合

      說明: 匹配找到的第一個元素

二、:last用法: $(」tr:last」)   返回值  集合元素

      說明: 匹配找到的最後一個元素.與 :first 相對應.

三、:not(selector)用法: $(」input:not(:checked)」)返回值  集合元素

     說明: 去除全部與給定選擇器匹配的元素.有點相似於」非」,意思是沒有被選中的input(當input的type=」checkbox」).

四、:even用法: $(」tr:even」)   返回值  集合元素

     說明: 匹配全部索引值爲偶數的元素，從 0 開始計數.js的數組都是從0開始計數的.例如要選擇table中的行,由於是從0開始計數,因此table中的第一個tr就爲偶數0.

五、: odd用法: $(」tr:odd」) 返回值  集合元素

      說明: 匹配全部索引值爲奇數的元素,和:even對應,從 0 開始計數.

六、:eq(index)用法: $(」tr:eq(0)」)    返回值  集合元素

      說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數.

七、:gt(index)用法: $(」tr:gt(0)」)    返回值  集合元素

說明: 匹配全部大於給定索引值的元素.

八、:lt(index)用法: $(」tr:lt(2)」)    返回值  集合元素  

      說明: 匹配全部小於給定索引值的元素.

九、:header(固定寫法)用法: $(」:header」).css(」background」, 「#EEE」)    返回值  集合元素

      說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.

十、:animated(固定寫法)   返回值  集合元素

四 內容過濾選擇器

內容過濾選擇器的過濾規則主要體如今它所包含的子元素和文本內容上

一、:contains(text)用法: $(」div:contains(’John’)」)    返回值  集合元素

      說明: 匹配包含給定文本的元素.這個選擇器比較有用，當咱們要選擇的不是dom標籤元素時,它就派上了用場了,它的做用是查找被標籤」圍」起來的文本內容是否符合指定的內容的.

二、:empty用法: $(」td:empty」)   返回值  集合元素

      說明: 匹配全部不包含子元素或者文本的空元素

三、:has(selector)

      用法: $(」div:has(p)」).addClass(」test」)    返回值  集合元素

      說明: 匹配含有選擇器所匹配的元素的元素.這個解釋須要好好琢磨,可是一旦看了使用的例子就徹底清楚了:給全部包含p元素的div標籤加上class=」test」.

四、:parent用法: $(」td:parent」)   返回值  集合元素

      說明: 匹配含有子元素或者文本的元素.注意:這裏是」:parent」,可不是」.parent」哦!感受與上面講的」:empty」造成反義詞.