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
- リスト item
2
with class="- groof" list item 3 サプライズ!
-
リスト項目 4 への愚かなリンク付き
silly.pdflief.pdf
- サポート ロケット、サポート MM!
-
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] と同等です