二 jq強大的選擇器

$裡面填寫的就是css選擇器的選擇方法

$

('#list1').
css(
'background'
,'green'
)//通過id選取$(
'.red').
css(
'background'
,'red'
)//通過class選取$(
'li').
css(
'background'
,'grey'
)//通過元素名選取$(
'li,p').
css(
'font-size'
,'20px'
)//選取li和p

$

('div a').
css(
'color'
,'green');
//div下子元素中的全部a標籤$(
'div>a').
css(
'color'
,'red');
//選中div的子元素a$(
'div a.link + a').
css(
'color'
,'purple');
//選中a標籤後面的乙個a元素$(
'div a.link ~ a').
css(
'color'
,'blue');
//選中a標籤後面所有的同級a元素

$

('#ulcolor li[class]').
css(
'background'
,'pink');
// li中含有class的標籤$(
'#ulcolor li[title=blue]').
css(
'background'
,'grey');
//li中title的值為blue的標籤$(
'#ulcolor li[title!=blue]').
css(
'background'
,'yellowgreen');
//同級中除了title=blued的其它所有元素$(
'#ulcolor li[title|=css]').
css(
'background'
,'darkgreen');
//字首是用-隔開的$(
'#ulcolor li[id^=color]').
css(
'background'
,'hotpink');
//以屬性值為開始（不需要-隔開）$(
'#ulcolor li[id$=color]').
css(
'background'
,'purple');
//以屬性值為結尾（不需要-隔開）$(
'#ulcolor li[lang*=cn]').
css(
'background'
,'olive');
//屬性中包含cn字串$(
'#ulcolor li[lang~=cn]').
css(
'background'
,'skyblue');
//屬性中包含cn單詞，用空格隔開$(
'#ulcolor li[class=cl][name=kaivon]').
css(
'background'
,'teal');
//屬性中包含cn單詞，用空格隔開

$

('#olcolor li:eq(1)').
css(
'border'
,'5px solid pink');
//下標為1的標籤$(
'#olcolor li:gt(1)').
css(
'border'
,'5px solid grey');
//大於下標為1的標籤$(
'#olcolor li:lt(3)').
css(
'border'
,'5px solid yellowgreen');
//小於下標為3的標籤$(
'#olcolor li:not(#olcolor li:eq(2))').
css(
'border'
,'5px solid darkgreen');
//除了選中的那個標籤，其他的全部選中$(
'#olcolor li:even').
css(
'border'
,'5px solid hotpink');
//偶數$(
'#olcolor li:odd').
css(
'border'
,'5px solid purple');
//奇數$(
'#olcolor li:first').
css(
'border'
,'5px solid olive');
//第乙個$(
'#olcolor li:last').
css(
'border'
,'5px solid skyblue');
//最後乙個$(
'#olcolor li:lang(en)').
css(
'border'
,'5px solid teal');
//lang屬性$(
'#olcolor li:target(tar)').
css(
'border'
,'5px solid yellow');
//tatget屬性$(
':root').
css(
'border'
,'2px solid blue');
//根節點$(
':header').
css(
'border'
,'5px solid darkgreen');
//所有的h標籤

$

('#paragraph p:first-child').
css(
'color'
,'pink');
//第乙個子元素必需是p標籤$(
'#paragraph span:first-of-type').
css(
'color'
,'yellowgreen');
//選擇到第1個span標籤$(
'#paragraph span:last-child').
css(
'color'
,'darkgreen');
$('#paragraph p:last-of-type').
css(
'color'
,'hotpink');
$('#paragraph p:nth-child(2)').
css(
'color'
,'blue');
//選擇到第2個子元素，並且這個子元素必需是p標籤$(
'#paragraph span:nth-of-type(2)').
css(
'color'
,'olive');
//選擇到第二個span標籤$(
'#only p:only-child').
css(
'color'
,'skyblue');
//選擇到只有乙個子元素的標籤$(
'#only-two span:only-of-type').
css(
'font-size'
,'30px');
//選擇到只有乙個span子元素的標籤

$

('#content:contains(kaivon)').
css(
'color'
,'blue');
//選擇內容為kaivon的標籤$(
'div:empty').
css();
//選中所有沒有內容的div標籤$(
'#has:has(p)').
css(
'border'
,'1px solid #000');
//判斷是否含有p標籤$(
'#title:parent').
css(
'border'
,'1px solid #f00'
);

$

(':button').
css(
'border'
,'2px solid #f0f');
//選擇到所有的按鈕$(
'#*** input:checkbox').
wrap(''
).parent()
.css
('border'
,'2px solid purple');
//讓所有的選中的標籤我們加乙個span標籤，然後給父級加上css屬性 $(
':checked').
wrap(''
).parent()
.css
('border'
,'2px solid blue'
);

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

上篇對jquery基本知識做了概述，接下來具體說說jq中主要的功能。之說以說其強大 是因為jquery實現了從 css1 到css3 所有的選擇器以及其他常用的選擇器。以下列出實際開發中比較常用的一些選擇器，具體可以去官方文件檢視。符號 名稱 說明用法 id選擇器 btnshow css color...

jq常用選擇器

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

jq選擇器總結

js選擇 var test document.getelementbyid test var parent test.parentnode 父節點 var chils test.childnodes 全部子節點 var first test.firstchild 第乙個子節點 var last te...