jQuery 選擇器和dom操作


JQuery選擇器

1.基本選擇器

         基本選擇器是JQuery中最常用的選擇器,也是最簡單的選擇器,它通過元素idclass 和標簽名來查找DOM元素。這個非常重要,下面的內容都是以此為基礎,逐級提高的。

         1).$(“#id”)”,獲取id指定的元素,id是全局唯一的,所以它只有一個成員。

         2).$(“.class”)”,獲取class指定的元素,不同的元素可以具有相同的class屬性,所以它可能具有多個成員。

         3).$(“element”)”,獲取element(元素名,比如divtable等)指定的元素,它可能具有多個成員。

         4).$(“*”)”,獲取所有元素,相當於document

         5).$(“selector1,selector2,…,selectorN”)”,將每個選擇器匹配到的元素合並后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。

 

2.層次選擇器

         什么是層次?層次就是父子關系、兄弟關系的節點。所以,層次選擇器就是用來獲取指定元素的父子節點、兄弟節點。

         1).$(“ancestor descendant”)”,獲取ancestor元素下邊的所有元素。

         2).$(“parent > child”)”,獲取parent元素下邊的所有子元素(只包含第一層子元素)。

         3).$(“pre + next”)”,獲取緊隨pre元素的后一個兄弟元素。

         4).$(“pre ~ siblings”)”,獲取pre元素后邊的所有兄弟元素。

 

3.過濾選擇器

         過濾?肯定是要添加過濾條件的。通過“:”添加過濾條件,比如“$(“div:first”)”返回div元素集合的第一個div元素,first是過濾條件。

         按照不同的過濾規則,過濾選擇器可以分為基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾和表單對象屬性過濾選擇器。

 

1). 基本過濾選擇器

a)          :first”,選取第一個元素,別忘記它也是被放在一個集合里哦!因為JQuery它是DOM對象的一個集合。如,“$("tr:first")”返回所有tr元素的第一個tr元素,它仍然被保存在集合中。

b)         :last”,選取最后一個元素。如,“$("tr:last")”返回所有tr元素的最后一個tr元素,它仍然被保存在集合中。

c)          :not(selector)”,去除所有與給定選擇器匹配的元素。如,“$("input:not(:checked)")”返回所有input元素,但去除被選中的元素(單選框、多選框)。

d)         :even”,選取所有元素中偶數的元素。因為JQuery對象是一個集合,這里的偶數指的就是集合的索引,索引從0開始。

e)          :odd”,選取所有元素中奇數的元素,索引從0開始。

f)          :eq(index)”,選取指定索引的元素,索引從0開始。

g)         :gt(index)”,選取索引大於指定index的元素,索引從0開始。

h)         :lt(index)”,選取索引小於指定index的元素,索引從0開始。

i)           :header”,選取所有的標題元素,如hqh2等。

j)           :animated”,選取當前正在執行的所有動畫元素。

 

2). 內容過濾選擇器

         它是對元素和文本內容的操作。

a)          :contains(text)”,選取包含text文本內容的元素。

b)         :empty”,選取不包含子元素或者文本節點的空元素。

c)          :has(selector)”,選取含有選擇器所匹配的元素的元素。

d)         :parent”,選取含有子元素或文本節點的元素。(它是一個父節點)

 

3). 可見性過濾選擇器

         根據元素的可見與不可見狀態來選取元素。

         :hidden”,選取所有不可見元素。

         :visible”,選擇所有可見元素。

可見選擇器:hidden 不僅包含樣式屬性 display  none 的元素,也包含文本隱藏域 (<input type=hidden>) visible:hidden 之類的元素。

 

4).屬性過濾選擇器

         通過元素的屬性來選取相應的元素。

a)          [attribute]”,選取擁有此屬性的元素。

b)         [attribute=value]”,選取指定屬性值為value的所有元素。

c)          [attribute !=value]”,選取屬性值不為value的所有元素。

d)         [attribute ^= value]”,選取屬性值以value開始的所有元素。

e)          [attribute $= value]”,選取屬性值以value結束的所有元素。

f)          [attribute *= value]”,選取屬性值包含value的所有元素。

g)         [selector1] [selector2]…[selectorN]”,復合性選擇器,首先經[selector1]選擇返回集合A,集合A再經過[selector2]選擇返回集合B,集合B再經過[selectorN]選擇返回結果集合。

 

5). 子元素過濾選擇器

         一看名字便是,它是對某一元素的子元素進行選取的。

a)          :nth-child(index/even/odd)”,選取索引為index的元素、索引為偶數的元素、索引為奇數的元素。

