jQuery遍歷 - each() 方法

jQuery對象和DOM對象使用說明

Jquery css元素

默認情況下，jQuery使用$作為自身的快捷方式。

如果有別的js庫的時候，可以調用jQuery.noConfict()

也可以再自定義一個jquery的快捷方式：

Var $j = jQuery.noConfict();

漢譯：Confict：沖突，加上no就是no沖突

jQuery事件

（1）ready()：在文檔加載后激活函數

當DOM（文檔對象模型） 已經加載，并且頁面（包括圖像）已經完全呈現時，會發生 ready 事件。 由于該事件在文檔就緒后發生，因此把所有其他的 jQuery 事件和函數置于該事件中是非常好的做法。

例子：$(document).ready(function(){

??$(".btn1").click(function(){

????$("p").slideToggle();

??});

}); ?slideToggle()：是jquery顯示和隱藏的一個動畫特效，無聊可以嘗試

和下面方法一樣：

$(function(){

??$(".btn1").click(function(){

????$("p").slideToggle();

??});

})

（2）unbind() ：方法用于移除被選元素的事件

語法：$(selector).unbind(event,function)

Event：可選。規定刪除元素的一個或多個事件，由空格分隔多個事件值。如果只規定了該參數，則會刪除綁定到指定事件的所有函數。讀法：“一問特” 不一定對，我是這么讀的

Function：可選。規定從元素的指定事件取消綁定的函數名。

例子：移除所有

元素上的 click 事件：

$("p").unbind("click");

如果不填參數，將刪除p元素全部的事件處理 ?有最新版的為off（3）on()：方法在被選元素及子元素上添加一個或多個事件處理程序。

語法：$(selector).on(event,childSelector,data,function,map)Event：必需。規定要從被選元素移除的一個或多個事件或命名空間。

由空格分隔多個事件值。必須是有效的事件。讀法：“一問特” 不一定對，我是這么讀的

childSelector：可選。規定只能添加到指定的子元素上的事件處理程序（且不是選擇器本身，比如已廢棄的delegate()方法）。

data ：可選。規定傳遞到函數的額外數據。

Function：可選。規定當事件發生時運行的函數。

