///////////////////////////////////////////////////////////////////////
  API/1.3/Core jQuery    API JavaScript Reference  2009.6.20
//////////////////////////////////////////////////////////////////////

□ Contents

    * 1  //$(...) The jQuery Function://
          o 1.1 jQuery( expression, context )
          o 1.2 jQuery( html, ownerDocument )
          o 1.3 jQuery( elements )
          o 1.4 jQuery( callback )

    * 2  //jQuery Object Accessors://
          o 2.1 each( callback )
          o 2.2 size( )
          o 2.3 length
          o 2.4 selector
          o 2.5 context
          o 2.6 eq( position )
          o 2.7 get( )
          o 2.8 get( index )
          o 2.9 index( subject )

    * 3  //Data://
          o 3.1 data( name )
          o 3.2 data( name, value )
          o 3.3 removeData( name )
          o 3.4 queue( name )
          o 3.5 queue( name, callback )
          o 3.6 queue( name, queue )
          o 3.7 dequeue( name )

    * 4  //Plugins://
          o 4.1 jQuery.fn.extend( object )
          o 4.2 jQuery.extend( object )

    * 5  //Interoperability://
          o 5.1 jQuery.noConflict( )
          o 5.2 jQuery.noConflict( extreme )










    //$(...) The jQuery Function://



□　jQuery(expression, context)
This function accepts a string containing a CSS selector which is then used to match a set of elements.


documentの最初のform内にある、全てのinputタグでtypeがradioのものを抽出する。

ex.1
$("input:radio", document.form[0]);


AJAXで戻ってきたXMLから、全てのdivを抽出する。

ex.2
$("div", xml.responseXML);


全てのdocumentの中から、divの中にpが入れ子になっているものを抽出して枠線を付ける。

ex.3
$("div > p").css("border", "1px solid gray");



□　jQuery(html, [ownerDocument])
Create DOM elements on-the-fly from the provided String of raw HTML.

生成されたHTML文字列からDOMエレメントを作成します。

文字列として書かれたHTMLを受け取ります。

スラッシュを含むような文字列（imgタグのパスなど）を渡す場合は、これをエスケープしてやる必要があります。
XHTMLフォーマットでの記述時に空要素を記述する場合は、$("<span/>")のように書きます。jQuery1.3からは、$(document.createElement("span"))のように記述することもできます。


div要素をはじめとするコンテンツを動的に作成し、bodyに追加する。
ex.1
$("<div><p>Hello</p></div>").appendTo("body");


inputエレメントをtype要素無しに作ることはできない。
ex.2
// Internet Explorerでは動作しない
$("<input/>").attr("type", "checkbox");
// Internet Explorerでも動作する
$("<input type='checkbox'/>");

※これはMicrosoftのread/write-onceルールによるもので詳しくはMSDNを参照のこと。




□　jQuery(elements)
Wrap jQuery functionality around a single or multiple DOM Element(s).
単一または複数のDOM ElementをjQueryオブジェクトに抱合する。


bodyの背景色を変える。（cssメソッドはjQueryオブジェクトで、DOM Elementには存在しない）

ex.1
$(document.body).css( "background", "black" );



myForm内の全ての要素を非表示にする（配列には全てを非表示にするhide関数はない）

ex.2
$(myForm.elements).hide()



□　jQuery(callback)
A shorthand for $(document).ready().

$(document).ready()の短縮形


DOMの準備が出来た際に処理を実行する。

ex.1

$(function(){
  // Document is ready
});


$エイリアスを用いたjQueryのコードが確実に動作するため
グローバル変数に頼らずに引数に$を記述するようにする。

ex.2

jQuery(function($) {
  // $関数がjQueryオブジェクトのエイリアスとして安全に使える
});







    //jQuery Object Accessors://


□　each(callback)
Execute a function within the context of every matched element.
合致した全てのエレメントに対して関数を実行する

合エレメント毎に関数が実行され、thisポインタは関数内で各エレメントを指す。
コールバック関数は第一引数に、エレメントセット中のゼロから始まるインデックスを受け取る。

戻り値にfalseを設定するとループ終了
戻り値にtrueを返すと次のループ処理

ex.1
関数内で通常のDOM ElementではなくjQueryオブジェクトを使いたい場合、$(this)のように記述

$("span").click(function () {
  $("li").each(function(){
    $(this).toggleClass("example");
  });
});


Sample jquery
 ---------------------------
 window.onload = (function(){
  try{
    $("span").click(function () {
      $("li").each(function(){
        $(this).toggleClass("example");
      });
    });
  }catch(e){}
});


