DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQUERY的屬性選擇符和自定義選擇符使用方法(二)
JQUERY的屬性選擇符和自定義選擇符使用方法(二)
編輯:JQuery特效代碼     
例子:給鏈接中含用“wangorg"字符的鏈接文字加粗
css:
代碼如下:
.abold{
font-weight:bold;
}

html:
代碼如下:
$('document').ready(function(){

$('a[href*=wangorg]').addClass('abold');
})

屬性選擇也可以用組合方式:
$('a[href^=http]
[href*=wangorg]').addClass('abold')

自定義選擇符是JQUERY添加的獨有的完全不同的選擇符,語法與CSS中的偽類選擇符語法相同,即選擇符以一個冒號(:)開頭。
如:從匹配的帶有wangorg類的div集合中選擇第2個項,則相應語法:$('div.wangor:eq(1)')
用CSS的選擇符語法為$('div:nth-child(2)')
例子:將表格的偶數行的底色變為#ccc
CSS:
代碼如下:
.alt{
backgroud-color:#ccc;
}

HTML:
代碼如下:
$('document').ready(function(){

$('tr:odd').addClass('alt')
})

將網頁中的所有表格都變以上效果:
代碼如下:
$('document').ready(function(){
$('tr:nth-child(even)').addClass('alt');
})

將表格中含有“wangorg"字符串的表格的字體加粗
代碼如下:
$('document').ready(function(){
$('tr:contains(wangorg)').addClass('abold');
})

相關選擇器解釋:
:eq(index)
結果集中位於給定索引之後(大於該索引)的元素 (從0開始)
:odd
結果集中所有奇數元素(從0開始)
:even 結果集中所有偶數元素(從0開始)
:nth-child(even)
作為其父元素第偶數個子元素的元素(從1開始計數)
:contains(text) 包含給定文本text的元素。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved