jQuery 強大的jq選擇器和基本操作。

2022-08-17 15:36:21 字數 3166 閱讀 8387

上篇對jquery基本知識做了概述,接下來具體說說jq中主要的功能。

之說以說其強大:是因為jquery實現了從

css1

到css3

所有的選擇器以及其他常用的選擇器。

以下列出實際開發中比較常用的一些選擇器,具體可以去官方文件檢視。

符號(名稱)

說明用法

#id選擇器

$(「#btnshow」).css(「color」, 「red」);

選擇id

為btnshow

的乙個元素(返回值為jquery

物件,下同)

.

類選擇器

$(「.liitem」).css(「color」, 「red」);

選擇含有類liitem

的所有元素

element

標籤選擇器

$(「li」).css(「color」, 「red」);

選擇標籤名為li

的所有元素

空格後代選擇器

$(「#j_wrap li」).css(「color」, 「red」);

選擇id

為j_wrap

的元素的所有後代元素li

>

子代選擇器

$(「#j_wrap > ul > li」).css(「color」, 「red」);

選擇id

為j_wrap

的元素的所有子元素ul的所有子元素

li:eq(index)

選擇匹配到的元素中索引號為index的乙個元素,index從0開始。

$(「li:eq(2)」).css(「color」, 」red」);

選擇li

元素中索引號為

2的乙個元素

:odd

選擇匹配到的元素中索引號為奇數的所有元素,index從0開始

$(「li:odd」).css(「color」, 「red」);

選擇li

元素中索引號為奇數的所有元素

:even

選擇匹配到的元素中索引號為偶數的所有元素,index從0開始

$(「li:even」).css(「color」, 「red」);

選擇li

元素中索引號為偶數的所有元素

find(selector)

查詢指定元素的所有後代元素(子子孫孫)

$(「#j_wrap」).find(「li」).css(「color」, 「red」);

選擇id

為j_wrap

的所有後代元素

lichildren()

查詢指定元素的直接子元素(親兒子元素)

$(「#j_wrap」).children(「ul」).css(「color」, 「red」);

選擇id

為j_wrap

的所有子代元素

ulsiblings()

查詢所有兄弟元素(不包括自己)

$(「#j_liitem」).siblings().css(「color」, 「red」);

選擇id

為j_liitem

的所有兄弟元素

parent()

查詢父元素(親的)

$(「#j_liitem」).parent(「ul」).css(「color」, 「red」);

選擇id

為j_liitem

的父元素

eq(index)

查詢指定元素的第index

個元素,

index

是索引號,從0開始

$(「li」).eq(2).css(「color」, 「red」);

選擇所有li

元素中的第二個

1、樣式屬性操作  .css()

a,設定單個樣式:

$(selector).css(「color」, 「red」);

給jq物件selector設定文字顏色為紅色,第乙個引數為樣式名稱。第二個引數為樣式屬性值。

b,設定多個樣式:

$(selector).css();

注意點:引數為乙個物件,樣式值之間用「,」分開。

2、獲採樣式屬性操作:

$(selector).css(「font-size」);

此時,會返回」font-size」樣式屬性對應的值。

需注意的地方,操作類樣式,所有的類名都不帶(.);方法名駝峰。

1,新增類樣式。

addclass(classname)為指定元素新增類classname.

$(selector).addclass(「liitem」);

2,移除類樣式。

removeclass(classname)為指定元素移除類 classname。

$(selector).removeclass(「liitem」);

$(selector).removeclass(); 不指定引數,表示移除被選中元素的所有類

3,判斷有無類樣式。

hasclass(calssname) 判斷指定元素是否包含類

classname

$(selector).hasclass(「liitem」);

此時,會返回true

或false

4,切換類樣式。

toggleclass(classname) 為指定元素切換類

classname

,該元素有類則移除,沒有指定類則新增。

$(selector).toggleclass(「liitem」);

開發中總結的經驗:

1 操作的樣式非常少,那麼可以通過

.css()

這個 方法來操作

2 操作的樣式很多,那麼要通過使用類的方式來操作

待續............

二 jq強大的選擇器

裡面填寫的就是css選擇器的選擇方法 list1 css background green 通過id選取 red css background red 通過class選取 li css background grey 通過元素名選取 li,p css font size 20px 選取li和p di...

jquery選擇器和css選擇器

今天開發中碰到乙個問題。class maindiv class mydiv name id div class mydiv name id div class mydiv name id div class mydiv name id div div 是這樣,我獲取class mydiv 下面的某乙...

jq常用選擇器

jquery 使用 css 選擇器來選取 html 元素。div 選取 元素。p.intro 選取所有 class intro 的 元素。p demo 選取所有 id demo 的 元素。jquery 使用 xpath 表示式來選擇帶有給定屬性的元素。href 選取所有帶有 href 屬性的元素。h...