jquery selectors_jquery の選択、使用、パフォーマンスの概要

の最初の章を書いた後、私のコードのいくつかの問題を指摘する友人からの返信を見ました。確かに時間の都合上、IDE を使用しなかったので、直接実行しました。あと、私の記憶力の悪さで、大文字を全部忘れてしまいました（笑）。

この講義から始めて、JQ クラス ライブラリに直接アクセスし、JQ の書き方、JQ の一般的なコマンドなどを学びます。今日は主に JQ のセレクターについて話します。これは JQ A メジャーでもあります。 jQueryの特徴は、jQueryという名前からもわかるように、その主な機能がクエリに反映されることです。

前書き: <script></script> で記述されたコードの場合、一般に JS 環境では、コードを window.onload=function(){ に記述します。 .} コード ブロック。これは、ページが読み込まれた後に JS コード ブロックが実行されることを意味します。JQ の場合も同様のメソッド $(function(){...}) を記述します。ここに書かれています。場合によっては、そのように書きたくない場合 (通常、JS コードは タグ内に配置されますが、これはページの読み込み速度に影響します)、JS コードを < に記述することができます。 ;body>。
ID セレクター

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

alert($("#name").val()); //ID 名を持つ入力要素の値を出力します

クラスセレクター

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

alert($(".nameclass").val() ); //出力 nameclass という名前の CSS を持つ入力要素の値

特殊セレクター

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

alert($("input[type=text][name=name]").val()) //出力タイプは次のとおりです。 text と name は、入力要素の値

コードをコピーします コードは次のとおりです。

// 指定された select 要素を選択します:
function chekStatus(o) {
$('#OrderStatus').find('option[value=' o ']') .attr('selected', true);
$('#search_btn').trigger();
}
//すべてを選択
$('#SelectAll').click(function) () {
if (this.checked ) {
$('.forShop:not(:checked)').each(function() {
this.click();
}) ;
}
else {
$('.forShop:checked').each(function() {
this.click();
}
});
//選択された項目はありますか
$('#delSelectProduct').click(function() {
if ($('.protucitem:checked').size() = = 0) {
alert('Please select Baby');
return false;
}
// インデックスに従って、指定されたオプションを選択し、CSS スタイルをオプションに追加します
function chekStatus(o) {
$('#OrderStatus ').find('option')[o].selected = true; .removeClass('cur')[o]).addClass( 'cur');
$('#search_btn').trigger('click');
}
// 代替行の色を追加しますテーブルの行の効果を変更します。行をクリックして色を変更します。
var $trs = $("#baike_div>table>tbody>tr"); //すべての行を選択します
$trs.filter( ":odd").addClass("odd"); //奇数の行を追加します
$trs.filter(":even").addClass("even"); //偶数の行に奇数のスタイルを追加します


必要なセレクターのスキルをいくつか紹介します

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

//(1) ワイルドカード:

$("input[id^='code']"); //id 属性が code
で始まるすべての入力タグ$("input[id$='code']"); //id 属性は code で始まります。
$("input[id*='code']"); //すべてid 属性にコードが含まれる input タグ
//(2) インデックスに従って選択
$( "tbody tr:even") //偶数のインデックスを持つすべての tr タグを選択
$("tbody tr:odd"); //インデックスが奇数のtrタグをすべて選択
//(3) jqueryObj
jqueryObj.children("input")の下位ノードの入力数を取得します。 length;
//(4) クラス main
$(".main > a") の子ノードの下にあるすべての タグを取得します。ラベルをすぐに
jqueryObj.next("div"); //jqueryObj ラベルのすぐ後ろの div を取得し、nextAll ですべてを取得します
// (6)
$("div").eq( 0) インデックスに基づく; //最初の div タグを取得します
//フィルター
$("#code input: not([id^='code'])"); //ID はコードです。タグには、ID がコード

で始まるすべての入力タグが含まれているわけではありません
プロジェクトでよく使用されるセレクターをいくつかリストしました。実際、それらの直接的な意味を理解していれば、コードの効率性が高いかどうかは関係なく、各自が特定の JQ コードを書くことができます。
つまり、基本的な必要な機能を実現することは最初のステップにすぎません。

ヒント: これらのセレクターの戻り値 $("#...") は JQ オブジェクトであり、クリック、マウスオーバーなどの JQ の内部イベントを直接操作できます。 events

さて、ついに JQ セレクターを書き終えました。読んでいただきありがとうございます!