最終更新:2013-12-11 (水) 09:19:55 (4114d)  

jQuery
Top / jQuery

様々な処理を短く簡単に書ける JavaScriptライブラリ

JavaScriptのDOM操作や，XMLHttpRequest，XMLの操作などを覚えなくとも，独自のXPath/CSSセレクタを利用することで，多くのDOM操作を非常に簡単に書くことが出来る

http://jquery.com/

jQuery/バージョン

↑

例 

<div class="testClass">DIVでtestClassです</div>
<div class="testClass">DIVでtestClassです</div>
<div class="testClass">DIVでtestClassです</div>
<div class="noTestClass">DIVでnoTestClassです</div>
<p class="testClass">PでtestClassです</p>

の色を変えたい場合

普通に書くと：

  var divs= document.getElementsByTagName("DIV");
  for(var i=0;i<divs.length;i++){
    if((divs[i].getAttribute("className")||
        divs[i].getAttribute("class"))=="testClass"){
      divs[i].style.color="red";
    }
  }

↓

jQueryを使うと：

  $("DIV.testClass").css("color","red");

と書ける

※戻り値はDOM要素ではなくjQueryオブジェクト

↑

概要

↑

追加されるオブジェクト

と言うオブジェクトが追加される

↑

$

  • $はjQueryを読み込むことにより追加されるオブジェクト
↑

$()

  • CSSセレクタを使ってDOMを検索し、一致したオブジェクトを操作できる。XPathも使える。
  • 戻り値はjQueryオブジェクト 
       //.htmlはjQueryで追加されたプロパティ
   var html = $("#someid").html();//id=someidのDOMオブジェクトのHTMLを取得
   $("#someid").html("aaa");      //セットするときは引数に入れる
↑

引数

  • jQuery( selector [, context ] )
    • もしcontextが何も指定されなければ、$()関数は現在のHTMLのDOMエレメントを検索する。
    • 逆にDOM要素やjQueryオブジェクトなどのcontextが指定されれば、selector はそのcontextに対して合致するものを捜す。
  • jQuery( element )
  • jQuery( elementArray )
  • jQuery( object )
  • jQuery( jQuery object )
  • jQuery()
↑

CSSセレクタ

  • エレメントの指定方法 
    $("tagName").html("aaa");//tag (pとか)
$("#idName") //id=idName
$(".className") //classで指定
$("input.required") //class=requiredのinput
$("div.about") //tag.class
$("tagName1,tagName2") //カンマ区切りでも指定可能(OR扱い)
$("tagName1 tagName2") //スペース区切りは入れ子構造（子孫全部）
$("tagName1>tagName2") //子のみ
$("tagName1+tagName2") //tag1の直後のtag2
↑

jQuery/メソッド 

var src = $("#img1").attr("src");//属性の取得
$("#img1").attr("src", "next_pic.jpg");//属性の変更

//CSSの設定
$("p").css("color","#ff0000");//CSSの設定
$("p").css({width:640,height:480});//ハッシュで複数設定
$("p").addClass("note");//CSSのクラスの設定
$("p").removeClass("note");//CSSのクラスの削除
$("p").toggleClass("note");//CSSのクラスの追加/削除(切り替え)

//CSSの取得
var cssValue = $("p").css("color");
 
↑

jQuery/イベント処理

↑

ロード時のイベント

  • onload
    • 画像のロードもすべて完了した状態を意味するようで、これだとDOMツリーの構築は終わっているのにすごい重い画像が存在する場合はすごい時間がかかってしまう
  • ready
    • 書き方が3つある 
      $(document).ready(function(){
  // 実行する命令
});
//推奨されていない使い方
$().ready(function(){
  // 実行する命令
});
$(function(){
  // 実行する命令
});
    • http://api.jquery.com/ready/
↑

その他イベント 

//onload時の処理
$(function(){
  $("div").click(function(){
    this.style.backgroundColor = "yellow";
  });
  $("div").mouseover(function(){}):
  $("div").mouseout(function(){}):
  $("div").hover(function(){}):
});

//関数をバインド
$("div").bind("click", function(){
  alert( $(this).text() );
});
↑

this

呼ばれる場所によってthisの値（スコープ）が違う

  • イベントハンドラ, jQuery.fn.each, jQuery UI
    • Explicitly set this to be a DOM element
  • AJAX のコールバック
    • Explicitly set this to be an the options object
  • jQuery.each
    • Explicitly sets this to be the value being iterated, but weird.

http://fixingthesejquery.com/#slide28

↑

Ajax 

//通信
$("div").load("URL"):
$.ajax("URL");

$.get("http://自分のドメイン/", null, function(data, textStatus) {
 doSomethingWithResult(data);
});
↑

クロスドメイン

↑

jQuery.each

  • $(".hoge").each(function(i,value){...});
    • コールバックの第一引数は0から始まるインデックス
    • コールバック内ではthisが各要素
  • continueはreturn
  • breakはreturn false
↑

callback 

function (index, Element) {
    index; // インデックス
    Element; // DOM要素
}
↑

function 

$.fn.extend({
    'method_name' : function () {
        console.log(this);
        return this;
    }
});

$().method_name();
↑

変数

↑

$.extend

  • 広域変数は$.extendで$に保持
$.extend({
    'hoge' : 'huga'
});

console.log($.hoge);
↑

$.dataに保持 

$('a:first').data('first_link', true);

console.log($('a:first').data('first_link', true));
  • events,handlerは予約語
↑

メソッドチェーン 

$("p").css("color", "#ff0000").css("background-color", "#000080");//
↑

絞り込み

  • $("selector").filter - 要素集合から、引数で渡す条件式に合致しない全ての要素を削除したものを返す。
  • $("selector").find - 指定要素が持つ全子孫要素から、指定条件式に合致するものを選択する。
↑

日本語リファレンス

↑

jQuery逆引きリファレンス

↑

デバッグとか

↑

jQuery/プラグイン

↑

5 Things You Might Not Know about jQuery

↑

まとめ

↑

軽量版

↑

関連

↑

参考

↑

IE6




検索：