Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[jQuery]①jQueryとは何か

jQuery

jQueryとは

利用方法

DL利用
  • http://iquery.com/　から.jsをダウンロード。
  • head内のscriptからパスを記述して利用。
  • バージョン2.xは旧ブラウザ(IE6~8)非対応。
<head>
　・・・
<script src="js/jquery-1.11.3.min.js"></script>
</head>
外部ソースのリンクを利用
  • CDN( Contents Delivery Network )…ネットワーク経由でコンテンツを提供するサービスを利用
  • Minified…改行が除かれた圧縮版
<body>
　・・・
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</body>

jQueryの概念

  • 「$」はjQueryそのものを指す
  • 「$()」で何かを取ってくる
  • 「$()」でHTML要素をjQueryオブジェクト化できる
  • 利用するセレクタより下に記述する（後述の方法で上でも可）
$(セレクタ).jQueryの命令
例題：要素をクリックしたらalertを出す
<style>
#div1{
  width: 100px; height: 100px; background:yellow; cursor: pointer;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
$( '#div1' ).click(function(){
     alert( 'クリックされました' );
});
</script>
</body>
</html>

d.hatena.ne.jp