JQuery

1、JQuery特點(diǎn)

(1)輕量級(jí)??(2)鏈?zhǔn)秸Z(yǔ)法?(3)簡(jiǎn)單?(4)寫的更少，做的更多

2、本地調(diào)用：

3、遠(yuǎn)程調(diào)用(聯(lián)網(wǎng)的情況下可以使用百度或者谷歌的JQuery?CDN)：

4、window.onload和$(document).ready()區(qū)別

window.onload

$(document).ready()

執(zhí)行時(shí)機(jī)

必須等待網(wǎng)頁(yè)全部加載完畢（包括?圖片等），然后再執(zhí)行包裹代碼

只需要等待網(wǎng)頁(yè)中的DOM結(jié)構(gòu)?加載完畢，就能執(zhí)行包裹的代碼

執(zhí)行次數(shù)

只能執(zhí)行一次，如果第二次，那么?第一次的執(zhí)行會(huì)被覆蓋

可以執(zhí)行多次，第N次都不會(huì)被上?一次覆蓋

5、入口函數(shù)

$(document).ready(function(){})或者$(function(){})

6、jQuery對(duì)象轉(zhuǎn)化為DOM對(duì)象

<1>jquery對(duì)象[下標(biāo)]??eg：$(“div”)[0]

<2>jquery對(duì)象.get(下標(biāo))??eg：$(“div”).get(0)

7、DOM對(duì)象轉(zhuǎn)化為JQuery對(duì)象$(dom對(duì)象)

單條屬性設(shè)置：

jquery對(duì)象.css('屬性名','屬性值');

多條屬性設(shè)置：

jquery對(duì)象.css({"屬性名1":"屬性值1","屬性名2":"屬性值2",....})

獲取：

jquery.css("屬性名");

8、JQuery選擇器

(1)基本選擇器

#id$(“#hel”)選擇id=hel的元素

