jQuery高階程式設計(4)選擇和操作DOM元素

2021-08-10 13:44:32 字數 3024 閱讀 6616

1、讓選擇器來完成一切

2、jquery中的選擇器語法結合了css1-3和xpath

3、jquery選擇器的功能

(1)選擇器

(2)鏈式呼叫

(3)工具方法

$("tr.highlighted").removeclass("highlighted").addclass("normal");

4、選擇元素

jquery提供了大量方法用於選擇dom元素:可以通過:

(1)元素的屬性

$("[attributename=''string2match]")

還可以採用正規表示式

匹配屬性開頭:$("[attributename^=''value]")

匹配屬性結尾:$("[attributename$

=''value]")

匹配任意位置:$("[attributename*

=''value]")

匹配包含乙個特定值:$("[attributename~

=''value]")  

選擇具有attr屬性且屬性以val開頭或者屬性值等於val的元素:elem[attr|=val]

以上兩個的差別??

選擇具有attr屬性的元素elem[attr]

選擇不是attr屬性的元素elem[attr!=val]

(2)元素的型別

(3)元素的位置

$("li:even")

集合中的偶數成員

odd奇數成員

first

第乙個元素

last

最後乙個元素

eq(3)

匹配集合中第四個元素

gt(2)

匹配集合大於2的元素

lt(3)

匹配索引小於3的元素

(4)css類

a、id屬性

$("div#id");

b、class屬性

$(".myclass")

(5)以上方式組合

萬用字元選擇器:

$("*")搜尋整個dom樹

$("a","js_links#div")只想搜尋乙個dom的子樹

$("#\\$specialid")原來id是$specialled,特殊字元用反斜槓進行轉義

後代選擇器:$("form input")

複式選擇器:$("div#gallery,div#username")

過濾選擇器:

:animated

在執行動畫的所有元素

:eq()

索引等於指定值

:even

偶數所有元素

:first

第乙個元素

:gt()

索引大於指定值

:header

選擇所有標題元素h1h2

:last

最後乙個元素

:lt()

索引小於指定值元素

:not()

不匹配所有元素

:odd

奇數所有元素

過濾表單元素:

:button

:checkbox

:checked

:disaabled

:enabled

:file

:image

:input

input textarea select

button元素

:password

:radio

:reset

:selected

:submit

:text

可見性過濾

:hidden

:visible

內容過濾器

:contains()

包含特定內容的元素

:empty

不包含子元素或空元素

:has()

至少含乙個元素與指定選擇器相匹配的元素

:parent

所有含有子元素或文字節點的元素

根據位置選擇器

:first-child

每個父元素第乙個元素

:last-child

每個父元素最後一元素

:nth-child()

父元素的第*個元素

:only-child

具有唯一子元素的元素

使用者自動以選擇器

>

輸出是0不理解??
遍歷dom
1、$("ul").find("#teachbooks")可以從乙個元素包裝集中查詢與指定選擇器匹配的後代元素--搜尋所有的後代元素
2、.children()只在第一層後代元素中搜尋
3、.get()接受乙個索引值作為引數,並返回乙個dom節點
4、.index()和get相反,接受乙個dom元素作為引數,返回匹配集中的索引值
操作並修改
1、.text()
2、.html()
操作屬性
1、.attr()
2、.removeattr("class")

jQuery高階選擇器

和css層級選擇器類似,可以通過層級關係獲取對應標籤物件。語法 a b 獲得a元素內部的所有的b元素。後代 a b 獲得a元素下面的所有b子元素。子標籤 a b 獲得a元素同級下乙個b元素。直接後兄弟 a b 獲得a元素之後的所有b元素。一般後兄弟 子代111111 子代222222 子代33333...

JavaScript高階程式設計(4)

function型別.首先記住一句話 函式是物件,函式名是指標。1 function sum num1,num2 2 var sum function num1,num2 3 var sum new function num1 num2 return num1 num2 不推薦 上面這三種寫法意義一...

JavaScript高階程式設計(4)

function型別.首先記住一句話 函式是物件,函式名是指標。1 function sum num1,num2 2 var sum function num1,num2 3 var sum new function num1 num2 return num1 num2 不推薦 上面這三種寫法意義一...