jQuery：Core部分的使用

jQuery无疑是现在比较流行的js开发库之一，在web开发，特别是服务器组件开发中起到了很大的作用。而且在一些公司的面试中，问及js就问你，用过jQuery吗？没用过，那种眼神似乎你低人一等似的。废话少说，优秀的东西还是学习学习的，不管在做项目的时候，是否为了公司整体的需要不用这个，还是值得我们好好研究下。

$(html)

功能：根据参数html创建DOM元素

返回：jQuery对象

参数：要创建的html

例子：将html添加到body中

$("<div><p>Hello</p></div>").appendTo("body")

$(elems)

 功能：包装jQuery一个或多个DOM元素，这个函数也接受xml Document元素或Window Object作为有效的参数，甚至不是Dom元素

 返回：jQuery对象

参数:dom元素或dom元素数组

例子：

设定页面的背景色

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

隐藏指定表单中的input元素

$( myForm.elements ).hide()

$(fn)

功能：$(document).ready()的快捷方式，允许你绑定一个的函数到页面完成加载的时候执行

返回：jQuery对象

参数:Dom ready后要执行的函数

例子：

$(function(){

  // Document is ready

});

$(expr, context)

功能：根据css或基本的xpath选择器查找元素

返回：jQuery对象

参数:

expr (String): 要搜索的表达式

context (Element|jQuery): (可选的)dom元素，Document或jQuery对象，作为当前选择的上下文 

例子：

jQuery Code

$("div > p")

Before

<p>one</p> <div><p>two</p></div> <p>three</p>

Result:

[ <p>two</p> ]

Example

Searches for all inputs of type radio within the first form in the document



jQuery Code

$("input:radio", document.forms[0])

$.extend(prop)

功能：扩展jQuery自身，添加函数到jQuery命名空间或插件方法

返回：Object

参数:

例子：

Adds two plugin methods.



jQuery Code

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





Adds two functions into the jQuery namespace



jQuery Code

jQuery.extend({

  min: function(a, b) { return a < b ? a : b; },

  max: function(a, b) { return a > b ? a : b; }

});

each(fn)

功能：遍历元素并添加响应函数

返回：jQuery对象

参数:fn (Function): A function to execute 

例子：

Iterates over two images and sets their src property



jQuery Code

$("img").each(function(i){

  this.src = "test" + i + ".jpg";

});

Before

<img/><img/>

Result:

<img src="test0.jpg"/><img src="test1.jpg"/>

 

eq(pos)

功能：返回指定位置的一个元素，位置是指匹配的元素从0到length - 1的位置

返回：jQuery对象

参数:pos (Number): The index of the element that you wish to limit to. 

例子：

jQuery Code

$("p").eq(1)

Before

<p>This is just a test.</p><p>So is this</p>

Result:

[ <p>So is this</p> ]

get()

功能：返回所有匹配的dom元素

返回：元素数组

参数:

例子：

Selects all images in the document and returns the DOM Elements as an Array



jQuery Code

$("img").get();

Before

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result:

[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]

get(num)

功能：返回指定索引位置的dom元素

返回：DOM Element

参数:num (Number): Access the element in the Nth position. 

例子：

Selects all images in the document and returns the first one



jQuery Code

$("img").get(0);

Before

<img src="test1.jpg"/> <img src="test2.jpg"/>

Result:

<img src="test1.jpg"/>

gt(pos)

功能：返回某个位置之后的元素

返回：jQuery对象

参数:pos (Number): Reduce the set to all elements after this position. 

例子：

jQuery Code

$("p").gt(0)

Before

<p>This is just a test.</p><p>So is this</p>

Result:

[ <p>So is this</p> ]

lt(pos)

功能：返回某个位置之前的元素

返回：jQuery对象

参数:pos (Number): Reduce the set to all elements below this position. 

例子：

jQuery Code

$("p").lt(1)

Before

<p>This is just a test.</p><p>So is this</p>

Result:

[ <p>This is just a test.</p> ]

[code]size() 
功能：匹配元素的个数 
返回： 
参数: 
例子： 
jQuery Code 
$("img").size(); 
Before 
<img src="test1.jp