2014-12-01

2014-12-01

jQueryの基本Add Star

jQuery

 

 

よく使うJavaScriptを簡単に使えるようにしたもの

  • JavaScriptのライブラリのひとつ
  • HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる
  • 要素に対してアニメーションできる
  • 主要なブラウザをサポート（ブラウザ依存を気にしなくてよい）
  • 記述の仕方は、CSSに似ている
  • オープンソース（MITライセンス+GPLライセンス）
  • 「Write Less, Do More」がモットー
  • jQueryのバージョンは、1.x系と2.系に分類できます
  • jQuery2は、IE8以前のサポートを除いたことで、より軽量化を図っています
  • http://iquery.com/

 

http://jquery.com/

 


デザイナーのためのjQuery
  • 「メニューの開閉」「要素の非表示・表示」「画像のポップアップ表示」などWebページの表示されているものに対しての操作が中心

プログラマーのためのjQuery
  • Ajax通信やForm関連のエラーチェックやプラグインの開発など多岐にわたります

 

Ajax通信

 

  • Googleマップなどに使われた、Webページの情報をAjaxで表面に見えないところで読み込まれ、ユーザーの操作によって情報を変化させる手法

jQueryを導入したい

ダウンロードして利用する場合
  • 2.xは旧ブラウザには対応していません

 

f:id:web-0127:20140413142812p:image

 


  • compressed～……改行などを除去してファイルサイズを抑えたファイル
  • uncompressed～……圧縮前の元ファイル。構造が見やすい

 

head内に記述

 

  • 管理フォルダーの「js」フォルダー内に保存してパスを記述します
<scriptsrc="js/jquery-1.11.0.min.js"></script>


外部にあるソースのリンクを利用する場合

 

f:id:web-0127:20140413142813p:image

 


 

CDNを利用する

 

  • Content Delivery Network
  • ネットワーク経由でコンテンツを提供するサービス
  • Minified（改行が除かれた圧縮版）

 

jQuery CDN

 


 

Google Ajax API CDN

 


記述する場所

<head>
　・・・
<scriptsrc="js/jquery-1.11.0.min.js"></script>
</head>


<body>
　・・・
<scriptsrc="js/jquery-1.11.0.min.js"></script>
</body>

基本形
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>jQuery</title>
</head>
<body>
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
//jQueryを利用したコード
</script>
</body>
</html>


 

CDNの障害に備えて記述する場合

 

  • あらかじめ jQuery-1.11.0.min.jsダウンロードしておく

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>jQuery</title>
</head>
<body>
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
window.jQuery || document.write('<script src="jquery-1.11.0.min.js"><\/script>');</script>
</script>
</body>
</html>


 

HTTP/HTTPSに対応する方法

 

  • ライブラリをインポートする際、次のようにプロトコルを省略することで、現在のページに応じて「http://」「https://」を動的に切り替えられます
<scriptsrc="//code.jquery.com/jquery-1.11.0.min.js"></script>