JQUERYの属性セレクターとカスタムセレクターの使い方(2)_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')
})

Web ページ内のすべてのテーブルを上記に変更します効果:

コードをコピー コードは次のとおりです:

$('document')。 ready(function(){
$('tr:nth-child(even)').addClass('alt');
})

表のフォントを追加テーブル内の「wangorg」文字列を含む Thick

コードをコピー コードは次のとおりです:

>$('document').ready(function( ){
$('tr:contains(wangorg)').addClass('abold');
})

関連するセレクターの説明:
:eq(index )
指定されたインデックス (0 から始まる) より後の (より大きい) 結果セット内の要素
:odd
結果内のすべての奇数要素set (0 から開始)
:even 結果セット内のすべての偶数 要素 (0 から開始)
:nth-child(even)
親要素の偶数番目の子要素である要素(1 から数えます)
:contains(text) 指定されたテキスト text を含む要素。