第４回目になる、Ext JS開発ガイドです。今回は、「Ext JSによるCSSセレクタの利用」について学んでいきます。
Ext JSによるCSSセレクタの利用
第２回で、解説した「CSSの基本とCSSセレクター」をExt JSで利用する場合に、どのようなコードを記述するのか？について学んでいきます。
各セレクタの説明は、「CSSの基本とCSSセレクター」とかぶるので、極力省いていきます。
エレメントセレクタ
*
HTMLコード
<div id="foo">
<p>
<a href="http://www.xenophy.com">株式会社ゼノフィ</a>
</p><span>
<a href="http://code.xenophy.com">code:x</a>
</span><a href="http://www.google.com/">Google</a>
</div>
JSコード
Ext.select( ‘div#foo * a‘, true ).each(function(el){
el.highlight();
});
E
HTMLコード
<h1>Ext JS 実践開発ガイド</h1>
JSコード
Ext.select( ‘h1‘, true ).each(function(el){
el.highlight();
});
E F
HTMLコード
<ul>
<li>
<a href="http://www.extjs.com/">Ext JS</a>
</li>
</ul>
JSコード
Ext.select( ‘ul li a‘, true ).each(function(el){
el.highlight();
});
E > F または E/F
HTMLコード
<h1>
<p>Ext JS 実践開発ガイド</p>
<div>
<p>サブタイトル</p>
</div>
</h1>
JSコード
Ext.select( ‘h1 > p‘, true ).each(function(el){
el.highlight();
});
Ext.select( ‘h1 / p‘, true ).each(function(el){
el.highlight();
});
E + F
HTMLコード
<p>Pタグ1</p>
<div>DIVタグ1</div>
JSコード
Ext.select( ‘p + div‘, true ).each(function(el){
el.highlight();
});
E ~ F
HTMLコード
<p>Pタグ1</p>
<div>DIVタグ1</div>
<p>Pタグ2</p>
<span>SPANタグ1</span>
<div>DIVタグ2</div>
JSコード
Ext.select( ‘p ~ div‘, true ).each(function(el){
el.highlight();
});
属性セレクタ
E[foo]
HTMLコード
<p class="foo">クラスを持つPタグ</p>
<p>クラスを持たないPタグ</p>
JSコード
Ext.select( ‘p[class]‘, true ).each(function(el){
el.highlight();
});
E[foo=bar]
HTMLコード
<p class="x-foo">x-fooがクラスで指定されているPタグ</p>
<p class="x-bar">x-barがクラスで指定されているPタグ</p>
JSコード
Ext.select( ‘p[class="x-foo"]‘, true ).each(function(el){
el.highlight();
});
E[foo^=bar]
HTMLコード
<p class="x-foo">x-fooがクラスで指定されているPタグ</p>
<p class="x-bar">x-barがクラスで指定されているPタグ</p>
<p class="y-foo">y-fooがクラスで指定されているPタグ</p>
JSコード
Ext.select( ‘p[class^="x-"]‘, true ).each(function(el){
el.highlight();
});
E[foo$=bar]
HTMLコード
<p class="x-foo1">x-foo1がクラスで指定されているPタグ</p>
<p class="x-foo2">x-foo2がクラスで指定されているPタグ</p>
<p class="x-woo1">x-woo1がクラスで指定されているPタグ</p>
<p class="x-bar">x-barがクラスで指定されているPタグ</p>
JSコード
Ext.select( ‘p[class$="oo1"]‘, true ).each(function(el){
el.highlight();
});
E[foo*=bar]
HTMLコード
<p class="x-foo1">x-foo1がクラスで指定されているPタグ</p>
<p class="x-foo2">x-foo2がクラスで指定されているPタグ</p>
<p class="y-foo1">y-foo1がクラスで指定されているPタグ</p>
<p class="y-foo2">y-foo2がクラスで指定されているPタグ</p>
JSコード
Ext.select( ‘p[class*="foo"]‘, true ).each(function(el){
el.highlight();
});
E[foo%=2]
タグの属性値が2で割り切れるエレメントを抽出します。次の例では、imgタグのwidthが2で割り切れるものを選択しています。
HTMLコード
<img width="100" src="http://code.xenophy.com/wp-content/uploads/2009/06/extjslearnlogo.png" />
<img width="101" src="http://code.xenophy.com/wp-content/uploads/2009/06/extjslearnlogo.png" />
JSコード
Ext.select( ‘img[width%=2]‘, true ).each(function(el){
el.frame();
});
E[foo!=bar]
属性値が異なるエレメントを抽出します。次の例では、imgタグのwidthが100でないもの、を選択しています。
HTMLコード
<img width="100" src="http://code.xenophy.com/wp-content/uploads/2009/06/extjslearnlogo.png" />
<img width="101" src="http://code.xenophy.com/wp-content/uploads/2009/06/extjslearnlogo.png" />
JSコード
Ext.select( ‘img[width!="100"]‘, true ).each(function(el){
el.frame();
});
疑似セレクタ
E:first-child
HTMLコード
<p>文章 文章 文章</p>
<p>文章 文章 文章</p><div>
<p>文章 文章 文章</p><p>文章 文章 文章</p>
</div><div>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
</div>
JSコード
Ext.select( ‘p:first-child‘, true ).each(function(el){
el.highlight();
});
E:last-child
HTMLコード
<p>文章 文章 文章</p>
<p>文章 文章 文章</p><div>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
</div><div>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
</div>
JSコード
Ext.select( ‘p:last-child‘, true ).each(function(el){
el.highlight();
});
E:nth-child(n)
HTMLコード
<div>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
</div>
JSコード
Ext.select( ‘div p:nth-child(3)‘, true ).each(function(el){
el.highlight();
});
E:nth-child(odd)
HTMLコード
<div>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
</div>
JSコード
Ext.select( ‘div p:nth-child(odd)‘, true ).each(function(el){
el.highlight();
});
E:nth-child(even)
HTMLコード
<div>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
</div>
JSコード
Ext.select( ‘div p:nth-child(even)‘, true ).each(function(el){
el.highlight();
});
E:only-child
HTMLコード
<div>
<p>文章 文章 文章</p>
</div><div>
<p>文章 文章 文章</p>
<p>文章 文章 文章</p>
</div>
JSコード
Ext.select( ‘div p:only-child‘, true ).each(function(el){
el.highlight();
});
E:checked
HTMLコード
<div>
<input type="checkbox" checked="checked" /><span>チェックボックス</span>
</div>
JSコード
Ext.select( ‘div input:checked + span’, true ).each(function(el){
el.highlight();
});
E:first
ドキュメントの中で、はじめに登場するエレメントを取得します。
HTMLコード
<p>文章</p>
<div>DIV1</div>
<div>DIV2</div>
JSコード
Ext.select( ‘div:first‘, true ).each(function(el){
el.highlight();
});
E:last
ドキュメントの中で、最後に登場するエレメントを取得します。
HTMLコード
<div>DIV1</div>
<div>DIV2</div>
<p>文章</p>
JSコード
Ext.select( ‘div:last‘, true ).each(function(el){
el.highlight();
});
E:nth(n)
HTMLコード
ドキュメントの中で、n番目に登場するエレメントを取得します。
<div>DIV1</div>
<div>DIV1</div>
<p>文章</p>
<div>DIV1</div>
<div>DIV1</div>
JSコード
Ext.select( ‘div:nth(3)‘, true ).each(function(el){
el.highlight();
});
E:odd
E:nth-child(odd)のショートカットです。
奇数で登場するエレメントを取得します。下記の例では、奇数で登場するエレメントでかつDIVタグのものを選択しています。
HTMLコード
<div>DIV1</div>
<div>DIV2</div>
<p>文章</p>
<div>DIV3</div>
<div>DIV4</div>
JSコード
Ext.select( ‘div:odd‘, true ).each(function(el){
el.setStyle({
color: ‘red’
});});
E:even
E:nth-child(even)のショートカットです。
偶数で登場するエレメントを取得します。下記の例では、偶数で登場するエレメントでかつDIVタグのものを選択しています。
HTMLコード
<div>DIV1</div>
<div>DIV2</div>
<p>文章</p>
<div>DIV3</div>
<div>DIV4</div>
JSコード
Ext.select( ‘div:even’, true ).each(function(el){
el.setStyle({
color: ‘red’
});});
E:contains(foo)
innerHTMLのテキストにfooで指定したテキストが含まれるエレメントを取得します。
HTMLコード
<p>Ext JS 実践開発ガイドをご利用いただきありがとうございます。</p>
<p>この文章は、株式会社ゼノフィが提供しています。</p>
JSコード
Ext.select( ‘p:contains(株式会社ゼノフィ)‘, true ).each(function(el){
el.highlight();
});
E:nodeValue(foo)
HTMLコード
<p>This is a paragraph</p>
<p>文章</p>
JSコード
Ext.select( ‘p:nodeValue(This is a paragraph)‘, true ).each(function(el){
el.highlight();
});
E:not(S)
HTMLコード
<p class="x-foo">文章 文章 文章</p>
<p class="x-bar">文章 文章 文章</p>
<p class="x-foo">文章 文章 文章</p>
JSコード
Ext.select( ‘p:not(.x-bar)‘, true ).each(function(el){
el.highlight();
});
E:has(S)
エレメントの子エレメントが指定してたクラスを保持しているエレメントを取得します。次の例では、DIVタグの中にあるタグで、x-barクラスを指定されているタグがある場合、DIVタグが選択されます。
HTMLコード
<div>
<p class="x-bar">message message …</p>
</div>
JSコード
Ext.select( ‘div:has(.x-bar)‘, true ).each(function(el){
el.highlight();
});
E:next(S)
不具合ではないと思われますが、動作検証がとれませんでしたので、検証後記述します。
E:prev(S)
不具合ではないと思われますが、動作検証がとれませんでしたので、検証後記述します。
CSS値セレクタ
E{display=none}
HTMLコード
<p style="color:red">message …</p>
<p style="color:blue">message …</p>
<p style="color:green">message …</p>
JSコード
Ext.select( ‘p{color=blue}‘, true ).each(function(el){
el.setStyle({
fontWeight: ‘bold’
});});
E{display^=none}
HTMLコード
<p style="color:red">message …</p>
<p style="color:blue">message …</p>
<p style="color:green">message …</p>
JSコード
Ext.select( ‘p{color^=g}‘, true ).each(function(el){
el.setStyle({
fontWeight: ‘bold’
});});
E{display$=none}
HTMLコード
<p style="color:red">message …</p>
<p style="color:blue">message …</p>
<p style="color:green">message …</p>
JSコード
Ext.select( ‘p{color$=d}‘, true ).each(function(el){
el.setStyle({
fontWeight: ‘bold’
});});
E{display*=none}
HTMLコード
<p style="color:red">message …</p>
<p style="color:blue">message …</p>
<p style="color:green">message …</p>
JSコード
Ext.select( ‘p{color*=r}‘, true ).each(function(el){
el.setStyle({
fontWeight: ‘bold’
});});
E{display%=2}
不具合ではないと思われますが、動作検証がとれませんでしたので、検証後記述します。
E{display!=none}
HTMLコード
<p style="color:red">message …</p>
<p style="color:blue">message …</p>
<p style="color:green">message …</p>
JSコード
Ext.select( ‘p{color!=green}‘, true ).each(function(el){
el.setStyle({
fontWeight: ‘bold’
});});
次回予告
いかがでしたでしょうか。CSSセレクタを実際にExt JSで利用できました。ドキュメントから指定のエレメントを抽出するこの操作は、基本中の基本ですので、しっかりマスターしてください。
「DOMエレメントとExt.Element」です。
