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);