天天看點

jQuery學習02

此篇是續上一篇的jQuery01之後的繼續學習。

三、jQuery之——屬性選擇器

jQuery除了支援css的所有選擇器,還支援一些獨有的選擇器。有基本選擇器、層次選擇器、過濾選擇器、等等

基本選擇器:

$(“#id”)根據id來比對元素

$(.class)根據給定的類名比對元素

$(“element”)根據給定的元素名比對元素

$(“*”)比對所有元素

$(“selector1,selector2”)根據每個選擇器比對的元素合并并傳回

下面舉個例子,圖左邊為jQuery控制代碼,圖右為運作效果。

jQuery學習02
層次選擇器:
jQuery學習02

後代選擇器:$(“ul li”)選擇ul元素中所有li元素

子選擇器:$("ul>li")選擇<ul>元素中所有的直接<li>子元素

相鄰兄弟選擇器:$("h1+p")選擇<h1>元素後面緊跟的<p>兄弟元素

一般兄弟選擇器:$(“h1~p”)選擇<h1>元素後面的所有兄弟元素,并過濾掉<p>元素

過濾選擇器:
jQuery學習02

基本篩選過濾器

jQuery學習02

内容篩選過濾器

jQuery學習02

可見性篩選過濾器

jQuery學習02

子元素篩選過濾器

$(“.xdk:first”)選取所有class值為“xdk”中的第一個元素

$(document).ready(function(){...}) 的作用是等頁面的文檔(document)中的節點都加載完畢後,再執行後續function内的代碼

$(“.xdk:last”)選取所有class值為“xdk”中的最後一個元素

$("li:eq(1)")在所有<li>元素中,選取其索引值為1的元素,索引值從0開始

$(“:header”)選取整個網頁中所有的<h1>,<h2>等标題元素

$(“div:animated”)選取正在執行動畫的<div>元素

$("div:contains('mylove')")選取含有文本“mylove”的<div>元素

$(“div:empty”)選取不包含子元素或文本元素的<div>元素

$(“div:parent”)選取含有子元素或文本元素的<div>元素

表單選擇器:

$(“#form:input”)選取id值為form的元素下的所有<input>、<textarea>,<selcet>,<button>元素

$(":text")選取所有的單行文本框

$(“:checkbox”)選取所有的複選框

......類似推下去

四、jQuery之——操作DOM

1、擷取id值為“id”的元素節點   var selector = $("#id");

2、建立元素節點    $()   下面舉個執行個體。

jQuery學習02

3、删除元素節點    remove()移除某行;    empty()全部清空

4、插入元素節點   append()    appendTo(content)添加到比對的content元素節點中

元素的樣式操作:

1、addClass()方法——為每個比對的元素添加指定的類名

2、removeClass()方法——從所有比對的元素中删除全部或者指定的類

3、toggleClass()方法——如果存在(不存在)就删除(就添加)一個類

文本節點的操作:

1、html()方法是重置HTML内容,而append()方法是追加HTML内容

2、執行text()方法是擷取比對元素的文本内容

3、val()方法是擷取或設定表單元素的值

周遊元素節點:

1、find()找到所有和指定表達式比對的元素     如$(“div”)find("i")   找到div标簽中的i元素

2、next()取得一個包含比對的元素集合中每個元素

緊鄰的後一個同輩元素

的元素集合     如$(“p”).next() 取到和p元素同級的下一個元素 

3、sibilings()取得一個包含比對的元素集合中每個元素的所有唯一同級元素的元素集合

4、parent()取得一個包含比對所有元素的唯一父元素的元素集合    如$(“i”).praent()    取到所有i元素的上級元素的集合

5、prev()取得一個包含比對的元素集合中每個元素緊鄰的前一個同級元素的元素集合

注意:jQuery對象和DOM對象不是同一個對象,jQuery是一個類數組對象,而DOM對象就是一個單獨的DOM元素。當使用jQuery對象時,需要用到DOM對象的某個方法而jQuery對象沒有提供對應封裝的方法,就必須進行轉換。

jQuery對象轉換為DOM對象舉例:

jQuery學習02

jQuery轉DOM

DOM對象轉換為jQuery對象舉例:

jQuery學習02

DOM轉jQuery

jQuery把ajax封裝的極為簡潔,不需要相容,不需要重複代碼,基于配置實作ajax技術,jQuery的ajax使用舉例:

jQuery學習02

jQuery的ajax

繼續閱讀