jquery入門（ドットインストール）

javascriptを便利に扱うためのライブラリ

//$(document).ready(function(){
$(function(){
     //セレクタ：処理対象となるDOM要素を指定する記法
     //メソッド：処理
     //メソッドチェーン
$(‘p’).css(‘color’, ‘red’).hide(’slow’);
}};

idやclassの指定

$(“”)
html要素
id #main
class .item
$(“.item”).css(‘color’,’red’);

もっとセレクタ

# . ID、クラス
>　直下の子要素
(空白) それ以下の子要素
, 複数の子要素
+隣接する子要素

$(“#main > .item”).css(‘color’ , ‘red’);

フィルタを使う

$(“#sub > .ii:eq(2)”).css(‘color’ , ‘red’);

フィルタ

:eq()　//任意の番目の要素
:gt(), :lt()     //任意の番目のより大きい、小さい
:even, :odd　//偶数、奇数
:contains()  //中身になにがあるか
:first, :last　//最初、最後の要素
$(“#sub > li:gt(2)”).css(‘color’ , ‘red’);

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

parent(),children()     //親要素、子要素
next(), pref()     //次の要素、前の要素
siblings()     //兄弟要素

$(“#sub > li:eq(2)”).prev().css(‘color' , 'red’);

属性セレクタ

=      //等しい
!=     //異なる
*=     //含まれる
^=     //〜で始まる
$=     //〜で終わる

$(‘a[href=“http://google.com"]’).css(‘background’, ‘red’);

css、addClass/removeClassの使用

値の取得

$(‘p’).css(‘color’ , ‘red’).css(‘background’, ‘blue’);
console.log($(‘p’)).css(‘color’));

addClass

styleの追加

$(‘p’).addClass(‘myStyle’);

styleを外すときはremoveClassを追加

attr、data使用

attr

$(function(){
     console.log($(‘a’).attr(‘href’));
})

data

$(function(){
     console.log($(‘a’).data(’sitename’));
});

タグの中身の操作

text
html
val //valueの中身
remove //タグごと消す
empty //タグの中身を空にする

$(‘p’).txt(‘just change’);
$(‘p’).html(‘<a hred’>Click me!)</a>’);
console.log($(‘input’).val());
$('input’).val(‘hello, again!’);
$(‘p’).empty();
$(‘p’).remove();

要素の追加

//before, after  ->  insertBefore, insertAfter   要素を前に追加/要素を後ろに追加
//prepend, append -> prependTo, appendTo　要素を子要素の最初に追加/要素を子要素の最後に追加

var li = $(‘<li>’).text(‘just added’);
$(‘ul >li:eq(1)’).before(li)


var li = $(‘<li>’).text(‘just added’);
$(‘ul’).append(li) 

エフェクトの使用

hide, show //消える、現れる
fadeOut, fadeIn //ゆっくり消える、　ゆっくり現れる
toggle //現れると消えるを交互に

例) $(‘#box’).toggle(800);

エフェクトの後の動作

$(‘#box’).fadeOut(800, function(){
     alert(“gone!’);
}};

イベントの使用

click, mouseover, mouseout, mousemove

$(function(){
     $(‘#box’).click(function(){
          alert(“hi!”);
     });
     $(‘#box’)
          .mouseover(function(){
         $(this).css(‘background’ , ‘red’);
     }); 

          .mouseout(function(){
         $(this).css(‘background , ‘green'')
     });  
          .mousemove(function(){
          $(this).text(e.pageX);
     });   

});

focus, blur, change

$(function(){
//focusすることでform部品のいろを変える
     .focus(function(){
          $(this).css(‘background’ , “red”);
     });
//focusから外れることでforn部品のいろを変える

 .blur(function(){
          $(this).css(‘background’ , “white”);
     }); 

//値を変えるとalertを表示する
     $(‘’members’).change(function(){
          alert(‘changed!’);
     });
});

onメソッドの使用

    $(function(){
          $(‘button’).click(function(){
               var p =$(‘<p>’).text(vanish!).addClass(‘vanish’);
          $(this).before(p);

          $(“body”).on(‘click’ , ‘.vanish’ , (function(){
               $(this).remove();
});

以下のように記述しても、ロードした時点で存在しない要素には効かない

           $(“.vanish”).click(function(){
               $(this).remove(); 
          });