ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery フィルターを使用して要素を除外し、指定したタグのプロパティを変更する方法

jQuery フィルターを使用して要素を除外し、指定したタグのプロパティを変更する方法

PHP中文网
リリース: 2018-05-28 10:18:58
オリジナル
3155 人が閲覧しました

単純なケース:

$(function(){
    $("td[id][id!='']").click(function(){
           //你的逻辑
    });
});
ログイン後にコピー

上記のコードでは、ID があり、その ID が空ではないすべての TD が「独自のロジック」を実行します。

========================転載======================= =

1, eq() 指定したインデックス番号の要素を除外
2, first() 最初に一致した要素を除外
3, last() 最後に一致した要素を除外
4, hasClass()一致する要素には、指定されたクラスが含まれます
5、filter() 指定された式に一致する要素のセットをフィルタリングします
6、is() 要素がパラメータに一致するかどうかを確認します
7、map()
8、has()を含むセットをフィルタリングする 子要素の要素を指定する
9, not() パラメータで一致する要素を除外する
10,slice() 指定されたインデックスから開始して、指定された数の要素をインターセプトする
11,children( ) 指定された要素のリソースを取得するフィルター
12 、closest() 現在の要素から開始して、条件を満たす最初に一致する親要素を返します
13 指定された要素から子要素を検索します
14。 () 指定された要素の次の兄弟要素を取得
15. nextAll() 後続の兄弟要素をすべて取得
16, nextUntil() 終了条件を除いてパラメータが一致するまで後続の要素を取得
17, offsetPosition() を返す要素の位置決めに使用される最初の祖先。つまり、祖先要素の中で相対的または絶対的な位置を持つ要素を検索します。
18.parent() 指定された要素の直接の親要素を取得します
19.parents() までのすべての祖先要素を取得します
20.パラメータが一致するまで、指定された要素の先祖要素を取得します
21. prev() 指定された要素の前の兄弟要素を取得します
22. prevAll() 指定された要素の前の兄弟要素をすべて取得します
23. ) パラメータの条件が一致するまで、指定された要素要素の前にあるすべての兄弟を取得します。 パラメータの条件自体は一致しないので注意してください
24. sinners() 前後関係なく、指定した要素の兄弟要素を取得します
25. add() 選択した要素をjQueryオブジェクトのコレクションに追加します
26. ) 選択された jQuery コレクションに自分自身を追加し、ワンタイム操作を容易にする
27. end() 現在のセレクターで選択されている操作を前の状態に戻します。
28、内容 理解できません

****************************** フィルター*********** ******* ********************

1. eq() 指定されたインデックス番号を持つ要素をフィルターします

構文: eq(index| -index) インデックス番号は 0 から始まり、負の値の場合は最後の番号からカウントダウンし、最後の番号は -1 から始まります

  $("p").eq(1);  //如果选择器改为  $("p").eq(-1),则我是第四个P会被选中
    
  <p>
    <p>我是第一个P</p>
    <p>我是第二个P</p>  //会被选中,索引值为1
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </p>  
ログイン後にコピー

構文: first() このメソッドにはパラメータがありません

  $("p").first();
    
  <p>
    <p>我是第一个P</p>  //我的索引值是0,我是第一个,我会被选中
    <p>我是第二个P</p>
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </p>  
ログイン後にコピー

構文: last() このメソッドにはパラメータがありません

  $("p").last();
    
  <p>
    <p>我是第一个P</p>
    <p>我是第二个P</p>
    <p>我是第三个P</p>
    <p>我是第四个P</p>    //我是最后一个,我会被选中
  </p>  
ログイン後にコピー

構文:hasClass(class ) classはカテゴリ名 //ブール値を返します

   if($("p").hasClass("p2"))
  {
    alert("我里面含有class=p2的元素");  //会弹出,p里的确存在class="p2"的元素
  } 
  <p>
    <p>我是第一个P</p>
    <p class="p2">我是第二个P</p>
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </p>  
ログイン後にコピー

構文:filter(expr|obj|ele|fn) expr:一致する式|obj: jQuery オブジェクト、既存の要素の照合に使用|DOM: 要素の照合に使用される DOM | 関数の戻り値を照合条件として使用

  $("p").filter(".p2");

  <p>
    <p>我是第一个P</p>
    <p class="p2">我是第二个P</p>  //我会被选中,我的class="p2"
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </p>  
ログイン後にコピー

構文: is(expr|obj|ele|fn) expr: 照合式 obj: jQuery オブジェクト、照合条件として使用既存の要素と一致する | DOM: 一致するために使用される DOM 要素 | 関数は一致条件として値を返します

  $($("p").first().is(".p2"))
  {
    alert("不会弹出,因为第一个P的class不等于p2"); 
  }

  <p>
    <p>我是第一个P</p>
    <p class="p2">我是第二个P</p>  //我会被选中,我的class="p2"
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </p>  
ログイン後にコピー

Seven、map()

、has() 指定されたサブ要素を含む要素を除外します

has(expr|ele) expr: DOM 要素の選択

