【想定している読者】

• CSS/HTMLの基本的な文法、考え方を学習済みの方
• javaScriptの基本的な文法、考え方を学習済みの方
• jQueryをなんとなく書いているという方

今回はメソッドの用途などについては詳しく触れません。

基本的な書き方

jQuery(function($){
	// 処理
});

HTML操作を行うことが基本の作業になるので、まずはこれが基本形です。

• $ = jQueryオブジェクトのエイリアス

  用途は大きく分けて二つある

  1. $(hoge)

     • $("セレクター")
     • $(関数)
     • $("HTML文字列")
     • $(DOM要素)または$(jQueryオブジェクト)

  2. $.fuga() [ユーティリティ関数]

     後ほど別で説明。

• jQueryオブジェクトとは？

  選択した要素を（配列の形式で）ひとまとめに含んだもの

  ＋

  jQueryの機能となるメソッドを備えたもの

  • メソッドチェーン

    $(セレクタ)で取得したもの＝jQueryオブジェクト

    jQueryオブジェクトは備えられたメソッドを呼び出せる

    ↓

    そのメソッドはjQueryオブジェクトを返す

    ↓

    jQueryオブジェクトなのでさらにメソッドを呼び出せる

    という流れで鎖のようにつなげてメソッドを記述していけるもの

    $('.color').css("border", "1px solid").css("color", "red").css.....;
    

• DOMの生成

  • DOMとは？

  • jQueryでDOMを生成する

    $(function($){
    	$("<a></a>",{
    		href: "hogehoge",
    		target: "hugaghua"
    	});
    });
    

  このようにしてjQueryを使用してDOMを生成することが可能。

イベント

ユーザー が クリック し た、マウス オーバー し た、ページ の 読み込み が 完了 し た、など

の 何かしら の 事象 を指します。

$('.click').on("click", function(){
	console.log('押したな。。。？');
});

このように書く。このようなイベントの処理を記録した関数のことをイベントハンドラとも呼びます。

thisと$(this)

• this : DOMエレメント

  例）イベントハンドラの「this」はそのイベントが発生した要素になる。

  「each」のコールバック関数内の「this」は順番の回ってきた該当する要素になる。

• $(this) : jQueryオブジェクト

  こいつは上記のthisを$関数に渡すことでjQueryオブジェクト化させている。

  • thisの例

  $(function{
  	$('a').each(function() {
  		var sample = this.href;
  		
  			// ここに処理を書く
  		});
  	});
  });
  

  • $(this)の例

  $(function{
  	$('a').each(function() {
  		var sample = $(this).attr('href');
  		// ここに処理を書く
  	});
  });
  

即時関数