読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

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

【今回の紹介】

前回からの続きです。。
【jQuery入門】-ドットインストールを参考に−(第6回ー第9回)

■第11回 要素の作成

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

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);

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


 ■エフェクトを使用する

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

  .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の処理が消えました");

■第13回 イベントを使う

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

 とかとか

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


 とかとか

■記述例

要素.イベント名(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);
});

■第14回 focus、blur、changeを使おう


■イベント内容

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



■記述例

<input type="text" id='item1'></input>
<select id='select1'>
 <option>選択肢1</option>
 <option>選択肢2</option>
 <option>選択肢3</option>
</select>
 $('#item1')
	.focus(function(){
		$(this).css('background','green');
  		})
    .blur(function(){
	$(this).css('background','pink');
  	
    });
 $('#select1').change(function(){
  alert("test");
 });

■第15回 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();
});
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }