jQueryとは
jQueryとは
- JavaScriptのライブラリのひとつ
- ブラウザ依存を気にしなくてよい
- DOMの操作が簡単
- 記述の仕方は、CSSに似ている
- write less, do more.
- オープンソース（MITライセンス+GPLライセンス）
- http://iquery.com/
ダウンロードして利用する場合
- 2.xは旧ブラウザには対応していません
- compressed〜……改行などを除去してファイルサイズを抑えたファイル
- uncompressed〜……圧縮前の元ファイル。構造が見やすい
head内に記述
- 管理フォルダーの「js」フォルダー内に保存してパスを記述します
<script src="js/jquery-1.11.0.min.js"></script>
記述する場所
<head> ・・・ <script src="js/jquery-1.11.0.min.js"></script> </head>
<body> ・・・ <script src="js/jquery-1.11.0.min.js"></script> </body>
jQueryの概念
- 「何かを取ってくる」→「それに何かする」
$とjQueryオブジェクト
何かする
$( 'h1' ).show(); //表示させる $( 'h1' ).fadeIn();//フェードインさせる $( 'h1' ).slideDown(); //スライドアニメーションつきで表示させる $( 'h1' ).css('border', '1px solid red'); //1pxの赤線をつける $( 'h1' ).remove(); //削除する
jQueryを使うメリット
《クリックしたらをDOMで記述》
- クリックイベントについて、DOM(Document Object Model)で定義されている仕様を調べる
- 対象とする各ブラウザについて、対応状況を調べる
- 対応していない各ブラウザについて、そのブラウザ固有の仕様を調べる
- 対応状況を判別して、別の処理を書く
var div = document.getElementById('div1'); if(div.addEventListener) { div.addEventListener('click', doSomething, false); }else if(div.attachEvent) { div.attachEvent('onclick', doSomething); } function doSomething() { alert('クリックされました'); }
jQueryで記述
$( '#div1' ).click(function() { alert( 'クリックされました' ); });
この記述で、ブラウザごとの差異を吸収して、そのブラウザでも同じように表示します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <style> #div1 { width: 100px; height: 100px; background: #FC0; cursor: pointer; } </style> </head> <body> <div id="div1"></div> <script> $( '#div1' ).click(function() { alert ( 'クリックされました' ); }); </script> </body> </html>
