AboutデジタルIT・インターネットJavascriptJavascriptの応用jQueryとはJavascript/Javascriptの応用jQueryとは最近はJavaScriptを使う場合は、ライブラリを使用するケースが増えています。その中でも、突出した人気を誇るjQueryについてのはじめの一歩です。登史朗Javascriptガイド最近はJavaScriptを使う場合は、ライブラリを使用するケースが増えています。ライブラリを使用することで、ブラウザ間の違いや、煩雑なクロスブラウザ操作に触れることなく、多くの機能を簡単に実現することが可能になります。jQueryは、その中でも、突出した人気を誇るライブラリです。今回はそのjQuery基本的な部分から書いてみます。2006年1月に発表した軽量なjavaScriptライブラリです。more」の通り「少ないコードで、より多くのことを実行」できる優れたライブラリです。第一にその特徴は、軽量であること。現在(2010/4)のバージョン1.4.2でMinifiedとGzip圧縮されたサイズはわずか24KBとなります。ブラウザに依存しないクロスブラウザな動作をしてくれます。このおかげで、無数のブラウザ依存コードへの対処に悩まされる苦労が激減します。UI」の存在も魅力です。「プラグイン」は、自作できる拡張メソッドであり、世界中の多くの開発者によって作成されています。jQueryでできることjQueryの、その小さなサイズの中には、実は簡単なエフェクトなどまでも含まれていて、フェイドインの処理も.fadeIn()という一つのメソッドで実行できるなど、簡単に高度な処理を実装できるようになります。$("#mydiv").fadeIn()と書けば、これだけで、id名がmydivという名前の要素がフェイドインします。jQueryがHTMLを操作するときに便利なのは、DOM要素の選択方法として、CSSのセレクタを使用したシンプルな方法が提供されていることです。id名が「my」という要素内の背景色を赤くしたい時、標準のDOMメソッドを利用する場合は、普通のJavaScriptではこう記述します。これはJavaScriptの書き方です。これをjQueryなら、CSSを操作するために、CSSの仕様通りの名前を使い、次のように書くことができます。)いずれも、jQueryとして動作します。CSSの書き方「background-color」が使えています。JavaScriptのCSSプロパティを知らなくても、CSSさえ知っていれば、jQueryを使うことができるのです。ちなみに、この構文はいずれも、「$("#my")」の部分で、id名が「my」である要素を検索し、その要素へ、.cssメソッド内のCSS設定を適用するという意味です。jQueryの大きな魅力のひとつは「メソッドチェーン」と呼ばれる、その記述方法にあります。次のように書くと、id名が「test」の要素の背景色をredにして、「こんにちは」と書き出し、フェイドインします。以下「.」でメソッドを次々と接続することで、その命令を実行します。文字通り、メソッド(命令)をつなぐ「メソッドチェーン」というわけです。このように、メソッドを接続していくだけで、手軽にいろいろなことが実現できるのがjQueryの魅力です。楽天市場でJavascript関連の書籍を見るAmazonでJavascript関連の書籍を見る※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。