【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('ようこそ');
});

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

$('#change-html').click(function(){
$('#text').html('<a href="https://prog-8.com/">ようこそ</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>ありがとう！</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>ありがとう！</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">タイトル</h1>
   <p class="language-text">
   説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文
    </p>
</div>

.language-text{
  display: none;
}

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

まとめ

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