BNBのプログラミング勉強記録

ガチのプログラミング初心者が駆け上がっていくブログ

メモ(jQuery初級)

基本形

<!-- 以下の<div>タグに"hide-text"というidをつけてください -->
<div class="btn" id="hide-text">説明を隠す</div>

<!-- 以下の<h1>タグに"text"というidをつけてください -->
<h1 id="text">Hello, World!</h1>
$(function() {
  // 「#hide-text」要素に対するclickイベントを作成してください
  $('#hide-text').click(function(){
    $('#text').slideUp();
  });
  
});

メソッド一覧

  • fadeOut
  • fadeIn
  • slideUp
  • slideDown
  • click
  • text
  • html
  • css
  • find 全部引っ張る
  • children ひとつ下からのみ引っ張る
  • hover

thisについて

thisはイメージしにくいので、具体例を見てみましょう。例えば下図のように、複数のli要素にclickイベントが設定されていた場合、クリックされた時に、実際にクリックされたli要素にだけ処理を行いたい場合があります。このようなときはthisを用いて、実際にイベントが起こった要素を取得しましょう。

$(function() {
  // 「.list-item」要素に対するclickイベントを作成してください
  $('.list-item').click(function(){
    $(this).css('color','red');
    
  });
  
});

変数とメソッドチェーン

$(function() {
  $('.btn').click(function() {
    // $('#title')を変数$titleに代入してください
    var $title=$('#title');
    
    
    // 「#title」に対する3つのメソッドを、変数を使って書き換えてください
    $title.css('color', 'red');
    $title.html('こんばんは、にんじゃわんこさん');
    $title.fadeOut(1000);
    
    // 「#text」に対する3つのメソッドを、メソッドチェーンを使って書き換えてください
    $('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう!</h3>').fadeOut(1000);
  });
});

findとChildrenの使用例

$(function() {
  $('#find-method').click(function() {
    // findメソッドで、「#wrapper」内にあるすべての「a」要素を取得し、
    // cssメソッドで文字の色をredに指定してください
    $('#wrapper').find('a').css('color','red');
    
    
  });
  
  $('#children-method').click(function() {
    // childrenメソッドで、「#wrapper」の一階層下にある「a」要素を取得し、
    // fadeOutメソッドで隠してください
    $('#wrapper').children('a').fadeOut();
    
    
  });
});

hoverイベント

hoverイベントは、 $('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);のように書きます。clickイベントと違い、引数を2つ書くことに注意しましょう。引数の間はコンマで区切ります。

$(function() {
  // 「#language-wrapper」にhoverしたときのhoverイベントを作成してください
  $('#language-wrapper').hover(function(){
    $('.language-text').fadeIn();
  },
  function(){
     $('.language-text').fadeOut();
  });
  
});