Progate jQuery 初級編で学んだこと

jQuryを使うことで、動きのあるWebサイトを作ることができる

・要素をアニメーション的に隠すためには、fadeOut／slideUpを使う（数字は隠れるまでの秒数）

$(function() {
$('img').fadeOut(1500);
$('p').slideUp(1500);
});

・HTMLのID要素を隠したい場合

$('#title').slideUp();

・HTMLのID要素のCSSを変更したい場合

$('#title').css('color','red');

・ちなみにIDは#で、class名は.で指定すればOK

$('.title').slideUp();

・隠れている要素を表示させる

  $('#title').show();
  $('#image').fadeIn();

・クリックしたら指定の要素を隠す

$('#hide-text').click(function(){
$('#text').hide();

・クリックしたら指定の要素を下からゆっくり隠す

$('#hide-text').click(function(){
$('#text').slideUp();

・クリックしたら、文字を赤と50pxに変更する

$('#change-css').click(function(){
$('#text').css('color','red');
$('#text').css.('font-size','50px');
});

・クリックしたら、文字列が変わる

$('#change-text').click(function(){
$('#text').text('ようこそ、Progateへ');
});

・クリックしたら、リンクを付ける

$('#change-html').click(function(){
$('#text').html('<a href="https://prog-8.com/">ようこそ、Progateへ</a>');
});

・リンクをクリックしたら、文字色が赤に変わる

$('.list-item').click(function(){
$(this).css('color','red');
});

・ボタンをクリックしたら、文字色と文章の内容を変える

$('.btn').click(function() {
var $title = $('#title');

$('#title').css('color', 'red');
$('#title').html('こんばんは、にんじゃわんこさん');
$('#title').fadeOut(1000);

$('#text').css('color', 'blue');
$('#text').html('<h3>jQueryをマスターしましょう！</h3>');
$('#text').fadeOut(1000);
});

↓ 変数を使うと、コードを短縮できる　

$('.btn').click(function() {
var $title = $('#title');

$title.css('color', 'red');
$title.html('こんばんは、にんじゃわんこさん');
$title.fadeOut(1000);
});

・メソッドチェーンを使って、コードを短縮できる　

$('.btn').click(function() {

$('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう！</h3>').fadeOut(1000);

});

・findメソッド：指定した要素のすべて子要素を変更できる
・childrenメソッド：1番最初の子要素を変更できる

<div class="btn" id="find-method">findメソッド</div>
<div class="btn" id="children-method">childrenメソッド</div>
  
  <div id="wrapper">
    <a href="#">リンク1</a>
    <div>
      <a href="#">リンク2</a>
    </div>
</div>

$('#find-method').click(function() {
$('#wrapper').find('a').css('color','red');
});

$('#children-method').click(function() {
$('#wrapper').children('a').fadeOut();
});

・hoverメソッド：マウスを乗せた時・マウスが外れた時の挙動を指定できる

<div id ="language-wrapper">
   <h1 class="language-title">jQueryとは?</h1>
   <p class="language-text">
   JavaScriptのライブラリの1つです。ユーザーのクリックに反応して表示されるフォームや、アニメーションなど、HTMLとCSSだけでは実現できなかった様々な動きを表現することができます。
    </p>
</div>

.language-text{
  display: none;
}

$('#language-wrapper').hover(
  function(){
     $('.language-text').fadeIn();
    }
   ,
  function(){
     $('.language-text').fadeOut();
    }
);

まとめ

動きのあるサイトは、HTMLやCSSを書き換えたり、指定して指示することで成り立っていることが理解できた。