CSS
 ---------------------------
  html,body{border:0; margin:0; padding:0;}
  ul { font-size:18px; margin:0; }
  span { color:blue; text-decoration:underline; cursor:pointer; }
  .example { font-style:italic; }


HTML
 ---------------------------
  To do list: <span>(click here to change)</span>
  <ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Be merry</li>
  </ul>


ex.2

id=stopを持つdivが見つかった場合、戻り値にfalseを返し処理を中断させ
同時にindexの値を出力する。


Sample jquery
---------------------------
 window.onload = (function(){
  try{
    $("button").click(function () {
      $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow"); 
        if ($(this).is("#stop")) {
          $("span").text("Stopped at div index #" + index);
          return false;
        }
      });
    });
  }catch(e){}
 });


CSS
---------------------------
html,body{border:0; margin:0; padding:0;}
div { width:40px; height:40px; margin:5px; float:left;
      border:2px blue solid; text-align:center; }
 span { color:red; }


HTML
---------------------------
  <button>Change colors</button> 
  <span></span>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="stop">Stop here</div>
  <div></div>
  <div></div>
  <div></div>




□　size()
The number of elements in the jQuery object.
jQueryオブジェクトのエレメント数を返す

ex.1
Documentがクリックされる度にdivを増やし、その都度body内にあるdivの数を数える。

$(document.body).click(function () {
  $(document.body).append($("<div>"));
  var n = $("div").size();
  $("span").text("There are " + n + " divs." +
                 "Click to add more.");
}).click(); // trigger the click to start


Sample jquery
 ---------------------------
window.onload = (function(){
 try{
    $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").size();
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).click(); // trigger the click to start
 }catch(e){}
});


 CSS
 ---------------------------
 html,body{border:0; margin:0; padding:0;}
 body { cursor:pointer; }
 div { width:50px; height:30px; margin:5px; float:left;
       background:blue; }
 span { color:red; }
 
 
HTML
 ---------------------------
  <span></span>
  <div></div>




□　length
The number of elements in the jQuery object.
jQueryオブジェクトのエレメント数を保持する

$(document.body).click(function () {
  $(document.body).append($("<div>"));
  var n = $("div").length;
  $("span").text("There are " + n + " divs." +
                 "Click to add more.");
}).click(); // trigger the click to start



Sample jquery
 ---------------------------
window.onload = (function(){
 try{
    $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").length;
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).click(); // trigger the click to start
  }catch(e){}
});


 CSS
 ---------------------------
html,body{border:0; margin:0; padding:0;}
body { cursor:pointer; }
div { width:50px; height:30px; margin:5px; float:left;
      background:green; }
span { color:red; }


HTML
 ---------------------------
 <span></span>
 <div></div>
 
 
 
 
 
□　selector
New in jQuery 1.3 A selector representing selector originally passed to jQuery().
jQuery()関数で返されたオブジェクトに対して、指定されたセレクター書式を取得する。
この値はcontextと一緒に使われる。これらのプロパティはプラグイン開発に有効


jQueryオブジェクトのセレクター文字列を表示する。

ex.1

$("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");



Sample jquery
 ---------------------------
 $(document).ready(function(){
    $("ul")
  .append("<li>" + $("ul").selector + "</li>")
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

  });


 CSS
 ---------------------------
 body { cursor:pointer; }
 div { width:50px; height:30px; margin:5px; float:left;
       background:green; }
 span { color:red; }


 HTML
 ---------------------------
  Some selectors:<ul></ul>





□　context
New in jQuery 1.3
The DOM node context originally passed to jQuery()
(if none was passed then context will be equal to the document).
jQueryオブジェクトが持つDOMノード上でのオブジェクトを保持する。
この値はselectorと一緒に使われる。これらのプロパティはプラグイン開発に有効



ex.1
jQueryオブジェクトが使っているcontextを表示する

$("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");




Sample jquery
 ---------------------------
 $(document).ready(function(){
    $("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");
 });


 CSS
 ---------------------------
 body { cursor:pointer; }
 div { width:50px; height:30px; margin:5px; float:left;
       background:green; }
 span { color:red; }
 
 
HTML
 ---------------------------
 Context:<ul></ul>






□　eq(position)
Reduce the set of matched elements to a single element.
エレメントの集合から、指定したポジションのエレメントだけを取り出す。
0 … length-1 の内、合致する位置にあるエレメントだけが戻される。

引数
position
Number

エレメント集合中のポジション戻り値
jQuery

