JQueryDOM節點操作
一、JQueryDom節點操作
2.1查找節點
獲取p節點
var $pDm=$("p");
輸出p節點的title屬性
alert($pDm.attr("title"));
//獲取第2個li節點
var $li_2=$("ul li:eq(1)");
//輸出第2個li節點的title屬性
alert($li_2.attr("title"));
//輸出第2個li節點的文本內容
alert($li_2.html());
2.2創建節點
創建2個li節點,要求這2個li節點包含文本包含屬性title
var $dm1=$("<li title=‘西瓜44‘>
var $dm2=$("<li title=‘香蕉55‘>香蕉</li>");
//將新創建的第1個li節點追加到ul節點下的最後一個子節點
$("ul").append($dm1);
$("ul").append($dm1);
//將新創建的第2個li節點追加到ul節點下的第一個子節點
$("ul").prepend($dm2);
2.3插入節點
var $dm1=$("<li title=‘葡萄44‘>葡萄</li>");
var $dm2=$("<li title=‘西瓜55‘>西瓜
var $dm3=$("<li title=‘香蕉66‘>香蕉</li>");
var $ulDm=$("ul");
var $li_2=$("ul li:eq(1)");
//用2種方式來將創造的第1個節點添加到ul下的最後一個子節點
//$ulDm.append($dm1);
//$dm1.appendTo($ulDm);
//用2種方式來講創造的第2個節點添加到ul下的第一個子節點
//$ulDm.prepend($dm2);
//$dm2.prependTo($ulDm);
//用2種方式將創造的li
//$li_2.after($dm3);
//$dm3.insertAfter($li_2);
//用2種方式將創造的li節點追加到第2個已經存在的li節點之前
//$li_2.before($dm3);
//$dm3.insertBefore($li_2);
2.4刪除節點
自殺:直接找到我們要操作的節點刪除即可.
$("ul li:eq(1)").remove();
jquery種刪除掉的節點還可以繼續獲得
var $dm=$("ul li:eq(1)").remove();
$dm.appendTo($("ul"));
JQuery中刪除節點可以加過濾條件
$("ul li").remove("li[title!=菠蘿]");
獲取第2個li節點後,將其元素中的內容清空
$("ul li:eq(1)").empty();
2.5屬性操作
在JQuery中有很多類似的操作,獲取節點的文本,獲取節點的屬性,
$dm.html(); $dm.html("AAAA");
$dm.attr("title"); $dm.attr("title","BBBBB");
2.6樣式操作
獲取樣式
alert($("p").attr("class"));
設置樣式 原先的樣式不存在
$("p").attr("class","high")
追加樣式 原先的樣式還存在
$("p").addClass("high")
刪除全部樣式
$("p").removeClass()
刪除指定樣式
$("p").removeClass("high");
重復切換樣式 $dm.toggleClass("another");
$("p").toggleClass("high");
判斷元素p是否含有某樣式 $dm.hasClass("another")
alert($("p").hasClass("high"));
JQuery提供了豐富的API讓我們操作節點的樣式:
獲取節點的樣式,設置節點的樣式,追加節點的樣式,刪除節點的樣式(全部,指定)
重復切換樣式,判讀節點是否包含指定的樣式
2.7CSS-DOM
alert($("p").css("color"));
設置<p>元素的color
$("p").css("color","red");
設置<p>元素的fontSize和backgroundColor $dm.css({"k1":v1,"k2":v2});
$("p").css({"fontSize":30,"backgroundColor":‘pink‘});
獲取<p>元素的高度
alert($("p").height());
獲取<p>元素的寬度
alert($("p").width());
設置<p>元素的高度
$("p").height("100px");
設置<p>元素的寬度
$("p").width("300px");
獲取<p>元素的的左邊距和上邊距 $dm.offset(); $dm.left $dm.top
var obj=$("p").offset();
alert(obj.left);
alert(obj.top);
JQuery中對節點的樣式操作,有2種實現方案:
第一種是將節點的樣式作為節點的一個屬性來進行整體操作
$dm.attr("class","myClass");
第二種方案通過節點的CSSDOM來控制節點的樣式
$dm.css("background","red");
$dm.css("background");
2.8遍歷節點數
利用JQuery的chldren方法來獲取頁面上所有的body子元素
alert($("body").children().length);
var dms=$("body").children();
for(var i=0;i<dms.length;i++){
alert(dms[i].innerHTML);
頁面加載完畢之後,獲取p節點後的同輩元素,輸出其文本內容
頁面加載完畢之後,獲取p節點前的同輩元素,輸出其文本內容
頁面加載完畢之後,獲取p節點所有的同輩元素
window.onload=function(){
//獲取p節點之後所有的同輩元素
var dms=$("p").nextAll();
//for(var i=0;i<dms.length;i++){
// alert(dms[i].innerHTML);
//}
//獲取節點P之前所有的兄弟節點
//dms=$("p").prevAll();
//for(var i=0;i<dms.length;i++){
// alert(dms[i].innerHTML);
//}
//獲取p節點所有的兄弟節點
dms=$("p").siblings();
for(var i=0;i<dms.length;i++){
alert(dms[i].innerHTML);
}
2.9設置和獲取HTML文本和值
獲取<p>元素的HTML代碼 $dm.html();
如果p節點中有HTML標簽,那麽標簽也會被返回
alert($("p").html());
獲取<p>元素的文本
通過方法text返回節點的內容,如果節點上包含HTML標簽,那麽這些標簽不會被返回,僅僅返回文本信息
alert($("p").text());
PS: $dm.html(); $dm.text(); 區別:
設置<p>元素的HTML代碼 $dm.html("夾雜HTML標簽");
//如果文本中包含對應的HTML標簽,那麽這些標簽將會被瀏覽器作為普通標簽來識別
$("p").html("<span style=‘background:red‘>DDDDD</span>");
設置<p>元素的文本 $dm.text("不夾雜html標簽");
$("p").text("FFFFFF");
設置<p>元素的文本 $dm.text("夾雜HTML標簽");
如果文本中包含了HTML標簽,那麽這些標簽將會作為內容來識別
$("p").text("<span style=‘background:red‘>DDDDD</span>");
獲取當前按鈕的value值
alert($("#btn1").val());
設置當前按鈕的value值
$("#btn2").val("我是後來設置的內容");
在JQuery中獲取和設置節點的文本有2種方式:$dm.html() $dm.text();
註意區分2者的不同之處
獲取：
1、html()不僅能獲取文本內容，還可以獲取標簽內容
2、text()僅僅獲取文本內容
設置：
1、html()設置的文本中含有標簽時，會被瀏覽器進行解析
2、text()設置的文本內容中含有標簽時，不會被瀏覽器進行解析，作為字符串處理
獲取和設置節點的value值用 $dm.val();
用JQuery的方式為頁面上的按鈕綁定事件
$("#address").bind("focus",function(){
if(this.value==‘請輸入郵箱地址‘){
this.value="";
}
});
$("#address").bind("blur",function(){
if(this.value==‘‘){
this.value="請輸入郵箱地址";
Jquery的事件
3.1Window.onload和$(document).ready()
window.onload=function(){
alert("BBBBB");
}
JQuery提供的 頁面加載完畢之後執行function中的代碼
$(document).ready(function(){
alert("CCCCCC");
});
簡寫形式
$(function(){
alert("DDDDDD");
});
區別:
1.用window.onload的方式來加載頁面:必須等頁面上所有的元素(圖片,.js文件,CSS文件)全部傳遞到客戶端之後才去執行其中的代碼
2.用JQuery的形式來加載頁面,頁面上的DOM樹形成了,無需等到所有資源加載完畢之後才去執行代碼
3.可以綁定的函數不一樣 window.onload只能綁定1個函數 用JQuery的形式可以綁定多個
3.2JQuery完善的事件處理機制
JQuery為節點pv綁定事件之前已經做過判斷處理了
window.onload=function(){
var dm=document.getElementById("pvv");
//為了保證代碼的健壯性,為頁面中的 節點綁定各種事件之前需要做大量的判斷
if(dm!=null){
dm.onclick=function(){alert("ZZZZ");}
}
alert("ZZZZZZZ");
}
$("#pvv").bind("click",function(){alert("AAAAAA");});
alert("AAAAAAA");
});
3.3事件綁定與合成
獲取id為panel下的class的值為head的h5元素,
* 為這個元素用JQuery的原始方式綁定點擊事件
* 讓當前元素的下一個兄弟節點顯示
$("#panel h5.head").bind("click",function(){
$(this).next().show();
});
用JQuery的這種事件綁定方式可以很方便的實現 代碼和內容分離, html標簽和JS代碼沒有任何摻雜.
* 頁面加載完畢之後為id為panel下的class值為head的h5元素用原始方式綁定一個click事件,
* 獲取當前節點的下一個兄弟元素$content
* 當$coantent元素為的狀態為可見狀態是$dm.is(":visible")讓節點$content節點隱藏.
* 否則讓節點$content節點隱藏.
$("#panel h5.head").bind("click",function(){
var $dm=$(this).next();
//判斷當前節點是否是顯示
if($dm.is(":visible")){
$dm.hide(); //讓當前節點隱藏
}else{
$dm.show(); //讓當前節點顯示
}
* 頁面加載完畢之後,
* 為id為panel下的class的值為head的h5元素用原始方式綁定mouseover事件,
* 讓當前節點的下一個兄弟節點顯示
* 為id為panel下的class的值為head的h5元素用原始方式綁定mouseout事件,
* 讓當前節點的下一個兄弟節點隱藏
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next().hide();
});*/
JQuery支持鏈式操作
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
});
* 等待頁面加載完畢之後,
* 為id為panel下的class值為head的h5元素用簡寫形式綁定一個mouseover事件,讓當前節點的下一個兄弟節點顯示
* 為id為panel下的class值為head的h5元素用簡寫形式綁定一個mouseout事件,讓當前節點的下一個兄弟節點隱藏
用簡寫形式為節點綁定事件
$("#panel h5.head").mouseover(function(){
$(this).addClass("highlight");
$(this).next().show();
}).mouseout(function(){
$(this).removeClass("highlight");
$(this).next().hide();
})
合成事件
* 為元素"h5.head"綁定hover事件,
* 分別讓當前節點的兄弟顯示和隱藏
* hover事件是模擬了頁面上的鼠標懸停和鼠標移開事件
$("h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
* 為元素"h5.head"綁定toggle事件,
* 分別讓當前元素的下一個兄弟節點顯示和隱藏
* toggle模擬了鼠標的連續點擊事件
$("h5.head").toggle(function(){
alert("1111");
},function(){
alert("22222");
},function(){
alert("3333");
});
$("h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
* 為元素綁定click事件,讓當前節點下一個兄弟節點切換顯示$dm.next().toggle();
* 2種方式實現 面試:toggle的2種用法分別代表什麽?
$("h5.head").click(function(){
//如果將toggle當做一個函數來調用的話,可以切換當前節點的顯示狀態
$(this).next().toggle();
});
* 為元素綁定toggle事件.
* 1.當前節點增加樣式.highlight 當前節點的下一個兄弟節點顯示
* 2.為當前節點移除樣式.highlight,當前節點的下一個兄弟節點隱藏
$(".head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
});
事件的簡寫綁定
基本的合成事件:hover toggle
toggle的2種用法
面試: window.onload和Jquery中的$(document).ready();區別?
Jquery完善的事件處理機制是什麽?
JQueryDOM節點操作