1、獲取元素：

?

　　1）.size()：?獲取元素的個數。

　　　　$(“img”).size()：獲取有多少個img。

?

　　2）.eq()：獲取元素。

　　　　$(“img[title]”).eq(1)：獲取第二個帶有title屬性的img標簽。

　　　　也可以寫作：?$(“img[title]”)[1]，此括號里的1代表索引1，所以是對應第二個，一般多用eq()。

?

　　3）.get() ：獲得由選擇器指定的DOM元素。

　　　　x=$("p").get(0)：獲取第一個 p 元素的值。

?

　　4）index()：獲取某項標簽的索引。

　　　　$(“div”).index($(this))：獲取當前操作的這個div在所有div中的索引。

?

　　5）find()：搜尋標記獲得新的集合。

　　　　$(“p”).find(“span”)： 在所有p標記元素中搜索span標記，獲取一個新的元素集合。

?

　　*$(this)：表示當前操作對象。

?

　　【例】var iNum=$(“li”).index($(“li[title=isaac]”)[0]) ，說明這句話的意思。

　　　　答案：　1）　　$(“li”)：對所有的li標簽進行查找；

　　　　　　　　2）　　$(“li”).index() ：查找（）內對象在所有li標簽中的索引；

　　　　　　　　3）　　$(“li[title=isaac]”)[0]：查找第一個擁有“title=isaac”這個title屬性的li標簽;

　　　　　　　　4）　　最終解釋為：對所有的li標簽進行查找，查找出“第一個擁有‘title=isaac’這個屬性的li標簽"在所有li標簽中的索引。

?

2、添加元素：addClass()

?

　　$(“img[title]”).addClass(“myClass”) ：給所有帶有title屬性的img標簽，添加上myClass的樣式。

?

3、刪除元素：not()

?

　　$(“li[title]”).not(“[title*=isaac]”) ：在所有設置了title屬性的li標簽中，刪除掉帶有[title*=isaac]這種title屬性的li標簽。（[title*=isaac]：含有isaac字符串的title）

　　

注意：not()方法所接受的參數不能包含特定的元素，只能是通用的表達式。
錯誤：$(“li[title]”).not(“img[title*=isaac]”)
正確： $(“li[title]”).not(“[title*=isaac]”)

?

4、過濾元素：filter()

?

　　$(“li”).filter(“[title*=isaac]” ) 等同于 $(“li[title*=isaac]”) ：對所有的li標簽，過濾篩選出包含有[title*=isaac]這種title屬性的標簽。

?

注意：

1）filter中的參數，不能直接是等于匹配，只能是前匹配^=,后匹配&=,任意匹配*=

2）filter（函數） 函數要求返回布爾值，對于返回值為true的元素保留，否則去除

?

5、判斷元素：is()

?

　　var bImge=$(“div”).is(“img”) ：判斷頁面中的div塊中是否包含img標記，返回布爾值，是或否。

?

6、遍歷元素：each()

?

　　*遍歷：將選中的標簽，一個一個全部經歷一遍。

?

　　在js中：

$(function(){
　　$(“img”).each(function(index){
　　　　this.title="這是第"+index+"副圖，id是"+this.id+"，name是"+this.name;
　　});
});

?

?　　在html中：

　　<img id="img1" name="a1" src="1.jpg">

?

　　遍歷所有的img，讓每一個img都設置一個title屬性值為：這是第 n 幅圖，id是img1，name是a1

?

7、獲取屬性/設置屬性值：attr()

?

　　attr()有2個作用：一個是獲取屬性值，一個是為屬性設置值。

?

　　1）獲取屬性值：

　　　　var s = $("#txt").attr("value");　　獲取到txt里面的value屬性值

?

　　2）設置屬性值：

　　　　$("#txt").attr({"value":"xxxxx","title":"aaaaa"});　　查詢txt，為其中的value設值xxxxx的值，為title設值aaaaa的值

?

8、設置元素樣式：

?

　　1）添加樣式：addClass()

?

$("#btn").click(function(){　　　　
　　$(this).addClass("b");　　　　//找到id為btn的標簽,點擊后讓它在原樣式基礎上加上樣式b
});

?

　　2）刪除樣式：removeClass()

?

$("#btn").click(function(){　　　　
　　$(this).removeClass("b");　　　　//找到id為btn的標簽,點擊后讓它在原樣式基礎上移除樣式b
});

?

　　3）寫入樣式：css()

?

$("#btn").click(function(){　　　　
　　$(#d1).css("color","blue");　　　　//找到id為btn的標簽,點擊后讓id為d1的標簽擁有“顏色變成藍色”的css樣式
});

?

4）切換樣式：toggleClass()

?

$("#btn").click(function(){　　　　
　　$(#d1).toggleClass("highlight");　　　　//點擊時不斷切換，樣式交替執行，一會兒有此樣式一會兒沒有
});

　　

?

9、改變操作對象：

?

　　1）.end()：為當前對象的前一步對象進行操作

　　2）.andself()：為當前對象和它的前一步對象都進行操作

?

　　【例】說明以下三句話的含義：

　　1）$(“p”).find(“span”).addClass(“myClass1”).addClass(“myClass2”)

　　2）$(“p”).find(“span”).addClass(“myClass1”).end().addClass(“myClass2”)

　　3）$(“p”).find(“span”).addClass(“myClass1”).andself().addClass(“myClass2”)

?

　　答：1）在所有p標簽中，找到span標簽為它們加上myClass1樣式，再加上myClass2樣式

　　　　2）在所有p標簽中，找到span標簽為它們加上myClass1樣式，然后返回至上一個對象$(“p”)，為所有p標簽加上myClass2樣式

　　　　3）在所有p標簽中，找到span標簽為它們加上myClass1樣式，并且為它們自己以及上一個對象$(“p”)加上myClass2樣式

?

10、動態切換：

?

　　1）mouseover()：鼠標移動上去時改變樣式

$(“p”).mouseover(function(){ ? ??

　　$(this).css(“color”,”red”);

});

?

　　2）mousetout()：鼠標移走后改變樣式

$(“p”).mouseout(function(){ ? ??

　　$(this).css(“color”,”red”);

});

?

　　3）hover（事件1，事件2）：鼠標放上去事件1，移開事件2

$(“p”).hover(function(){ ? ??

　　$("#d1").addClass(“c”);

　　},function(){ ? ??

　　　　　　$("#d1").removeClass(“c”);

});

?　　　　對p標簽中id=d1的標簽，鼠標放上時加c樣式，移開時移除c樣式。

?

11、判斷樣式：hasClass()

　　$(“li”).hasClass(“myClass”);　　判斷li中是否含有myClass的樣式，返回為布爾型，是或否

轉載于:https://www.cnblogs.com/jtfdh/p/4675393.html

總結

以上是生活随笔為你收集整理的2015-07-22 JQuery 第二课（JQ元素获取，添加，删除，判断，遍历，取值，样式设置，改变对象，切换）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。