前端 jQuery選擇器

2021-09-01 05:27:51 字數 2251 閱讀 7814

>

>

>

jquery | selectorstitle

>

src=

"">

script

>

>

body

header

#container

style

>

head

>

>

>

>

jqueryh1

>

header

>

"container"

>

"heading1"

>

heading oneh1

>

"para1"

>

hellop

>

class

="heading2"

>

heading twoh1

>

class

="para2"

>

world>

test span

>

p>

"list"

>

>

list item li

>

>

list item li

>

>

list item li

>

>

list item li

>

>

list item li

>

>

list item li

>

ul>

type

="button"

value

="button 1"

>

type

="submit"

value

="button 2"

>

type

="text"

>

href

="">

googlea

>

href

="">

yahooa

>

div>

>

// $('h1').hide() // 標籤名選擇

// $('h1#heading1').hide(); // 標籤名 + id組合選擇

// $('h1.heading2').hide() // 標籤名 + 類選擇

// $('p span').css('color', 'red') // p下面的span,修改顏色$(

'ul#list li:first').

css(

'color'

,'red')$

('ul#list li:last').

css(

'color'

,'green')$

('ul#list li:even').

css(

'background-color'

,'yellow')$

('ul#list li:odd').

css(

'background-color'

,'#ccc')$

('ul#list li:nth-child(3n)').

css(

'list-style'

,'none'

)// 按照型別選擇$(

':button').

hide()

$(':submit').

hide()

$(':text').

hide()

// 選擇鏈結$(

'[href]').

css(

'color'

,'red')$

('a[href=""]').

css(

'color'

,'green'

)// 全選

// $('*').hide()

script

>

body

>

html

>

顯示效果如下:

**可以直接閱讀,注釋比較明確。總體看,jquery選擇器用起來非常簡潔,且提供了直接操作元素的方法。

end.

前端 jQuery選擇器

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

初識前端 jQuery的選擇器

選擇器方法 說明id選擇器 id屬性值 獲取id屬性為指定值的元素 如果出現同名id屬性,只會獲取第乙個 元素選擇器 標籤名 元素名 獲取指定標籤名的所有元素 類選擇器 class屬性值 獲取class屬性為指定值的所有元素 通用選擇器 獲取頁面中的所有元素 屬性選擇器 屬性名 屬性值 獲取設定過指...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...