WEB、始めました

半年間WEB制作の学校に通います。その記録。

39日目　jQuery基本　onClick続き　toggle　show　hide　not:animated　slide　fade　animate

■jQueryの命令-HTMLの移動(wrap)-

<h1><strong>テキストテキスト</strong></h1>
<h1><strong>テキストテキスト</strong></h1>

となる
ひとつずつ囲む

f:id:chawannmusi:20160327191741p:plain　f:id:chawannmusi:20160327191814p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(wrap)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').wrap('<h1></h1>');
});
</script>
</head>

<body>
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>
</body>
</html>


■jQueryの命令-HTMLの囲み(wrapAll)-

<h1><strong>テキスト</strong>
<strong>テキスト</strong></h1>

となる

f:id:chawannmusi:20160327192818p:plain　f:id:chawannmusi:20160327192843p:plain


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(wrapAll)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').wrapAll('<h1></h1>');
});
</script>
</head>

<body>
<strong>テキスト</strong>
<strong>テキスト</strong>
</body>
</html>

■jQueryの命令-HTMLの囲み(wrapAll（2）)-
strongの間にあるspanは除外される

f:id:chawannmusi:20160327193034p:plain　f:id:chawannmusi:20160327193058p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(wrapAll（2）)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').wrapAll('<h1></h1>');
});
</script>
</head>

<body>
<strong>テキスト</strong>
<span>除外される</span>
<strong>テキスト</strong>
</body>
</html>

■jQueryの命令-HTMLの囲み(wrapInner)-

<p><strong>テキスト</strong></p>
<p><strong>テキスト</strong></p>

となる


f:id:chawannmusi:20160327193237p:plain　f:id:chawannmusi:20160327193313p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(wrapInner)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p').wrapInner('<strong></strong>');
});  //pの中に<strong>が入る
</script>
</head>

<body>
<p>テキスト</p>
<p>テキスト</p>
</body>
</html>


■jQueryの命令-HTMLの囲み(unwrap)-

<strong>テキスト</strong>
<strong>テキスト</strong>

となる
親要素全てが取り除かれる

f:id:chawannmusi:20160327192347p:plain　f:id:chawannmusi:20160327192422p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの囲み(unwrap)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('strong').unwrap();
});  //親要素が取り除かれる
</script>
</head>

<body>
<h1><strong>テキスト</strong></h1>
<h1><strong>テキスト</strong></h1>
</body>
</html>

■jQueryの命令-HTMLの置き換え(replaceWith)-

f:id:chawannmusi:20160327193807p:plain　f:id:chawannmusi:20160327193829p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの命令-HTMLの置き換え(replaceWith)-</title>
<script src="../../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('p').replaceWith('<h1>置き換え後</h1>');
});  //要素の置き換え
</script>
</head>

<body>
<p>置き換え前</p>
</body>
</html>


■this 種類の違うaを使った時

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習3/16課題-on(click())-</title>
<script src="../js/jquery-2.2.1.min.js"></script>
<script>
$(function() {
  $('#nav a').on('click',function() {
    $('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
    return false;
  });
});

</script>
</head>

<body>
<h1>文字をクリックしたら画像が変わる</h1>
<p><a href="https://www.google.co.jp/">リンクしているページに移動</a></p>  <!--ここにaを追加してもリンクしない（imgの情報を拾ってきてしまうから）ulにidをふる-->
<ul id="nav">
<li><a href="img/flower.jpg">花</a></li>
<li><a href="img/sea.jpg">海</a></li>
<li><a href="img/jellyfish.jpg">くらげ</a></li>
<li><a href="img/building.jpg">建物</a></li>
</ul>
<p><img src="img/flower.jpg" alt="花"></p>
</body>
</html>


■toggle
http://tototo.webcrow.jp/0317/01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-画像をクリックすると順番に画像が変わる-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script>
$(function() {
  $('#imgChange').toggle(
  function(){ $('img').attr('src','img/surf02.png'); },
  function(){ $('img').attr('src','img/surf03.png'); },
  function(){ $('img').attr('src','img/surf04.png'); }
  );
});
//画像をクリックすると順番に画像が変わる・toggleは繰り返し
</script>
</head>

<body>
<div id ="container">
<p id="imgChange"><img src="img/surf01.png" alt=""></p>
</div>
</body>
</html>


■show
http://tototo.webcrow.jp/0317/02.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-show-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('#box').show('slow');
  });
});
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button>表示</button></p>
<div id="box"></div>
</body>
</html>


■showコールバック関数
http://tototo.webcrow.jp/0317/03.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-showコールバック関数-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('#box').show('slow',function(){
      $(this).css('background','pink');
      });
  });
});
//画像が出終わったあと色が変わる
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button>表示</button></p>
<div id="box"></div>
</body>
</html>

