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

WBOY
リリース: 2016-05-16 19:01:43
オリジナル
1183 人が閲覧しました

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. 2
    with class="
  3. groof" list item 3 サプライズ!

  4. リスト項目 4 への愚かなリンク付き
  5. silly.pdflief.pdf
  6. サポート ロケット、サポート MM!


  7. 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] と同等です
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!