Child.key from sayokomiura
カテゴリー: jQuery
要素指定
Prevnext from sayokomiura
jQueryを使う時、最初にすること②【jQuery超入門】
jQueryをHTMLに記述して読み込む
jQyeryを使う時は、
『jQuery本体をまずとってきて、HTMLの中で読み込んでおく必要があります。』
前回の『jQueryを使う時、最初にすること① 』では
（１）jQueryをダウンロードして使う
（２）CDNを利用する
で、ダウンロードかCDNでとってくる方法をお話ししました。
次にここでは、HTMLの中で読み込む方法についてお話しします。
jQyeryを使うためには、とってきたjQuery本体とHTMLを結びつける必要があります。
CSSの内容を反映するためにも、以下のようにしてCSSとHTMLを結びつける必要がありましたよね。
<link href=”css/style.css” rel=”stylesheet”>
この、『jQuery本体とHTMLを結びつける』記述は、bodyタグの閉じタグ直前に<script>タグを使って書きます。
＜ダウンロード版＞
<body>
<h1>テスト</h1>
・
・
<script src=”js/jquery-3.3.1.min.js”></script>
</body>
＜CDN版＞
<body>
<h1>テスト</h1>
・
・
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
</body>
以上で、jQueryを使う準備は終わりました。
続いて、jQueryで実際にさせたい処理の記述を書く場所について少しお話ししておきます。
jQueryで実行させたい処理を記述する
本体を読み込む<script>〜</script>の次に、実行させたい処理を書いていきます。
必ず、本体のjQueryを読み込んだ後に処理の記述を書いてください。
この順番は大切です。
<body>
<h1>テスト</h1>
・
・
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script><script>
/*ここにjQueryで実行させたい処理を記述する*/
</script>
</body>
例えば以下は、pタグの文字の色を赤くする記述です。
<body>
<h1>テスト</h1>
<p>こんにちは</p>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<!– ↑処理を書く前にjQuery本体を読み込む –><script>
$(‘p’).css(‘color’,’red’);
</script>
<!– ↑pタグの文字の色を赤くする –>
</body>
処理の記述方法似ついては、次回とします。
jQueryを使う時、最初にすること①【jQuery超入門】
jQueryを使うと、色を変えたり、アニメーションしたり、できます。
例えば
$(‘p’).css(‘color’,’red’);
と書くと、pタグの文字の色が赤くなります。
しかし！その記述をする前にやっておかなければいけないことがあります。
それは、
jQuery本体を読み込んでおくことです。
jQueryはJavaScriptのライブラリです。
JavaScriptの機能が入っているライブラリであるjQuery本体をまずとってきて、HTMLの中で読み込んでおく必要があります。
jQuery本体（ライブラリ）をとってくる
『jQuery本体をまずとってきて、』って、どこから・・・？
安心してください。JQuery公式サイトから、とってくることができます。
2つのやり方があります。
（１）ダウンロード・・・jQueryをダウンロードして使う
（２）CDN・・・jQueryをダウンロードせず、Googleなどのサーバーからとってきて使う。
（＊CDN・・・Content Delivery Network）
（１）jQueryをダウンロードして使う
①まず、準備としてダウンロードしたjQueryを入れておくjsファイルを作っておきましょう
②jQueryの公式サイト（https://jquery.com/）の、『Download jQuery』をクリックします。
「compresses（圧縮版）」と「uncompresses（非圧縮版）」がありますが、
ダウンロードして使うのは、一番上の
Download the compresses,production jQuery 3.3.1
がいいでしょう。
compressesは圧縮版で、ダウンロードするとファイル名に「mini」がついています（jquery-3.3.1.min.js）。
圧縮している方がサイズが小さいのでおすすめですが、中のコードが見たければuncompressesだと改行などが入っているのでコードが読みやすいです。
Download the uncompresses,development jQuery 3.3.1 ← 非圧縮版
Download the compresses,production jQuery 3.3.1 slim build ← 機能限定・圧縮版
Download the uncompresses,development jQuery 3.3.1 slim build ← 機能限定・非圧縮版
＊macでのダウンロードの仕方
ダウンロードするものの上で右クリックし、「リンク先を別名で保存」します。
＜作成したjsファイルに保存しておきましょう！＞
（２）CDNを利用する
jQueryをダウンロードせず、Googleなどのサーバーから取ってきて使います。
＊CDN(Content Delivery Network)
②jQueryの公式サイト（https://jquery.com/）の、『Download jQuery』をクリックします。ここまでは、ダウンロードする方法と同じです。
②jQueryをダウンロードした少し下に『Other CDNs』という言葉がありますので探してください。
②どれでもいいのですが、例えば『Google CDN』をクリックし、以下の
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
のコードをコピペして使います。
jQueryのバージョン
- jQuery 1.X系・・・IE8以前もサポート
- jQuery 2.X系・・・IE8以前は非対応、軽量化
- jQuery 3.X系・・・IE8以前は非対応、さらに処理速度向上
jQueryって何？【jQuery超入門】
jQueryとは
jQueryというのは、JavaScriptのライブラリです。
JavaScriptは簡単にいうと、webサイトに
- 色を変える
- クリックしたら・・・○○する
- アニメーションさせる
などができます。
HTMLとCSSだけで作ったwebサイトは一度ブラウザに読み込まれたら変化しないのですが、JavaScriptを使うと、その場でリアルタイムに書き換えて動きをつけることができます。
jQueryは、このJavaScriptの『よく使う機能をパーツにしてまとめたもの』＝『ライブラリ』です。
jQueryのメリット・デメリット
＜メリット＞
-
JavaScriptで書かれた動作を簡単に実装できる
-
ブラウザごとの違いが少ない
-
読みやすく、メンテナンスがしやすい
＜デメリット＞
-
表示が遅くなることがある
まずは、実際に色を変えたり、動かしたりしてみましょう
See the Pen jQuery入門 by noce (@miuratta) on CodePen.
WhatsjQuery from sayokomiura