■hide
http://tototo.webcrow.jp/0317/04.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-hide-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button#show').on('click',function() {
    $('#box').show('slow');
      });
  $('button#hide').on('click',function() {
    $('#box').hide('slow');
      });
});
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button id="show">表示</button></p>
<p><button id="hide">非表示</button></p>
<div id="box"></div>
</body>
</html>

■not:animated
http://tototo.webcrow.jp/0317/05.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-(not:animated)-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button#show').on('click',function() {
    $('#box:not(:animated)').show('slow');
      });
  $('button#hide').on('click',function() {
    $('#box:not(:animated)').hide('slow');
      });
});
//実行中は何度押しても反応しない
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button id="show">表示</button></p>
<p><button id="hide">非表示</button></p>
<div id="box"></div>
</body>
</html>

■toggle（ひとつのボタンで表示・非表示）
http://tototo.webcrow.jp/0317/06.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-toggle非表示-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button').on('click',function() {
    $('#box:not(:animated)').toggle('slow');
      });
});
//ひとつのボタンで表示非表示
</script>
<style>
#box {
  width: 300px;
  height: 300px;
  background: skyblue;
  display: none;
}
</style>
</head>

<body>
<p><button>表示・非表示</button></p>
<div id="box"></div>
</body>
</html>


■slideUp　slideDown
http://tototo.webcrow.jp/0317/07.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-sideDown/slideUp-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
dl {
  width: 500px;
  margin: 50px auto;
}

dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
}

dd {
  border: 1px solid #7CADB6;
  padding: 10px;
  margin: 0;
}
</style>
<script>
$(function() {
  $('dt').on('click',function() {
    if($('dd').css('display')=='block') {  //ddが見えている状態の場合
      $('dd:not(:animated)').slideUp('slow');  //スライドをあげる
    }else{
      $('dd').slideDown('slow');  //スライドを下げる
    }
  });
});
</script>

</head>

<body>
<div>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</div>
</body>
</html>

■slideToggle
http://tototo.webcrow.jp/0317/08.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-sideToggle-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
@charset "UTF-8";

/* reset */
html, body, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

dl {
  width: 500px;
  margin: 50px auto;
}

dt{
  background: #7CADB6;
  padding: 10px;
  cursor: pointer;
  color: #FFF;
}

dd {
  border: 1px solid #7CADB6;
  padding: 20px;
}
</style>
<script>
$(function() {
  $('dt').on('click',function() {
    $('dd:not(:animated)').slideToggle('slow');
  });
});
</script>

</head>

<body>
<dl>
<dt>スライドして表示状態を切り替える</dt>
<dd>
slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
</dd>
</dl>
</body>
</html>


■fadeIn　fadeOut
http://tototo.webcrow.jp/0317/09.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-fadeIn/fadeOut-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
img { display: none; }
</style>
<script>
$(function() {
  $('button#fadeIn').on('click',function(){
    $('img:not(:animated)').fadeIn('slow');
  });
  $('button#fadeOut').on('click',function(){
    $('img:not(:animated)').fadeOut('slow');
  });
});

</script>
</head>

<body>
<p><button id="fadeIn">表示</button></p>
<p><button id="fadeOut">非表示</button></p>
<p><img src="img/surf01.png" alt="サーフィン"></p>
</body>
</html>

■fadeTo
http://tototo.webcrow.jp/0317/10.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-fadeTo-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
  $('button#fade100').on('click',function(){
    $('img:not(:animated)').fadeTo('slow',1);
  });
  $('button#fade50').on('click',function(){
    $('img:not(:animated)').fadeTo('slow',0.5);
  });
  $('button#fade0').on('click',function(){
    $('img:not(:animated)').fadeTo('slow',0);
  });
});

</script>
</head>

<body>
<p><button id="fade100">表示</button></p>
<p><button id="fade50">半透明</button></p>
<p><button id="fade0">非表示</button></p>
<p><img src="img/surf01.png" alt="サーフィン"></p>
</body>
</html>


■animate()
http://tototo.webcrow.jp/0317/11.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習-animate()-</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
p {
  width:1092px;
  height:410px;
  margin:0;
}
div {
  width:546px;
  height:410px;
  overflow:hidden;
}
</style>
<script>
$(function(){
  $( '#surf1' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '-546px' },'slow', 'swing' );
  });
  $( '#surf2' ).click(function(){
    $( 'p:not(:animated)' ).animate({marginLeft : '0'}, 'slow', 'swing');
  });
});
</script>
</head>
<body>
<div>
<p><img src="img/surf01.png" alt="サーフィン１" id="surf1"><img src="img/surf02.png" alt="サーフィン２" id="surf2"></p>
</div>
</body>
</html>