Web屋メモ

Web系エンジニアのメモです。

<< Javascriptデータグリッド  jQueryが素晴らしい その2 >>

スポンサーサイト

一定期間更新がないため広告を表示しています

- | - | - | 
blogram投票ボタン

jQueryが素晴らしい

javascriptライブラリはjQueryで決まりです。

数年前までjavascript(以下jsと表記)ライブラリはprototype.jsがデファクトスタンダードでしたが、2007年ごろからjQueryが注目され、シェアも逆転したっぽいです。
google、microsoft、Nokia、DELLなんかでもjQueryを採用しているらしい。

私も以前はprototype.jsscript.aculo.usを使ってましたが、jQueryを
使ってみて目からウロコでした。
軽くて簡単で、コードがキレイでメンテナンス性が良い!

エレメントを参照する場合でjs標準機能やprototype.jsと比べてみます。
js標準
id要素で指定
document.getElementById(id)
name要素で指定
document.getElementsByName(name)
タグ名で指定
document.getElementsByTagName(tagName)
getElementByIdは、ひとつのエレメントが返却されるが、
他は複数のエレメントの配列が返される。
prototype.js
上記の素のjsのものに加えてCSSクラス名での参照メソッドが追加される
document.getElementsByClassName(className)
また、
$(id)
というdocument.getElementById(id)のショートカットが提供される。
jQuery
id要素で指定
$("#id")
CSSクラス名で指定
$(".className")
タグ名で指定
$("tagName")
CSSのセレクタを同じ指定方法。
CSSを知ってる人なら、新たに何かを覚える必要なし!
しかもCSSと同じで下表のような指定もできます。
複数セレクタをグルーピング$("div,span,p")
要素の親子関係$("parent > child")
先祖子孫$("ancestor descendant")
前後関係$("prev + next")
兄弟関係$("prev ~ siblings")

さらにフィルタが充実してるので、思いのままに一発でエレメントを参照できます。
:first先頭の要素
:last末尾の要素
:not(selector)指定したセレクターを除外した要素
:even偶数番の要素
:odd奇数番の要素
:eq(index)インデックス指定した要素
:gt(index)指定したインデックスより後の要素
:lt(index)指定したインデックスより前の要素
:contains(text)指定した文字列を含む要素
:empty空要素
:has(selector)指定したセレクター要素を子孫に持つ要素
:parent何がしかの子要素(テキストも含む)を持つ要素
:hidden非表示の要素や、hidden属性のinput要素
:visible可視状態にある要素

そしてjQueryが優れているのはここからです。


$()で参照したエレメントはjQuery独自形式のオブジェクトで返ってきて、そのオブジェクトに対して一括で操作できます。
たとえばDIVタグすべてにcolor: "red"スタイルをつけるには、
$("div").css("color","red");
だけです。
複数エレメントの操作にもforなどでループする必要がないんです。

そして、jQueryのほとんどのメソッドはjQueryオブジェクトを返却するので、メソッドをチェーン状につなげていけます。
commentクラス要素すべてを青色にして、高さを50にして、アニメーションでゆっくり隠して、ゆっくり戻す時は、
$('.comment').css('background-color','blue').height(50).hide(2000).show(2000);
という感じです。
シェルで|を使ってコマンドの入出力をつなげる感じでなじみやすいし、
一連の処理をまとめてコードをキレイに保てます。 

このページを見ている状態でfirebugのコンソールで上記の2例を実行させてみてください。(firebugについてはこちらのエントリを参照)

実行速度も速い

こちらのサイトで主要ライブラリの実際の実効速度を比較できます。
(jQuery1.3〜はセレクタエンジンSizzleを使ってるので、Sizzle参照のこと)
Javascript | comments(0) | trackbacks(78) | 
blogram投票ボタン

スポンサーサイト

- | - | - | 
blogram投票ボタン

COMMENTS

COMMENT?

 
 
 


TRACKBACK

