jQuery 選擇器、DOM操作、事件、動(dòng)畫

更新時(shí)間：2010年11月25日 20:01:45 作者：

jquery的東西也算不少，記下來有助于以后參考。這樣也挺方便。

Jquery選擇器

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

$(function(){})

如果獲取的對(duì)象是jQuery對(duì)象，那么在變量前面加上$,例如：var $variable=jQuery對(duì)象

選擇器

1，判斷頁面是否存在某元素：if($(“#tt”).length>0){} 或者if($(“#tt”)[0]){};

2， 基本選擇器

$(“#test”) 選擇id為test的元素

$(“.test”)選擇class為test的所有元素

$(“p”)選擇所有的<p>標(biāo)簽

$(“*”)選擇頁面上的所有元素

$(“span ,#two”)選擇頁面上所有的<span>標(biāo)簽和id為two的元素

3， 層次選擇器

$(“div span”)表示選取div中的所有的span元素

$(“parent>children”)選取parent下所有children的子元素

$(‘.one+span')選取class為one的下一個(gè)span元素

$(‘.one~div')選取class為one的后面的所有的div兄弟元素

$(‘.one+span')等價(jià)于$(“.one”).next(“span”)

$(‘one~div')等價(jià)于$(“.one”).nextAll(“div”)

$(“.one”).siblings(“div”) 選取class為one的所有的兄弟元素div，無論前后

4， 過濾選擇器

（1）基本的過濾器

$(“div:first”)選取所有div元素中第一個(gè)div元素

$(“div:last”)選取所有div元素最后一個(gè)div元素

$(“input:not(.myClass)”)選取class不是myClass的input元素

$(“input:even”)選取索引是偶數(shù)的input元素

$(“input:odd”)選取索引時(shí)奇數(shù)的input元素

$(“input:eq(1)”)選取索引等于1的input元素

$(“input:gt(1)”)選取索引大于1的input元素（大于1不包括1）

$(“input:lt(1)”)選取索引小于1的input元素（小于1不包括1）

$(“:header”)選取網(wǎng)頁中所有的h1、h2……

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

（2）內(nèi)容過濾器

$(“div:contains(‘我')”)選取含有文字“我”的div元素

$(“div:empty”)選取不包含子元素（包含文本元素）的div空元素

$(“div:has(p)”)選取含有p元素的div元素

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

（3）可見性過濾選擇器

$(“:hidden”)選取所有不可見的元素。包括<input type=”hidden”/>,<div style=”display:none;”>和<div style=”visibility:hidden;”>等元素。如果只想選取<input>元素，可以使用$(“input:hidden”)

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

（4）屬性過濾選擇器

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

$(“div[title=test]”)選取屬性title為test的div元素

$(“div[title!=test]”)選取屬性title不是test的div元素（沒有屬性title的div也會(huì)被選?。?/SPAN>

$(“div[title^=test]”)選取屬性title以test開始的div元素

$(“div[title$=test]”)選取屬性title以test結(jié)束的div元素

$(“div[title*=test]”)選取屬性title包含test的div元素

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

（5）子元素過濾選擇器

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

:first只返回單個(gè)元素，而:first-child選擇符將為每個(gè)父元素匹配第一個(gè)子元素。

例如$(“ul li:first-child”)選取每個(gè)ul中第一個(gè)li元素

:last只返回單個(gè)元素，而:last-child選擇符將為每個(gè)父元素匹配最后一個(gè)子元素

$(“ul li:only-child”)在ul中選取是唯一子元素的li元素

:nth-child()選擇器是很常用的子元素過濾選擇器，詳細(xì)功能如下：

1.:nth-child(even)能選取每個(gè)父元素下的索引值是偶數(shù)的元素

2. :nth-child(odd)能選取每個(gè)父元素下的索引值的奇數(shù)的元素

3.:nth-child(2)能選取每個(gè)父元素下索引值等于2的元素

4.nth-child(3n)能選取每個(gè)父元素下的索引值是3的倍數(shù)的元素(n從0開始)

5.nth-child(3n+1)能選取每個(gè)父元素下的索引值是（3n+1）的元素（n從0開始）

（6）表單對(duì)象屬性過濾選擇器

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

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

$(“input:checked”)選取所有被選中的input元素

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

5．表單選擇器

$(“:input”)選取所有input、textarea、select和button元素

$(“:text”)選取所有的單行文本框

$(“:password”)選取所有的密碼框

$(“:radio”)選取所有的單選框

$(“:checkbox”)選取所有的復(fù)選框

$(“:submit”)選取所有的提交按鈕

$(“:image”)選取所有的圖像按鈕

$(“:reset”)選取所有的重置按鈕

$(“:button”)選取所有的按鈕

$(“:file”)選取所有的上傳域

$(“:hidden”)選取所有不可見元素

Dom操作

Dom core（核心）、HTML-DOM和CSS-DOM

1. 插入節(jié)點(diǎn)的方法

append()	$(“p”).append(“<b>你</b>”) <p>test <b>你</b></p>
appendTo()	$(“<b>你</b>”).appendTo(“p”) <p>test <b>你</b></p>
prepend()	$(“p”). prepend ( “<b>你</b>”) <p><b>你</b>test </p>
prependTo()	$(“p”). prependTo ( “<b>你</b>”) <p><b>你</b>test </p>
After()	$(“p”). after ( “<b>你</b>”) <p>test </p><b>你</b>
insertAfter()	$( “<b>你</b>”). insertAfter (“p”) <p>test </p><b>你</b>
Before()	$(“p”). before ( “<b>你</b>”) <b>你</b><p>test </p>
insertBefore()	$( “<b>你</b>”). insertBefore (“p”) <b>你</b><p>test </p>

2. 刪除節(jié)點(diǎn)

Remove()方法 empty()清空節(jié)點(diǎn)

3. 復(fù)制節(jié)點(diǎn)

Clone() $(this).clone(true).appendTo(“body”)

復(fù)制元素的同時(shí)復(fù)制元素中所綁定的事件

4. 替換節(jié)點(diǎn)

replaceWith():$(“p”).replaceWith(“<a>test</a>”);

replaceAll():$(“<a>test</a>”). replaceAll (“p”);

5. 包裹節(jié)點(diǎn)

Wrap()

$(“strong”).wrap(“<b></b>”);<b><strong>ssss</strong></b>

wrapAll()

$(“strong”). wrapAll (“<b></b>”);<b><strong>ssss</strong>

wrapInner()

$(“strong”).wrapInner (<b></b>”);<strong><b>ssss</b></strong>

6. 屬性操作

Attr(); 設(shè)置多個(gè)$(“p”).attr({“title”:”dd”,”name”:”myp”})

removeAttr()移除屬性

7. 樣式操作

獲取和設(shè)置樣式	Attr()
追加樣式	addClass()
移除樣式	removeClass() removeClass(“one two”)
切換樣式	toggle()主要控制行為上的重復(fù)切換 toggleClass()樣式上的重復(fù)切換

判斷是否含有某個(gè)樣式

hasClass()等價(jià)于is(“.one”)

8.設(shè)置和獲取html、文本和值

html()	讀取或者設(shè)置某個(gè)元素中的HTML內(nèi)容
text()	讀取或者設(shè)置某個(gè)元素中文本內(nèi)容
val()	設(shè)置和獲取元素的值defaultValue初始值

9.遍歷節(jié)點(diǎn)

Children()	取得匹配元素的子元素的集合，只考慮子元素不考慮后代元素
Next()	取得匹配元素后面緊鄰的同輩元素
Prev()	取得匹配元素前面緊鄰的同輩元素
Siblings()	取得匹配元素前后所有的同輩元素
Closest()	取得最近的匹配元素
還有很多遍歷方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等

CSS-DOM操作

獲取樣式	$(“.one”).css(“color”)
設(shè)置樣式	$(“.one”).css(“color”,”red”) $(“.one”).css({“opacity”:”0.5”,”background-color”:”blue”})
Height()	$(“.one”).height(),設(shè)置：$(“.one”).height(“20px”)
Width()	$(“.one”).width(),設(shè)置：$(“.one”).width(“200px”)
Offset()	獲取元素在當(dāng)前視窗的相對(duì)偏移，包括top和left
Position()	獲取元素相對(duì)于最近的一個(gè)position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點(diǎn)的相對(duì)偏移，它返回的對(duì)象也包括兩個(gè)屬性，即top和left
ScrollTop()	獲取和設(shè)置元素的滾動(dòng)條距頂端的距離
ScrollLeft()	獲取和設(shè)置元素的滾動(dòng)條距左側(cè)的距離

事件和動(dòng)畫

事件

（1）綁定事件

bind(type[,data],fn);

參數(shù)：type：事件類型，也可以自定義名稱

data:作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象

fn：用來綁定的處理函數(shù)

綁定多個(gè)事件類型

Ex：$(“div”).bind(“mouseover mouseout”,function(){

$(this).toggleClass(“over”);

})

（2）合成事件

Hover(enter,leave);

用于模擬光標(biāo)懸停事件。當(dāng)光標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)（enter）；當(dāng)光標(biāo)移除這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)（leave）

toggle(fn1,fn2,….fnN);

用戶模擬鼠標(biāo)連續(xù)單擊事件。第一次單擊元素，觸發(fā)指定的第一個(gè)函數(shù)；當(dāng)在次單擊同一個(gè)元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)（fn2）；如果有更多的函數(shù)，則依次觸發(fā)，知道最后一個(gè)。

（3）冒泡事件

假設(shè)網(wǎng)頁上有2個(gè)元素，其中一個(gè)元素嵌套在另一個(gè)元素里，并且都被綁定了click事件，同時(shí)body元素也綁定了click事件，當(dāng)點(diǎn)擊最里面元素的事件時(shí)，同時(shí)其它事件也會(huì)觸發(fā)。從內(nèi)向外

停止事件冒泡的方法：stopPropagation()

Ex:$(‘span').bind(“click”,function(event){

Var txt=$().html()+”<p>內(nèi)層span元素被單擊</p>”;

$(‘#msg').html(txt);

Event.stopPropagation(); 停止事件冒泡

})

停止表單默認(rèn)提交：event.preventDefault()==return false;

（4）移除事件

Unbind([type][,data]);

Type:事件類型

Data：將要移除的函數(shù)

（5）觸發(fā)一次函數(shù)

One（type，[data],fn）;

事件觸發(fā)后立即解除

動(dòng)畫

Show()	Slow:600毫秒、normal：400毫秒、fast：200毫秒
Hide()	Slow:600毫秒、normal：400毫秒、fast：200毫秒
Fadeln()	在指定的一段時(shí)間內(nèi)降低元素的不透明度，直到元素完全消失
fadeout()	和上相反
slideUp()	與下相反
slideDown()	元素將由上之下延伸顯示