6--Jqueryのセレクター(基本フィルターセレクター)

フィルタセレクタは主に、特定のフィルタルールを使用して必要なDOM要素を除外するためのものであり、セレクタはすべて「:」で始まります。
さまざまなフィルタールールに従って:フィルターセレクターは、基本フィルター、コンテンツフィルター、可視性フィルター、属性フィルター、およびフォームオブジェクト属性フィルターセレクターに分けることができます。

  1. :first
    使用法:$( "tr:first");戻り値は単一要素のコレクションです
    説明:最初に見つかった要素と一致します
    例:最初のdiv要素の背景色を#0000FFに変更します
$(function(){
    
    
    $("div:first").css("backgroundColor","#0000FF");
});
  1. :last
    使用法:$( "tr:last")戻り値コレクション要素
    説明:最後に見つかった要素と一致します。:firstに対応します。
    例:最後のdiv要素の背景色を#0000FFに変更します
$(function(){
    
    
    $("div:last").css("backgroundColor","#0000FF");
});
  1. :not(selector)
    使用法:$( "input:not(:checked)")戻り値収集要素の
    説明:指定されたセレクターに一致するすべての要素を削除します。 "not"に少し似ていますが、入力が選択されていないことを意味します( input type =” checkbox”の場合)
    例:クラスが1ではないすべてのdiv要素の背景色を#0000FFに変更します
$(function(){
    
    
 $("div:not('.one')").css("backgroundColor","#0000FF");
 });
  1. :even
    使用法:$( "tr:even")戻り値コレクション要素の
    説明:0から数えて偶数のインデックス値を持つすべての要素に一致します。js配列は0から数えます。たとえば、テーブルの行を選択するには、0からカウントを開始するため、テーブルの最初のtrは偶数0です。
    例:インデックス値が偶数であるdiv要素の背景色を#0000FFに変更します。
$(function(){
    
    
    $("div:even").css("backgroundColor","#0000FF");
});
  1. :奇数
    使用法:$( "tr:odd")戻り値収集要素
    説明:0から数えて:evenに対応する奇数のインデックス値を持つすべての要素を一致させます。
    例:奇数のインデックス値を持つdiv要素の背景色を変更します。 0000FF
$(function(){
    
    
    $("div:odd").css("backgroundColor","#0000FF");
});
  1. :eq(index)
    使用法:$( "tr:eq(0)")戻り値コレクション要素の
    説明:要素を指定されたインデックス値一致させます。Eq(0)は最初のtr要素を取得します。括弧内のインデックスは要素の配置の数ではなく、インデックス値
    例:インデックス値が3に等しいdiv要素の背景色を#0000FFに変更します
$(function(){
    
    
    $("div:eq(3)").css("backgroundColor","#0000FF");
});
  1. :gt(index)
    使用法:$( "tr:gt(0)")戻り値コレクション要素
    説明:指定されたインデックス値より大きいすべての要素に一致します。
    例:インデックス値がより大きいdiv要素の背景色を変更します。3から#0000FF
$(function(){
    
    
    $("div:gt(3)").css("backgroundColor","#0000FF");
});
  1. :lt(index)
    使用法:$( "tr:lt(2)")戻り値コレクション要素
    説明:指定されたインデックス値未満のすべての要素に一致します。
    例:インデックス値が未満のdiv要素の背景色を変更します。3から#0000FF
$(function(){
    
    
    $("div:lt(3)").css("backgroundColor","#0000FF");
});

selector_filter.jsファイル全体の内容

/**
 * 基本过滤选择器
 */
/*实例:改变第一个 div 元素的背景色为 #0000FFs*/
/*
$(function(){
    $("div:first").css("backgroundColor","#0000FF");
});
*/
/*实例:改变最后一个 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:last").css("backgroundColor","#0000FF");
});
*/
/*实例:改变class不为 one 的所有 div 元素的背景色为 #0000FF*/
/*
 $(function(){
 $("div:not('.one')").css("backgroundColor","#0000FF");
 });
 */
/* 实例:改变索引值为偶数的 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:even").css("backgroundColor","#0000FF");
});*/
/*实例:改变索引值为奇数的 div 元素的背景色为 #0000FF*/
/*
$(function(){
    $("div:odd").css("backgroundColor","#0000FF");
});
*/
/*实例:改变索引值为等于 3 的 div 元素的背景色为 #0000FF*/
/*$(function(){
    $("div:eq(3)").css("backgroundColor","#0000FF");
});*/

/*实例:改变索引值为大于 3 的 div 元素的背景色为 #0000FF*/
/*$(function(){
    $("div:gt(3)").css("backgroundColor","#0000FF");
});*/
/*实例:改变索引值为小于 3 的 div 元素的背景色为 #0000FF*/
$(function(){
    
    
    $("div:lt(3)").css("backgroundColor","#0000FF");
});

オリジナリティは簡単ではありませんが、間違いがあれば提案していただければ幸いです。指を動かして親指を立てます。

おすすめ

転載: blog.csdn.net/qwy715229258163/article/details/113864704