jQuery筆記（二）
7、複習DOM操作
獲取節點：document.getElementById();/document.getElementByTagName();/querySelect()/........
建立節點：createElement()/createTextNode/createAttribute
替換節點：replaceChild
刪除節點：removeChild
插入節點：appendChild/insertBefore
8、jQuery中的DOM操作
基本操作
①html() - 類似於原生DOM的innerHTML屬性
獲取 - html()
設定 - html(html程式碼)
②val() - 類似於原生DOM的value屬性
獲取 - val()
設定 - val(value)
③text() - 類似於原生DOM的textContent屬性
獲取 - text()
設定 - text(文字內容)
④attr() - 獲取或設定指定元素的屬性
獲取 - attr(attrName) - 類似於getAttribute()
設定 - attr(attrName,attrValue) - 類似於setAttribute()
⑤removeAttr(attrName) - 類似於removeAttribute()
9、class操作
①attr("class",classValue) - 設定
②addClass() - 追加樣式
③removeClass() - 刪除樣式
不傳參 - 刪除所有樣式
傳參 - 刪除指定樣式
④toggleClass() - 切換樣式
只接受一個引數，是在沒有樣式與指定樣式之間切換，沒有就新建，有就刪除
⑤ hasClass() - 判斷樣式
判斷指定元素是否包含指定樣式
10、設定css樣式屬性 - css()
①設定：.css(name,value)
如果同時設定多個，用物件文字值：’color’：’red’，’first-size’：’12px’,........
屬性間用，隔開
②獲取：.css(name)
11、遍歷節點
parent() - 獲取指定節點的父節點
children() - 獲取指定節點的所有子節點
next() - 獲取指定節點的下一個兄弟節點
prev() - 獲取指定節點的上一個兄弟節點
siblings() - 獲取指定節點的所有兄弟節點
find(expr) - 在指定節點中查詢指定內容
注意 - 查詢指定節點的後代節點
$("#nj").prev().attr("name")獲取節點的上一個兄弟節點
$("#nj").siblings().length 獲取節點的所有兄弟節點的個數
$("#city").find("li").length 獲取id為city節點下所有li元素的個數(後代節點)
12、節點
①建立節點
Jquery建立元素節點、屬性節點、文字節點都使用$(html)
建立元素節點：$("<li></li>");
建立屬性節點：$("<li id='test'></li>");
建立文字節點：$("hello world !");
同時建立：$("<li id='test'>hello world !</li>");
②刪除節點
remove() - 刪除自身及後代節點
empty() - (清空)刪除後代節點,但保留自身節點
③插入節點
內部插入（當做子節點插入）：
append(content|fn) 向每個匹配的元素內部末尾追加內容。
appendTo(content) 把所有匹配的元素追加到另一個指定的元素元素集合末尾。
prepend(content|fn) 向每個匹配的元素內部頭部內容。
prependTo(content) 把所有匹配的元素追加到另一個指定的元素元素集合頭部
外部插入（當做兄弟節點插入）：
after(content|fn) 向每個匹配元素的後面新增內容
before(content|fn) 向每個匹配元素的前面新增內容
insertAfter(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的後
面。
insertBefore(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的
前面。
④替換節點
A.replaceWith(B) 方法把被選元素替換為新的內容。B替A
A.replaceAll(B) 方法相反 A替B
$("button").replaceWith($("<p>這也是段落.</p>"));
$("<button>按鈕</button>").replaceAll($("p"));
⑤複製節點
jQuery - clone(boolean)
boolean引數 - 表示是否複製事件
DOM - cloneNode(boolean)
boolean引數 - 表示是否複製後代節點
例：$("button").clone(true).appendTo($("p"));//複製button按鈕,將其追加到p標籤中
13、事件
ready() - 類似於window.onload的作用
寫法
$(document).ready(function(){});
$().ready(function(){});
$(function(){}); //常用
14、ready與onload的區別
ready：具有簡寫方式
在一個HTML頁面中允許多個
等待HTML頁面中所有DOM結構載入完畢後就可以執行
onload：沒有簡寫方式
在一個HTML頁面中只能一個
必須等待HTML頁面中所有內容全部載入完畢後才能執行
15、事件繫結與解綁
①繫結事件 bind(type,data,fn)
type - 指定繫結的事件名稱
如果繫結多個事件時,使用空格隔開
data - 可選項,作為event.data屬性值傳遞給事件物件的額外資料物件
fn - 繫結事件的處理函式
②解綁事件unbind(type)
type - 指定解綁的事件名稱
預設不傳遞任何內容 - 即解綁所有事件
指定單個事件名稱 - 解綁單個事件
指定多個事件名稱 - 解綁多個事件
16、滑鼠懸停事件
mouseover()事件是bind('mouseover')的簡寫方式
$(".d1>h3").bind("mouseover mouseout",function(){
if($(".d2").is(":hidden")){
$(".d2").show(1000);
}else{
$(".d2").hide(1000);
}
});
$(".d1>h3").mouseover(function(){
$(".d2").show(1000);
}).mouseout(function(){
$(".d2").hide(1000);
});
17、click()事件是bind('click')的簡寫方式
18、事件物件(event)
事件物件被封裝在事件對應的處理函式的引數
ele.onclick = function(event){
event
}
常用用法
pageX/clientX/offsetX/x - 當前x軸
pageY/clientY/offsetY/y - 當前y軸
target - 當前繫結事件的源物件(元素)
returnValue - 返回值,Boolean型別
return false - 阻止頁面的預設行為
which/keyCode/charCode - 鍵盤對應值
19、事件冒泡
捕獲
冒泡
方式一：event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二：return false;
$("#div1").mousedown(function(event){
return false;3
});
事件切換
hover(over,out)方法
over - onmouseover事件的處理函式
out - onmouseout事件的處理函式
20、JQuery中的常用事件
| .click() |
滑鼠單擊觸發事件，引數可選（data，function） |
| .dblclick() |
雙擊觸發，同上 |
| .mousedown()/up() |
滑鼠按下/彈起觸發事件 |
| .mousemove() |
滑鼠移動事件 |
| .mouseover()/out() |
滑鼠移入/移出觸發事件 |
| .mouseenter()/leave() |
滑鼠進入/離開觸發事件* |
| .hover(func1,func2) |
滑鼠移入呼叫func1函式，移出呼叫func2函式 |
| .focusin() |
滑鼠聚焦到該元素時觸發事件 |
| .focusout() |
滑鼠失去焦點時觸發事件 |
| . focus()/.blur() |
滑鼠聚焦/失去焦點觸發事件（不支援冒泡） |
| .change() |
表單元素髮生改變時觸發事件 |
| .select() |
文字元素被選中時觸發事件 |
| .submit() |
表單提交動作觸發* |
| .keydown()/up() |
鍵盤按鍵按下/彈起觸發 |
| .on() |
多事件的繫結 |
| .off() |
移除事件的繫結 |
| .trigger(“event”) |
觸發事件event呼叫 |
| .triggerHandler() |
觸發事件，不會冒泡，不會觸發預設事件 |