Map：規定事件映射({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。例子：向

元素添加 click 事件處理程序：$("p").on("click",function(){

alert("The paragraph was clicked.");

});使用on()代替了之前版本中的bind()、delegate()和live()（4）off()：方法用于移除被選元素的事件

語法：$(selector).off(event,selector,function(eventObj),map)event：必需。規定要從被選元素移除的一個或多個事件或命名空間。

由空格分隔多個事件值。必須是有效的事件。

Selector：可選。規定添加事件處理程序時最初傳遞給on()方法的選擇器。

function(eventObj)：可選。規定當事件發生時運行的函數。

Map：規定事件映射({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。

例子：移除所有

元素上的 click 事件：

$("button").click(function(){

$("p").off("click");

});如果不填參數，將刪除p元素全部的事件處理 ?使用off()替代了之前版本的的unbind()、undelegate()和die()

（5）mouseover()：當鼠標指針位于元素上方時，會發生mouseover事件。

語法：$(selector).mouseover(function)

例子：當鼠標指針位于元素上方時時，改變元素的背景色：?$("p").mouseover(function(){

???$("p").css("background-color","yellow");

?});（6）mouseout()：當鼠標指針從元素上移開時，發生mouseout事件。

語法：$(selector).mouseout(function)

例子：當鼠標從元素上移開時，改變元素的背景色：?$("p").mouseout(function(){

????$("p").css("background-color","#E9E9E4");

?});

（7）mousemove()：當鼠標指針在指定的元素中移動時，就會發生mousemove事件。

語法：$(selector).mousemove()

例子：獲得鼠標指針在頁面中的位置：?$(document).mousemove(function(e){

??$("span").text(e.pageX + ", " + e.pageY);

});//小e是window.event

（8）load()：當指定的元素（及子元素）加載完成時，會發生load()事件。語法：$(selector).load(function)例子：當圖像加載時，改變div元素的文本：?$("img").load(function(){

???$("div").text("Image loaded");

?});注：還存在一個名為load()的 jQuery Ajax 方法，和這個是兩碼事，根據不同的參數而選擇執行哪個。

jQuery遍歷

（1）children()

語法：.children(selector)

selector:字符串值，包含匹配元素的選擇器表達式。（就是各種條件）

例子：$("div").children(".selected").css("color", "blue");

??找到類名為"selected"的所有 div 的子元素(不包含孫子元素)，并將其設置為藍色;

如果.children()里參數為空，則將div的所有子元素設置為藍色

例子：找到類名為"selected"的所有 div 的子元素，并將其設置為藍色：

??$("div").children(".selected").css("color", "blue");children()方法只考慮子元素而不考慮其它后代元素

（2）find()：獲得當前元素集合中每個元素的后代

語法：.find(selector)

例子：$("p").find("span").css('color','red');

搜索所有段落p中的后代 span 元素并將其顏色設置為紅色

（3）next()：獲得匹配元素集合中每個元素后面的同胞元素

語法：.next(selector)

例子：$(".one").next("div").css("background", "#bbffaa");

改變class為one的下一個同級div元素的背景色為#bbffaa，如果.next()里沒有參數，則改變.one的下一個同級元素（4）prev()：獲得匹配元素前面緊鄰的的同胞元素

語法：.prev(selector)

例子：$(".one").prev("div").css("background", "#bbffaa");

改變class為one的前一個同級div元素的背景色為#bbffaa，如果.prev()里沒有參數，則改變.pre的前一個同級元素

?

（5）nextAll()：獲得匹配元素集合中每個元素的所有跟隨的同胞元素

語法：.nextAll(selector)

例子：$("#two").nextAll("div").css("background", "#bbffaa");

改變id為two的元素后面所有同級div元素的背景色為#bbffaa，如果.nextAll()里無參，則改變全部

（6）siblings() ：獲得匹配集合中每個元素的同胞

語法：.siblings(selector)

例子：$("p").siblings(".selected").css("background", "yellow");

查找全部p元素的所有類名為selected的同級元素將它們的背景色改為黃色

如果不寫參數，就是將所有p的同級元素背景色改為黃色$(this).addClass(“current”)//給當前元素添加current樣式 ???.next().show() //下一個元素顯示??????.parent().siblings().children(“a”).removeClass(“current”)//父元素的兄弟元素的子元素移除current樣式

???.next().hide() //它們的下一個元素隱藏（7）parent()：獲得當前匹配元素集合中每個元素的父元素，使用選擇器進行篩選是可選的。

語法：.parent(selector)只往上尋找一級父元素

例子：查找class為item-a的父元素修改它們的背景色：

$('.item-a').parent().css('background-color', 'red');?

（8）filter()：方法返回符合一定條件的元素

語法：.filter(selector)

例子：$("div").css("background", "#c8ebcc").filter(".middle")

??.css("border-color", "red");

改變所有div的顏色，然后向類名為 "middle" 的類添加邊框

（9）is()：根據選擇器、元素或jQuery對象來檢測匹配元素集合，如果這些元素中至少有一個元素匹配給定的參數，則返回 true。

語法：.is(selector)

例子：if (.test.is(":hidden")) {}

如果class為test的元素有隱藏不可見的，執行if語句塊里面的

jQuery屬性操作

（1）Attr(attribute,value)：方法設置或返回被選元素的屬性值

語法：$(selector).attr(attribute,value)

Attribute:規定屬性的名稱

Value :規定屬性的值

參數是一個時，是查詢屬性的值，二個時，則是設置該屬性例子：改變圖像的width屬性：$("button").click(function(){

??$("img").attr("width","180");

});一次設置多個屬性：$(“p”).attr({“title”:“123”，“class”：“test”});（2）removeAttr()：方法從被選元素中移除屬性。語法：$(selector).removeAttr(attribute)例子：從任何p元素中移除 id 屬性：$("button").click(function(){

??$("p").removeAttr("id");

});

（3）addClass()：方法向被選元素添加一個或多個類。如果要移除樣式，可以使用與它相反的removeClass()

語法：$(selector).addClass(class)

class：必需。規定一個或多個 class 名稱。

例子：當點擊按鈕時，向第一個p元素添加一個類

??$("button").click(function(){

$("p:first").addClass("類名a");

??});

執行之前：

執行之后：

.類名a{

font-size:120%;

color:red;

}

（3）removeClass()：方法向被選元素刪除一個或多個類。

語法：$(selector).removeClass(class)

例子：移除所有

的 "intro" 類：?$("button").click(function(){

???$("p").removeClass("intro");

?});

（4）hasClass()：方法檢查被選元素是否包含指定的class。語法：$(selector).hasClass(class)例子：檢查第一個

元素是否包含 "intro" 類：?$("button").click(function(){

???alert($("p:first").hasClass("intro"));

?});jQuery CSS操作

（1）scrollTop()：方法返回或設置匹配元素的滾動條的垂直位置。

如果該方法未設置參數，則返回以像素計的相對滾動條頂部的偏移。

例子：將div的滾動條位置設置到上邊距100px那里

????$(".btn1").click(function(){

????$("div").scrollTop(100);

?});

（2）offset()方法：方法返回或設置匹配元素相對于文檔的偏移（位置）。

offset()方法返回或設置匹配元素相對于文檔的偏移（位置）。

例子：?獲取元素P的位置，在span1顯示元素p的左邊距，span2顯示p的上邊距

$(document).ready(function(){

??$("button").click(function(){

????x=$("p").offset();

????$("#span1").text(x.left);

????$("#span2").text(x.top);

??});

});

將p的位置設置在上邊距100及左邊距100那里

x=$("p").offset({top:100,left:100});（單位是px，測試得知：如果加上px，會變的無效）

jQuery文檔操作

（1）prepend()：方法在被選元素的開頭（仍位于內部）插入指定內容。（創建節點）

還有prependTo()

Selector:選擇器

Content:內容、目錄

語法：$(selector).prepend(content) content必填

例子：在每個p元素的開頭插入內容

??$("button").click(function(){

????$("p").prepend("Hello world! ");

??});

效果：

Hello world!你好

新加的仍然在

標簽里

（2）append()：方法在被選元素的結尾（仍然在內部）插入指定內容。還有appendTo()

語法：$(selector).append(content)

例子：在每個p元素的結尾插入內容

?$("button").click(function(){

???$("p").append(" Hello world!");

?});效果：

你好Hello world!

新加的仍然在

標簽里

（3）after()：方法在被選元素后插入指定的內容。

還有insertAfter()

語法：$(selector).after(content)

例子：在每個p元素的結尾插入內容

?$("p").after("Hello world!");

效果：

你好

標簽里

還有insertBefore()

語法：$(selector).before(content)

例子：在每個p元素的前面插入內容

?$("p").before("Hello world!");

效果：Hello world!

你好

標簽里

（5）remove()：方法移除被選元素，包括所有文本和子節點。（刪除節點）

語法：$(selector).remove()

例子：移除所有

元素：

?$("button").click(function(){

???$("p").remove();

?});

（6）detach()：detach()方法移除被選元素，包括所有文本和子節點。

這個方法會保留jQuery對象中的匹配的元素，因而可以在將來再使用這些匹配的元素。（只移除了Dom對象里所選擇的元素，并沒有移除jquery對象里的）

語法：$(selector).detach()

例子：移除所有

元素：

?$("button").click(function(){

???$("p").detach();

?});

（7）empty()：方法從被選元素移除所有內容，包括所有文本和子節點。

保留了元素節點（