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> ]

 

 

size()
功能：匹配元素的个数
返回：
参数:
例子：
jQuery Code
$("img").size();
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2

 

 

length
功能：匹配元素的个数，同size函数
返回：
参数:
例子：
jQuery Code
$("img").length;
Before
<img src="test1.jpg"/> <img src="test2.jpg"/>
Result:
2

 

 

index(subject)
功能：搜索所有匹配的元素，返回索引值
返回：
参数:subject (Element): Object to search for 
例子：
Returns the index for the element with ID foobar

jQuery Code
$("*").index( $('#foobar')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
0

Returns the index for the element with ID foo within another element

jQuery Code
$("*").index( $('#foo')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
2

Returns -1, as there is no element with ID bar

jQuery Code
$("*").index( $('#bar')[0] )
Before
<div id="foobar"><b></b><span id="foo"></span></div>
Result:
-1

 

 

$.noConflict()
功能：避免和以前移入的jQuery库的冲突
返回：undefined
参数:
例子：
Maps the original object that was referenced by $ back to $

jQuery Code
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';


jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library