ex.1
pタグの中からポジションが1（ゼロから数えて2番目）のものを、赤色に変える。

$("p").eq(1).css("color", "red");


Sample jquery
---------------------------
 window.onload = (function(){
  try{
     $("p").eq(1).css("color", "red")
   }catch(e){}
 });


 CSS
---------------------------
 html,body{border:0; margin:0; padding:0;}


HTML
---------------------------
<p>これが最初のブロックです。</p>
<p>ここが2番目（ポジション=1）</p><p>ここは3番目のブロックになります</p>





□　get()
Access all matched DOM elements.
DOMエレメントの配列にアクセスする。

jQueryオブジェクトが持つエレメント全てを配列の形で返す
標準スタイルの配列でエレメントを操作したい場合
jQuery以外のライブラリで作られた関数などに配列を渡す際に有用

戻り値
Array Element
DOM Elementsの配列

ex.1
div要素を全て取得しget()で配列として返し
組み込み関数reverse()を用いて配列を逆転させて表示する。

function disp(divs) {
  var a = [];
  for (var i = 0; i < divs.length; i++) {
    a.push(divs[i].innerHTML);
  }
  $("span").text(a.join(" "));
}

disp( $("div").get().reverse() );



Sample jquery
 ---------------------------
window.onload = (function(){
 try{
    function disp(divs) {
      var a = [];
      for (var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
      }
      $("span").text(a.join(" "));
    }
    disp( $("div").get().reverse() );
  }catch(e){}
});


 CSS
 ---------------------------
 html,body{border:0; margin:0; padding:0;}
span { color:red; }


HTML
 ---------------------------
   Reversed - <span></span>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>





□  get(index)
Access a single matched DOM element at a specified index in the matched set.
DOMエレメントの集合からインデックスを指定して、ひとつのエレメントを参照する。

特にjQueryオブジェクトである必要のないケースで特定のDOM Elementそのものを操作することが可能
例えば$(this).get(0)は、配列オペレータである$(this)[0]と同等の意味になる

引数
index
Number

アクセスするエレメントのインデックス番号戻り値
Element

ex.1
クリックされた要素の最初のElementを取り出し、そのタグ名を表示する

$("*", document.body).click(function (e) {
  e.stopPropagation();
  var domEl = $(this).get(0);
  $("span:first").text("Clicked on - " + domEl.tagName);
});


Sample jquery
 ---------------------------
 window.onload = (function(){
  try{
    $("*", document.body).click(function (e) {
      e.stopPropagation();
      var domEl = $(this).get(0);
      $("span:first").text("Clicked on - " + domEl.tagName);
    });
  }catch(e){}
 });


 CSS
 ---------------------------
 html,body{border:0; margin:0; padding:0;}
 span { color:red; }
 div { background:yellow; }
 
 
HTML
 ---------------------------
  <span>&nbsp;</span>
  <p>In this paragraph is an <span>important</span> section</p>
  <div><input type="text" /></div>





□  index(subject)
Searches every matched element for the object and returns the index of the element, if found, starting with zero. If a jQuery object is passed, only the first element is checked.
jQueryオブジェクト内で、引数で指定されたエレメントのインデックス番号を返す
インデックスは、ゼロから始まる連番。
もし渡されたエレメントがjQueryオブジェクト内に存在しない場合、戻り値には-1が返る

引数
subject Element

検索するElement戻り値
Number
インデックス番号
見つからなかった場合は -1

ex.1
クリックされたdivの、ページ内全体でのdiv集合に対するインデックスを表示します。

$("div").click(function () {  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
});


Sample jquery
 ---------------------------
 window.onload = (function(){
  try{
    $("div").click(function () {      // this is the dom element clicked
      var index = $("div").index(this);
      $("span").text("That was div index #" + index);
    });
   }catch(e){}
  });


 CSS
 ---------------------------
 html,body{border:0; margin:0; padding:0;}
 div { background:yellow; margin:5px; }
 span { color:red; }
 
 
HTML
 ---------------------------
  <span>Click a div!</span>
  <div>First div</div>
  <div>Second div</div>
  <div>Third div</div>







    //Data://


Core/data

□  data( name )
  Returns value at named data store for the element, as set by data(name, value).
返り値は、要素に対して(name, value)のように、名前付きで格納されます。

If the jQuery collection references multiple elements, the value returned refers to the first element.
jQuery集は、複数要素を参照する場合、第一番目の要素へのレファレンスを値として返します。

