jQuery語(yǔ)法

?? 基礎(chǔ)語(yǔ)法：$(selector).action()?;?

????工廠函數(shù)$()：將DOM對(duì)象轉(zhuǎn)化為jQuery對(duì)象

????選擇器selector：獲取需要操作的DOM 元素

????方法action()：jQuery中提供的方法翁涤，其中包括綁定事件處理的方法

??jQuery 入口函數(shù):

????（1）搭建

????????<scriptsrc="js/jquery-1.12.4.js"type="text/javascript"></script>

????（2）執(zhí)行

??????????$(document).ready(function(){

????????????// 執(zhí)行代碼});或者

? ? ? ? ?$(function(){

????????????// 執(zhí)行代碼});

基礎(chǔ)方法

1.操作頁(yè)面元素的方法

?????元素添加樣式：

????Query對(duì)象.addClass([樣式名]);

?????設(shè)置元素樣式

????css("屬性","屬性值") ;//一個(gè)css

????css({"屬性1":"屬性值1","屬性2":"屬性值2"...}) ;//對(duì)個(gè)css

????設(shè)置元素的顯示和隱藏

????????$(selector).show( );

????????$(selector).hide( );

jQuery對(duì)象

使用jQuery來(lái)獲取元素對(duì)象： $(“#title”).html( ); 等同于 ?document.getElementById("title").innerHTML;

DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象

使用$()函數(shù)進(jìn)行轉(zhuǎn)化：

var txtName =document.getElementById("txtName");

var $txtName =$(txtName); ?

在事件中經(jīng)常使用$(this)庄蹋，this是觸發(fā)該事件的對(duì)象

?

jQuery對(duì)象轉(zhuǎn)DOM對(duì)象

jQuery對(duì)象是一個(gè)類似數(shù)組的對(duì)象，可以通過(guò)[index]的方法得到相應(yīng)的DOM對(duì)象

?????????var $txtName =$ ("#txtName");

var txtName =$txtName[0];

通過(guò)get(index)方法得到相應(yīng)的DOM對(duì)象 ???

var $txtName =$("#txtName");

var txtName =$txtName.get(0); ?

選擇器獲取元素

了解：

jQuery選擇器類似于CSS選擇器迷雪，用來(lái)選取網(wǎng)頁(yè)中的元素

分類:

基本選擇器

標(biāo)簽選擇器element

類選擇器?????.class

ID選擇器 ????#id

并集選擇器

selector1,selector2,...,selectorN

全局選擇器????*

層次選擇器

后代選擇器ancestor descendant

? ? ?????$(".textRight p").css("color","red");

子選擇器parent>child

? ? ? $(".textRight>p").css("color","red");

相鄰元素選擇器prev+next

? ? ? ?$("h1+p").css(text-decoration","underline");

同輩元素選擇器prev~sibings

????????$("h1~p").css("text-decoration","underline");

屬性選擇器

????選取給定屬性是以某些特定值開始的元素[attribute^=value]

????選取給定屬性是以某些特定值結(jié)尾的元素??[attribute$=value]

????選取給定屬性是以包含某些值的元素??????[attribute*=value]

1.根據(jù)屬性名獲取元素

屬性選擇器可以根據(jù)是否包含某屬性來(lái)選取元素

a標(biāo)簽帶有class屬性

????????$("#news a[class]").css("background","#c9cbcb");

2.根據(jù)屬性值獲取元素

????屬性選擇器可以根據(jù)屬性的值來(lái)選取元素

????class屬性值為hot

???????$("#news a[class='hot']").css("background","#c9cbcb");

????屬性選擇器可以指定選取不等于屬性是某個(gè)特定值的元素

????class值不等于hot

????$("#news a[class!='hot']").css("background","#c9cbcb");

????根據(jù)屬性值包含特定的值獲取元素

????屬性選擇器可以指定屬性值以指定值開頭的元素

? ? ?A標(biāo)簽href屬性值以www開頭

?????$("#news a[href^='www']").css("background","#c9cbcb");

屬性選擇器可以指定屬性值以指定值結(jié)尾的元素

? ????a標(biāo)簽href屬性值以html結(jié)尾

??????$("#news a[href$='html']"). css("background","#c9cbcb");

屬性選擇器可以指定屬性值包含指定值的元素

a標(biāo)簽href屬性值包含“k2”的元素

????$("#news a[href*='k2']").css("background","#c9cbcb");

過(guò)濾選擇器

1.定義：通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出所需的元素

分類:

基本過(guò)濾選擇器

:eq(index）選取索引等于index的元素（index從0開始

:gt(index)選取索引大于index的元素（index從0開始

:lt(index)選取索引小于index的元素（index從0開始

:header選取所有標(biāo)題元素限书，如h1~h6

:focus選取當(dāng)前獲取焦點(diǎn)的元素

:animated?選擇所有動(dòng)畫

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

:visible選取所有可見的元素

$("p:hidden").show();

:hidden選取所有隱藏的元素

$("p:visible").hide();

常用事件分類

鼠標(biāo)事件

????????鼠標(biāo)事件是當(dāng)用戶在文檔上移動(dòng)或單擊鼠標(biāo)時(shí)而產(chǎn)生的事件

? ? ? ? click( ) ：$(selector).click(function)

???????mouseover( )：$(selector).mousemove(function)

? ? ? ?mouseout( )：$(selector).mouseout(function)

? ? ? ?mouseenter( )：$(selector).mouseenter(function)

? ? ? ?mouseleave( )：$(selector).mouseleave(function)

鍵盤事件

????????用戶每次按下或者釋放鍵盤上的鍵時(shí)都會(huì)產(chǎn)生事件，常用鍵盤事件

????????????????keydown( ):$(selector).keydown(function)

????????????????keyup( ):$(selector).keyup(function)

????????????????keypress( ):$(selector).keypress(function)

瀏覽器事件

調(diào)整窗口大小時(shí)章咧，完成頁(yè)面特效

????????$(selector).resize( );

移除事件

????????????????$(selector).unbind(event,function)

????????????????參數(shù)：event

????????????????????????可選倦西。規(guī)定刪除元素的一個(gè)或多個(gè)事件

????????????????????????由空格分隔多個(gè)事件值。

????????????????????????如果只規(guī)定了該參數(shù)赁严，則會(huì)刪除綁定到指定事件的所有函數(shù)扰柠。

Function

????????????可選。規(guī)定從元素的指定事件取消綁定的函數(shù)名疼约。

復(fù)合事件

hover( )方法

????????相當(dāng)于mouseover與mouseout事件的組合

????????hover()方法規(guī)定當(dāng)鼠標(biāo)指針懸停在被選元素上時(shí)要運(yùn)行的兩個(gè)函數(shù)

????????mouseover與mouseout卤档，如果只指定一個(gè)函數(shù)，則mouseenter和 mouseleave 都執(zhí)行它

? ? ? ? hover(enter,leave);

toggle( )方法

????????切換元素的可見狀態(tài)程剥。

????????toggle( fn1,fn2...)實(shí)現(xiàn)單擊事件的切換劝枣，無(wú)須額外綁定click事件

????????$(selector).toggle(speed,callback,switch)

Speed

規(guī)定元素從可見到隱藏的速度（或者相反）。默認(rèn)為"0"织鲸。

可能的值：

????????????毫秒（比如1500）

????????????"slow"

????????????"normal"

? ? ? ? ? ? "fast"

在設(shè)置速度的情況下舔腾，元素從可見到隱藏的過(guò)程中，會(huì)逐漸地改變其高度搂擦、寬度稳诚、外邊距、內(nèi)邊距和透明度瀑踢。

如果設(shè)置此參數(shù)扳还，則無(wú)法使用switch參數(shù)才避。

Callback?當(dāng)動(dòng)畫100% 完成后，即調(diào)用 Callback 函數(shù)氨距，除非設(shè)置了speed 參數(shù)桑逝，否則不能設(shè)置該參數(shù)。

Switch,布爾值衔蹲，規(guī)定toggle是否隱藏或顯示所有被選元素肢娘。

????????????True -顯示所有元素

????????????False -隱藏所有元素

toggleClass()

????class

????????對(duì)設(shè)置或移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。

????????必需舆驶。規(guī)定添加或移除class的指定元素橱健。

????????如需規(guī)定若干class，請(qǐng)使用空格來(lái)分隔類名沙廉。

? ??????Switch??可選拘荡。布爾值。規(guī)定是否添加或移除class撬陵。