jqueryセレクター基礎講座例を詳しく解説

Jquery のセレクターは非常に優れており、XPath2.0 と CSS1-3 から構文を借用しており、複数のブラウザーと互換性があるため、元は非常に複雑だった DOM が突然単純になり、最新バージョンは 1.2.2b で、すべての例が含まれています。以下の例もこのバージョンに基づいて提供されています。

テストHTMLコード:

<div id="father">
   <div id="first">I am first</div>
   <div id="second" class="red">I am second</div>
   <div id="third" style="display:none">I am third</div>
</div>
<p class="red">I am forth</p>
<h4></h4>

基本:

#id: オブジェクトのid属性に基づいてオブジェクトを取得します。

アラート($('#first').html());
//私が一番であることを示してください

要素: 特定のHTMLタグに一致するすべてのオブジェクト

alert($('p')) .長さ) ;
//Display 4

.class: クラス属性に基づいてオブジェクトを取得します

alert('.red ' : '* ').length
);

//HTMLでオブジェクトの合計を表示しますが、結果はブラウザによって異なります

selector1、selector2、selectorN : 重複を削除せずに複数のセレクターのコレクションを取得します。 アラート($('.red, #second,p').長さ
);

//ディスプレイ 4

レベルセレクター: ancestor子孫: このセレクターはスペースであり、最初に最初のセレクターのすべてのオブジェクトを検索し、次にその子孫ノードオ​​ブジェクトで 2 番目のセレクターに一致するすべてのオブジェクトを検索することを意味します。 アラート($('#お父さん.red')
.html

());

//私がいることを示してくださいSecond

parent > child: このセレクターは大なり記号です。これは、最初のセレクターのすべてのオブジェクトを検索し、次にその子ノード (グランド ノードではない) で 2 番目の選択に一致するすべてのオブジェクトを検索することを意味します。 ) シンボル オブジェクト。

アラート($('#お父さん> .red').html());
//見せてam Second

prev + next: このセレクターはプラス記号です。これは、最初に最初のセレクターのすべてのオブジェクトを検索し、次に同じレベルにあり 2 番目の選択記号と一致する次のノードを検索することを意味します。物体。

アラート($('#父 + .red').html()) ;
//見せてam four

prev ~兄弟: このセレクターは ~ 記号です。これは、最初に最初のセレクターのすべてのオブジェクトを検索し、次に 2 番目のセレクターにも一致する同じレベルの後続のすべてのノード内のオブジェクトを検索することを意味します。 。

アラート($('#最初~#第三').html());
//見せてam third

基本フィルター:

:first: 複数のオブジェクトの最初のオブジェクトと一致
:last: 複数のオブジェクトの最後のオブジェクトと一致

alert( $( '.red:first').html());
//私が2番目であることを示します
アラート($ ('p:last').html());
//私が3番目であることを示してください

;

html());//Show I am forward:even: すべてのオブジェクトの偶数と一致します :odd: すべてのオブジェクトの奇数と一致します

alert($('p:even').length);
//显示2
alert($('p:odd').length);
//显示2

:eq(index)：匹配某一下表的单独某元素

alert($('p:eq(2)').html());
//显示I am second

:gt(index)：匹配大于某一下标的所有元素
:lt(index)：匹配小于某一下标的所有元素

alert($('p:gt(1)').length);
//显示2
alert($('p:lt(2)').length);
//显示2

:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6

alert($(':header').length);
//显示1

:animated：匹配所有有动画效果的元素

function animateIt()
{
   $("#second").slideToggle("slow", animateIt);
}
animateIt();
alert($(':animated').html());
//显示I am second

文本过滤符：

:contains(text)：匹配内部拥有该文本元素的对象，包含间接有用的情况

alert($('p:contains("first")').length);
//显示2

:empty：匹配所有没有子元素的对象

alert($(':header:empty').length);
//显示1

:has(selector)：匹配所有至少含有一个子选择符的对象

alert($('p:has("#third")').attr('id'));
//显示father

:parent：匹配所有的父对象，父对象包含那些只含有文本的对象

alert($('p:parent').length);
//显示4

可见性过滤符：

:hidden：匹配所有隐藏对象，或者input中的hidden类型
:visible：匹配所有可见的对象

alert($('p:hidden').length);
//显示1
alert($('p:visible').length);
//显示3

属性过滤符：

[attribute]：匹配拥有某一属性的所有对象
[attribute=value]：匹配拥有某一属性和值的对象
[attribute!=value]：匹配拥有某一属性，且不是某一值的对象
[attribute^=value]：匹配拥有某一属性，且以某一值开头的对象
[attribute$=value]：匹配拥有某一属性，且以某一值结尾的对象
[attribute*=value]：匹配拥有某一属性，且包含某一值的对象

alert($('p[class]').html());
//显示I am second
alert($('p[class=red]').html());
//显示I am second
alert($('p[id!=father]').length);
//显示3
alert($('p[id^=f]').length);
//显示2
alert($('p[id$=d]').length);
//显示2
alert($('p[id*=ir]').length);
//显示2

[selector1][selector2][selectorN]：匹配同时符合多个属性选择符的对象

alert($('p[id=second][class^=r]').length);
//显示I am second

子过滤符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下标/偶数/奇数/等式的对象，:eq(index)只能匹配某单一对象的子元素特征，而这个方法可以匹配多个对象的某一子元素共同特征

alert($('#father p:nth-child(1)').html());
//显示I am first
alert($('#father p:nth-child(even)').length);
//显示1
alert($('#father p:nth-child(odd)').length);
//显示2
alert($('#father p:nth-child(3n)').length);
//显示1，其实是每3个一匹配

:first-child：匹配第一个子元素
:last-child：匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

alert($('#father p:first-child').html());
//显示I am first
alert($('#father p:last-child').html());
//显示I am third

:only-child：如果一个父元素只有一个子元素，就匹配这个子元素

alert($('p:only-child').length);
//显示0

以上がjqueryセレクター基礎講座例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。