jQuery雜談一

1.jQuery對象

jQuery包裝集對象

獲得mydiv的Jquery對象：

var divJquery = $("#mydiv");

2.基礎選擇器

1、ID選擇器
格式：$("#id屬性值") 
獲取指定id值的對象(只會獲取到第一個id的值)
2、類選擇器
格式：$(".class屬性值")
獲取所有指定class屬性值的元素
3、元素選擇器
格式：$("元素名/標簽名")
獲取所有指定標簽名的元素
4、通用選擇器
格式：$("*")
獲取所有的元素的對象
5、組合選擇器
格式：$("選擇器1,選擇器2...")

3.層次選擇器

後代選擇器 ancestor descendant $("#parent div")選擇id為parent的元素的所有div元素

var houdai = $("#parent div");

子代選擇器 parent > child $("#parent>div")選擇id為parent的直接div子元素

var zidai = $("#parent > div");

相鄰選擇器 prev + next $(".blue + img")選擇css類為blue的下一個img元素

var xl = $("#child + p");

同輩選擇器 prev ~ sibling $(".blue ~ img")選擇css類為blue的之後的img元素

var tb = $(".gray ~ img");

4.表單選擇器

表單選擇器，所有表單元素

var inputs = $(":input"); 

元素選擇器

var inputs2 = $("input");

5.過濾選擇器

:checked 選擇所有被選中的元素

:eq(index) 匹配指定下標的元素
:gt(index) 匹配下標大於指定值的所有元素
:odd 選擇每個相隔的（奇數） 元素
:even 選擇每個相隔的（偶數） 元素

6.操作元素的屬性

獲取屬性的值
attr(屬性名稱) 獲取指定的屬性值，操作 checkbox 時選中返回 checked，沒有選中返回 undefined。 attr('checked')
attr('name')
prop(屬性名稱) 獲取具有true和false兩個屬性的屬性值 prop('checked')

設置屬性的值
attr(屬性名稱,屬性值);
prop(屬性名稱,屬性值);

移除屬性
removeAttr(屬性名) 移除指定的屬性 removeAttr('checked')

如果屬性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他屬性使用attr();

7.操作元素的樣式

設置元素的class屬性（如果屬性不存在，則添加屬性）

$("#conRed").attr("class","red");

如果屬性存在，則修改屬性值

$("#conBlue").attr("class","green");

addClass() 添加樣式，原來的樣式保留，如果出現相同的樣式，以後面定義樣式為準

$("#conRed").addClass("larger");

css() 添加一個具體樣式 css("樣式名","樣式值")

$("#remove").css("color","red");

同時添加多個具體的樣式名 css({"樣式名":"樣式值","樣式名":"樣式值"})

$("#remove").css({"color":"red","font-family":"楷體","background-color":"gray"})

8.操作元素的內容

html() 獲取元素的html內容
html("html,內容") 設定元素的html內容
text() 獲取元素的文本內容，不包含html
text("text 內容") 設置元素的文本內容，不包含html
val() 獲取元素value值
val(‘值’) 設定元素的value值

9.添加元素

創建元素
$("元素內容")
添加元素
prepend(content) 在被選元素內部的開頭插入元素或內容，被追加的 content 參數，可以是字元、HTML 元素標記。
$(content).prependTo(selector) 把 content 元素或內容加入 selector 元素開頭
append(content) 在被選元素內部的結尾插入元素或內容，被追加的 content 參數，可以是字元、HTML 元素標記。
$(content).appendTo(selector) 把 content元素或內容插入selector 元素內，預設是在尾部
before()
在元素前插入指定的元素或內容:$(selector).before(content)
after()
在元素後插入指定的元素或內容:$(selector).after(content)

10.刪除元素

remove() 刪除所選元素或指定的子元素，包括整個標簽和內容一起刪。
empty() 清空所選元素的內容

11.遍歷元素

each()
$(selector).each(function(index,element)) :遍歷元素
參數 function 為遍歷時的回調函數，
index 為遍歷元素的序列號，從 0 開始。
element是當前的元素，此時是dom元素。

12.ready事件

1.ready()載入事件
ready()類似於 onLoad()事件
ready()可以寫多個，按順序執行
$(document).ready(function(){})等價於$(function(){})

onload與ready()的區別：
1、ready()在DOM結構解析完畢後即執行
2、onload在DOM結構解析完畢，並且外部資源載入完畢後執行

本文來自知乎：上海尚學堂Java學員 彭耀庭