My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

4/15 [jQuery]クリックイベント・HTML/CSSを操作する

  1. [jQuery]クリックイベントを扱う
  2. [jQuery]HTML/CSSを操作する

[jQuery]クリックイベントを扱う

【演習】クリックイベントでアラート表示

課題:下図ボックスをクリックすると「クリックされました」というダイアログボックスが表示されるようにプログラムを作成すること

[ソースコード]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<style>
#box {
  width: 100px;
  height: 100px;
  background:#F90;
  border:1px solid #F90;
  cursor:pointer;
}
p {
  /*cursor:pointer;*/
}
</style>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
//オレンジ色の正方形をクリックすると、「クリックされました」アラートを表示
  $(function(){
  $('#box').after('<p>クリックしてください</p>');	  
  $('#box').click(function() {
	  alert('クリックされました。');
  })
  });
</script>
</head>
<body>
<div id="box">
<p></p>
</div>
</body>
</html>

[作成結果]
以下、実際の作成結果です。
 ↓

参照:
「#13 イベントを使ってみよう | jQuery入門 - プログラミングならドットインストール 」
http://dotinstall.com/lessons/basic_jquery_v2/25213

[jQuery]HTML/CSSを操作する


jQueryを利用し、HTML/CSSを操作する練習をします。

参照:
ASCII.jp:サンプルで学ぶjQuery:(X)HTML/CSSを操作する (2/7)|Web制作の現場で使えるjQuery UIデザイン入門:
http://ascii.jp/elem/000/000/446/446513/index-2.html

<p id="first">テキストテキスト</p>

上記のHTML文をjQueryで操作します。
▶ prepend() …指定要素の先頭に挿入

$('p#first').prepend('<strong>先頭に挿入);

[実行結果]
f:id:sntkk3:20140610203157p:plain

▶ append() …指定要素の行末に挿入

$('p#first').append('<strong>行末に挿入</strong>');

[実行結果]
f:id:sntkk3:20140610203150p:plain

▶ before() …指定要素の前に挿入

$('p#first').before('<h1>前に挿入</h1>');

[実行結果]
f:id:sntkk3:20140610203156p:plain


▶ after() …指定要素の後ろに挿入

$('p#first').after('<h1>後ろに挿入</h1>');

[実行結果]
f:id:sntkk3:20140610203201p:plain

▶ prependTo()…指定要素を他要素内の先頭に移動

<p id="first">テキストテキスト<strong>先頭に移動</strong></p>
$('strong').prependTo('p');

[実行結果]
f:id:sntkk3:20140610203152p:plain

▶appendTo() …指定要素を他要素内の最後に移動

<p id="first"><strong>最後に移動</strong>テキストテキスト</p>
$('strong').appendTo('p');

[実行結果]
f:id:sntkk3:20140610203154p:plain

▶insertBefore() …指定要素を他要素の前に移動

<p>テキストテキスト</p>
<h1>前に移動</h1>
$('h1').insertBefore('p');

[実行結果]
f:id:sntkk3:20140610203159p:plain


▶insertAfter() …指定要素を他要素の後ろに移動

<h1>後ろに移動</h1>
<p>テキストテキスト</p>
$('h1').insertAfter('p');

[実行結果]
f:id:sntkk3:20140610203209p:plain

▶wrap() …指定要素を他要素で包む

<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
$('strong').wrap('<h1></h1>');

[実行結果]
f:id:sntkk3:20140610203205p:plain


▶wrapAll() …複数の指定要素をすべて他要素で包む

<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
$('strong').wrapAll('<h1></h1>');

[実行結果]
f:id:sntkk3:20140610203207p:plain

▶wrapInner() …指定要素の子要素やテキストを別の要素で包む

<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
$('p').wrapInner('<strong></strong>');

[実行結果]
f:id:sntkk3:20140610203203p:plain

▶remove() …指定要素を削除

<p><strong>置き換え前</strong></p>

▶replaceWith() …指定要素を他要素に置き換え

<p>置き換え前</p>
$('p').replaceWith('<h1>置き換え後</h1>');

[実行結果]
f:id:sntkk3:20140610203212p:plain


▶attr() …属性値を変更
リンク先が変更前の"http://to-r.net"から"http://ascii.jp/"に変更されます。

<p>置き換え前<a href="http://to-r.net">リンク先</a></p>


▶DIV要素にスタイルを追加

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>DIV要素にスタイルを追加</title>
<style>
#div1 {
  width: 500px;
  height: 50px;  
}
#div2 {
  width: 504px;
  height: 50px;  
}
#div3 {
  width: 504px;
  height: 50px;  
}

</style>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
//
  $(function(){
  $('#div1').css('border','3px solid red'); //3pxの赤い線がつく
  $('#div2').css('background','pink'); //背景色がピンクになる
  $('#div3').css({background:'green',opacity:'0.5',color:'white'}); //背景色が緑になる
  });
</script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
$('a').attr('href','http://ascii.jp/');

[実行結果]

▶addClassメソッド

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>addClass()メソッド</title>
<style>
.first {
  background: yellowgreen;
}
</style>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<script>
  $(function() {
	$('li:first-child').addClass('first');  
  })
</script>
</body>
</html>

[実行結果]

▶removeClass()メソッド

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>removeClass()メソッド</title>
<style>
.last {
  background: yellowgreen;
}
</style>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
<li class="last">PHP</li>
</ul>
<script>
  $(function() {
	$('li:last-child').removeClass('last');  
  });
</script>
</body>
</html>

[実行結果]

▶fadeIn / fadeOut

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ~</title>
<style>
body { font-size:3em; }
.container { height:120px;}
#div1 {background:pink; display:none;}
#div2 {background:yellow; display:block;}  
</style>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
</script>
</head>
<body>
<div class="container"><div id="div1">fadeIn example.</div></div>
<div class="container"><div id="div2">fadeOut example.</div></div>
<script>
  $(function() {
   $('#div1').fadeIn('10');
   $('#div2').fadeOut('10');
  });
</script>
</body>
</html>

▶ボタンで画像を変更

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ~</title>
<style> 
</style>
<script src="js/jquery-1.11.0.min.js">
</script>
<script>
//2014.4.16
//テキスト p.78
$(function(){
 $('button').click(function(){
   $('img').attr('src','js/img/ph02.jpg').attr('alt','バリ島')
   });	
});
</script>
</head>
<body>
<button>画像を変更</button>
<p><img src="js/img/ph01.jpg" width="1024" height="683" alt="月夜"></p>
</body>
</html>

[実行結果]