? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? JQuery

Jquery核心

"$"符號(hào)在 jQuery 中代表對(duì)jQuery 對(duì)象的引用, "jQuery"是核心對(duì)象.

通過該對(duì)象可以獲取jQuery對(duì)象，調(diào)用jQuery提供的方法等奄抽。只有jQuery對(duì)象才能調(diào)用jQuery提供的方法刚盈。

DOM對(duì)象

通過原生JS方式獲取dom對(duì)象

Jquery包裝集對(duì)象

通過Jqueru方式獲取Jquery包裝集對(duì)象

Jquery包裝集對(duì)象與Dom對(duì)象

DOM對(duì)象 ——> Jquery對(duì)象

$(dom對(duì)象)

Jquery對(duì)象 ——> DOM對(duì)象

取下標(biāo)：Jquery對(duì)象[下標(biāo)]

注意：

1最冰、如果瀏覽器報(bào)錯(cuò)：$ is not defined

說明是Jquery對(duì)象未找到浆熔，可能是因?yàn)闆]有引入Jquery核心js文件

2、只有Jquery對(duì)象才能使用Jquery方法

基礎(chǔ)選擇器

選擇器? ? ? ? ? ? ? ? ? 名稱? ? ? ? ? ? ? 舉例

id選擇器? ? ? ? ? ? #id屬性值? ? ? ? $("#testDiv")選擇id為testDiv的元素 （如果出現(xiàn)多個(gè)同名ID亿驾，只會(huì)獲取第一個(gè)）

元素名稱選擇器? ? 標(biāo)簽名/標(biāo)簽名? ? ? ? $("div")選擇所有div元素

類選擇器? ? ? ? ? ? ? ? .class屬性值? ? ? ? ? ? ? $(".blue")選擇所有class=blue的元素

選擇所有元素 * $("*")選擇頁面所有元素

組合選擇器

?選擇器1,

選擇器2,

選擇器3

?$("#testDiv,span,.blue")同時(shí)選中多個(gè)選擇器匹配的元素

屬性選擇器

$([屬性名])

選擇設(shè)置過指定屬性名的元素

$([屬性名=屬性值])

選擇設(shè)置過指定屬性名為指定屬性值的元素

層次選擇器

后代選擇器 ancestor descendant （空格）? ? $("#parent div")選擇id為parent的元素的所有div元素

子代選擇器 parent > child （大于號(hào)）? ?$("#parent>div")選擇id為parent的直接div子元素

相鄰選擇器 prev + next （加號(hào)）

?$(".blue + img")選擇css類為blue的下一個(gè)img元素 （選擇相鄰的下一個(gè)指定元素）

同輩選擇器 prev ~ sibling? （波浪號(hào)）

?$(".blue ~ img")選擇css類為blue的之后的img元素

表單選擇器

:input 選擇所有的表單元素黄娘，包括input標(biāo)簽、select標(biāo)簽天通、textarea標(biāo)簽及button標(biāo)簽

:checkbox 選擇所有的復(fù)選框

:radio 選擇所有的單選框

過濾選擇器

:checked 選擇所有被選中的元素（單選框泊窘、復(fù)選框、下拉框）

:selected 選擇所有被選中的元素 （下拉框）

:eq(index) 匹配下標(biāo)為指定值的元素

:gt(index) 匹配下標(biāo)大于指定值的元素

:even 匹配下標(biāo)是偶數(shù)的元素

:odd 匹配下標(biāo)是奇數(shù)的元素

操作元素的屬性

attr()與prop()的區(qū)別：

1像寒、操作返回值是boolean類型的屬性（checked烘豹、selected、disabled）

設(shè)置了屬性：attr()返回的是具體的屬性值诺祸，而prop()返回的true

未設(shè)置屬性：attr()返回的是undefined携悯，而prop()返回的false

2、attr()與prop()都可以操作固有屬性（固有屬性：元素本身擁有的屬性）

3筷笨、attr()可以操作自定義屬性憔鬼，而prop()不支持

總結(jié)：如果屬性的返回值是true或false龟劲，使用prop()方法；其他屬性使用attr()

獲取屬性

方法 說明 舉例

attr(屬性名稱) 獲取指定的屬性值轴或，操作 checkbox 時(shí)選中返回 checked昌跌，沒有選中返回 undefined。 attr('checked')

attr('name')

prop(屬性名稱) 獲取具有true和false兩個(gè)屬性的屬性值 prop('checked')

