jQueryとは、JavaScriptのライブラリのことです。
jQueryを使うことで、簡単に高度な機能やインタラクティブな動きをする画面を作ることが出来ます。
このjQueryをこれから学んでいきますが、前提条件として
“HTML”,”JavaScript”がある程度理解できていないといけません。
なるべく解説していきますが、私も不勉強なのであまり期待しないでください。
まずは、jQueryを導入しましょう。
導入方法は簡単です。公式サイトからダウンロードしてきて、好きな場所に置くだけです。
と言っても、導入で少し躓いてしまったので注意事項を書いておきます。
jQueryには種類が3つあります。どれを使っても同じなので好きなやつを選んでください。
- Minified:改行、インデントを除去しファイルサイズを小さくしたもの。使うだけなら最も使いやすいが、勉強するにはソースが見づらい
- Packed:ファイルサイズが一番小さいもの。しかし、プログラムに実行用処理を余分につけなければいけないため、実行速度はやや遅め
- Uncompressed:ファイルサイズが一番大きい。しかし、一番ソースが見やすく、勉強用に向いている
また、色々なサイトではダウンロードすると書いてありますが、リンクを押してもダウンロードは始まりません。
なので、リンクを右クリックし「リンク先を保存」で保存するしかありません。
バージョンの違いについては公式サイトをご覧ください。今回はバージョン1.10.1のUncompressedを使用します。
それでは早速jQueryの基本を学んでいきましょう。
これは文字色を赤に設定しているだけのサンプルです。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのテスト</title>
<script src="/jquery/jquery-1.10.1.js"></script>
<script>
$(function () {
$(".moji").css("color","red");
});
</script>
</head>
<body>
<div class="moji">この文字が赤くなります。</div>
<div class="moji2">この文字は赤くなりません。</div>
</body>
</html>
//srcにはjQueryが置いてあるパスを指定 //各々の環境で適宜変更 <script src="/jquery/jquery-1.10.1.js"></script>
jQueryにはいくつか書き方があります。どれを使っても問題ありませんが、混乱しないようにソース内では統一したほうが良いでしょう。
//パターン1
$(function () {
//ここに処理を書く
});
//パターン2
jQuery(function($){
//ここに処理を書く
)};
//パターン3
$(document).ready(function(){
//ここに処理を書く
});
ここではパターン1を採用しています。
ここまでがjQueryを使うにあたっての約束事です。
これからはjQuery内の処理で何をしているのかを見てみましょう。
これはセレクタと呼ばれるもので、どの要素に対してなのかを指定しています。
指定方法はこれ以外にも様々あります。今回は基本的なセレクタを紹介します。
//classが"moji"のものを指定
$(".moji")
//idがmojiのものを指定
$("#moji")
//<div>のものすべて
$("div")
次がセレクタに対しての処理内容です。セレクタに｢.｣でつなげて書きます。
$(".moji").css("color","red")
このCSS()ではスタイルシートの設定をしています。このメソッドによって文字色が赤に変化します。
//name:CSSプロパティ名 //value:CSSプロパティ値 //CSSプロパティを設定できる css(name, value);
以上がjQueryの基本構文となります。
あとは、どのメソッドがどんな処理を行っているのかを勉強していけばjQueryをマスターしたも同然です。
今回の導入編はこれでおしまいです。