jQuery雜談|Java前端學習筆記

1.jQuery對象

jQuery包裝集對象

得到mydiv的Jquery對象：

var divJquery = $("#mydiv");複製代碼

2.基礎選擇器

一、ID選擇器
格式：$("#id屬性值")
獲取指定id值的對象(只會獲取到第一個id的值)
二、類選擇器
格式：$(".class屬性值")
獲取全部指定class屬性值的元素
三、元素選擇器
格式：$("元素名/標籤名")
獲取全部指定標籤名的元素
四、通用選擇器
格式：$("*")
獲取全部的元素的對象
五、組合選擇器
格式：$("選擇器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()的區別：
一、ready()在DOM結構解析完畢後即執行
二、onload在DOM結構解析完畢，而且外部資源加載完畢後執行

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