Go to Qiita Advent Calendar 2024 Top
LoginSignup
24
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@intern

jQuery入門（akiinu）

Last updated at Posted at 2014-05-01

jQuery

JavaScriptを便利に扱うためのライブラリ
書く量を少なくできる

公式サイト
jquery.com

jQueryの読み込み

html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> // jQureryの読み込み
     <script>
         $(function() {  // このドキュメントを読み込んだら次の処理を行う 
             $('p').css('color', 'red').hide('slow');
            });
     </script>
  </body>
</html>

※スクリプトはjQueryを読み込んだ後に書く
※(document).ready(function() = (function()

jQueryで覚えること

  • セレクタ：処理対象となるDOM要素を指定する記法（p）
  • メソッド：処理（.css('color', 'red') ）
  • メソッドチェーン：メソッドをつなげて書くこと

#セレクタ

セレクタの書き方

$('')の中に書く
html要素：p,h1,ul
id：#main
class：.item

<script> 　$(function() { 　$("#sub").css('color', 'red'); }); </script>

細かく指定する

  • ：直下の子要素（#mainの直下のitem 3-2,3-3には及ばない）

  • ：それ以下の要素（#main以下のitem）
  • ,：複数の要素（pとitem）
  • +：隣接する要素（itemの横にあるitem = 2,3-3 ）

隣接セレクタ
<script> 　$(function() { $(".item + .item"),css('color', 'red'); }); </script>

フィルタ

subの中から2番目を赤くする
<script> 　$(function() { $("#sub > li:eq(2)"),css('color', 'red'); }); </script>
※2→0,1,2番目

  • :eq()：イコール
  • :gt(), :lt()：何々より大きいもの、小さいもの
  • :even, :odd：偶数、奇数
  • :contains()：中身のものを指定
  • :first, :last

subの中から中身に4の入っているものを赤くする
<script> 　$(function() { $("#sub > li:contains('4')"),css('color', 'red'); }); </script>

メソッドを使ったDOM要素指定

  • parent(), children()
  • next(), prev()
  • siblig() ：兄弟要素

subとその親要素を指定して赤くする
<script> 　$(function() { $("#sub").parent().css('color', 'red'); }); </script>

subの2番目の次の要素を指定して赤くする
<script> 　$(function() { $("#sub > li:eq(2)").css('color', 'red'); }); </script>

その要素の同列の要素を指定して赤くする
<script> 　$(function() { $("#sub" > li:eq(2)").sibling().css('color', 'red'); }); </script>

属性セレクタ

HTMLに含まれる属性でセレクタを指定していく

html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <p><a href="http://google.com">Google</a></p>
     <p><a href="http://yahoo.co.jp">Yahoo!</a></p>
     <p><a href="http://dotinstall.com">Dotinstall</a></p>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
       $(function() {  
       $('a[href="http://google.com"]').css('background', 'red');
       });
     </script>
  </body>
</html>
  • =：等しい
  • !=：等しくない
  • *=：含む
  • ^-：先頭から始まる
  • $-：終わりがそうである

<script> 　$(function() { $('a[href*="dotinstall"]').css('background', 'red'); }); </script>

メソッド

CSS

pの色の設定
<script> 　$(function() { 　　$('p').css('color', 'red');.css('background', 'blue'); 　}); </script>

pの色データの取得
<script> 　$(function() { 　　$('p').css('color', 'red');.css('background', 'blue'); 　　console.log($('p').css('color')); 　}); </script>

addClass/removeClass

スタイルをまとめたものを利用する

html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      .myStyle {
      border:5px solid green;
      font-size:48px;
    　}
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
        $('p').addClass('myStyle');
        });
     </script>
  </body>
</html>

attr,data

attr：HTMLの属性の値を取得したり変更したりする

html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <a href="http://google.com">Google</a>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          console.log($('a').attr('href'));
          $('a').attr('href', 'http://google.co.jp')
        });
     </script>
  </body>
</html>

data：何らかのカスタム属性をつけておきその値を取得する

html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <a href="http://google.com" data-sitename="google">Google</a>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          console.log($('a').data('sitename'));
        });
     </script>
  </body>
</html>

タグの中身を操作する

  • text
  • html
  • val
  • remove,empty

textメソッド

文字の変更
<script> $(function() { $('p').text('just changed'); }); </script>
値の取得
<script> $(function() { console.log($('p').text()); }); </script>

