jQuery 基礎知識點梳理
阿新 • • 發佈：2017-07-10
class this fin nts key 工廠函數 .text ddc res DOM對象：直接使用JavaScript獲取的節點對象：
var objDOM = document.getElementById("title");
var objHTML=objDOM.innerHTML;
jQuery對象：使用jQuery包裝DOM對象後產生的對象，它能夠使用jQuery中的方法：
$("#title").html();
等同於
document.getElementById("title").innerHTML;
DOM對象和jQuery對象分別擁有一套獨立的方法，不能混用
jQuery對象轉DOM對象：
1、jQuery對象是一個類似數組的對象，可以通過[index]的方法得到相應的DOM對象：
var $txtName=$(".txtName"); //jQuery對象
var txtName=$txtName[0]; //DOM對象
2、通過get(index)方法得到相應的DOM對象：
var $txtName = $(".txtName"); //jQuery對象
var txtName = $txtName.get(0); //DOM對象
使用$()函數進行轉化：$(DOM對象)
var txtName=document.getElementById("txtName"); //DOM對象
var $txtName = $(txtName); //jQuery對象
註意：
1、jQuery對象命名一般約定以$開頭
2、常使用$(this)來獲取觸發該事件的當前jQuery對象
JSON(JavaScript Object Notation)一種輕量級的數據交互格式
var JSON = { 名稱：值，名稱：值，...}; //JSON的數值可以是數字、字符串、布爾值、數組或者 對象、null
JSON的取值方法:
點號表示法來獲取
追加樣式：
addClass("class") 或 addClass(" class1 class2..")
移除樣式：
removeClass("class") 或 removeClass("class1 class2 ..")
HTML代碼操作：
html()可以對HTML代碼進行操作，類似於原生JavaScript中的innerHTML:
$("div.left").html();
或
$("div.left").html("<div class=‘content‘>...</div>");
文本操作：
text()可以獲取或設置元素的文本內容：
$("div.left").text();
或
$("div.left").text("<div class = ‘content‘> ...</div>");
value值操作：
val()可以獲取或設置元素的value屬性值：
$(input).val(); //獲取value值
或
$(input).val("值"); //設置value值
節點操作：
jQuery中節點操作主要分為：
查找節點
創建節點
插入節點
刪除節點
替換節點
復制節點
創建節點元素：
工廠函數$()用於獲取或創建節點：
$(selector)：通過選擇器獲取節點
$(element)：把DOM節點轉化成jQuery節點
$(html)：使用HTML字符串創建jQuery節點
var $newNode2=$("<li title=‘標題為千與千尋’>千與千尋</li>");
創建含文本與屬性<li>元素節點
插入子節點：
元素內部插入子節點：
append(content) $(A).append(B)表示將B追加到A中如：$("ul").append($newNode1);
appendTo(content) $(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo(“ul”)；
prepend(content) $(A).prepend(B)表示將B前置插入到A中如：$("ul").prepend($newNode1);
prependTo(content)
插入同輩節點：
元素外部插入同輩節點：
after(content) $(A).after(B)表示將B插入到A之後如：$("ul").after($newNode1);
insertAfter(content) $(A).insertAfter(B)表示將A插入到B之後如：$newNode1.insertAfter(“ul”)；
before(content)
insertBefore(content)
替換節點：
replaceWith()和replaceAll()用於替換節點：
復制節點：
clone()用於復制節點：
$(A).clone(true).appendTo(B);
提示：
clone()有個副作用就是會復制id，要麽避免對有id的元素克隆，要麽使用class代替 id的作用
刪除節點：
jQuery提供了三種刪除節點的方法：
1、remove()：刪除整個節點
2、detach()：刪除整個節點，保留元素的綁定事件、附加的數據
3、empty()：清空節點
屬性操作：
attr()獲取或設置匹配元素的屬性值：
//獲取元素的某屬性的值
$(selector).attr("屬性名")；
//設置元素的屬性值
$(selector).attr("屬性名"，"值")；//設置一個屬性值
$(selector).attr({"屬性1"：“值1”，“屬性2”，“值2”})；//設置多個屬性值
removeAttr()匹配的元素中刪除一個屬性：
$(selector).removeAttr("屬性名稱")；
遍歷子元素：
children()方法可以用來獲取元素的所有子元素：
$("body").children(); //獲取<body>元素的子元素，但不考慮後代元素及文本節點
遍歷同輩元素：
jQuery可以獲取緊鄰其後、緊鄰其前和位於該元素前與後的所有同輩元素：
next([expr]) 用於獲取緊鄰匹配元素之後的元素，如：$("li:eq(1)").css("background-color","#F06");
prev([expr]) 用於獲取緊鄰匹配元素之前的元素，如：$("li:eq(1)").prev().css("background-color","#F06");
siblings([expr]) 用於獲取位於匹配元素前面和後面的所有同輩元素，如：$("li:eq(1)").siblings().css("background-color","#F06")；
遍歷前輩元素：
jQuery中可以遍歷前輩元素，方法：
parent() 獲取元素的父級元素
parents() 獲取元素的祖先元素
遍歷--其它方法：
jQuery遍歷 - each() ：
以每一個匹配的元素作為上下文來執行一個函數：
$("img").each(function(i){
this.src = "test" + i + ".jpg";
})
查找方法 - find() ：
搜索所有與指定表達式匹配的元素：
$("p").find("span"); //在所有p元素的後代節點中查找span元素
CSS-DOM操作：
除css()外，還有獲取和設置元素高度、寬度、相對位置等的樣式操作方法：
height([value]) 設置或返回匹配元素的高度
width([value]) 設置或返回匹配元素的寬度
offset([value]) 返回以像素為單位的top和left坐標。此方法僅對可見元素有效
jQuery的事件：
jQuery事件是對JavaScript事件的封裝，常用事件分類如下：
基礎事件：
window事件
鼠標事件
鍵盤事件
表單事件
復合事件是多個事件的組合：
鼠標光標懸停
鼠標連續點擊
鼠標事件：
click(fn) ：單擊鼠標時
mouseover(fn) ：鼠標移過時
mouseout(fn) ：鼠標移出時
鍵盤事件：
keydown(fn) ：按下鍵盤時
keyup(fn) ：釋放按鍵時
keypress(fn) ：產生可打印的字符時
表單事件：
focus(fn) ：獲得焦點
blur(fn) ：失去焦點
submit(fn) ：表單提交時
事件綁定：
bind()方法 - 事件綁定：
$(selector).bind(type[,data],fn)
//例如：
$("#btn").bind("click",fn);
$("#btn").bind("click dblclick",fn);
$("#btn").bind({
click:function(){},
mouseover:function(){}
});
unbind()方法 - 解除事件綁定：
$(selector).unbind()
//例如：
$("#btn").unbind()
$("#btn").unbind("click")
$("#btn").unbind("click",handler);//指定的事件處理函數
on()方法 - 事件綁定：
$(selector).on(events[,selector][,data],fn)
//例如:
$("#form").on("click",".btn",{},fn);
off()方法 - 解除事件綁定：
$(selector).off(events,[selector],[handler])
$(selector).off(events,[selector])
$(selector).off(events)
$(selector).off()
註意：
建議用on()方法綁定事件，效率更高
鼠標光標懸停事件：
hover(fn1,fn2)方法：
相當於mouseover與mouseout事件的組合
//鼠標在父級菜單移入移出，子菜單隱藏與顯示：
$("#parentMenu").hover(function(){
$("#childMenu").css("display","block");//mouseover
},
function(){
$("#childMenu").css("display","none");//mouseout
}
);
鼠標連續click事件：
toggle()方法用於模擬鼠標連續click事件：
$("body").toggle(
function(){},//第1,4,7...次點擊時觸發
function(){},//第2,5,8...次點擊時觸發
function(){},//第3,6,9...次點擊時觸發
);
jQuery的動畫效果：
1、控制元素顯示與隱藏
2、控制元素淡入淡出
3、改變元素高度
顯示及隱藏元素：
show([duration][,complete])
hide([duration][,complete])
$(".tipsbox").show("slow");
註意：
顯示速度可以取如下值：
毫秒（如1000）、slow、normal、fast
淡入淡出效果：
fadeIn()和fadeOut()可以通過改變元素的透明度實現淡入淡出效果
$("input[name=fadein_btn]").click(function(){
$("img").fadeIn("slow");
});
$("input[name=fadeout_btn]").click(function(){
$("img").fadeOut(1000);
});
切換元素可見狀態：
toggle()除了可以模擬鼠標的連續單擊事件外，還能用於切換元素的可見狀態
$("li:gt(5):not(:last)").toggle();
改變元素的高度：
slideDown() 可以使元素逐步延伸顯示
slideUp() 則使元素逐步縮短直至隱藏
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
自定義動畫：
animate()方法用於創建自定義動畫的函數：
$(selector).animate(params [,speed] [,easing] [,fn]);
params:規定產生動畫效果的CSS樣式和值
speed:三種預定速度之一的字符串（“slow”，“normal”，“fast”）或表示動畫時長的毫秒數值（如：1000）
easing:要使用的擦除效果的名稱（需要插件支持）.默認jQuery提供“linear”和“swing”
fn:在動畫完成時執行的函數，每個元素執行一次
jQuery 基礎知識點梳理