l          nth-child(even/odd):能選取每個父元素下的索引值為偶()數的元素。

l          nth-child(2):能選取每個父元素下的索引值為 2 的元素。

l          nth-child(3n):能選取每個父元素下的索引值是 3 的倍數的元素。

l          nth-child(3n + 1):能選取每個父元素下的索引值是 3n + 1的元素。

b)         :first-child”,選取第一個子元素。

c)          :last-child”,選取最后一個子元素。

d)         :only-child”,選取唯一子元素,它的父元素只有它這一個子元素。

 

6). 表單過濾選擇器

         選取表單元素的過濾選擇器。

a)          :input”,選取所有<input><textarea><select ><button>元素。

b)         :text”,選取所有的文本框元素。

c)          :password”,選取所有的密碼框元素。

d)         :radio”,選取所有的單選框元素。

e)          :checkbox”,選取所有的多選框元素。

f)          :submit”,選取所有的提交按鈕元素。

g)         :image”,選取所有的圖像按鈕元素。

h)         :reset”,選取所有重置按鈕元素。

i)           :button”,選取所有按鈕元素。

j)           :file”,選取所有文件上傳域元素。

k)         :hidden”,選取所有不可見元素。

 

7).表單對象屬性過濾選擇器

         選取表單元素屬性的過濾選擇器。

         :enabled”,選取所有可用元素。

         :disabled”,選取所有不可用元素。

         :checked”,選取所有被選中的元素,如單選框、復選框。

         :selected”,選取所有被選中項元素,如下拉列表框、列表框。

 

四、JQuery中的DOM

         一種與瀏覽器,平台,語言無關的接口。使用該接口可以輕松地訪問頁面中所有的標准組件。

         DOM CoreDOM Core 並不專屬於 JavaScript,任何一種支持 DOM 的程序設計語言都可以使用它。它的用途並非僅限於處理網頁,也可以用來處理任何一種是用標記語言編寫出來的文檔,例如:XML

HTML DOM:使用 JavaScript  DOM  HTML 文件編寫腳本時,有許多專屬於HTML-DOM的屬性。

CSS-DOM:針對於CSS操作,在JavaScript中,CSS-DOM 主要用於獲取和設置 style 對象的各種屬性。

        

1.查找節點

         請見上面的“基本選擇器”。

 

2.創建節點

         使用JQuery的工廠函數,創建一個新節點:var $newNode = $(“<p>你好</p>”);,然后將新節點插入到指定元素節點處。

 

3.插入節點

         將新創建的節點,或獲取的節點插入指定的位置。

         $node.append($newNode)”,向每個匹配的元素內部的結尾處追加結尾處。如,“$("p").append("<b>Hello</b>");”將"<b>Hello</b>"添加到"p"內部的結尾處。

         $newNode.appendTo($node)”,將新元素追加到每個匹配元素內部的結尾處。

         $node.prepend($newNode)”,向每個匹配的元素內部的結尾處追加開始處。如,“$("p").prepend("<b>Hello</b>");”將"<b>Hello</b>"添加到"p"內部的起始處。

         $newNode.prependTo($node)”, 將新元素追加到每個匹配元素內部的開始處。

         $node.after($newNode)”,向每個匹配的元素的之后插入內容,是並列兄弟。如,“$("p").after("<b>Hello</b>");”將"<b>Hello</b>"插入到"p"的后邊。它們是兄弟關系。

         $newNode.insertAfter($node)”,將新元素插入到每個匹配元素之后。

         $newNode.before($node)”,向每個匹配的元素的之前插入內容。如,“$("p").before("<b>Hello</b>");”將"<b>Hello</b>"插入到"p"的前面,它們是兄弟關系。

         $node.insertBefore($newNode)”,將新元素插入到每個匹配元素之前。

         注意:如果插入的節點是不是新創建的,插入將變成移動操作。所以,在插入這樣的節點之前應該使用clone的節點。

 

4.刪除節點

         DOM中刪除所有匹配的元素。如,“$("p").remove(".hello");”刪除所為class屬性值為hellop元素,還有它下面的所有元素。

 

         DOM中清除所有匹配的元素。如,“$("p").empty();”清除所有p元素,還有它下面的所有元素。

 

5.復制節點

         克隆匹配的DOM元素。如,“$("p").clone();”返回克隆后的副本,但不具有任何行為。如果要將DOM的事件一起克隆,應該使用“$("p").clone(true);”。

 

