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