タグ: jquery

jQueryの短縮記法について。

jQueryで、ある属性にどんな値が設定されているか取得するには
このようにattr属性を使います。

<a href="index.html">index</a>

var a_href = $('a').attr('href');

これが、html5でオリジナルの属性を設定できるdata属性だと
attrのままでも取得できますが
dataをつかって記述を短縮することもできます。

<a href="index.html" data-category="topic">index</a>

var a_attr_category = $('a').attr('data-category');
var a_category = $('a').data('category');

無名関数を使って一定期間ごとに処理を繰り返す。

たとえば、iframeで表示するsample.htmlの内容量に応じてiframeの高さを変えたい場合
sample.htmlの内容を取得できたかどうか0.1秒ごとに確認し
取得できていたらiframeの高さを取得して設定する処理だったらこんな感じ。

<iframe id="iframe_content" src="sample.html"></iframe>

var iframe_content = $("#iframe_content")[0].contentWindow;
(function() {
	if (iframe_content.$ && iframe_content.$.isReady) {
		$("#iframe_content").height(iframe_content.height());
		return;
	}
	setTimeout(arguments.callee, 100); // 何秒間隔で実行するか設定（単位：ミリ秒）
})();

この要素にcssでどんな指定があるか逆引きしたいときのｊQuery

たとえば、#testのpadding-topの値がいくつか調べる場合

var test_paddingTop = $("#test").css("paddingTop");
alert(test_paddingTop);

これで、変数test_paddingTopへ#testのpadding-topが何pxなのか取得できる。

Google Libraries API を使うと、jQueryやYUI、PrototypeなどをGoogleから直接ダウンロードして使えます。

例えば、jQueryを読み込みたい場合は、head内にこう追記すると読み込めます。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.7");
</script>

読み込めるプラグイン等のラインナップは、こちらにリストアップされていました。

https://developers.google.com/speed/libraries/

jQueryのように、jsファイル1コ追加すればいけるものは、手順に大差ないので
どうかな〜と思いましたが

Ext Coreなんかは、ファイルを大量に設置するので
数行ソースを追加するだけで直接ダウンロードできると手間がだいぶ省けます。

要素数だけループしてくれるeach関数、これをjQueryで使うときのメモ。

jQueryを使いつつ、配列の要素数だけ処理を実行させようと
eachでこんな書き方をしたらエラーになった。

配列の変数名.each(function(e) {
     $('input#'+e).attr('checked','checked');
});

jQueryでは、$().each() 配列などに使用するeachを区別するためちゃんと　jQuery.each()　というのが用意されていた。

“jQueryでeach” の続きを読む