6.替換節點

         將所有匹配的元素都替換為指定的 HTML  DOM 元素。如,$("p").replaceWith("<b>Paragraph. </b>");,將所有p元素,替換為"<b>Paragraph. </b>"

        

         replaceWith相返:$("<b>Paragraph. </b>").replaceAll("p");

 

7.包裹節點

         wrap():將指定節點用其他標記包裹起來。該方法對於需要在文檔中插入額外的結構化標記非常有用, 而且不會破壞原始文檔的語義。如,“$("p").wrap("<div class='wrap'></div>");”。每個p元素被包裹到<div>中。

wrapAll():將所有匹配的元素用一個元素來包裹。而wrap()方法是將所有的元素進行單獨包裹。如,“$("p").wrapAll("<div></div>");”,將所有p元素包裹到<div>中。

wrapInner():將每一個匹配的元素的子內容(包括文本節點)用其他結構化標記包裹起來。如,“$("p").wrapInner("<b></b>");”, <b>被每一個p元素包裹。

 

8.屬性設置

         attr():獲取屬性和設置屬性。

當為該方法傳遞一個參數時,即為某元素的獲取指定屬性。如,“$("img").attr("src");”,獲取img元素的src屬性值。

當為該方法傳遞兩個參數時,即為某元素設置指定屬性的值。如,“$("img").attr("src","test.jpg");”,設置img元素的src屬性值為test.jsp

jQuery 中有很多方法都是一個函數實現獲取和設置。如:attr()html()text()val()height()width()css()等。

removeAttr():刪除指定元素的指定屬性。

 

9.樣式操作

         可以通過“attr()”設置或獲取css樣式。

         追加樣式:addClass() 。如,“$("p").addClass("selected");”,向所有P元素中追加“selected”樣式。

移除樣式:removeClass() --- 從匹配的元素中刪除全部或指定的class。如,“$("p").removeClass("selected");”,刪除所有P元素中的“selected”。

切換樣式:toggleClass() --- 控制樣式上的重復切換。如果類名存在則刪除它,如果類名不存在則添加它。如,“$("p").toggleClass("selected");”,所有的P元素中,如果存在“selected”樣式就刪除“selected”樣式,否則就添加“selected”樣式。

判斷是否含有某個樣式:hasClass() --- 判斷元素中是否含有某個 class,有返回 true 否則返回 false。如,“$(this).hasClass("protected")”,判斷當前節點是否有“protected”樣式。

 

10.設置或獲取HTML、文本和值

讀取和設置某個元素中的 HTML 內容: html(),該方法可以用於 XHTML,但不能用於 XML 文檔。

讀取和設置某個元素中的文本內容:text(),該方法既可以用於 XHTML 也可以用於 XML 文檔。

讀取和設置某個元素中的值:val(),該方法類似 JavaScript 中的 value 屬性。對於文本框,下拉列表框,單選框該方法可返回元素的值(多選框只能返回第一個值)。如果為多選下拉列表框,則返回一個包含所有選擇值的數組。

 

11.常用遍歷節點的方法

         取得匹配元素的所有子元素組成的集合:children()。該方法只考慮第一層子元素而不考慮任何后代元素。

取得匹配元素后面緊鄰的兄弟元素的集合(但集合中只有一個元素)next()

取得匹配元素前面緊鄰的兄弟元素的集合(但集合中只有一個元素)prev()

取得匹配元素前后所有的兄弟元素: siblings()

 

12.CSS-DOM操作

         獲取和設置元素的樣式屬性:css()

獲取和設置元素透明度:opacity()屬性。

獲取和設置元素高度,寬度:height()width()。在設置值時,若只傳遞數字,則默認單位是px。如需要使用其他單位則需傳遞一個字符串,例如 $(“p:first”).height(“2em”)”;

獲取元素在當前視窗中的相對位移:offset()。它返回的對象包含了兩個屬性:topleft。該方法只對可見元素有效。

 

 

五、JQuery中的事件

     

1.加載DOM

在頁面加載完畢后,瀏覽器會通過 JavaScript  DOM 元素添加事件。在常規的 JavaScript 代碼中,通常使用 window.onload 方法,在JQuery 中使用$(document).ready() 方法。JQuery中的簡化寫法“$()”。在window.onload中注冊事件時,只能在一個window.onload體中注冊。但使用JQuery,可以在多個$(document).ready()$()中注冊。

 

2.事件綁定

     對匹配的元素對指定的事件綁定。如,昨天我們在window.onload中綁定事件的方法:“$("p").onclick(function(){

 alert( $(this).text() );

});
     在JQuery的$(document).ready()中可以這樣綁定:
