DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 選擇器、DOM操作、事件、動畫
jQuery 選擇器、DOM操作、事件、動畫
編輯: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”)選取索引是偶數的input元素

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

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

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

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

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

$(“div:animated”)選取正在執行動畫的div元素

(2)內容過濾器

$(“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也會被選取)

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

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

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

$(“div[id][title$='test']”)選取擁有屬性id,並且屬性title以test結束的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)能選取每個父元素下的索引值是偶數的元素

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

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

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

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

(6)表單對象屬性過濾選擇器

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

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

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

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

5.表單選擇器

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

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

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

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

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

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

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

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

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

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

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

Dom操作

Dom core(核心)、HTML-DOM和CSS-DOM

1. 插入節點的方法

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. 刪除節點

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

3. 復制節點

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

復制元素的同時復制元素中所綁定的事件

4. 替換節點

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

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

5. 包裹節點

Wrap()

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

wrapAll()

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

<strong>ssss</strong></b>

wrapInner()

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

6. 屬性操作

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

removeAttr()移除屬性

7. 樣式操作

獲取和設置樣式

Attr()

追加樣式

addClass()

移除樣式

removeClass() removeClass(“one two”)

切換樣式

toggle()主要控制行為上的重復切換

toggleClass()樣式上的重復切換

判斷是否含有某個樣式

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

8.設置和獲取html、文本和值

html()

讀取或者設置某個元素中的HTML內容

text()

讀取或者設置某個元素中文本內容

val()

設置和獲取元素的值defaultValue初始值

9.遍歷節點

Children()

取得匹配元素的子元素的集合,只考慮子元素不考慮後代元素

Next()

取得匹配元素後面緊鄰的同輩元素

Prev()

取得匹配元素前面緊鄰的同輩元素

Siblings()

取得匹配元素前後所有的同輩元素

Closest()

取得最近的匹配元素

還有很多遍歷方法:find(),filter(),nextAll(),prevAll(),parent(),parents()等

CSS-DOM操作

獲取樣式

$(“.one”).css(“color”)

設置樣式

$(“.one”).css(“color”,”red”)

$(“.one”).css({“opacity”:”0.5”,”background-color”:”blue”})

Height()

$(“.one”).height(),設置:$(“.one”).height(“20px”)

Width()

$(“.one”).width(),設置:$(“.one”).width(“200px”)

Offset()

獲取元素在當前視窗的相對偏移,包括top和left

Position()

獲取元素相對於最近的一個position樣式屬性設置為relative或者absolute的祖父節點的相對偏移,它返回的對象也包括兩個屬性,即top和left

ScrollTop()

獲取和設置元素的滾動條距頂端的距離

ScrollLeft()

獲取和設置元素的滾動條距左側的距離

事件和動畫

事件

(1) 綁定事件

bind(type[,data],fn);

參數:type:事件類型,也可以自定義名稱

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

fn:用來綁定的處理函數

綁定多個事件類型

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

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

})

(2) 合成事件

Hover(enter,leave);

用於模擬光標懸停事件。當光標移動到元素上時,會觸發指定的第一個函數(enter);當光標移除這個元素時,會觸發指定的第二個函數(leave)

toggle(fn1,fn2,….fnN);

用戶模擬鼠標連續單擊事件。第一次單擊元素,觸發指定的第一個函數;當在次單擊同一個元素時,則觸發指定的第二個函數(fn2);如果有更多的函數,則依次觸發,知道最後一個。

(3) 冒泡事件

假設網頁上有2個元素,其中一個元素嵌套在另一個元素裡,並且都被綁定了click事件,同時body元素也綁定了click事件,當點擊最裡面元素的事件時,同時其它事件也會觸發。從內向外

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

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

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

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

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

})

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

(4) 移除事件

Unbind([type][,data]);

Type:事件類型

Data:將要移除的函數

(5) 觸發一次函數

One(type,[data],fn);

事件觸發後立即解除

動畫

Show()

Slow:600毫秒、normal:400毫秒、fast:200毫秒

Hide()

Fadeln()

在指定的一段時間內降低元素的不透明度,直到元素完全消失

fadeout()

和上相反

slideUp()

與下相反

slideDown()

元素將由上之下延伸顯示

自定義動畫animate

語法結構:animate(params,speed,callback);

參數說明如下:

1. Params:一個包含樣式屬性及值的映射,比如{property1:“value1”,property2:”value2”,….}

2. Speed:速度參數,可選。

Callback:在動畫完成時執行的函數,可選

就暫時先添加這點吧,以後再慢慢完善吧!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved