一、函数(封装成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对象访问

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();

四、多库多存

1、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';