.class$(“#hel”)選擇id=hel的元素

Element$(“div”)選擇所有的div元素

*$(“*”)選擇所有元素

E1,E2,E3$(“div,span,.hotclass”)選擇所有div，span,和class為hotcalss的元素

(2)層次選擇器

$(“E1?E2”)$(“div?span”)選擇div下所有span

$(“E1>E2”)$(“div?>?span”)選擇div下的span元素，不包含span下的span元素

$(“E1+E2”?)$(“.one?+?div”)選擇class=one的下一個(gè)div元素

$(“E1?+?E2”)可以用$(E1).next(E2)代替

$(“E1~?E2”)$(“#one?~?div”)選擇id為one后的所有div元素

$(“E1?~?E2”)可以用$(E1).nextAll(E2)代替

(3)過(guò)濾選擇器

<1>基本過(guò)濾選擇器

:first$(“div:first”)選擇第1個(gè)div元素

:last$(“div:last”)選擇最后1個(gè)div元素

:not(E1)$(“input:not(.my)”)選擇class不是.my的所有input元素

:even$(“tr:even”)選擇表格中所有偶數(shù)的行

:odd$(“tr:odd”)選擇表格中所有奇數(shù)的行

:eq(index)$(“tr:eq(1)”)選擇表格行索引等于1的行

:gt(index)$(“tr:gt(1)”)選擇表格行索引大于1的行

:lt(index)$(“tr:lt(1)”)選擇表格行索引小于1的行

:header$(“:header”)選擇網(wǎng)頁(yè)中所有的h標(biāo)題

:animated$(“div:animated”)選擇正在執(zhí)行動(dòng)畫的div元素

<2>內(nèi)容過(guò)濾選擇器

：contains(text)$(“div:contains(‘我’)”)選擇內(nèi)容里包含我的所有div

:empty$(“div:contains(‘我’)”)選擇內(nèi)容里包含我的所有div

:has(E1)$(“div:has(p)”)選擇含有p元素的所有div元素

:parent$(“div:parent”)選擇擁有子元素（包含文本）的所有div元素

<3>可見性過(guò)濾選擇器

:hidden$(“:hidden”)選擇所有不可見元素，包括：,和等，如果只選擇input元素，則可以使用?$(“input:hidden”)

:visible$(“div:visible”)選取所有可見的div元素

<4>屬性過(guò)濾選擇器

$(“div[id]”)選擇擁有id屬性的div元素

$(“div[id=test]”)選擇id屬性值為test的div元素

$(“div[id!=test]”)選擇id屬性值不為test的div元素,沒有id屬性的div也會(huì)被選擇

$(“div[id^=test]”)選擇id屬性值以test開始的所有div元素

$(“div[id$=test]”)選擇id屬性值以test結(jié)束的所有div元素

$(“div[id*=test]”)選擇id屬性值中含有test的所有div元素

$(“div[id][title$=test]”)選擇擁有id屬性,并且title屬性以test結(jié)束的所有div元素

<5>子元素過(guò)濾選擇器

:eq(index)只匹配一個(gè)元素,而:nth-child(index)將為每一個(gè)父元素匹配子元素,并且:nth-child(index)的index從1開始,而:eq(index)的index從0開始.

:first只選擇單個(gè)元素,而:first-child將為每個(gè)父元素匹配第1個(gè)子元素如:

$(“ul?li:first-child”)選擇每個(gè)ul下的第一個(gè)li

$(“ul?li:last-child”)選擇每個(gè)ul下的最后一個(gè)li

$(“ul?li:only-child”)在

中選取是惟一子元素的li

表單對(duì)象屬性過(guò)濾選擇器

:enabled$(“#form1?:enabled”)選取id為form1的表單內(nèi)的所有可用元素

:disabled$(“#form1?:disabled”)選取id為form1的表單內(nèi)所有不可用元素

:checked$(“input:checked”)選擇所有被選中的

:selected$(“select?:selected”)選取所有被選中的選項(xiàng)元素

(4)表單選擇器

:input匹配所有input?textarea?selectbutton元素,$(“:input”)

:text匹配所有單行文本框,$(“:text”)

:password選擇所有密碼框,$(“:password”)

:radio選擇所有單選框,$(“:radio”)

:checkbox選擇所有復(fù)選框,$(“:checkbox”)

:submit???匹配所有提交按鈕，$(“:submit”)

:image???匹配所有圖像按鈕，$(“:image”)

:reset???匹配所有重置按鈕，$(“:reset”)

:button??匹配所有按鈕，$(“:button”)

:file????匹配所有文件域，$(“:file”)

:hidden???匹配所有不可見元素，$(“:hidden”)

(5)jQuery中的方法

<1>

Show()顯示隱藏的匹配元素，可帶整數(shù)參數(shù)表示時(shí)間，單位是毫秒

Hide()隱藏顯示的匹配元素，可帶整數(shù)參數(shù)表示時(shí)間，單位是毫秒

css(name,value)給匹配的元素設(shè)置css樣式

Text(string)獲取或設(shè)置匹配元素的文本內(nèi)容,不包含html標(biāo)簽

Filter(expr)篩選出與指定表達(dá)式匹配的元素集合，其中expr可以是多個(gè)選擇器的組合

addClass(類名)為匹配的元素增加一個(gè)?類樣式

removeClass(class)為匹配的元素移除一個(gè)類樣式

html()獲取或設(shè)置匹配元素的內(nèi)容，包含html標(biāo)簽

siblings()$(“.abc”).siblings()匹配得到class=abc的其它兄弟元素

<2>設(shè)置單條樣式

.css(“屬性名”，”屬性值”)

<3>設(shè)置多條樣式

.css({“屬性名1”:”屬性值1”,”屬性名2”:”屬性值2”,……})

獲取樣式值

.css(“屬性名”)

<4>增加類(可增加/刪除多個(gè)類)

.addClass(“類名1?類名2?……”)???多個(gè)類名之間用空格隔開

.removeClass(“”)

.toggleClass(“”)

.toggleClass(“類名”,true/false)????用來(lái)判斷樣式類添加還是移除的?布爾值

<5>操作元素中的內(nèi)容

設(shè)置：

.html(“str”)???設(shè)置元素的里面的內(nèi)容?可用帶html標(biāo)簽相當(dāng)于js中的innerHTML

.text(“str”)????設(shè)置元素的里面的內(nèi)容?可用不帶html標(biāo)簽相當(dāng)于js中的innerText

.val(“str”)

設(shè)置表單的值相當(dāng)于js中的value

獲取

.html()???????.text()????????.val()

<6>動(dòng)畫操作

1.

Show(參數(shù)1，參數(shù)2)/hide(參數(shù)1，參數(shù)2)

參數(shù)1(可選)：速度，可為fast，slow，或毫秒值。

參數(shù)2(可選)：回調(diào)函數(shù)，動(dòng)畫執(zhí)行完畢后執(zhí)行

Toggle（參數(shù)1，參數(shù)2）：

是show和hide的互斥方法，能模擬兩者的功能。

2.

slideUp(參數(shù)1，參數(shù)2)/slideDown(參數(shù)1，參數(shù)2)

互斥方法：slideToggle(參數(shù)1，參數(shù)2)

3.

fadeIn(參數(shù)1，參數(shù)2)/fadeOut(參數(shù)1，參數(shù)2)

fadeTo(速度，透明度，回調(diào)函數(shù))

互斥方法：fadeToggle(參數(shù)1，參數(shù)2)

9、jquery文檔處理

新創(chuàng)建一個(gè)元素：var?$newD?=?$(“

”);

(1)內(nèi)部插入

<1>append()

父jquery對(duì)象.append(內(nèi)容)???把內(nèi)容追加到父jquery對(duì)象里?(里面最后一個(gè)元素的位置)

$(內(nèi)容).append

$(內(nèi)容).appendTo(父jquery對(duì)象)

<2>prepend()??prependTo()??用法同上

(2)外部插入

在參照物后面插入新對(duì)象：

jQuery參照對(duì)象.after(內(nèi)容)

$(內(nèi)容).insertAfter(jQuery對(duì)象參照物)

在參照物前面插入新對(duì)象：

jQuery參照對(duì)象.bofore(內(nèi)容)

$(內(nèi)容).insertBefore(jQuery對(duì)象參照物)

(3)刪除元素

$(“div”).remove()和$(“div”).detach()：全刪除，包括所有文本和子節(jié)點(diǎn)

$(“div”).empty()??清空jQuery里內(nèi)容(div還在)

(4)替換元素

$(“div”).replaceWith(“內(nèi)容”)???用內(nèi)容替換前面的JQuery對(duì)象，全部替換

(5)復(fù)制元素

JQuery對(duì)象.clone(參數(shù))

參數(shù)：可選，默認(rèn)為false，克隆時(shí)不克隆行為，為true時(shí)，會(huì)克隆事件。

(6)包裝元素

<1>.wrap(包裹格式)

eg:$(“span”).wrap(“

”)

每一個(gè)span都有div包著

<2>.wrapAll()

eg:$(“span”).wrapAll(“

”)

所有span用一個(gè)div包著

<3>.wrapInner()

eg:$(“span”).wrapInner(“”)

用span包著b

<4>.unwrap()

刪除直接父元素

(7)DOM屬性操作

.attr()方法

獲取屬性??$(“span”).attr(“id”)

設(shè)置屬性??$(“span”).attr(“屬性名”，“屬性值”)

(能獲取或設(shè)置自定義的屬性)

.prop()?用法同attr()??但只能獲取本身都有的，不能獲取或設(shè)置自定義的屬性

注意：寫全選框時(shí)，用prop獲取屬性，attr獲取不到checked隱藏屬性

.removeAttr()??移除屬性

(8)CSS操作

offset():返回或設(shè)置匹配元素相對(duì)于文檔的偏移（位置）

設(shè)置偏移量時(shí)，會(huì)自動(dòng)的把元素聲明為定位元素

獲取向上/向左卷去的距離

jquery對(duì)象.scrollTop()/jquery對(duì)象.scrollLeft()

設(shè)置

直接在括號(hào)內(nèi)加數(shù)值，eg：jquery對(duì)象.scrollTop(40)

獲取相對(duì)于父元素的偏移量：

jquery對(duì)象.position().top/jquery對(duì)象.position().left

jquery對(duì)象.width()/.height()不受margin，padding，border的影響。

innerHeight()和innerWidth()不受margin，border的影響，受padding的影響。

outerHeight()和outerWidth()不受margin影響，受padding，bottom影響。

10、綁定事件

bind(type,function)

type:事件類型(例如：blur,focus,load,click)

function是用來(lái)綁定的處理函數(shù)。

(1)綁定單個(gè)事件

bind(“事件名”,function(){})

on(“事件名”,function(){})

(2)綁定多個(gè)事件

on(“事件名1”:“function(){}”,“事件名2”:“function(){}”)

(3)一次性綁定事件

one(“事件名”,function(){})

(4)解除綁定(事件移除)

unbind(“事件名”)???可解除多個(gè)事件

off(“事件名”)

11、事件合成

hover(enter,leave)

enter和leave都是function(),當(dāng)光標(biāo)移動(dòng)到元素上時(shí),會(huì)觸發(fā)指定的第一個(gè)函數(shù),當(dāng)光標(biāo)移出這個(gè)元素時(shí),觸發(fā)指定的第二個(gè)函數(shù)。

12、事件冒泡

阻止事件冒泡：event.stopProPagation()

阻止默認(rèn)行為：event.preventDefault()

13、模擬操作

trigger(type,[,data])

type:要觸發(fā)的事件類型

[,data]:傳遞給事件處理函數(shù)的附加數(shù)據(jù)，以數(shù)組的形式傳遞。

也可以用triggerHandler()

區(qū)別：triggerHandler()不會(huì)觸發(fā)默認(rèn)行為,而只執(zhí)行事件代碼。

14、動(dòng)畫

animate(left:“”，speed,function)

(1)相對(duì)動(dòng)畫(使用+=或者-=)

$(“#pos”).animate({left:”+=20px”},fast);

(2)同時(shí)執(zhí)行多個(gè)動(dòng)畫

$(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast);

(3)停止動(dòng)畫

stop(stopAll,goToEnd))

停止當(dāng)前正在運(yùn)行的動(dòng)畫。

stopAll:可選。默認(rèn)false，規(guī)定是否停止當(dāng)前的動(dòng)畫，后面的動(dòng)畫繼續(xù)執(zhí)行。

goToEnd:可選。默認(rèn)false，是否允許完成當(dāng)前的動(dòng)畫。

stop(true,true)方法：

判斷元素是否處于動(dòng)畫狀態(tài)

(4)延遲動(dòng)畫

jquery對(duì)象.delay(duration)

可以將隊(duì)列中等待執(zhí)行的下一個(gè)動(dòng)畫（回調(diào)函數(shù)里的動(dòng)畫）延遲指定時(shí)間后執(zhí)行。它常用在隊(duì)列的兩個(gè)jQuery效果函數(shù)之間，從而在上一個(gè)動(dòng)畫效果執(zhí)行后延遲下一個(gè)效果的執(zhí)行時(shí)間。

注意：如果下一項(xiàng)不是效果動(dòng)畫，則它不會(huì)被加入效果隊(duì)列中，因此該函數(shù)不會(huì)對(duì)它進(jìn)行延遲調(diào)用。

15、遍歷

(1)向上遍歷

parent():返回被選元素的直接父元素。

parents():返回被選元素的所有祖先元素。一直到文檔根元素()。

parents()也可以直接指定父元素。

eg：$(“span”).parents(“ul”)??返回所有元素的所有祖先，并且是

元素。

parentsUntil():返回介于兩個(gè)給定元素之間的所有祖先元素。

eg:$("#big2").parentsUntil(“#big0”).css("background-color","green");

(2)向下遍歷

children():返回被選元素的所有直接子元素。

find():返回被選元素的后代元素，直到最后一個(gè)后代。

(3)水平遍歷

siblings()：返回被選元素的所有兄弟元素。

next():返回被選元素的下一個(gè)兄弟元素。

nextAll():返回被選元素的所有跟隨的兄弟元素。

nextUntil():返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素。

prev(),preAll(),prevUntil()

(4)過(guò)濾

1.first()?方法返回被選元素的首個(gè)元素。

2.last()?方法返回被選元素的最后一個(gè)元素。

3.eq()?方法返回被選元素中帶有指定索引號(hào)的元素。

4.filter()?方法允許規(guī)定一個(gè)標(biāo)準(zhǔn)。不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除，匹配的元素會(huì)被返回。

例如：

$(".parent?div").filter(":odd").css("color","red");

5.not()?方法返回不匹配標(biāo)準(zhǔn)的所有元素。

not()?方法與?filter()?相反。

16、jQuery?get與eq方法區(qū)別

eq返回的是一個(gè)jQuery對(duì)象，get返回的是一個(gè)html對(duì)象數(shù)組，所以eq可以繼續(xù)調(diào)用jquery其他方法，get就不能調(diào)用jquery的其他方法。

17、each()方法

$(selector).each(function(index){})

可以遍歷指定的元素集合，通過(guò)回調(diào)函數(shù)返回遍歷元素的序列號(hào)。

18、jQuery開發(fā)插件

1.對(duì)象級(jí)別jQuery.fn.extend();

2.類級(jí)別????jQuery.extend();

$.fn.插件名字=function{?}

$.fn?=?jQuery.prototype?=?$.prototype

jQuery.extend(object)

為jQuery類添加類方法，可以理解為添加靜態(tài)方法。如：

jQuery.extend({

min:?function(a,?b)?{?return?a?<?b???a?:?b;?},

max:?function(a,?b)?{?return?a?>?b???a?:?b;?}

});

jQuery.min(2,3);?//??2

jQuery.max(4,5);?//??5

ObjectjQuery.extend(?target,?object1,?[objectN])：

用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象

target

類型:?Object

一個(gè)對(duì)象，如果附加的對(duì)象被傳遞給這個(gè)方法將那么它將接收新的屬性，如果它是唯一的參數(shù)將擴(kuò)展jQuery的命名空間。

object1

類型:?Object

一個(gè)對(duì)象，它包含額外的屬性合并到第一個(gè)參數(shù)

objectN

類型:?Object

包含額外的屬性合并到第一個(gè)參數(shù)

jQuery.extend(?[deep?],?target,?object1?[,?objectN?]?)

deep

類型:?Boolean

如果是true，合并成為遞歸（又叫做深拷貝）。

target

類型:?Object

對(duì)象擴(kuò)展。這將接收新的屬性。

object1

類型:?Object

一個(gè)對(duì)象，它包含額外的屬性合并到第一個(gè)參數(shù).

objectN

類型:?Object

包含額外的屬性合并到第一個(gè)參數(shù)