ホームページ > 記事 > ウェブフロントエンド > jQueryのセレクターとは何ですか? jQueryセレクターの紹介
jQueryのセレクターとは何ですか? jQueryセレクターの紹介
- 不言オリジナル
- 2018-09-06 17:24:472739ブラウズ
この記事の内容は、jQueryのセレクターとは何ですか？ jqueryセレクターの紹介は参考になると思います。
セレクター
セレクターとは
jQueryのセレクターは、元々はCSSの選択から派生するように設計されていました。 CSS セレクターよりもはるかに強力です。
基本セレクター
基本的な選択には次の種類があります:
1. ID セレクター
3. ワイルドカード セレクター
5. サンプル コード:レベルセレクター
jQuery の階層セレクターには次のタイプがあります:
2. 指定された要素に基づいて親要素の下にあるすべての子要素と一致します3 . 隣接兄弟セレクター 指定されたターゲット要素に基づいて次の隣接する兄弟要素に一致します 4. 通常の兄弟セレクター 指定されたターゲット要素に基づいて次のすべての兄弟要素に一致します
jQuery オブジェクトは配列のようなオブジェクトであるため、1 つしかありません。要素はリアルタイムで照合でき、返される結果は依然として配列のようなオブジェクトです。サンプルコードは以下の通りです:
<div>卧龙学苑</div>
<div>前端开发</div>
<script>
console.log($('#d1'));
console.log($('div'));
console.log($('.cls'));
// 通配符选择器 - 匹配所有
console.log($('*'));
// 组合选择器 - 多个选择器之间使用逗号分隔(并集)
console.log($('#d1, .cls'));
// 组合选择器 - 多个选择器之间没有任何分隔(交集)
console.log($('#d2.cls'));
</script>
基本フィルターセレクター
jQueryの基本フィルターセレクターには以下の種類があります: 1.:firstフィルターセレクター 最初の要素を取得します
2.:lastフィルターセレクター 最後のAn要素を取得します3.:even フィルター セレクター 0 から始まる偶数のインデックス値を持つすべての要素と一致します 4.:odd フィルター セレクター 0 から始まる奇数のインデックス値を持つすべての要素と一致します
5.:eq() フィルター セレクター指定されたインデックス値6.:gt() フィルター セレクター 指定されたインデックス値より大きいすべての要素と一致します
7.:lt() フィルター セレクター 指定されたインデックス値より小さいすべての要素と一致します
8 .:not() フィルター セレクター すべてを削除します指定されたセレクターに一致する要素
9.:header filter selector h1 h2 h3 h4 h5 h6 のようなヘッダー要素と一致します
10.:animated filter selector マッチングが実行されています アニメーション効果の要素 (jQuery によって実装されたアニメーション)
サンプルコードは次のとおりです:
<div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
<script>
console.log($('#parent div'));
//父子选择器
console.log($('#parent>div'));
// 指定元素的下一个相邻兄弟元素
console.log($('#d1+div'));
// 指定元素的后面所有的兄弟元素
console.log($('#d1~div'));
// siblings()方法 - 获取指定元素所有的兄弟元素(前面+后面)
console.log($('#d1').siblings('div'));
</script>
コンテンツ フィルター セレクター
jQuery1 では次のコンテンツ フィルター セレクターが提供されています。: contains() フィルター セレクター 指定された位置指定バージョンを持つ要素と一致します
2 :empty フィルター セレクターは、一致しない空の要素と一致します。子要素またはテキストを含む 3. :parent フィルター セレクターは、子要素またはテキストを持つ要素と一致します 4. :has() フィルター選択が一致する要素を含む要素
サンプル コードは次のとおりです:
<h1>这是标题</h1>
<h2>这是标题</h2>
<div>卧龙学苑</div>
<div>
<div></div>
</div>
<div></div>
<div></div>
<div>前端开发</div>
<div></div>
<script>
// 在指定范围匹配的元素中进行筛选
console.log($('div:first'));
console.log($('div:last'));
// 索引值为偶数时 -> 奇数元素；索引值为奇数时 -> 偶数元素
console.log($('div:even'));
console.log($('div:odd'));
// :eq(index) -> index表示索引值
console.log($('div:eq(0)'));// 等于
console.log($('div:gt(2)'));// 大于
console.log($('div:lt(2)'));// 小于
// :header -> 匹配h1~h6元素
console.log($(':header'));
function animated(){
$('#animated').slideToggle(animated);
}
animated();
// :animated -> 只能匹配由jQuery实现的动画
console.log($(':animated'));
console.log($('div:not("#child")'));
</script>
可視性フィルターセレクター
1.:hiddenフィルターセレクターは、すべての非表示要素、またはhidde型の要素に一致します2.:visibleフィルターセレクターは、すべての可視要素に一致します
<div>这是div元素</div>
<div></div>
<div>
<div></div>
</div>
<script>
console.log($('div:contains("di")'));
console.log($('div:empty'));
console.log($('div:parent'));
// :has() - 表示包含匹配指定选择器元素的父级元素
console.log($('div:has("#child")')[0]);
</script>
属性フィルターセレクター
1. selector は指定された属性を含む要素と一致します
3.[attr! =value] フィルター セレクターは、特定の属性を含まない要素、または属性が特定の値と等しくない要素に一致します4.[attr^=value] フィルター セレクターは、指定された属性が特定の値で始まる要素に一致します 5.[attr$=value] フィルター セレクターは、特定の値で終わる要素である指定された属性と一致します
6. [attr*=value] フィルター セレクターは、特定の値を含む要素である指定された属性と一致します。7. 組み合わせフィルタリング セレクター 一致する要素は同時に複数の属性フィルターを満たす必要があります
<div>卧龙学苑</div>
<div>前端开发</div>
<input>
<input>
<script>
/*
:hidden选择器
* 不能匹配CSS样式属性visibility设置为hidden的隐藏元素
* 还能匹配HTML页面中不做任何显示效果的元素
* 用法 - 尽量确定元素类型或指定范围
*/
console.log($(':hidden'));
/*
:visible选择器
* 匹配CSS样式属性visibility设置为hidden的隐藏元素
* 当visibility设置为hidden时的元素，依旧占有页面空间
* 还能匹配HTML页面中<html>和<body>元素
*/
console.log($(':visible'));
</script>
子要素フィルター セレクター
1. :nth-child() フィルター セレクター その下の N 番目の子要素または奇数偶数要素と一致します。親要素2. ：first-child フィルタセレクタ 最初の子要素と一致します
3. ：last-child フィルタセレクタ 最後の子要素と一致します 4. 要素が親内の唯一の子要素の場合element と一致します
<div></div>
<div></div>
<div></div>
<div></div>
<script>
console.log($('div[name]'));
console.log($('div[class=mydiv]'));
// [attr!=value]选择器 - 包含没有attr属性的元素
console.log($('div[class!=mydiv]'));
console.log($('div[class^=my]'));
// 属性过滤选择器组合用法 -> 交集
console.log($('div[name=d1][class^=my]'));
</script>
フォームオブジェクト属性フィルター
1.: 有効なフィルターセレクターは、使用可能なすべての要素と一致します
3.: チェックされたフィルターセレクターは、選択されたすべての選択された要素と一致します 4.: 選択されたフィルター セレクター 選択されたすべての
<div>
<div>这是id为d1的div元素</div>
<div>这是id为d2的div元素</div>
<div>这是id为d3的div元素
<div></div>
</div>
</div>
<script>
// :first-child - 当前元素是否为第一个子元素
console.log($('div:first-child'));
console.log($('div:last-child'));
/*
:nth-child(index)
* 作用 - 匹配当前元素作为第index个子元素
* 注意 - index是从 1 开始，表示第几个
*/
console.log($('div:nth-child(1)'));
console.log($('div:only-child'));
</script>
フォーム セレクター
jquery セレクターの詳細については、
jquery マニュアル
を参照するか、 をご覧ください。 jqueryビデオチュートリアル
以上がjQueryのセレクターとは何ですか? jQueryセレクターの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。