9. not() パラメータで一致する要素を除外します 構文: not(expr|ele|fn) expr: DOM 要素の選択選択 | fn の役割が明確ではありません

  $("p").has("p");
 
  <p>                 //本p会被选中,因为该p含有p子元素
    <p>我是第一个P</p>
    <p class="p2">我是第二个P</p>
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </p>
  <p>
    <span>我是一个span</spam>
  </p>
ログイン後にコピー

10.slice() 指定されたインデックスから開始して、指定された数の要素を切り取ります

構文:slice(start, [end]) 開始位置、終了はオプション、終了位置、終了位置を除きます。指定しない場合は、最後のものが一致します。

  $("p").not(".p2");
 
  <p>
    <p>我是第一个P</p>        //会被选中,没有class=p2
    <p class="p2">我是第二个P</p>  //不会被选中,因为有class=p2被not(".p2")排除了
    <p>我是第三个P</p>        //会被选中,没有class=p2
    <p>我是第四个P</p>         //会被选中,没有class=p2
  </p>  
ログイン後にコピー

************************ フィルター********************** ** *********

11. Children() 指定された要素のリソースを取得するフィルター

構文: Children(expr); は、指定された要素のリソースを取得します。子要素

  $("p").slice(1,3)
 
  <p>
    <p>我是第一个P</p>        //不会被选中,我索引为0
    <p class="p2">我是第二个P</p>  //会被选中,我索引为1
    <p>我是第三个P</p>        //会被选中,我索引为2
    <p>我是第四个P</p>         //不会被选中,虽然我的索引为3,但是不包括我
  </p>  
ログイン後にコピー

12.most() 現在の要素から開始して、条件を満たす最初に一致する親要素を返します

  $("p").children(".p2");
 
  <p>
    <p>我是第一个P</p>        //不会被选中,虽然我是p的子元素,但是我没class=p2
    <p class="p2">我是第二个P</p>  //会被选中,我既是p的子元素,又有class=p2
    <p>我是第三个P</p>        //不会被选中,虽然我是p的子元素,但是我没class=p2
    <p>我是第四个P</p>         //不会被选中,虽然我是p的子元素,但是我没class=p2
  </p>  
ログイン後にコピー

13. find() 指定された要素から子要素を検索します

構文: find(expr| obj|ele) expr: match Expression | obj jQuery object used for matching | DOM element

  $("span").closest("p","p");
  <p>                   //不会被选中,被P抢了先机
    <p>我是第一个P            //P会被选中,因为P符合条件,而且是最先匹配到的,虽然p也符合条件了,但是p不是最先匹配到的。因此p不会被选中。
      <span>我是P里的span</span>
    </p>
  </p>  
ログイン後にコピー

Fourteen, next() 指定された要素の次の兄弟要素を取得

構文: next(expr) expr: オプション、フィルター条件、 if 次の兄弟要素が変更条件を満たさない場合、空を返します。

  $("p").find(".p2");    
  <p>
    <p>我是第一个P</p>        //不会被选中,虽然我是p的子元素,但是我没class=p2
    <p class="p2">我是第二个P</p>  //会被选中,我既是p的子元素,又有class=p2
    <p>我是第三个P</p>        //不会被选中,虽然我是p的子元素,但是我没class=p2
    <p>我是第四个P</p>         //不会被选中,虽然我是p的子元素,但是我没class=p2
  </p>  
ログイン後にコピー

Fifteen, nextAll() 後続の兄弟要素をすべて取得

構文: nextAll(expr) expr: オプション、フィルタ条件、expr条件を満たす後続の兄弟要素をすべて取得

  $(".p2").next();    //如果筛选改为$(".p2").next(".p4")那选中的是哪个呢?答案是:没选中任何元素,因为虽然有个class=p4的P,但它不是.p2的下一个。      
  <p>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p>  
    <p>我是第三个P</p>        //我是.p2的next
    <p class="p4">我是第四个P</p>
  </p>  
ログイン後にコピー

Sixteen, nextUntil() まで後続の要素を取得しますパラメータは終了条件を除いて一致します

   语法:nextUntil([expr|ele][,fil])  expr筛选表达式 | DOM元素筛选,注意不包括参数里的那一个

  $(".p2").nextUntil(".p4");    //注意此方法并不会包括.p4
  <p>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p>  
    <p>我是第三个P</p>        //会被选中,是.p2后面的兄弟元素
    <p class="p4">我是第四个P</p>   //不会被选中,我作为结束条件,但不包括我
  </p>
ログイン後にコピー

十七、offsetPosition()  返回第一个用于定位的祖先元素,即查找祖先元素中position为relative或absolute的元素。

   语法:offsetPosition()  此方法没有参数  由于CSS的绝对定位的定位基准是相对最近的一个已定位元素,因此此方法的作用不言而喻。

  $("span").offsetParent();
  <p style="position:relative">  //选中的是p,因此p是已定位元素。
    <p>
      <span>我是一个span</span>
    </p>
  </p>
ログイン後にコピー

