Jquery基礎1-----入門
1.讓jQuery放棄對$符號的使用
出了jquery之外，仍有一些javascript庫也使用了$符號，可以使用jQuery.noConflict();方法讓jQuery放棄對$符號的使用
也可自定義jQuery的簡寫符號：
var jq = jQuery.noConflict();
jq(document).ready(function(){});//jq代替$，成為jquery的簡寫形式
2.等待DOM就緒
$(document).ready(function(){
console.log("在function內部編寫代碼");
});
這種方法的實質是：以函數作為參數傳遞給ready方法，其實是為jQuery的ready事件綁定事件處理函數，可簡寫為$(function(){});
3.延遲ready事件的出發事件------holdReady()
當我們動態載入外部資源時這個方法有用
$.holdReady(true);//延遲ready事件的觸發
$(document).ready(function(){
console.log("在function內部編寫代碼");
});
setTimeout(function(){
$.holdReady(false);//五秒後接觸ready時間的延遲
},5000);
4. 使用上下文限制搜索範圍
1) 將一個選擇器用作下一個選擇器的上下文
$(document).ready(function(){
$("img:odd",$("div")).mouseout(function(){});//選取所有div中的第奇數個img，$("div")用作另一個選擇器的上下文。
});
2)將HTMLElement對象用作上下文
$(document).ready(function(){
var ele = document.getElementById(""block);
$("img:odd",block).mouseout(function(){});//在block元素內搜索奇數圖片
});
5.確定創建jQuery對象對應的上下文對象-----context屬性
$(document).ready(function() {
var jq1 = $("img:odd");
//沒有上下文對象，默認為document，由於document沒有tagName屬性，所以返回undifined
console.log("No context: " + jq1.context.tagName);//undifined
//上下文元素為多個元素時，其上下文對象為document
var jq2 = $("img:odd", $("div"));
console.log("Multiple context elements: " + jq2.context.tagName);//undifined
//使用單一HTMLElement元素創建jQuery對象，其上下文對象為該HTMLElement元素
var jq3 = $("img:odd", document.getElementById("block"));
console.log("Single context element: " + jq3.context.tagName); //block對應的標簽名
});
6.jQuery對象和DOM對象的轉換與處理
由DOM對象生成Jquery對象
var $id1 = $(document.getElementById("id1"));//此時$id1 為jQuery對象
jQuery對象生成DOM對象：可以通過數組、each、索引等方法獲得具體如下
1)把jQuery對象看成是一個HTMLElement對象數組---享受jQuery高級功能的同時仍可以直接訪問DOM
$(document).ready(function() {
var elems = $("img:odd");
for (var i = 0; i < elems.length; i++) {
console.log(elems[i].tagName + " " + elems[i].src);//直接訪問Img對象的src屬性
}
});
2)叠代JQuery對象內含的DOM對象
$(document).ready(function() {
$("img:odd").each(function(index, elem) {//index為索引，elem為每一個DOM對象
console.log("Element: " + elem.tagName + " " + elem.src);
});
});
3)獲取指定索引位置的HTMLElement對象（DOM對象）
$(document).ready(function() {
var elem = $("img:odd").get(1);//獲取索引位置為1的DOM元素
console.log( elem.tagName + " " + elem.src);
});
4）確定一個HTMLElement對象的序號----index方法
$(document).ready(function() {
var elems = $("body *");
// index方法傳入DOM參數
var index = elems.index(document.getElementById("oblock"));
console.log("Index using DOM element is: " + index);
// index對象傳入jQuery對象
index = elems.index($("#oblock"));
console.log("Index using jQuery object is: " + index);
});
註意：index方法也可傳入字符串參數（解釋成選擇器，可能會造成兩個結果集翻轉）和空參數（得到一個元素相當於鄰居的序號）
5.jquery支持鏈式調用
Jquery基礎1-----入門