一、函数（封装成jquery对象）
返回匹配的元素集合，无论是通过在DOM的基础上传递的参数还是创建一个HTML字符串。
1、$( selector [, context ] )：接受一个包含一个CSS选择器的字符串，用于匹配的一组元素。
默认情况下,选择器是从文档根节点（文档（document））开始执行搜索。
$( "div > p").css("border", "1px solid gray");$("input:radio", document.forms[0]);$("div", xml.responseXML);2、$( object )：使用普通的对象封装成jQuery对象。
目前，只支持包裹在jQuery中的普通的JavaScript对象是：.data(),.prop(),.bind(), .unbind(), .trigger() 和 .triggerHandler()。使用.data()（或者任何返回.data()的方法），在一个普通的对象会产生一个新的属性的名为jQuery{randomNumber}（如jQuery123456789）。
// define a plain object var foo = {foo: "bar", hello: "world"}; // Pass it to the jQuery function var $foo = $( foo ); // test accessing property values var test1 = $foo.prop( "foo" ); // bar // test setting property values $foo.prop( "foo", "foobar" ); var test2 = $foo.prop( "foo" ); // foobar // test using .data() as summarized above $foo.data( "keyName", "someValue"); console.log( $foo ); // will now contain a jQuery{randomNumber} property // test binding an event name and triggering $foo.bind( "eventName", function () { console.log("eventName was called"); }); $foo.trigger( "eventName" ); // logs "eventName was called"
3、$( element )$( elementArray )：DOM元素、元素数组封装成jQuery对象。
$(document.body).css( "background", "black" );
$(myForm.elements).hide()当一个Ajax请求返回XML数据时，我们可以使用 $() 方法去把他包含在jQuery对象中，我们可以很容易的工作。一旦这样做了之后，我们可以使用.find()和其他DOM遍历方法在XML结构中检索特定元素。
$.post( "url.xml", function(data) { var $child = $(data).find("child"); })
4、jQuery( html [, ownerDocument ] )、jQuery( html, attributes )：根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。
当参数是一个单标签，就像 $( "<img />" ) 或 $( "<img>" ), $( "<a></a>" ) 或 $( "<a>" )，jQuery将使用javasrcipt原生的 .createElement()函数创建这个元素。其他创建元素的处理是利用了浏览器的 .innerHTML 机制。
Example1: 动态创建一个 div 元素(以及它的内容)，并将它追加到 body 元素后。在 jQuery 内部是通过所指定元素的 innerHTML 属性对新生成的元素进行赋值的。
$( "<div><p>Hello</p></div>" ).appendTo( "body" )
Example2: 创建一些 DOM 元素。
$( "<div/>", { "class": "test", text: "Click me!", click: function() { $( this ).toggleClass( "test" ); } }).appendTo( "body" );
5、jQuery( callback )：当DOM完成加载的时候绑定一个要执行的函数。
这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM ready时执行的 $()操作符都包装到其中来。
例子:当 DOM 加载完成时执行函数。
$(function(){ // Document is ready });
二、JQuery对象访问
.context:原始的DOM节点的内容传给jQuery()；如果没有东西被传递，那么上下文将可能是该文档（document）。
.size():返回的jQuery对象匹配的DOM元素的数量。.size()方法从jQuery 1.8开始被废弃。使用.length属性代替。
selector：返回传给jQuery()的原始选择器。
1、.get():通过jQuery对象获取对应的DOM元素。
1、如果带参数，$(this).get(0)相当于$(this)[0]。
Example1: 给出点中元素的标签名。
$("*", document.body).click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0);
$("span:first").text("Clicked on - " + domEl.tagName);
});2、如果不带参数,get()会返回所有的元素：
Example2: 选择文档中的所有div，并且作为一个数组返回。然后使用浏览器原生的 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() );
2、.index():从匹配的元素中搜索给定元素的索引值，从0开始计数。
.get() 接受一个索引值参数并返回对应的DOM节点， .index() 与其正好相反，接受一个DOM节点然后返回其索引值。
1、.index()：返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。
Example: 返回ID为bar的元素相对于同辈的索引值。
<ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> <script> var barIndex = $('#bar').index(); $('div').html( 'Index: ' + barIndex ); </script>
2、.index( selector )：返回值就是原先元素相对于选择器匹配元素的位置。即从selector这个对象中查找元素。
如果找不到匹配的元素，则 .index() 返回 -1.
Example: 返回ID为bar的元素相对于所有 <li> 元素的索引值。
<ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> <div></div> <script> $('div').html('Index: ' + $('#bar').index('li') ); </script>
3、.index( element )：返回值是传入的元素相对于原先集合的位置。
element参数:将要用于查找的DOM元素，或者jQuery对象中的第一个元素。
Example1: 点击后，返回那个div在页面上的索引值(从0开始）。
$("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this);
$("span").text("That was div index #" + index);
});
Example2: 返回ID为bar的元素的索引值。
<body> <ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> <div></div> <script>var listItem = $('#bar'); $('div').html( 'Index: ' + $('li').index(listItem) );
</script
3、length：在jQuery对象中元素的数量。
Example: 计算 div 数量，点击后会增加一个 div。
$(document.body).click(function () { $(document.body).append($("<div>")); var n = $("div").length; $("span").text("There are " + n + " divs." + "Click to add more."); }).trigger('click');
4、.toArray():返回一个包含jQuery对象集合中的所有DOM元素的数组。
所有匹配的DOM节点都会包含在一个标准的数组中,如：
[<li id="foo">, <li id="bar">]
Example: 选择文档中所有的div，并且返回一个DOM元素数组，然后利用浏览器内置的reverse方法反转整个数组。
<body> <div>One</div> <div>Two</div> <div>Three</div> <script> function disp(divs) { var a = []; for (var i = 0; i < divs.length; i++) { a.push(divs[i].innerHTML); } $("span").text(a.join(" ")); } disp( $("div").toArray().reverse() );//Three Two One </script>
5、.each( function(index, Element) )：遍历一个jQuery对象，为每个匹配元素执行一个函数。
Example1: 遍历三个div并设置它们的color属性。
<body> <div>Click here</div> <div>to iterate through</div> <div>these divs.</div> <script> $(document.body).click(function () { $( "div" ).each(function (i) { if ( this.style.color != "blue" ) { this.style.color = "blue";
$( this ).toggleClass( "example" ); } else { this.style.color = ""; } }); }); </script>
Example2: 你可以使用 'return' 来提前结束 each(() 循环。
$( "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;
}
});
});三、插件
1、jQuery.extend( target [, object1 ] [, objectN ] )：将两个或更多对象的内容合并到第一个对象。（静态方法）
Example1:合并两个对象，并修改第一个对象。
<div id="log"></div> <script> var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; // Merge object2 into object1 $.extend( object1, object2 ); // Assuming JSON.stringify - not available in IE<8 $( "#log" ).append( JSON.stringify( object1 ) );//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100} </script>
Example2: 采用递归方式合并两个对象，并修改第一个对象。
// Merge object2 into object1, recursively $.extend( true, object1, object2 );//{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
Example3: 合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。
var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; // Merge defaults and options, without modifying defaults var settings = $.extend( {}, defaults, options ); // Assuming JSON.stringify - not available in IE<8 $( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" ); $( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" ); $( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
2、jQuery.fn.extend( object )：一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。（实例方法）
Example1:添加两个方法到jQuery原型($.fn)，并且使用他们。
jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); // Use the newly created .check() method $( "input[type='checkbox']" ).check();
四、多库多存
jQuery.noConflict( [removeAll ] )：放弃jQuery控制$ 变量。
Example1: 将$引用的对象映射回原始的对象。
jQuery.noConflict(); // Do something with jQuery jQuery("div p").hide(); // Do something with another library's $() $("content").style.display = 'none';
Example2: 恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。
jQuery.noConflict(); (function($) { $(function() { // more code using $ as alias to jQuery }); })(jQuery); // other code using $ as an alias to the other library
Example3: 你可以通过jQuery.noConflict() ready约束为一小段代码
var j = jQuery.noConflict(); // Do something with jQuery j("div p").hide(); // Do something with another library's $() $("content").style.display = 'none';