デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:lang()引数で指定したlang属性の要素を選択

構文

引数で指定したlang属性の要素を選択
$(":lang(引数)")ver1.9〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてlang()を設定すると引数で指定したlang属性の要素を選択します。lang属性は言語コードと国コードがありますが、言語コードだけを指定することも可能です(例えばenを指定すれば、en-usやen-ukなどが選択されます)。言語コードと国コードについてはページ最下段のメモ「lang属性の値」で説明しています。

解説

言語コードと国コードを指定

サンプル(lang/01.html)を開いてbody内に3つのdiv要素があることを確認してください。div要素にはそれぞれlang属性が設定され、上から「en」「en-us」「ja」と設定されています。

<div lang="en">lang属性が「en」のdiv要素</div>
<div lang="en-us">lang属性が「en-us」のdiv要素</div>
<div lang="ja">lang属性が「ja」のdiv要素</div>

続いてjQueryを確認して下さい。以下の様に記述され、buttonをクリックしたらlang属性が「en-us」に設定された要素を選択し、cssメソッドを利用して背景色をピンクに変更しています。

$("button").click(function(){
	$(":lang(en-us)").css("background-color","#FCC");
});

結果として、buttonをクリック真ん中のdiv要素が選択され背景色がピンクになります。

言語コードのみを指定

引数には言語コードだけを設定することも可能です。サンプル(lang/02.html)を開いてbody内の構成に変更がないことを確認して下さい。jQueryは以下の様に変更され、引数に言語コードの「en」しか設定されていません。

$("button").click(function(){
	$(":lang(en)").css("background-color","#FCC");
});

結果として、buttonをクリックすると上のdiv要素(lang属性はen)と真ん中のdiv要素(lang属性はen-us)の2つが選択されてピンクになります。

国コードのみでは機能しません

試しに国コードだけ設定したのですが、これは機能しませんでした。サンプル(lang/03.html)を開いて、以下の様に引数に「us」と国コードだけが設定されているのを確認して下さい。

$("button").click(function(){
	$(":lang(us)").css("background-color","#FCC");
});

結果として、buttonをクリックしてもdiv要素は選択されません。

メモ

lang属性の値

htmlのlang属性には「言語コード」と「国コード」をハイフンで連結した値を設定します。国コードは省略することもできます。具体的な言語コードとしてはen(英語)やja(日本語)があり、国コードとしてはus(米国)uk(英国)jp(日本)などがあります。

lang属性で指定する値
言語コード-国コード 例)en-us, ja-jp
※言語コードと国コードをハイフンで連結した値を設定します。言語コードだけの記述も可能です。