グーグル マップ at 2009/04/07 4:35 PM
グーグル マップ
グーグル マップの紹介をしています。 グーグル マップのことなら任せてください。
- at 2009/07/18 2:26 AM
-
管理者の承認待ちトラックバックです。
- at 2009/07/18 2:27 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/22 1:23 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/22 2:38 PM
-
管理者の承認待ちトラックバックです。
- at 2009/09/22 6:24 PM
-
管理者の承認待ちトラックバックです。
- at 2009/09/22 8:51 PM
-
管理者の承認待ちトラックバックです。
- at 2009/09/23 7:31 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/24 4:28 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/24 6:07 PM
-
管理者の承認待ちトラックバックです。
- at 2009/09/24 11:23 PM
-
管理者の承認待ちトラックバックです。
- at 2009/09/26 1:07 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/26 3:54 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/27 6:53 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/27 11:02 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/27 1:13 PM
-
管理者の承認待ちトラックバックです。
- at 2009/09/28 7:11 AM
-
管理者の承認待ちトラックバックです。
- at 2009/09/30 12:19 PM
-
管理者の承認待ちトラックバックです。
- at 2009/09/30 3:31 PM
-
管理者の承認待ちトラックバックです。
- at 2009/09/30 5:16 PM
-
管理者の承認待ちトラックバックです。
- at 2009/11/15 6:08 AM
-
管理者の承認待ちトラックバックです。
- at 2009/11/17 2:36 PM
-
管理者の承認待ちトラックバックです。
- at 2009/11/19 9:58 AM
-
管理者の承認待ちトラックバックです。
- at 2009/12/23 6:51 AM
-
管理者の承認待ちトラックバックです。
- at 2009/12/23 10:44 PM
-
管理者の承認待ちトラックバックです。
- at 2009/12/26 12:00 AM
-
管理者の承認待ちトラックバックです。
- at 2009/12/26 8:41 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/06 6:36 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/06 8:04 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/07 6:37 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/08 1:13 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/11 7:40 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/11 1:56 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/12 1:03 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/12 10:34 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/13 4:29 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/13 7:38 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/13 11:46 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/16 10:26 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/19 6:33 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/19 9:17 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/21 7:51 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/22 3:21 AM
-
管理者の承認待ちトラックバックです。
- at 2010/03/23 3:39 PM
-
管理者の承認待ちトラックバックです。
- at 2010/03/26 1:29 AM
-
管理者の承認待ちトラックバックです。
- at 2010/04/06 12:40 AM
-
管理者の承認待ちトラックバックです。
- at 2010/04/06 5:48 AM
-
管理者の承認待ちトラックバックです。
- at 2010/04/06 2:12 PM
-
管理者の承認待ちトラックバックです。
- at 2010/04/12 9:04 PM
-
管理者の承認待ちトラックバックです。
- at 2010/04/13 8:18 PM
-
管理者の承認待ちトラックバックです。
- at 2010/04/15 9:32 PM
-
管理者の承認待ちトラックバックです。
- at 2010/04/16 4:21 PM
-
管理者の承認待ちトラックバックです。
- at 2010/04/17 12:29 AM
-
管理者の承認待ちトラックバックです。
- at 2010/04/18 12:53 AM
-
管理者の承認待ちトラックバックです。
- at 2010/04/20 1:01 AM
-
管理者の承認待ちトラックバックです。
- at 2010/04/22 6:52 AM
-
管理者の承認待ちトラックバックです。
- at 2010/05/15 7:45 AM
-
管理者の承認待ちトラックバックです。
- at 2010/05/18 10:54 AM
-
管理者の承認待ちトラックバックです。
- at 2010/05/20 5:04 PM
-
管理者の承認待ちトラックバックです。
- at 2010/05/28 10:11 AM
-
管理者の承認待ちトラックバックです。
- at 2010/05/28 8:40 PM
-
管理者の承認待ちトラックバックです。
- at 2010/05/29 7:03 AM
-
管理者の承認待ちトラックバックです。
- at 2010/05/29 1:43 PM
-
管理者の承認待ちトラックバックです。
- at 2010/05/30 11:52 AM
-
管理者の承認待ちトラックバックです。
- at 2010/05/30 12:57 PM
-
管理者の承認待ちトラックバックです。
- at 2010/06/02 3:32 AM
-
管理者の承認待ちトラックバックです。
- at 2010/06/02 10:34 AM
-
管理者の承認待ちトラックバックです。
- at 2010/06/03 11:55 AM
-
管理者の承認待ちトラックバックです。
- at 2010/08/15 9:03 AM
-
管理者の承認待ちトラックバックです。
- at 2010/08/15 10:17 AM
-
管理者の承認待ちトラックバックです。
- at 2010/08/15 6:21 PM
-
管理者の承認待ちトラックバックです。
- at 2010/08/15 7:34 PM
-
管理者の承認待ちトラックバックです。
- at 2010/08/17 4:52 AM
-
管理者の承認待ちトラックバックです。
- at 2010/08/17 6:31 AM
-
管理者の承認待ちトラックバックです。
- at 2010/08/18 7:23 AM
-
管理者の承認待ちトラックバックです。
- at 2010/08/20 5:09 AM
-
管理者の承認待ちトラックバックです。
- at 2010/08/21 2:42 PM
-
管理者の承認待ちトラックバックです。
- at 2010/08/24 8:49 AM
-
管理者の承認待ちトラックバックです。
TB URL :: http://sir2.jugem.jp/trackback/22
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>
求人情報サイト[ InterNext Career] スカウト登録
no alt string