htmlメソッド

ただのテキストでなくhtmlタグを含めたものを作る
<script> $(function() { $('p').html('<a href="">click me!</a>'); }); </script>

valメソッド

html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <a href="http://google.com" data-sitename="google">Google</a>
     <input type="text" value="hello"> //ここ
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          console.log($('input').val()); //取得
          $('input').val('hello, again!'); //変更
        });
     </script>
  </body>
</html>

emptyメソッド

p要素を空にする
<script> $(function() { $('p').empty(); }); </script>

removeメソッド

p要素を消去する
<script> $(function() { $('p').remove(); }); </script>

要素を追加する

  • before, after（= insertBefore, insertAfter）
  • prepend, append（= prependTo, appendTo）

before,after

html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <ul>
       <li>0</li>
       <li>1</li>
       <li>2</li>
     </ul>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          var li = $('<li>').text('just added'); //liという要素を追加する
          $('ul > li:eq(1)').before(li); //追加する場所を指定する
        });
     </script>
  </body>
</html>

insertBefore,insertAfter
<script> $(function() { var li = $('<li>').text('just added'); li.insertBefore($('ul > li:eq(1)')); }); </script>

prepend：子要素の先頭に追加する
append：子要素の末尾に追加する
<script> $(function() { var li = $('<li>').text('just added'); $('ul').append(li); }); </script>

prependTo, appendTo
<script> $(function() { var li = $('<li>').text('just added'); li.appendTo($('ul')); }); </script>

エフェクトを使う

  • hide, show (消す、現す)
  • fadeOut, fadeIn（ふわっと消す、ふわっと現す）
  • toggle（消えたり現れたり）
html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <div id="box" style="width:100px;height:100px;background:red;"></div>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          $('#box').hide(); //hide(slow),hide(800)なども可能
        });
     </script>
  </body>
</html>

toggleで消えたり現れたりを繰り返す
<script> $(function() { $('#box').toggle(800); $('#box').toggle(800); $('#box').toggle(800); $('#box').toggle(800); }); </script>

第2引数に関数を持つことができる
→コールバック関数
<script> $(function() { $('#box').fadeOut(800, function() { alert("gone!"); }); }); </script>
※fadeOutの処理後に行われる

イベントを使う

  • click
  • mouseover, mouseout, mousemove
html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <div id="box" style="width:100px;height:100px;background:red;"></div>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          $('#box').click(function() {
            alert("hi!");
            }); 
          $('#box')
            .mouseover(function() {
              $(this).css('background', 'green'); //最初は#boxをthisで表せる
            })
            .mouseout(function() {
              $(this).css('background', 'red');
            })
            .mousemove(function(e) { //引数にイベントオブジェクトを追加
              $(this).text(e.pageX); //マウスのx座標を表示する
            });
        });
     </script>
  </body>
</html>

※イベントオブジェクト→jQuary API Documentation

focus,blur,change

フォームで使えるメソッド

  • focus, blur （フォーカスしたとき、フォーカスをはずしたとき）
  • change（値が変わったとき）
html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <input type="text" id="name">
     <select id="members" name="members">
       <option>taguchi</option>
       <option>fkoji</option>
       <option>dotinstall</option>
     </select>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          $('#name')
          .focus(function() {
            $(this).css('background', 'red');
            })
          .blur(function() {
            $(this).css('background', 'white');
            })
          $('#members').change(function() {  //よくセレクトボックスと一緒に使われる
            alert('changed!'); //他には、次のセレクトボックスを表示するなど
            });
          });
     </script>
  </body>
</html>

onメソッド

動的に作られた要素にイベントを設定する

ボタンを押すごとに前に文字を挿入する

html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <button>Add!</button>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {

          $('button').click(function() { // クリックされたとき
            var p = $('<p>').text('vanish!').addClass('vanish'); // 新しくpを作る
            $(this).before(p); // buttonの前に
            });

         });
     </script>
  </body>
</html>

挿入された文字をクリックするたびに消したい
$('.vanish').click(function() { $(this).remove(); });
では消えない！
→ドキュメントが読み込まれた時点ではclass vanishは存在していないから

→読み込まれた時に存在していない動的に作られた要素に対してイベントをつけるにはonメソッドを使う
$('body').on('click', '.vanish', function() { $(this).remove(); });

24
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
24
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?