腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

jQuery 選擇器、DOM操作、事件、動畫

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

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

Jquery選擇器

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

$(function(){})

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

選擇器

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

2， 基本選擇器

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

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

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

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

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

3， 層次選擇器

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

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

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

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

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

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

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

4， 過濾選擇器

（1）基本的過濾器

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

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

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

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

$(“input:odd”)選取索引時奇數(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í)行動畫的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也會被選?。?/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)只匹配一個元素，而:nth-child將為每一個父元素匹配子元素，并且:nth-child(index)的index是從1開始的，而:eq(index)是從0算起的

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

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

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

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

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

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

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

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

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

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

（6）表單對象屬性過濾選擇器

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

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

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

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

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é)點的方法

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é)點

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

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

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

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

4. 替換節(jié)點

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

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

5. 包裹節(jié)點

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è)置多個$(“p”).attr({“title”:”dd”,”name”:”myp”})

removeAttr()移除屬性

7. 樣式操作

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

判斷是否含有某個樣式

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

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

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

9.遍歷節(jié)點

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()	獲取元素在當前視窗的相對偏移，包括top和left
Position()	獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點的相對偏移，它返回的對象也包括兩個屬性，即top和left
ScrollTop()	獲取和設(shè)置元素的滾動條距頂端的距離
ScrollLeft()	獲取和設(shè)置元素的滾動條距左側(cè)的距離

事件和動畫

事件

（1）綁定事件

bind(type[,data],fn);

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

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

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

綁定多個事件類型

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

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

})

（2）合成事件

Hover(enter,leave);

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

toggle(fn1,fn2,….fnN);

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

（3）冒泡事件

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

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

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

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

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

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

})

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

（4）移除事件

Unbind([type][,data]);

Type:事件類型

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

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

One（type，[data],fn）;

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

動畫

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