十八、parent()    获取指定元素的直接父元素

    语法:parent(expr)  expr为筛选条件,如果直接父元素不符合条件,则不返回任何元素(无论它的祖先是否具有能与expr匹配的)

  $("span").parent();
  <p style="position:relative">  
    <p>                //我是span的直接父元素,我会被匹配到
      <span>我是一个span</span>
    </p>
  </p>
ログイン後にコピー

十九、parents()   获取指定元素的所有祖先元素,一直到

   语法:parents(expr)  expr为筛选条件,如果某个祖先元素不符合expr则排除

  $("span").parents();
  <p style="position:relative">  //我是span的祖先元素,我也会被匹配到.另外<body></body>也会被匹配到  
    <p>                //我是span的直接父元素,我会被匹配到
      <span>我是一个span</span>
    </p>
  </p>
ログイン後にコピー

二十、parentsUntil()  获取指定元素的祖先元素,知道参数里能匹配到的为止

   语法:parentsUntil(expr)  expr为停止参数,一直匹配到expr为止,同时参数的条件是不会被匹配中的。

  $("span").parentsUntil("p");
  <p style="position:relative">  //我是span的祖先元素,但是我作为停止条件,我也不会被选中  
    <p>                //我是span的直接父元素,我会被选中
      <span>我是一个span</span>
    </p>
  </p>
ログイン後にコピー

二十一、prev()    获取指定元素的前一个兄弟元素

    语法:prev(expr)    expr:可选。当上一个兄弟元素不符合参数中的条件时,不返回任何元素。

  $(".p2").prev();    
  <p>
    <p>我是第一个P</p>      //我会被选中,我是.p2的前一个元素。
    <p class="p2">我是第二个P</p>  
    <p>我是第三个P</p>        
    <p class="p4">我是第四个P</p>   
  </p>
ログイン後にコピー

二十二、prevAll()  获取指定元素前面的所有兄弟元素

    语法:prevAll(expr)  expr:可选,排除所有不能够被expr匹配上的元素

  $(".p4").prevAll(".p2");    
  <p>
    <p>我是第一个P</p>        //不会被选中,虽然我是.p4前面的兄弟元素,但是我没有class=p2
    <p class="p2">我是第二个P</p>  //会被选中,我既是.p4前面的兄弟元素,而且我有class=p2
    <p>我是第三个P</p>        //不会被选中,虽然我是.p4前面的兄弟元素,但是我没有class=p2
    <p class="p4">我是第四个P</p>  
  </p>
ログイン後にコピー

二十三、prevUntil()  获取指定元素前面的所有兄弟元素,直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配

    语法:prevUntil([expr|ele][,fil])  expr匹配表达式 | DOM元素匹配

  $(".p4").prevUntil(".p2");    
  <p>
    <p>我是第一个P</p>        //不会被选中,到p2就停止了
    <p class="p2">我是第二个P</p>  //不会被选中,我是停止条件,不包括我
    <p>我是第三个P</p>        //会被选中,我在.p2前,递归到我在到.p2
    <p class="p4">我是第四个P</p>  //不会被选中,我自己怎么可能是我自己前面的呢?
  </p>
ログイン後にコピー

/******************** 串联 *******************************/

二十四、siblings()  获取指定元素的兄弟元素,不分前后

    语法:siblings(expr);  expr为筛选条件,不符合条件的不会选中

  $(".p2").siblings();    
  <p>
    <p>我是第一个P</p>        //会被选中,我是.p2的兄弟元素
    <p class="p2">我是第二个P</p>  //不会被选中,我是自己
    <p>我是第三个P</p>        //会被选中,我是.p2的兄弟元素
    <p class="p4">我是第四个P</p>  //会被选中,我是.p2的兄弟元素
  </p>
ログイン後にコピー

二十五、add()  将选中的元素添加到jQuery对象集合中

    add(expr|elements|html|jQueryObject)  expr:选择器表达式 | DOM表达式 | Html片段 | jQuery对象,将jQuery对象集合一起方便操作;

  $(".p2").add("span").css("background-color","red");    
  <p>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p>  //会变红
    <p>我是第三个P</p>        
    <p class="p4">我是第四个P</p>  
  </p>
  <span>我是一个span</span>      //会变红
ログイン後にコピー

二十六、andSelf()  将自身加到选中的jQuery集合中,以方便一次性操作

    andSelf()  此方法无参数

  $(".p2").nextAll().andSelf().css("background-color","red");
  <p>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p>  //会变红,这就是andSelf()的效果
    <p>我是第三个P</p>        //会变红
    <p class="p4">我是第四个P</p>  //会变红
  </p>
ログイン後にコピー

二十七、end()   将改变当前选择器选中的操作回退为上一个状态。

    end()   此方法没有参数

  $(".p2").next().end().css("background-color","red");
  <p>
    <p>我是第一个P</p>        
    <p class="p2">我是第二个P</p>  //会变红,这就end()的效果
    <p>我是第三个P</p>        //不会变红,尽管next()方法之后选中的是这一个,但是由于被end()方法回退了因此是上一个。
    <p class="p4">我是第四个P</p>
  </p>
ログイン後にコピー

以上がjQuery フィルターを使用して要素を除外し、指定したタグのプロパティを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート