Baccho Log

No Image

Sponsored Link

JQueryの基礎

  • 投稿日:
  • 更新日:
Tags:
JavaScript jQuery
Categories:
プログラミング

基本

bodyの閉じタグの部分にjQueryを読み込むようにする（場合によってはheadに書いたほうがいい場合もある）
はじめ方は

$(docment).ready(function() {
    //ここに色々な処理を書く
});

もしくは、

$(function() {
    //ここに色々な処理を書く
});

と省略して書くこともできる。

用語

処理を書くにあたり、色々な用語がある

  • セレクタ
    処理対象となるDOM要素を指定する記法
  • メソッド
    処理
  • メソッドチェーン
    メソッドをつなげて書くこと

    $(function() {
    $('p').css('color', 'red');
    //$('セレクタ').メソッド;
    //$('セレクタ').メソッド.メソッド;=>これがメソッドチェーン
});

id,classの指定

基本はCSSと同じ。
id属性は#
class属性は.
「,」「空白」「>」「+」の使い方もCSSと基本は同じ

$(function() {
    $('#id').css('color', 'red');
    $('.class').css('color', 'red');
});

フィルタ

<ul id="main">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
$(function() {
    $('#main > li:eq(1)').css('color', 'red');
});

■よく使うフィルタ

  • :eq()
    指定した添字に対して、記載されたメソッド処理をする。
    添字は0始まり
  • :gt() :lt()
    gtは添字より大きい要素
    ltは添字より小さい要素
    添字が0始まりの為注意。
  • :even :odd
    evenは偶数
    oddは奇数
    evenは0を含める
    oddは0を含めない
  • :contains()
    Textの中身を含むものを適用させる
    li:contains("3");と指定すれば、要素の中身に3が含まれるものが適用される。
  • :first :last
    firstは一番最初の要素
    lastは一番最後の要素

メソッドを使ったDOM要素

<ul id="main">
    <li>1</li>
    <li class="item">2</li>
    <li>3
        <ul id="sub">
            <li>3-1</li>
            <li class="item">3-2</li>
            <li>3-3</li>
            <li class="item">3-4</li>
            <li>3-5</li>
        </ul>
    </li>
</ul>
$(function() {
    $('#sub').parent().css('color', 'red');
});

■よく使うもの

  • parent() children()
    • parentは親要素
      $('#sub').parent().css('color', 'red');
      で、親要素のliを含めた要素に適用される。
    • childrenは子要素
      $('#sub').children().css('color', 'red');
      で、子要素にのみ適用される。
  • next() prev()
    • nextは次の要素
      $('#sub > li:eq(2)').next().css('color', 'red');
      で、li:eq(3)に適用される
    • prevは前の要素
      $('#sub > li:eq(2)').prev().css('color', 'red');
      で、li:eq(1)に適用される
  • siblings()
    自分を含めない兄弟要素に適用される
    $('#sub > li:eq(2)').siblings().css('color', 'red');

属性セレクタを指定する

<p><a href="http://google.com">Google</a></p>
<p><a href="http://yahoo.co.jp">Yahoo!</a></p>
<p><a href="http://example.com">example</a></p>
$(function() {
    $('a[href="http://yahoo.co.jp"]').css('color', 'red');
});

■よく使うもの
基本的には、JavaScript等の演算子と同じ。

  • =
    一致する
  • !=
    一致しない
  • *=
    含む
  • ^=
    先頭文字
  • $=
    最後文字

色々なメソッド

メソッドは値を取ることも出来る。
$('a[href="http://yahoo.co.jp"]').css('color');
と指定すれば、現在の色の値を取得することが出来る。

<p><a href="http://google.com" data-sitename="google">Google</a></p>
<p><a href="http://yahoo.co.jp">Yahoo!</a></p>
<p><a href="http://example.com">example</a></p>
  • addClass/removeClass
    セレクタに、クラスを付けたり。削除したりすることが出来る。
    $('p').addClass('myStyle');
    とすれば、p要素にmyStyleというクラスがつく。
    $('p').removeClass('myStyle');
    とすれば、p要素についているmyStyleというクラスを削除することが出来る。

  • attr
    要素の属性の値を取得・操作する。複数一致する条件がある場合は、一番最初に一致したものを取得する。
    $('a').attr('href');
    と指定すると、「http://google.com」を取得する。
    $('a').attr('href', 'http://google.co.jp');
    とすれば、hrefの値を「http://google.co.jp」に書き換える。

  • prop()

    1. 属性の真偽値を取得する。（disable, checked, selected, multiple）
    2. 属性の値を取得する。（id, name等）
      http://qiita.com/kbyay_/items/7a7ce9547f29b34a63b1
  • data
    カスタム属性の値を取得・操作する
    $('a').data('sitename');
    とすれば、data-sitenameの値をとることが出来る。

  • text
    要素の中身の取得や変更する
    $('p').text();
    で、Googleを取得する
    $('p').text('グーグル！');
    で、中身を「グーグル！」に変更することが出来る。

  • html
    要素を含めた中身を取得・変更する
    $('p').html();
    で、「<a href="http://google.com" data-sitename="google">Google</a>」を取得する
    $('p').html('<span>Test!!!!!!</span>');
    で、a要素はなくなり、span要素を含めたhtmlが上書きされる。

  • val
    フォーム部品に使用する。
    <input type="text" value="Hello!">
    というフォームがあったとすると
    $('input').val();
    で、「Hello!」を取得する。
    $('input').val('GoodBye!!');
    で、「GoodBye!!」に上書きする。

  • remove
    要素を含めた中身を空にする。
    $('p').remove();
    p要素が消える。（子要素も含めて全部消える）

  • empty
    中身だけを空にする
    $('p').empty();
    これは、p要素は残る。（子要素は消える）

■要素を追加する

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
$(function() {
    var li = $('<li>').text('新しいリスト');
    $('ul > li:eq(1)').before(li);
    //li.insertBefore($('ul > li:eq(1)'));上と同義
});
  • before/insertBefore
    指定の要素の前に、別の要素を追加する
    $('セレクタ').before('追加要素');
    追加要素.insertBefore($(‘セレクタ’));

  • after/insertAfter
    指定の要素の後に、別の要素を追加する
    $('セレクタ').after('追加要素');
    追加要素.insertAfter($(‘セレクタ’));

  • prepend/prependTo
    子要素の先頭に指定要素を追加する
    $('セレクタ').prepend('追加要素');
    追加要素.prependTo($(‘セレクタ’));

  • append/appendTo
    子要素の末尾に指定要素を追加する
    $('セレクタ').append('追加要素');
    追加要素.appendTo($(‘セレクタ’));

■エフェクト
文字指定では
slow, nomal, fastのいずれか
数値ではミリ秒単位で指定をする。
要素そのものが消えるわけではない。

  • 消す
    1. hide
      $(‘セレクタ’).hide([speed][,callback]);
      hide(‘slow’);//文字指定
      hide(800);//ミリ秒指定
    2. fadeOut
      $(‘セレクタ’).fadeIn([speed][,callback]);
  • 表示する
    1. show
      $(‘セレクタ’).show([speed][,callback]);
      show(‘slow’);//文字指定
      show(800);//ミリ秒指定

    2. fedeIn
      $(‘セレクタ’).fadeIn([speed][,callback]);

  • 両方
    toggle
    $(‘セレクタ’).toggle([speed][,callback]);
    表示されていたら消す。非表示であれば表示する。

■イベント

  1. click 
    $('セレクタ').click(function(){
    //ここに処理を書く
});
  2. mouseover 
    $('セレクタ').mouseover(function(){
    //ここに処理を書く
});
  3. mouseout 
    $('セレクタ').mouseout(function(){
    //ここに処理を書く
});
  4. mousemove 
    $('セレクタ').mousemove(function(){
    //ここに処理を書く
});
<div id="box" style="width:100px; height:100px; background:#f00;"></div>
$(function() {
    $('#box').mouseover(function(){
        $(this).css('background', '#00f');
    })
    .mouseout(function() {
        $(this).css('background', '#f00');
    })
    .mousemove(function(e) {
        $(this).text(e.pageX);
    });
});

※重要※
thisは自分自身を表す。
上記の例であれば、「#box」がthisとなる。
クラスの場合も、クラス全体ではなく同クラス中の自分自身を表す。

mousemoveにはイベントオブジェクトを渡すのが一般的。
基本的には上記のように.mousemove(function(e) {}で指定をする。
イベントについては、下記の公式ページを参照
http://api.jquery.com/category/events/event-object/

<div id="box" style="width:100px; height:100px; background:#f00;"></div>
<button>Click Me!!!!!</button>

$(function() {
    $('button').click(function(){
        $('#box').toggle(800);
    });
});

■フォーム部品で使えるもの

  • focus 
    $('セレクタ').focus(function(){
    //ここに処理を書く
});
  • blur 
    $('セレクタ').blur(function(){
    //ここに処理を書く
});
  • change 
    $('セレクタ').change(function(){
    //ここに処理を書く
});
<input type="text" id="name">
<select name="members" id="members">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
</select>

$(function() {
    $('#name').focus(function() {
        $(this).css('background', 'red');
    })
    .blur(function() {
        $(this).css('background', 'white');
    });
});
$(function() {
    $('#members').change(function() {
        alert($('#name').val());
    })
});

■動的にjQueryを動かす

  • on 
    $('セレクタ').on(events [, selector ] [, data ], function(eventObject) {
    //ここに処理を書く 
});
<div>
    <button id="add">Click Me!!!!</button>
</div>

$(function() {
    $('#add').click(function() {
        var p = $('<p>').text('増やしたよ！').addClass('addP').css('color', 'red');
        $(this).before(p);
    });
    //この下のが消えない
    $('.addP').click(function() {
        $(this).remove();
    });
});

一番初めにjQueryを読み込んだ時には、addPというクラスを持ったセレクタが存在していないため作動しない。

$(function() {
    $('#add').click(function() {
        var p = $('<p>').text('増やしたよ！').addClass('addP').css('color', 'red');
        $(this).before(p);
    });
    //これで消える
    $('div').on('click', '.addP', function() {
        $(this).remove();
    });
});

親要素を指定して、on以降を充てたい要素に対してイベントを記載していくこと。
今回はhtmlの例でdivで囲んだが、単体の場合はbody要素が親になると思うので、bodyを指定すればOK

■Ajaxを使う

  • Ajax
    非同期通信
  • 非同期
    処理が終わる前に次の処理へ移る。

サーバーからの情報をJavaScriptで取得する。
ブラウザ側で一々ページを読み込み直すことなく、
ユーザーの動作に合わせて、一部分のみページの内容を更新することが出来る。

  • load
    サーバーから情報を取得する。

    • Ex.1)sample.htmlの中身をAjaxでindex.htmlのdiv内に表示させる
      サーバー内に
      index.html
      sample.html
      が入っているものとする。

      ボタンをクリックしたら、サーバーからsample.htmlをloadする。

      <p>追加するよ！！！</p>
      <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
</head>
<body>
    <div id="more"></div>
    <button>Click Me!!!!</button>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function() {
            $('button').click(function() {
                $('#more').load('sample.html');
            });
        });
    </script>
</body>
</html>

      ※注意※
      非同期通信のため、読み込んだsample.htmlに何か装飾等をしたい場合にはコールバック関数を使用する。

      $(function() {
    $('button').click(function() {
        $('#more').load('sample.html');
        //sample.htmlでloadした文を赤くしたい
        $('p').css('color', 'red');
    });
});

      これだと、sample.htmlが読み込まれる前に、$(‘p’).css(‘color’, ‘red’);が実行されてしまうため赤くならない。

      $(function() {
    $('button').click(function() {
        $('#more').load('sample.html', function() {
            $('p').css('color', 'red');
        });
    });
});

      loadメソッドの引数にコールバック関数を指定すれば、loadした後に実行される。

  • get/post
    フォームの値をとってくる。

    1. $.get
      フォームの値を取得するのみ
      $.get( url[, data][, callback][, dataType])
    2. $.post
      データを更新する場合はpost
      $.post( url[, data][, callback][, dataType])
    • Ex.1)入力した値をgreed.phpに投げて、その結果を表示する。 
      <div>
    <input type="text" name="str" id="name">
    <input type="button" id="greed" value="Greed!!!">
</div>
<p id="result"></p>
      echo htmlspecialchars('hi!' . $_GET['name'], ENT_QUOTES, 'UTF-8');
      $(function() {
    //id="greed"がクリックされたら発火
    $('#greed').click(function() {
        //greed.phpにid="name"の入力値をgetで渡す
        $.get('greed.php',{
            name: $('#name').val()
        //dataはgreed.phpの中身
        } , function(data) {
            $('#result').html(data);
        });
    });
});

      ※nameというパラメータで渡しているため、greed.php側では$_GET[‘name’]で値を取得することが出来る。

    • Ex.2)複数の値を受け取りたい 
      <div>
    <input type="text" name="str" id="name">
    <input type="button" id="greed" value="Greed!!!">
</div>
<p id="result"></p>
      //連想配列でパラメータと値を入れる
$arr = [
    "message"=>htmlspecialchars('hi!' . $_GET['name'], ENT_QUOTES, 'UTF-8'),
    "length"=>mb_strlen($_GET['name'])
];
//json形式で渡す
header('Content-Type: application/json;charset=utf-8');
echo json_encode($arr);
      $(function() {
    $('#greed').click(function() {
        $.get('greed.php',{
            name: $('#name').val()
        } , function(data) {
            $('#result').html(data.message + '(' + data.length + ')');
        });
    });
});

      getで送ったデータを取得する際に、コールバックで指定した引数+連想配列名で取得できる。
      今回の場合は、
      data.message
      data.length
      で、データを取得できます。

« PDOでデータベースを操作するDreamweaverの開発環境を整える »

Sponsored Link

コメントする

記事の感想や修正依頼等ありましたら、コメントをお願いいたします