初めてJavaScriptをやってみよー日記 ~16日目~

javascriptを学習した時の記録としてブログを書いていきます。

内容

Jqueryとは
Jqueryを使う準備
Jqueryの基本的構文
様々なセレクター
様々なイベント

Jqueryとは

"Jquery"とは、HTMLのcssを動的に変化させるためのJavaScriptのツールです。基本的にcssと似ている部分があります。

Jqueryを使う準備

Jqueryを使うには2つの方法があります。

ダウンロードする
インターネットから使う

1. ダウンロードする

Jqueryのデータをダウンロードして、それを使う方法です。

Jqueryの圧縮版(.min)をダウンロードします。(バージョンに注意)
ダウンロードしたJqueryを好きな場所に置きます。
<script src="<パス>/jquery-<version>.min.js"></script>をHTMLのjqueryを使うスクリプトの前に書きます。

※<version>はバージョンを表すx.y.zのような数字の並びを表します。

※src="<パス>/jquery-<version>.min.jsはおいている場所によって書き換えてください。

2. インターネットから使う

インターネットにあるスクリプトを使う方法です。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-<version>.min.js"></script>をHTMLのjqueryを使うスクリプトの前に書きます。

※<version>はバージョンを表すx.y.zのような数字の並びを表します。

Jqueryの基本的構文

Jqueryでは、下のような構文を使います。

jQuery(function(){
    /*実行する内容*/
});

jQuery(document).ready(function(){
    /*実行する内容*/
});

これらを下のように省略することができます。

$(function(){
    /*実行する内容*/
});

基本的には下のように書いていきます。

$(function(){ // ここはjQueryで書いてありますよ
    $("#test").click(function(){ // もしtestというidを持つ要素がクリックされたら
        $("#test").text("CLICKED!"); // testというidを持つ要素のtextを"CLICKED!"にしますよ
    });
});

意味はコメントの通りです。ここでいう#testが"セレクター"、clickが"イベント"と呼ばれます。

様々なセレクター

ここではセレクターといわれる、要素を選択する方法を書いていきます。

idセレクター
classセレクター
要素セレクター
子孫セレクター

idセレクター

id属性の値を指定して要素を参照します。

$("#test").click(function(){
    /*id属性の値がtestの要素がclickされたら実行されます*/
});

classセレクター

class属性の値を指定して要素を参照します。

$(".test").click(function(){
    /*class属性の値がtestの要素がclickされたら実行されます*/
});

要素セレクター

要素の名前を指定して要素を参照します。

$("p").click(function () {
    /*pタグの要素がclickされたら実行されます*/
});

子孫セレクター

～の中の〇〇というような指定で要素を指定します。

$("div p").click(function () {
    /*divタグの中のpタグの要素がclickされたら実行されます*/
});

様々なイベント

ここでは、イベントといわれるどのタイミングで実行するかというものをいくつか書いていきます。

clickイベント
mouseoverイベント
mouseoutイベント

clickイベント

クリックされたときに実行します。

$("#test").click(function(){
    /*idがtestの要素がクリックされたら実行されます*/
});

mouseoverイベント

マウスオーバー(カーソルを要素に重ねる)されたときに実行されます。

$("#test").mouseover(function(){
    /*idがtestの要素がマウスオーバーされたら実行されます*/
});

mouseoutイベント

マウスアウト(カーソルを要素から外す)されたときに実行されます。

$("#test").mouseout(function(){
    /*idがtestの要素がマウスアウトされたら実行されます*/
});

yojiyama7’s diary