【jQuery入門】-ドットインストールを参考に−第１１回ー第１５回−

【今回の紹介】

前回からの続きです。。
【jQuery入門】-ドットインストールを参考に−（第６回ー第９回）

■第１１回　要素の作成

　■要素の作成方法
　要素を作成して変数に入れてから追加する

before()　 →指定要素の前にいれる
after()　　→指定要素の後にいれる
prepend()　→要素の小要素の先頭に追加
apend()　　→要素の小要素の末尾に追加

■記述例

<ul id='main'>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>

 	var i=$('<li>').text("追加したリスト");
	var p=$('<li>').text("追加したリスト");
	var l=$('<li>').text("追加したリスト");
	var q=$('<li>').text("追加したリスト");
	$('#main>li:eq(0)').before(i);
	$('#main>li:eq(0)').after(p);
	$('#main').prepend(l);
	$('#main').append(q);

■第１２回　エフェクトの使用方法

　■エフェクトを使用する

　おしゃれに要素を消したり表したりする

　 .show()　　 →要素を表す
.hide()　　 →要素を消す（）
※.hide(’slow')とか「slow」を引数を渡すことによりゆっくり消す
　　.fadein() →より遅く表す
.fadeout()　→より遅く消す
.toggle() →要素がなかったら表し、要素が存在したら消す

<div id="box1" style="width:100px; height:100px; background:red;"></div>
<div id="box2" style="width:100px; height:100px; background:yellow;"></div>

  $('#box1').show("slow");
  $('#box1').hide("slow");
  $('#box1').show("1000");
　$('#box1').fadeOut("1000");
  $('#box1').toggle('1000');
  $('#box2').toggle('1000');
 ||<



■コールバック関数
　ある処理とかイベントとかかが終わったときに呼び出される関数
　※もっとしっかりとした定義があるかつ勉強不足でいまいちうまく
　　定義づけられていないので参考程度に。

■記述例

>|html|
<div id="box1" style="width:100px; height:100px; background:red;"></div>
<div id="box2" style="width:100px; height:100px; background:yellow;"></div>

$('#box1').toggle('1000',function(){
  	alert("ボックス1の処理が消えました");
  });
  $('#box2').toggle('1000',function(){
  	alert("ボックス2の処理が消えました");

■第１３回　イベントを使う

　　要素になんらかの操作をしたときにイベントとして拾い、何らかの処理を行う
　何らかの操作とはたとえば
　・マウスを載せたとき
　・クリックしたとき
　・マウスを外したとき

　とかとか

　何らかの処理を行う。たとえば
　・要素自体の色を変える
　・要素の背景色を変える
　・要素を消す
　・アラートを出す

　とかとか

■記述例

要素.イベント名(function(){
//ここに処理内容を記述する
});

<div id="box1" style="width:100px; height:100px; background:red;"></div>

　　$("#box1").click(function(){
	 alert("clickTest");
});

　$("#box1")
	.mouseover(function(){
	 $(this).css('background','blue');})

	.mouseout(function(){
	 $(this).css('background','pink');})

	.mousemove(function(e){
	 $(this).text(e.pageX);
});

$('body').mousemove(function(e){
		$('#box1').text(e.pageX);
});

■第１４回　focus､blur､changeを使おう

■イベント内容

focus→要素にフォーカスがあたっとき
blur→要素からフォーカルが離れたとき
change→要素の内容が変更されたとき

■記述例

<input type="text" id='item1'></input>
<select id='select1'>
 <option>選択肢１</option>
 <option>選択肢２</option>
 <option>選択肢３</option>
</select>

　$('#item1')
	.focus(function(){
		$(this).css('background','green');
  		})
    .blur(function(){
	$(this).css('background','pink');
  	
    });
 $('#select1').change(function(){
  alert("test");
 });

■第１５回　onメソッドを使ってみよう

動的な要素の追加と追加した要素にイベントを設定する

　 ■動的な要素の追加
　　①ボタンクリックイベントの設定
　　②クリック時に追加する要素を変数に格納
　　③②で格納した要素を追加する

$('input').click(function(){
var p=$('<p>').text('追加されたP要素です').addClass('pStyle');
$(this).before(p);
});

　■追加した要素にイベントを設定する
　※スクリプトが読み込まれるときはユーザ操作によって追加される要素は
　　存在しないため、「on」を使用して追加要素のイベントを設定する

<input type='button' value='追加'></input>

$('input').click(function(){
var p=$('<p>').text('追加されたP要素です').addClass('pStyle');
$(this).before(p);
});

$('body').on('click','.pStyle',function(){
  $(this).remove();
});