基本形
<!-- 以下の<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(); }); });