ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【jQuery】基礎知識の復習と画像置換(訓練校授業分)

最終更新:2017//4/22

授業のメモ

公式サイトからダウンロードするときは基本的にはcompressedw使う
jQuery

直リンクで読み込む場合は基本的にgoogleのものを使う。
(サーバーが強い?ので)
Hosted Libraries  |  Hosted Libraries  |  Google Developers

  • アニメーションで使われる動き
重力(ハンバーガーメニュー)
慣性(まさつ、ドロワメニュー)

有機的な動きは数学のサインコサイン等の知識が必要。

今はドロップダウンメニューではなくてメガドロップダウンメニューが多い
KIRIN|キリン
電通ウェブサイト

jQueryは最小限の使い方をされている
common.jsなどにまとめられ、それをプラグイン的に使う
無印良品ネットストア

~
チルダ
^
キャレット

jQueryの書き方

$
インスタンス
jQuery
オブジェクト
$(document).ready(function(){
	$( 'li' ).css( 'color','#f00' );
});
$(function(){

});

画像置換

aのリンクが優先されて設定したイベントが効かない

<a href="../img/umi.jpg">海</a>
<img src="../img/hana.jpg" alt="hana">
<script>
$(function(){
	$('a').click(function(){
		$('img').attr('src','../img/umi.jpg').attr('alt','umi');
	});
});
</script>

hrefの値をjavascript:void(0)にする。

<a href="javascript:void(0)">海</a>
<img src="../img/hana.jpg" alt="hana">
<script>
$(function(){
	$('a').click(function(){
		$('img').attr('src','../img/umi.jpg').attr('alt','umi');
	});
});
</script>

return false;を使用

<a href="../img/umi.jpg">海</a>
<img src="../img/hana.jpg" alt="hana">
<script>
$(function(){
	$('a').click(function(){
		$('img').attr('src','../img/umi.jpg').attr('alt','umi');
		return false;
	});
});
</script>

eqを使う

<a href="../img/hana.jpg"></a>
<a href="../img/umi.jpg"></a>
<a href="../img/same.jpg">サメ</a>
<a href="../img/buta.jpg"></a>
<img src="../img/hana.jpg" alt="hana">
<script>
$(function(){
	$('a:eq(0)').click(function(){
		$('img').attr('src','../img/hana.jpg').attr('alt','umi');
		return false;
	});
	$('a:eq(1)').click(function(){
		$('img').attr('src','../img/umi.jpg').attr('alt','umi');
		return false;
	});
	$('a:eq(2)').click(function(){
		$('img').attr('src','../img/same.jpg').attr('alt','umi');
		return false;
	});
	$('a:eq(3)').click(function(){
		$('img').attr('src','../img/buta.jpg').attr('alt','umi');
		return false;
	});
});
</script>

上のコードをthisを使ってまとめる

絶対パスは遅くなる原因になる。なのでthisで書いたほうがいい。

<a href="../img/hana.jpg">花</a>
<a href="../img/umi.jpg">海</a>
<a href="../img/same.jpg">サメ</a>
<a href="../img/buta.jpg">豚</a>
<img src="../img/hana.jpg" alt="hana">
<script>
$(function(){
	$('a').click(function(){
		$('img').attr('src',$(this).attr('href'))
		.attr("alt",$(this).text());
		return false;
	});
});
</script>

mouseover,mouseoutを使う

$(function(){
	$('img').mouseover(function(){
		$(this).attr('src','../img/umi.jpg').attr('alt','海');
	}).mouseout(function(){
		$(this).attr('src','../img/hana.jpg').attr('alt','花');
	});
});

oneを使う

一度だけイベントが実行される。

<a href="../img/hana.jpg">花</a>
<a href="../img/umi.jpg">海</a>
<a href="../img/same.jpg">サメ</a>
<a href="../img/buta.jpg">豚</a>
<img src="../img/hana.jpg" alt="hana">
<script>
$(function(){
	$('a').one('click',function(){
		$('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
		return false;
	});
});
</script>

onを使う

セレクターをonの中で指定できたり、後からoffでイベントを無効にできる。

<a href="../img/hana.jpg">花</a>
<a href="../img/umi.jpg">海</a>
<a href="../img/same.jpg">サメ</a>
<a href="../img/buta.jpg">豚</a>
<img src="../img/hana.jpg" alt="hana">
<script>
$(function(){
	$('a').on('click',function(){
		$('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
		return false;
	});
});
</script>

offを使う

clickイベントが解かれ、普通のaのリンクになる。

jQuery(document).ready(function(){
    $('ul').on('click','a',function(){
        $('img').attr('src',$(this).attr('href'))
        .attr('alt',$(this).text());
        return false;
    });
    $('button').on('click',function(){
        $('ul').off('click');
    })
});