This function is used to get stored data on an element without the risk of a circular reference.
It uses jQuery.data and is new to version 1.2.3.
It can be used for many reasons and jQuery UI uses it heavily. 
この関数は、循環参照の危険性のない要素上に格納されたデータを取得するのに用いられます。
様々な理由から、これらを多用するjQuery UIのためにjQuery1.2.3以降から使用可能になりました。

Get the data named "blah" stored at for an element.
「blah」という名で、要素上に格納されたデータを取得する

 Sample jquery
 ---------------------------
  $(document).ready(function(){
    
    $("button").click(function(e) {
      var value;

      switch ($("button").index(this)) {
        case 0 :
          value = $("div").data("blah");
          break;
        case 1 :
          $("div").data("blah", "hello");
          value = "Stored!";
          break;
        case 2 :
          $("div").data("blah", 86);
          value = "Stored!";
          break;
        case 3 :
          $("div").removeData("blah");
          value = "Removed!";
          break;
      }

      $("span").text("" + value);
    });

  });

 CSS
 ---------------------------
   div { margin:5px; background:yellow; }
  button { margin:5px; font-size:14px; }
  p { margin:5px; color:blue; }
  span { color:red; }

 HTML
 ---------------------------
  <div>A div</div>
  <button>Get "blah" from the div</button>
  <button>Set "blah" to "hello"</button>
  <button>Set "blah" to 86</button>
  <button>Remove "blah" from the div</button>
  <p>The "blah" value of this div is <span>?</span></p>




□  data( name, value )
Stores the value in the named spot.

If the jQuery collection references multiple elements, the data element is set on all of them. A data value that is a Javascript object is not copied and will be shared across all elements in the collection.
jQuery集が複数要素を参照する場合、要素データは、全ての要素上に設定され、この中で扱うデータ値は、コピーではなくJavascriptオブジェクトになるので、全データを要素全体で共有しているような形になります。

This function can be useful for attaching data to elements without having to create a new expando.
 It also isn't limited to a string. The value can be any format.
またこの関数は、新たなEXPANDOオブジェクトを作らずに、要素集合へデータを付与させるのに役立ち
また文字数の制限もなく、どのようなデータ型も可能にします。

It may also be used for getting events attached to elements, however this is unsupported.
First paramater being the element, second being the string "events"
さらに要素へ付加したイベントを取得するためにも使えるかもしれませんが、これはサポートされていません。

Store then retrieve a value from the div element.
値を保存しDIV要素から取り出します。

 Sample jquery
 ---------------------------
 $(document).ready(function(){
    
    $("div").data("test", { first: 16, last: "pizza!" });
    $("span:first").text($("div").data("test").first);
    $("span:last").text($("div").data("test").last);

  });


 CSS
 ---------------------------
  div { color:blue; }
  span { color:red; } 

 HTML
 ---------------------------
  <div>
    The values stored were 
    <span></span>
    and
    <span></span>
  </div>





□  removeData( name )
  Removes named data store from an element.
　要素から格納された名称データを取り除きます。

This is the complement function to $(...).data(name, value).
これは　$(...).data(name, value)　のための補助関数です。

Set a data store for 2 names then remove one of them.
名称を２つ格納するデータをセットしてから、そのひとつを削除する

 Sample jquery
 ---------------------------
  $(document).ready(function(){
    
    $("span:eq(0)").text("" + $("div").data("test1"));
    $("div").data("test1", "VALUE-1");
    $("div").data("test2", "VALUE-2");
    $("span:eq(1)").text("" + $("div").data("test1"));
    $("div").removeData("test1");
    $("span:eq(2)").text("" + $("div").data("test1"));
    $("span:eq(3)").text("" + $("div").data("test2"));

  });


 CSS
 ---------------------------
  div { margin:2px; color:blue; }
  span { color:red; }
  div { margin:2px; color:blue; }
  span { color:red; }


 HTML
 ---------------------------
  <div>value1 before creation: <span></span></div>
  <div>value1 after creation: <span></span></div>
  <div>value1 after removal: <span></span></div>
  <div>value2 after removal: <span></span></div>





□  queue( name )
  Returns a reference to the first element's queue (which is an array of functions).
　第一番目の要素のキュー（関数列）へのリファレンスを返します

Show the length of the queue.
キュー（関数列）の長さを表示します

 Sample jquery
 ---------------------------
  $(document).ready(function(){
    
    $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();
  });


 CSS
 ---------------------------
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; } 


 HTML
 ---------------------------
  <button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>





□  queue( name, callback )
  Adds a new function, to be executed, onto the end of the queue of all matched elements.
　一致した全要素のキュー（関数列）の末尾に新たな関数を加え実行する

The function to add to the queue. キュー（関数列）へ関数を加える

function callback() {
  this; // dom element
  // to continue the queue you must call
  jQuery(this).dequeue();
}

 Sample jquery
 ---------------------------
  $(document).ready(function(){
    
    $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });

  });


 CSS
 ---------------------------
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }


 HTML
 ---------------------------
  Click here...
  <div></div>





□  queue( name, queue )
  Replaces the queue of all matched element with this new queue (the array of functions).
　一致した全要素のキュー（関数列）を新たなキュー（関数列）で置き換える

The queue to replace all the queues with.
The functions have the same parameters and this value as queue(callback).
全ての配列を置き換える関数列は、同一パラメーターと値（呼び戻し）を持ちます。

Set a queue array to delete the queue.
関数列を設定し、それを削除する。

 Sample jquery
 ---------------------------
  $(document).ready(function(){
    
    $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });

  });


 CSS
 ---------------------------
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }


 HTML
 ---------------------------
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>





□  dequeue( name )
  Removes a queued function from the front of the queue and executes it.
　最前列から関数列を除去し、キューを実行します。


Use dequeue to end a custom queue function which allows the queue to keep going.
queueを続けさせる関数列のカスタムは、末尾にdequeueを使う

 Sample jquery
 ---------------------------
  $(document).ready(function(){
 
    $("button").click(function () {
      $("div").animate({left:'+=200px'}, 2000);
      $("div").animate({top:'0px'}, 600);
      $("div").queue(function () {
        $(this).toggleClass("red");
         $(this).dequeue();
              });
      $("div").animate({left:'10px', top:'30px'}, 700);
    });

  });

 CSS
 ---------------------------
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
 
 HTML
 ---------------------------
  <button>Start</button>
  <div></div>









    //Plugins://



□  jQuery.fn.extend(object)
Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
jQueryエレメントに独自の新しいメソッドを追加する。（典型的なjQueryプラグインの作成方法）

The object that will be merged into the jQuery object.
jQueryオブジェクトにマージされる新たなメソッドを有したオブジェクト戻り値
引数object　bject

Adds two plugin methods.

ex.1
jQueryオブジェクトに新たに「全てチェック状態にする」「全て非チェック状態にする」メソッドを追加

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
$("input[@type=checkbox]").check();
$("input[@type=radio]").uncheck();


Sample jquery
 ---------------------------
  jQuery.fn.extend({
    check: function(){
      return this.each(function(){this.checked=true;});
    },
    uncheck: function(){
      return this.each(function(){this.checked=false;});
    }
  });
  $(document).ready(function(){
    $("#check-all").click(function(){
      $("input[@type=checkbox]").check();
    });
    $("#uncheck-all").click(function(){
      $("input[@type=radio]").uncheck();
    });
  });


 CSS
 --------------------------- 
HTML
 ---------------------------
 <form>
<div>
<input type="button" id="check-all" value="check all" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="button" id="uncheck-all" value="uncheck all" />
<input type="radio" name="r1" />
<input type="radio" name="r1" />
<input type="radio" name="r1" />
<input type="radio" name="r1" />
</div>
</form>




□  jQuery.extend(object)
Extends the jQuery object itself.
jQueryオブジェクトそのものを拡張する。
jQuery.fn.extendがプロトタイプを拡張するのに対し
これはjQuery名前空間に新たなメソッドを追加する。

引数　object　Object

The object that will be merged into the jQuery object.
jQueryオブジェクトにマージされる新たなメソッドを有したオブジェクト戻り値

Adds two functions into the jQuery namespace.
渡された2つの値のうち、大きい方や小さい方を返すメソッドをjQuery名前空間に追加

ex.1

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});


Sample jquery
 ---------------------------
 jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
  });
  $(document).ready(function(){
    $("#check").click(function(){
      var a=parseInt($("#a").get(0).value);
      var b=parseInt($("#b").get(0).value);
      alert("max:"+jQuery.max(a,b)+", min:"+jQuery.min(a,b)+".");
    });
  });


 CSS
 ---------------------------
 
 HTML
 ---------------------------
 <form>
 <div>
 <input type="button" id="check" value="check" />
 <input type="text" id="a" value="100" />
 <input type="text" id="b" value="50" />
 </div>
 </form>






    //Interoperability://



□  jQuery.noConflict()
Run this function to give control of the $ variable back to whichever library first implemented it.
This helps to make sure that jQuery doesn't conflict with the $ object of other libraries.
この関数を実行すると、$関数の動作が先に定義されている動作に戻る。

NOTE: This function must be called after including the jQuery javascript file, but before including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last. noConflict can be called at the end of the jQuery.js file to globally disable the $() jQuery alias. jQuery.noConflict returns a reference to jQuery, so it can be used to override the $() alias of the jQuery object. 

$関数はprototype.jsなど、多くのライブラリがそれぞれ拡張している関数
jQueryでも核となるjQueryオブジェクトのショートカットとして頻繁に利用されるため
$関数を定義する複数のライブラリを用いた際に衝突することを防ぐ必要がある。

By using this function, you will only be able to access jQuery using the 'jQuery' variable.
For example, where you used to do $("div p"), you now must do jQuery("div p").

この関数を用いて、'jQuery'変数を扱うjQueryへのアクセスを可能にします。
例えば$(“div p”)と書いていたものも、jQuery(“div p”)と書かなければならない

戻り値 jQuery

ex.1
Maps the original object that was referenced by $ back to $.
この例では、$はjQueryによって上書きされずに他のライブラリで定義された動作をします。

jQuery.noConflict();
// Do something with jQuery　…jQueryとして動作する

jQuery("div p").hide();
// Do something with another library's $()　… jQueryは、他のライブラリの$関数として動作する
$("content").style.display = 'none';


ex.2
Reverts the $ alias and then creates and executes a function to provide the $ as a jQuery alias inside the functions scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library.
$ エイリアスを戻してから、関数スコープ内のjQueryエイリアスとして $ を供給する関数を作成し実行します。
関数内部で、オリジナル $ オブジェクトは利用できません。このは、他のどのライブラリにも頼らない
ほとんどのプラグインに有効です。

jQuery.noConflict();
(function($) { 
  $(function() {
   // more code using $ as alias to jQuery 　…jQueryのエイリアスとして $ を使用する最適なコード
  });
})(jQuery);
  // other code using $ as an alias to the other library
     他のライブラリへのエイリアスとして $ を使う他のコード


ex.3
You can chain the jQuery.noConflict() with the shorthand ready for a compact code.
コンパクトコード装備する速記とjQuery.noConflict()をつなげることができます

jQuery.noConflict()(function(){
    // code using jQuery  …jQueryを使用するコード
}); 
// other code using $ as an alias to the other library
   他ライブラリのエイリアスとしての $ を使用するコード


ex.4
$ではない文字列にjQueryオブジェクトを割り振る。
ここでは、'j'の文字をjQueryオブジェクトとし、$は用いないように。
この方法は汎用的なライブラリを作ることにも利用することにも向かないため
極めて限定的な用途になると考えられる。

Creates a different alias instead of jQuery to use in the rest of the script.
jQueryの代わりにスクリプトの休止中に使用する異なるエイリアスを作成します。

var j = jQuery.noConflict();
// Do something with jQuery  …jQueryとして動作する
j("div p").hide();
// Do something with another library's $()  …他のライブラリ $ として動作する
$("content").style.display = 'none';


Sample jquery
 ---------------------------
 CSS
 ---------------------------
HTML
 ---------------------------




□  jQuery.noConflict(extreme)
Revert control of both the $ and jQuery variables to their original owners. Use with discretion.
$関数のみならず、jQueryオブジェクトも含めて完全にグローバルの名前空間から除去する
（運用は慎重に行うこと）

これは、上記のnoConflict()を更に極端にして$関数だけでなくjQueryオブジェクトも
先に定義された動作に戻してしまうものである。

これを使わなければいけないケースは極めて稀だと考えられるが
例えば複数のバージョンのjQueryを混在して使わなければならないような場合だとか
あるいは、jQueryオブジェクトへの拡張がConflictしてしまった場合などに必要かもしれない。

引数
extreme
Boolean
extremeモードでnoConlictを行うにはtrueを設定戻り値
jQuery

ex.1
jQueryオブジェクトを完全に別の名前（dom.query）に置き換えてしまう。

var dom = {};
dom.query = jQuery.noConflict(true);
// dom.queryはjQueryの代わりに動作する

dom.query("div p").hide();
// $関数は上書きされておらず、他のライブラリの$関数として動作する

$("content").style.display = 'none';
// jQueryも他のバージョンのjQueryとして動作する

jQuery("div > p").hide();


Sample jquery
 ---------------------------
 CSS
 ---------------------------
HTML
 ---------------------------