jquery_jquery のドキュメント要素セレクター

1. $ から始めます
プロトタイプに詳しい人にとっては、$ 記号はよく知られているはずです。

prototype: var element = $('eleId')
jquery: var element = $( '#eleId ')
DOM: var element = document.getElementById('eleId')
プロトタイプと比較すると、jquery には追加の # 記号が付いています
例:

$('#j1').html()

こんにちは、jQuery!

2. xpath CSS を通じて必要なものを取得します...
1)。
この例で使用する必要がある HTML コード

警告!

私は最初の段落です

2 番目の段落、おい、ロケッツは 0-33 で負けた! ロケッツのベンチは恥辱の柱に置かれた
ヤオ マイ

もう周りには誰もいない 頻繁にミスをする人はヤオ・ミンにとって致命的な毒となる ベンチの消滅がロケッツが遅れをとっている主な理由である

jquery code:

//div.contentToChange
の p マーク配列の長さを取得します。alert($('div.contentToChange p').size())

//一致する要素をすべて表示/非表示にします。ここで一致する要素は p.firstParagraph
$ ('div.contentToChange p.firstParagraph').slideToggle('slow');

//すべてに一致する p 要素を見つけます。アラートではないすべての div.contentToChange の下に css を追加し、その後にテキストを追加します
$('div.contentToChange p:not(.alert)').append('
これは新しく追加されたテキストです
'); //すべての強力な要素を検索し、css が addText の要素である場合、
$('strong.addText').remove();

// CSS が SecondParagraph である要素を P マークの下で見つけてフェードアウトします
$(' div.contentToChange p.secondParagraph').hide('slow');

//すべての em 要素を検索しますdiv.contentToChange の下で、jquery の css メソッドで色とフォントを変更します
$ ('div.contentToChange em').css({color: "#993300",fontWeight: "bold"}); 🎜>
//CSS スタイルを追加
$('div.contentToChange p.secondParagraph ').addClass('new')

//CSS スタイルを削除
$('div. contentToChange p.secondParagraph').removeClass('new');

2) .

この例で使用する必要がある HTML コード:



この

段落
には、"groof"

Text を含むいくつかの CSS 属性が含まれており、アウター リンク、いくつかの 、および次で始まるハイパーリンク属性も含まれています。 #. $(代码)

リスト項目 1 (
silly.pdf

1. リスト item
2
with class="
2. groof" list item 3 サプライズ!


3. リスト項目 4 への愚かなリンク付き
silly.pdflief.pdf

4. サポート ロケット、サポート MM!


5. 
   jquery code
   
   //最初のリスト項目を取得します
   $('#jqdt ol li:eq(0)')
   //
   $(' #jqdt と同等) ').find('li:eq(0)') //以下は
   
   と同じ//全ての偶数行のリスト項目を取得
   $('#jqdt ol li :even')
   
   //インデックスが 3 未満のリスト項目を取得します
   $('#jqdt ol li:lt(3)')
   
   //すべてのリスト項目を取得しますcss が Groove ではない li
   $('#jqdt ol li:not(.groof)')
   
   //P タグ以下の '#' で始まるハイパーリンク属性値を持つ要素をすべて取得
   $('p a [@href*=#]')
   
   //CSS が groof であるすべての code 要素と li 要素のコレクションを取得します
   $('#jqdt code, li. groof')
   
   //まず ol の下の groof の css 属性を持つ A を取得し、次にノード A の下の第 1 レベルの子ノードの強い要素を見つけます
   $('#jqdt ol .groof >strong')
   
   //まず、前のノードとしてリスト項目を持つすべてのリスト項目要素を検索します (したがって、最初のリスト項目は、その前にリスト項目ノードがないため選択されません)。これらの要素のハイパーリンク属性値を「pdf の末尾にある第 1 レベルの子ノード」
   $('#jqdt ol li li > a[@href$=pdf]')
   
   として見つけます。 //すべての非表示の Span 要素を検索します
   $( 'span:visible')
   
   //ハイパーリンク内の単語 rocket を含む要素を検索します
   $('li a:contains("Rocket" )')
   
   
   注:
   $('#jqdt ol.groof > Strong') ここで、> は、次のレベルの子ノードに Strong を含む要素へのアクセスのみを表します。
   に変更された場合$('#jqdt ol.groof Strong') 次に、子ノードの子ノードなど、すべての下位の子ノードの強い要素にアクセスします。
   
   
   3)
   一般的に使用されるカスタム セレクター
   :eq(0) 選択インデックスは 0 に等しく、これは最初の要素
   
   :gt(4) ) 4 より大きいインデックスを持つすべての要素を選択します
   :lt(4) 4 より小さいインデックスを持つすべての要素を選択します
   :first は :eq(0) と同等です
   :last 最後の要素を選択します
   :parent select 子ノードを含むすべての要素 (テキストを含む)
   :contains('test') 指定されたテキストを含む要素を選択します
   :visible すべての表示要素を選択します (display:block|inline、または可視性が含まれます)
   :hidden すべての非表示要素 (表示:なし、またはフォーム要素 (非表示タイプ) を含む非表示の可視性を持つ要素を含む) を選択します。
   
   
   例:
   
   $('p:first').css('fontWeight','bold')
   $('div:hidden').show();
   $(" div :contains('test')").hide();
   
   $('input[@name=bar]').val() //bar という名前の入力フォームの値を取得します
   $('select[@name=slt]').val() // slt
   という名前のドロップダウン メニューの選択値の中央値を取得します $('input[@type=radio][@checked]' ) // 選択されたすべてのラジオ フォームを取得します
   
   
   フォーム セレクター
   
   
   :input すべてのフォーム要素 (input、select、textarea、button) を選択します
   :text を選択します。すべてのテキストフィールド (type="text")
   :password すべてのパスワードフィールド (type="password") を選択します。
   :radio すべてのラジオフィールド (type="radio") を選択します。すべてのチェックボックスフィールドを選択します (type="checkbox")
   :submit すべての送信ボタンを選択します (type="submit")
   :image すべてのフォーム画像を選択します (type="image")。リセット すべてのリセット ボタンを選択します (type=”reset”)。
   :button 他のすべてのボタンを選択します (type=”button”)
   
   
   例:
   
   $(' myForm:input')
   $('input:radio',myForm)
   //:radio は [@type=radio] と同等です