1. 程式人生 > >jquery新手入門教學(二)

jquery新手入門教學(二)

jQuery過濾選擇器


符號

說明

用法

:eq(index)

index是從0開始的一個數字,選擇序號為index的元素。選擇第一個匹配的元素。

$(“li:eq(1)”). css(“background”,”red”)

:gt(index)

Index 是從0開始的一個數字,選擇序號大於index的元素

$(“li:gt(2)”). css(“background”,”red”)

:lt(index)

Index是從0開始的一個數字,選擇小於index 的元素

$(“li:lt(2)”). css(“background”,”red”)

:odd

選擇所有序號為奇數行的元素

$(“li:odd”). css(“background”,”red”)

:even

選擇所有序號為偶數的元素

$(“li:even”). css(“background”,”red”)

:first

選擇匹配第一個元素

$(“li:first”). css(“background”,”red”)

:last

選擇匹配的最後一個元素

$(“li:last”). css(“background”,”red”)


jQuery屬性選擇器


符號

說明

用法

$(“a[href]”)

選擇所有包含href屬性的元素

$(“a[href]”). css(“background”,”red”)

$(“a[href=‘baizhi’]”)

選擇href屬性值為itcast的所有a標籤

$(“a[href=’ baizhi’]”). css(“background”,”red”)

$(“a[href!=’baidu’]”)

選擇所有href屬性不等baidu的所有元素,包括沒有href的元素

$(“a[href!=’baidu’]”). css(“background”,”red”)

$(“a[href^=’web’]”)

選擇所有以web開頭的元素

$(“a[href^=’web’]”). css(“background”,”red”)

$(“a[href$=’cn’]”)

選擇所有以cn結尾的元素

$(“a[href$=’cn’]”). css(“background”,”red”)

$(“a[href*=’i’]”)

選擇所有包含i這個字元的元素,可以是中英文

$(“a[href*=’i’]”). css(“background”,”red”)

$(“a[00f][title=’’]”)

選擇所有符合指定屬性規則的元素,都符合才會被選中。

$(“a[href][title=’’]”). css(“background”,”red”)


mouseover事件跟mouseenter事件的區別:

              

mouseover/mouseout事件,滑鼠經過的時候會觸發多次,每遇到一個子元素就會觸發一次。

mouseenter/mouseleave事件,滑鼠經過的時候只會觸發一次


jQuery中Css設定




DOM物件跟jQuery物件相互轉換 :


jQuery物件轉換成DOM物件:
方式一:$(“#btn”)[0]
方式二:$(“#btn”).get(0)

DOM物件轉換成jQuery物件:
$(document) -> 把DOM物件轉成了jQuery物件
var btn = document.getElementById(“btn”);
btn -> $(btn);