設(shè)置屬性

attr("屬性名","屬性值");

prop("屬性名","屬性值");

移除屬性

removeAttr("屬性名")? 移除指定屬性名

操作元素樣式

attr("class") 獲取class樣式名

attr("class","樣式名") 設(shè)置class樣式名 （會(huì)將原本的樣式移除照雁，設(shè)置新的樣式）

addClass("樣式名") 添加樣式名 （會(huì)保留的原有的樣式般码；如果出現(xiàn)相同屬性的樣式荧嵌，則以在style標(biāo)簽中后定義的樣式名為準(zhǔn)）

css("具體樣式名","樣式值") 添加一個(gè)具體的樣式? （相當(dāng)于寫在style屬性中的樣式）

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

操作元素值

Jquery操作元素的值

html()

取值：html()

賦值：html("內(nèi)容");

獲取非表單元素的內(nèi)容（包含元素中的html標(biāo)簽）

text()

取值：text()

賦值：text("內(nèi)容");

獲取非表單元素的純文本內(nèi)容（不包含元素中的html標(biāo)簽）

val()

取值：val()

賦值：val("內(nèi)容");

獲取表單元素的值

JS操作元素的值

innerHTML

取值：innerHTML

賦值：innerHTML = "內(nèi)容";

獲取非表單元素的內(nèi)容（包含元素中的html標(biāo)簽）

innerText

取值：innerText

賦值：innerText = "內(nèi)容";

獲取非表單元素的純文本內(nèi)容（不包含元素中的html標(biāo)簽）

value

取值：value

賦值：value = "內(nèi)容";

獲取表單元素的值

添加元素

創(chuàng)建元素

$("元素內(nèi)容")

添加元素

方法 說明

prepend(content) 在被選元素內(nèi)部的開頭插入元素或內(nèi)容魔熏，被追加的 content 參數(shù)三圆，可以是字符、HTML 元素標(biāo)記卸勺。

$(content).prependTo(selector) 把 content 元素或內(nèi)容加入 selector 元素開頭

append(content) 在被選元素內(nèi)部的結(jié)尾插入元素或內(nèi)容砂沛，被追加的 content 參數(shù)，可以是字符曙求、HTML 元素標(biāo)記碍庵。

$(content).appendTo(selector) 把 content元素或內(nèi)容插入selector 元素內(nèi)，默認(rèn)是在尾部

before() 在元素前插入指定的元素或內(nèi)容:$(selector).before(content)

after() 在元素后插入指定的元素或內(nèi)容:$(selector).after(content)

注意：

如果追加的元素不存在悟狱，則直接添加静浴；

如果追加的元素存在，則將存在的元素剪切到指定位置挤渐。

刪除元素

方法 說明

remove() 刪除所選元素或指定的子元素苹享，包括整個(gè)標(biāo)簽和內(nèi)容一起刪。

empty() 清空所選元素的內(nèi)容

遍歷元素

each()

$(selector).each(function(index,element)) :遍歷元素

參數(shù) function 為遍歷時(shí)的回調(diào)函數(shù)浴麻，

index 為遍歷元素的序列號(hào)得问，從 0 開始。

element是當(dāng)前的元素软免，此時(shí)是dom元素宫纬。

jQuery事件

ready加載事件

ready加載事件類似于onload事件

語法：

$(document).ready(function(){});

簡(jiǎn)寫版：

$(function(){});

ready()方法可以寫多個(gè)，按順序執(zhí)行

ready事件與onload事件的區(qū)別：

這兩個(gè)方法都是預(yù)加載事件膏萧，等頁面加載完畢后執(zhí)行的方法漓骚。

ready事件：當(dāng)頁面的DOM結(jié)構(gòu)加載完畢后執(zhí)行

onload事件：當(dāng)頁面的dom結(jié)構(gòu)及頁面資源加載完畢后執(zhí)行

bind綁定事件

bind()綁定元素事件

為被選元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)榛泛。

$(selector).bind( eventType [, eventData], handler(eventObject))

eventType ：是一個(gè)字符串類型的事件類型蝌蹂，就是你所需要綁定的事件。

這類類型可以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown, keypress, keyup, error 曹锨。

[, eventData]：傳遞的參數(shù)孤个，格式：{名:值,名2:值2}

handler(eventObject)：該事件觸發(fā)執(zhí)行的函數(shù)