ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery フィルターを使用して要素を除外し、指定したタグのプロパティを変更する方法
単純なケース:
$(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() 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956までのすべての祖先要素を取得します
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会被选中 e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第二个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,索引值为1 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
構文: first() このメソッドにはパラメータがありません
$("p").first(); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //我的索引值是0,我是第一个,我会被选中 e388a4556c0f65e1904146cc1a846bee我是第二个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
構文: last() このメソッドにはパラメータがありません
$("p").last(); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第二个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 //我是最后一个,我会被选中 94b3e26ee717c64999d7867364b1b4a3
構文:hasClass(class ) classはカテゴリ名 //ブール値を返します
if($("p").hasClass("p2")) { alert("我里面含有class=p2的元素"); //会弹出,p里的确存在class="p2"的元素 } e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
構文:filter(expr|obj|ele|fn) expr:一致する式|obj: jQuery オブジェクト、既存の要素の照合に使用|DOM: 要素の照合に使用される DOM | 関数の戻り値を照合条件として使用
$("p").filter(".p2"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //我会被选中,我的class="p2" e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
構文: is(expr|obj|ele|fn) expr: 照合式 obj: jQuery オブジェクト、照合条件として使用既存の要素と一致する | DOM: 一致するために使用される DOM 要素 | 関数は一致条件として値を返します
$($("p").first().is(".p2")) { alert("不会弹出,因为第一个P的class不等于p2"); } e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //我会被选中,我的class="p2" e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
Seven、map()
、has() 指定されたサブ要素を含む要素を除外します
has(expr|ele) expr: DOM 要素の選択
9. not() パラメータで一致する要素を除外します 構文: not(expr|ele|fn) expr: DOM 要素の選択選択 | fn の役割が明確ではありません
$("p").has("p"); e388a4556c0f65e1904146cc1a846bee //本p会被选中,因为该p含有p子元素 e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee 45a2772a6b6107b401db3c9b82c049c2我是一个span5d8d27040b30e9f46281915572ea3452 94b3e26ee717c64999d7867364b1b4a3
10.slice() 指定されたインデックスから開始して、指定された数の要素を切り取ります
構文:slice(start, [end]) 開始位置、終了はオプション、終了位置、終了位置を除きます。指定しない場合は、最後のものが一致します。
$("p").not(".p2"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,没有class=p2 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,因为有class=p2被not(".p2")排除了 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,没有class=p2 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,没有class=p2 94b3e26ee717c64999d7867364b1b4a3
************************ フィルター********************** ** *********
11. Children() 指定された要素のリソースを取得するフィルター
構文: Children(expr); は、指定された要素のリソースを取得します。子要素
$("p").slice(1,3) e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,我索引为0 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我索引为1 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我索引为2 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我的索引为3,但是不包括我 94b3e26ee717c64999d7867364b1b4a3
12.most() 現在の要素から開始して、条件を満たす最初に一致する親要素を返します
$("p").children(".p2"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我是p的子元素,但是我没class=p2 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我既是p的子元素,又有class=p2 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我是p的子元素,但是我没class=p2 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我是p的子元素,但是我没class=p2 94b3e26ee717c64999d7867364b1b4a3
13. find() 指定された要素から子要素を検索します
構文: find(expr| obj|ele) expr: match Expression | obj jQuery object used for matching | DOM element
$("span").closest("p","p"); e388a4556c0f65e1904146cc1a846bee //不会被选中,被P抢了先机 e388a4556c0f65e1904146cc1a846bee我是第一个P //P会被选中,因为P符合条件,而且是最先匹配到的,虽然p也符合条件了,但是p不是最先匹配到的。因此p不会被选中。 45a2772a6b6107b401db3c9b82c049c2我是P里的span54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
Fourteen, next() 指定された要素の次の兄弟要素を取得
構文: next(expr) expr: オプション、フィルター条件、 if 次の兄弟要素が変更条件を満たさない場合、空を返します。
$("p").find(".p2"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我是p的子元素,但是我没class=p2 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我既是p的子元素,又有class=p2 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我是p的子元素,但是我没class=p2 e388a4556c0f65e1904146cc1a846bee我是第四个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我是p的子元素,但是我没class=p2 94b3e26ee717c64999d7867364b1b4a3
Fifteen, nextAll() 後続の兄弟要素をすべて取得
構文: nextAll(expr) expr: オプション、フィルタ条件、expr条件を満たす後続の兄弟要素をすべて取得
$(".p2").next(); //如果筛选改为$(".p2").next(".p4")那选中的是哪个呢?答案是:没选中任何元素,因为虽然有个class=p4的P,但它不是.p2的下一个。 e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //我是.p2的next d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
Sixteen, nextUntil() まで後続の要素を取得しますパラメータは終了条件を除いて一致します
语法:nextUntil([expr|ele][,fil]) expr筛选表达式 | DOM元素筛选,注意不包括参数里的那一个
$(".p2").nextUntil(".p4"); //注意此方法并不会包括.p4 e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,是.p2后面的兄弟元素 d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,我作为结束条件,但不包括我 94b3e26ee717c64999d7867364b1b4a3
十七、offsetPosition() 返回第一个用于定位的祖先元素,即查找祖先元素中position为relative或absolute的元素。
语法:offsetPosition() 此方法没有参数 由于CSS的绝对定位的定位基准是相对最近的一个已定位元素,因此此方法的作用不言而喻。
$("span").offsetParent(); 23380152bb7a1f6d26abfb41d9f06425 //选中的是p,因此p是已定位元素。 e388a4556c0f65e1904146cc1a846bee 45a2772a6b6107b401db3c9b82c049c2我是一个span54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
十八、parent() 获取指定元素的直接父元素
语法:parent(expr) expr为筛选条件,如果直接父元素不符合条件,则不返回任何元素(无论它的祖先是否具有能与expr匹配的)
$("span").parent(); 23380152bb7a1f6d26abfb41d9f06425 e388a4556c0f65e1904146cc1a846bee //我是span的直接父元素,我会被匹配到 45a2772a6b6107b401db3c9b82c049c2我是一个span54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
十九、parents() 获取指定元素的所有祖先元素,一直到6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956
语法:parents(expr) expr为筛选条件,如果某个祖先元素不符合expr则排除
$("span").parents(); 23380152bb7a1f6d26abfb41d9f06425 //我是span的祖先元素,我也会被匹配到.另外6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956也会被匹配到 e388a4556c0f65e1904146cc1a846bee //我是span的直接父元素,我会被匹配到 45a2772a6b6107b401db3c9b82c049c2我是一个span54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
二十、parentsUntil() 获取指定元素的祖先元素,知道参数里能匹配到的为止
语法:parentsUntil(expr) expr为停止参数,一直匹配到expr为止,同时参数的条件是不会被匹配中的。
$("span").parentsUntil("p"); 23380152bb7a1f6d26abfb41d9f06425 //我是span的祖先元素,但是我作为停止条件,我也不会被选中 e388a4556c0f65e1904146cc1a846bee //我是span的直接父元素,我会被选中 45a2772a6b6107b401db3c9b82c049c2我是一个span54bdf357c58b8a65c66d7c19c8e4d114 94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
二十一、prev() 获取指定元素的前一个兄弟元素
语法:prev(expr) expr:可选。当上一个兄弟元素不符合参数中的条件时,不返回任何元素。
$(".p2").prev(); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //我会被选中,我是.p2的前一个元素。 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
二十二、prevAll() 获取指定元素前面的所有兄弟元素
语法:prevAll(expr) expr:可选,排除所有不能够被expr匹配上的元素
$(".p4").prevAll(".p2"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我是.p4前面的兄弟元素,但是我没有class=p2 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我既是.p4前面的兄弟元素,而且我有class=p2 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,虽然我是.p4前面的兄弟元素,但是我没有class=p2 d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
二十三、prevUntil() 获取指定元素前面的所有兄弟元素,直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配
语法:prevUntil([expr|ele][,fil]) expr匹配表达式 | DOM元素匹配
$(".p4").prevUntil(".p2"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,到p2就停止了 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,我是停止条件,不包括我 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我在.p2前,递归到我在到.p2 d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,我自己怎么可能是我自己前面的呢? 94b3e26ee717c64999d7867364b1b4a3
/******************** 串联 *******************************/
二十四、siblings() 获取指定元素的兄弟元素,不分前后
语法:siblings(expr); expr为筛选条件,不符合条件的不会选中
$(".p2").siblings(); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我是.p2的兄弟元素 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //不会被选中,我是自己 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我是.p2的兄弟元素 d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 //会被选中,我是.p2的兄弟元素 94b3e26ee717c64999d7867364b1b4a3
二十五、add() 将选中的元素添加到jQuery对象集合中
add(expr|elements|html|jQueryObject) expr:选择器表达式 | DOM表达式 | Html片段 | jQuery对象,将jQuery对象集合一起方便操作;
$(".p2").add("span").css("background-color","red"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //会变红 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 45a2772a6b6107b401db3c9b82c049c2我是一个span54bdf357c58b8a65c66d7c19c8e4d114 //会变红
二十六、andSelf() 将自身加到选中的jQuery集合中,以方便一次性操作
andSelf() 此方法无参数
$(".p2").nextAll().andSelf().css("background-color","red"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //会变红,这就是andSelf()的效果 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //会变红 d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 //会变红 94b3e26ee717c64999d7867364b1b4a3
二十七、end() 将改变当前选择器选中的操作回退为上一个状态。
end() 此方法没有参数
$(".p2").next().end().css("background-color","red"); e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee我是第一个P94b3e26ee717c64999d7867364b1b4a3 25fdd61924ec43f68f6d130ac257deb1我是第二个P94b3e26ee717c64999d7867364b1b4a3 //会变红,这就end()的效果 e388a4556c0f65e1904146cc1a846bee我是第三个P94b3e26ee717c64999d7867364b1b4a3 //不会变红,尽管next()方法之后选中的是这一个,但是由于被end()方法回退了因此是上一个。 d42a450727133d488599a1f95fad5570我是第四个P94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
以上がjQuery フィルターを使用して要素を除外し、指定したタグのプロパティを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。