“$("p").click(function(){

 alert( $(this).text() );

});
          使用bind(),可以這樣綁定:
$("p").bind("click", function(){

 alert( $(this).text() );

});

 

3.合成事件

    hover():模擬光標懸停時間。當光標移動到元素上時,會觸發指定的第一個函數,當光標移出這個元素時,會觸發指定的第二個函數。如,懸停效果:
$("td").hover(
 function () {$(this).addClass("hover");},
 function () {$(this).removeClass("hover");}
);

 

toggle()用於模擬鼠標連續單擊事件。第一次單擊元素,觸發指定的第一個函數,當再一次單擊同一個元素時,則觸發指定的第二個函數,如果有更多個函數,則依次觸發,直到最后一個。如,設置元素的選擇與非選中效果:

$("td").toggle(
 function () {$(this).addClass("selected");},
 function () {$(this).removeClass("selected");}
);

 

使用toggle()而不傳遞參數,效果為切換元素的可見狀態。

 

4.事件的冒泡

         事件會按照 DOM 層次結構像水泡一樣不斷向上只止頂端。

解決:在事件處理函數中返回 false,會對事件停止冒泡。還可以停止元素的默認行為。

         目前的所有UI交互或其事件,都支持這個特性。在自己的事件處理函數返回false將中止事件的繼續向下傳遞。返回true事件繼續向下傳遞。

 

5.事件對象的屬性

         事件對象:當觸發事件時,事件對象就被創建了。在程序中使用事件只需要為處理函數添加一個參數。在事件處理函數中使用些參數。如,獲取事件發生時,相對於頁面的位置:event.pageX, event.pageYevent是事件處理函數的參數。

 

6.移除事件

         移除某按鈕上的所有click 事件:$(btn).unbind(click)

移除某按鈕上的所有事件:$(btn).unbind();

one():該方法可以為元素綁定處理函數。當處理函數觸發一次后,事件立即被刪除。即在每個對象上,事件處理函數只會被執行一次。

 

 

六、JQuery中的DOM動畫

通過設置DOM對象的顯示與隱藏方式,可以產生動畫效果。

 

1.無動畫效果的隱藏與顯示

hide():在HTML文檔中,為一個元素調用hide()方法會將該元素的display樣式改為none。代碼功能同css(displaynone);相同。

show():將元素的display樣式改為先前的顯示狀態。

toggle():切換元素的可見狀態:如果元素時可見的,則切換為隱藏;如果元素時隱藏的,則切換為可見的。

 

2.通過設置透明度效果的隱藏與顯示,達到淡入淡出的動畫效果

fadeIn()fadeOut():只改變元素的透明度。fadeOut() 會在指定的一段時間內降低元素的不透明度,直到元素完全消失。fadeIn() 則相反。如,用600毫秒緩慢的將段落淡入:$("p").fadeIn("slow");

fadeTo():把不透明度以漸近的方式調整到指定的值(0  1 之間)。並在動畫完成后可選地觸發一個回調函數。如,用200毫秒快速將段落的透明度調整到0.25,動畫結束后,顯示一個“Animation Done”信息框:“$("p").fadeTo("fast", 0.25, function(){ alert("Animation Done."); });”。

 

3.通過設置高度效果的隱藏與顯示,達到滑下與收起的動畫效果

slideDown()slideUp():只會改變元素的高度。如果一個元素的display屬性為none,當調用slideDown() 方法時,這個元素將由上至下延伸顯示。slideUp() 方法正好相反,元素由下至上縮短隱藏。如,用600毫秒緩慢的將段落滑下:$("p").slideDown("slow");

slideToggle():通過高度變化來切換匹配元素的可見性。如,200毫秒快速將段落滑上或滑下,動畫結束后,會顯示一個“Animation Done”信息框:“$("p").slideToggle("fast",function(){ alert("Animation Done."); });”。

        

         使用JavaScriptJQuery可以處理當前頁面的動態更新,再結合CSS樣式可以做出十分漂亮的UI,甚至比桌面軟件UI漂亮的多。JavaScript的編寫與調試非常麻煩,所以也有一些公司出品了專門針對JavaScript應用的簡化開發,比如Google出品的GWT,可以像使用Java編寫swing那樣編寫JavaScript。它為用戶提供像swing那樣的UI接口與事件等操作並且支持JAVA的核心庫。使用GWT自己的編譯器,可以將JAVA代碼編譯為JavaScript代碼、CSS樣式文件和HTML


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM