[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

jQueryとは?

jQueryとは、John Resig(ジョン・レッシグ)氏によって開発されたJavaScript 軽量ライブラリの一つである。

JavaScript と同様、ブラウザ側で動く、クライアントサイドのプログラムである。

jQuery を使えば、JavaScript のコードを、CSSのように簡単に書ける。

モットー

“Write Less, Do More.” (よりシンプルなコードで、より沢山のことを。)

複雑な操作も簡単に書けるのが特徴である。

jQuery でできること

サイトに動きを付けることができる。

JavaScript よりも記述をシンプルに、同じことを、より簡単にできる。

  • HTMLやCSSを操作できる。
  • アニメーション機能を付けることができる。
  • Ajax によるネットワーク通信機能
  • JavaScript の拡張

など。

例えば、要素を変更して、サイトの内容を大胆に書き換えることができる。

ライブラリとは?

よく使う機能をひとまとめにしたものです。

ライブラリを使えば、複雑なJavaScript のコードを、簡単に記述することができる。

 

JavaScript ライブラリ

jQuery のほかに prototype.js,MooTools などがある。

JavaScript と jQuery でコードの記述を比較する。

jQuery の特徴

  1. クロスブラウザで設計。
  2. 記述がCSSと似ている。
  3. CSSセレクタエンジンがついているため、CSS3未対応ブラウザでもCSS3のセレクタが使える。
  4. GPL&MIT デュアルライセンス
  5. 軽量のダウンロードサイズ
  6. 着実なバージョンアップ

2.記述がCSSと似ている。

CSS

セレクタ { プロパティ : 値 }

body { color : red }

jQuery

$(“セレクタ”) . メソッド();

$(“セレクタ”) . メソッド(パラメータ);

$("body") . css("color","red");

jQuery でも CSS と同じように、セレクタを使って要素を指定する。

そして、メソッドで「何をするか?」を指定する。

4.GPL&MIT デュアルライセンス

著作権表示さえ明記すればjQueryそのものの利用は勿論、改変、再配布を無償かつ自由に行える。

jQuery の書き方

jQuery のコードは、「$(function(){….});」というブロックに記述する。

$(function() {
        $('セレクター').jQueryメソッド
});

セレクター

なにを。

HTMLから特定の要素を取得するための記法である。

jQuery のセレクターは、CSSのセレクターを少しだけ拡張したものである。

jQueryメソッド

どうする。

jQuery のダウンロード

  • 圧縮版(Minified)
  • 非圧縮版(Uncompressed)

Web サイトを公開する際には、読み込みスピードの速い非圧縮版を利用するのが一般的である。

Download jQuery | jQuery 

GPL&MIT デュアルライセンス

jQuery を商用利用しても問題ない。

CDN を利用する。

CDN(Content Delivery Network)コンテンツデリバリネットワークとは?

コンテンツ配信のための最適化されたネットワークのこと。

CDN では、コンテンツが要求されると、ユーザーが利用しているコンピュータのネットワークの位置に応じて、最も近いサーバーを選択し、そこからコンテンツをダウンロードさせるようにしている。

jQuery を配信している主なCDN

Google CDN http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
Microsoft CDN https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js
jQuery CDN https://code.jquery.com/jquery-3.3.1.min.js

jQuery は、基本的に後方互換であるため、1.4の時に書いたコードも1.8でも動作する。

CDN を利用してjQueryをインポートするには

[php] [/php]

を記述する。

【参考サイト】

jQuery逆引きリファレンス – @IT jQuery リファレンス

【参考書籍】

10日でおぼえるjQuery入門教室 第2版

(Visited 33 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。