初めてのjQuery：セレクターAPIを一挙解説（後編）
来源：互联网 发布：node.js适用场景 编辑：程序博客网 时间：2024/05/17 00:57
4．CSSの属性セレクター
jQueryは、CSSの属性セレクターの多くにも対応しています。属性セレクターとは、要素の持つ属性の条件で絞り込めるセレクターです。[...] の内側に属性の条件を記述します。
■[attribute]
特定の属性を持つ要素を指定できるセレクターです。
▼サンプルコード（HTML部分）
<ul> <li id="first">テキストテキストテキストテキストテキスト</li> <li class="second">テキストテキストテキストテキストテキスト</li> <li id="third">テキストテキストテキストテキストテキスト</li> <li class="fourth">テキストテキストテキストテキストテキスト</li></ul>▼サンプルコード（スクリプト部分）
$(function(){ $("[id]").css("color","red");})▼実行結果（実際のWebページ）
id属性を持つ要素、つまり1行目と3行目のli要素が赤色になります。
■[attribute='value']
特定の属性が、特定の値を持つ要素を指定できるセレクターです。
▼サンプルコード（HTML部分）
<ul> <li title="first">テキストテキストテキストテキストテキスト</li> <li title="second">テキストテキストテキストテキストテキスト</li> <li title="third">テキストテキストテキストテキストテキスト</li> <li title="fourth">テキストテキストテキストテキストテキスト</li></ul>▼サンプルコード（スクリプト部分）
$(function(){ $("[title='second']").css("color","red");})▼実行結果（実際のWebページ）
title属性の値がsecondの要素、つまり2行目のli要素が赤色になります。
■[attribute!='value']
特定の属性が、特定の値を持たない要素を指定できるセレクターです。このセレクターは要素セレクターの後に記述する必要があります。
▼サンプルコード（HTML部分）
<ul> <li title="first">テキストテキストテキストテキストテキスト</li> <li title="second">テキストテキストテキストテキストテキスト</li> <li title="third">テキストテキストテキストテキストテキスト</li> <li title="fourth">テキストテキストテキストテキストテキスト</li></ul>▼サンプルコード（スクリプト部分）
$(function(){ $("li[title!='first']").css("color","red");})▼実行結果（実際のWebページ）
title属性の値がfirst以外のli要素、つまり1行目以外のli要素が赤色になります。
■[attribute^='value']
特定の属性の値が、特定の文字列で始まっている要素を指定できます。
▼サンプルコード（HTML部分）
<ul> <li title="first">テキストテキストテキストテキストテキスト</li> <li title="second">テキストテキストテキストテキストテキスト</li> <li title="third">テキストテキストテキストテキストテキスト</li> <li title="fourth">テキストテキストテキストテキストテキスト</li></ul>▼サンプルコード（スクリプト部分）
$(function(){ $("[title^='f']").css("color","red");})▼実行結果（実際のWebページ）
title属性の値がfで始まる文字列である要素、つまり1行目と4行目のli要素が赤色になります。
■[attribute$='value']
特定の属性の値が、特定の文字列で終わっている要素を指定できます。
▼サンプルコード（HTML部分）
<ul> <li title="first">テキストテキストテキストテキストテキスト</li> <li title="second">テキストテキストテキストテキストテキスト</li> <li title="third">テキストテキストテキストテキストテキスト</li> <li title="fourth">テキストテキストテキストテキストテキスト</li></ul>▼サンプルコード（スクリプト部分）
$(function(){ $("[title$='d']").css("color","red");})▼実行結果（実際のWebページ）
title属性がdで終わっている文字列である要素、つまり2行目と3行目のli要素が赤色になります。
■[attribute*='value']
特定の属性が、特定の文字列を含んでいる要素を指定できます。
▼サンプルコード（HTML部分）
<ul> <li title="first">テキストテキストテキストテキストテキスト</li> <li title="second">テキストテキストテキストテキストテキスト</li> <li title="third">テキストテキストテキストテキストテキスト</li> <li title="fourth">テキストテキストテキストテキストテキスト</li></ul>▼サンプルコード（スクリプト部分）
$(function(){ $("[title*='ir']").css("color","red");})▼実行結果（実際のWebページ）
title属性がirを含む文字列である要素、つまり1行目と3行目のli要素が赤くなります。
■[attributeFilter1][attributeFilter2]
複数の属性セレクターを同時に指定することもできます。
▼サンプルコード（HTML部分）
<ul> <li title="first">テキストテキストテキストテキストテキスト</li> <li title="second">テキストテキストテキストテキストテキスト</li> <li title="third">テキストテキストテキストテキストテキスト</li> <li title="fourth">テキストテキストテキストテキストテキスト</li></ul>▼サンプルコード（スクリプト部分）
$(function(){$("[title^='f'][title*='th']").css("color","red");})▼実行結果（実際のWebページ）
title属性がfから始まり、かつtitle属性にthが含まれる文字列である要素、つまり4行目のli要素が赤色になります。
headerフィルター
「headerフィルター」は、h1～h6までのheading要素をまとめて指定できるフィルターです。
▼サンプルコード（HTML部分）
<h1>テキストテキストテキストテキストテキスト</h1><p>テキストテキストテキストテキストテキスト</p><h6>テキストテキストテキストテキストテキスト</h6>▼サンプルコード（スクリプト部分）
$(function(){ $(":header").css("color","red");})▼実行結果（実際のWebページ）
1行目のh1要素、3行目のh6要素が赤色になります。
■containsフィルター / hasフィルター
「containsフィルター」は特定の文字列が含まれている要素を、「hasフィルター」は特定の要素が含まれている要素を指定できます。
▼サンプルコード（HTML部分）
<ul> <li><strong>テキスト</strong>テキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>サンプルサンプルサンプルサンプルサンプル</li></ul>▼サンプルコード（スクリプト部分）
$(function(){ $("li:contains('サンプル')").css("color","red"); $("li:has(strong)").css("color","red");})▼実行結果（実際のWebページ）
「サンプル」という文字列が含まれる4番目のli要素と、strong要素を含む最初のli要素が赤色になります。
■parentフィルター
「parentフィルター」は、子要素やテキストを含む要素を指定できるフィルターです。CSS3セレクターで紹介したempty擬似クラスと逆のフィルターです。
▼サンプルコード（HTML部分）
<ul> <li>テキストテキストテキストテキストテキスト</li> <li></li> <li>テキストテキストテキストテキストテキスト</li> <li></li></ul>▼サンプルコード（スクリプト部分）
$(function(){ $("li:parent").css("color","red");})▼実行結果（実際のWebページ）
空のli要素以外のli要素、つまり1行目と3行目が赤色になります。
セレクターAPIのまとめ
ここまでに紹介したとおり、jQueryではさまざまなセレクターを利用して(X)HTMLの要素を指定できます。最後に、jQueryで使えるセレクターをまとめておきましょう（表中の「要素」はセレクターで指定された要素です）。
◆
次回は、セレクターで指定した要素の(X)HTMLやCSSを変更する、さまざまな方法をご紹介します。
- 初めてのjQuery：セレクターAPIを一挙解説（後編）
- 初めてのjQuery：セレクターAPIを一挙解説（前編）
- jquery datatables api （转）
- jquery datatables api （转）
- jquery datatables api （转）
- jquery datatables api （转）
- jquery datatables api （转）
- jquery datatables api （转）
- jquery datatables api （转）
- jQuery API
- jquery api
- jquery api
- jQuery API
- jQuery：jQuery UI API
- jquery validate基础（五）之API
- jQuery API 精美图
- google api 调用 jquery
- jQuery.validate.js API
- build.xml文件生成客户端 CXF
- bt5 note [5] msf运用层攻击
- BootLoader的基本概念
- source 命令 && . 命令
- 代码大全学习-5
- 初めてのjQuery：セレクターAPIを一挙解説（後編）
- 2012.07.10
- Java对象数组
- C#删除，打开文件
- 《php100 视频教程》笔记心得 张恩民 php100 (张迅雷闪击php系列)
- Internals of Java Class Loading - O'Reilly Media
- 函数----MoveWindow
- wxpython treebook 实现在双击事件 double clicking
- Linux多线程──3个子线程轮流运行
