1 $(function(){ 2 var $body = $("body").children(); 3 var $p = $("p").children(); 4 var $ul = $("ul").children(); 5 alert( $body.length ); // <body>元素下有2个子元素 6 alert( $p.length ); // <p>元素下有0个子元素 7 alert( $ul.length ); // <p>元素下有3个子元素 8 for(var i=0;i< $ul.length;i++){ 9 alert( $ul[i].innerHTML ); 10 }
一般来说DOM操作可以分为DOM Core,HTML-DOM,CSS-DOM.
jQuery中的DOM操作：
1查找节点
使用jQuery在文档树上查找节点非常容易，我们可以通过就jQuery选择器来完成~
1.1查找元素节点
1 var $li=$("ul li:eq(1)");
2 var li_txt=$li.text();
3 alert(li_txt);
1.2查找属性节点
1 var $para=$("p"); 2 var p_txt=$para.attr("title");//获取<p>元素属性title 3 alert(p_txt);
2创建节点
第一步要创建新元素
第二步要添加到要创建的位置
1 var $li=$("<li></li>>"); 2 $("ul").append($li);//元素节点 3 4 var $li=$("<li>苹果</li>>"); 5 $("ul").append($li);//文本节点 6 7 var $li=$("<li title='苹果'>苹果</li>>"); 8 $("ul").append($li);//属性节点
3删除节点
$("ul li:eq(1)").remove();
$("ul li:eq(1)").remove();
$li.appendTo("ul");//先删除再移动到指定位置
/*detach和remove一样，但是detach不会把元素从jQuery对象中删除，
可以再次利用（所有绑定的事件附加的数据都会被保留下来）*/
$("ul li:eq(1)").empty()//仅仅是清空，节点位置等会被保留。
4复制节点
1 $("ul li").click(function(){ 2 $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中 3 }) 4 $(this).clone(true).appendTo("body");//参数true表示复制元素的同时复制元素中所绑定的事件
5替换节点
1 $("p").replaceWith("<strong>新的标题</strong>>")；//The first way 2 $("<strong>新的标题</strong>>").replaceAll("p");//The second way
6包裹节点
1 $("strong").wrap("<b></b>>");//wrap 2 //会得到如下结果 3 <b><strong>元素strong的内容</strong></b> 4 //wrapAll()会将所有元素包裹在一个元素中 5 /*wrapInner(),顾名思义将匹配元素的子内容（包括文本节点）用其他结构化的标记包裹起来*/
7获取样式和设置样式
1 <style type="text/css"> 2 .high{ 3 font-weight:bold; /* 粗体字 */ 4 color : red; /* 字体颜色设置红色*/ 5 } 6 .another{ 7 font-style:italic; 8 color:blue; 9 } 10 </style> 11 <!-- 引入jQuery --> 12 <script src="../../scripts/jquery.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 //<![CDATA[ 15 $(function(){ 16 //获取样式 17 $("input:eq(0)").click(function(){ 18 alert( $("p").attr("class") ); 19 }); 20 //设置样式 21 $("input:eq(1)").click(function(){ 22 $("p").attr("class","high"); 23 }); 24 //追加样式 25 $("input:eq(2)").click(function(){ 26 $("p").addClass("another"); 27 }); 28 //删除全部样式 29 $("input:eq(3)").click(function(){ 30 $("p").removeClass(); 31 }); 32 //删除指定样式 33 $("input:eq(4)").click(function(){ 34 $("p").removeClass("high"); 35 }); 36 //重复切换样式 37 $("input:eq(5)").click(function(){ 38 $("p").toggleClass("another"); 39 }); 40 //判断元素是否含有某样式 41 $("input:eq(6)").click(function(){ 42 alert( $("p").hasClass("another") ) 43 alert( $("p").is(".another") ) 44 }); 45 }); 46 //]]> 47 </script> 48 </head> 49 <body> 50 <input type="button" value="输出class类"/> 51 <input type="button" value="设置class类"/> 52 <input type="button" value="追加class类"/> 53 <input type="button" value="删除全部class类"/> 54 <input type="button" value="删除指定class类"/> 55 <input type="button" value="重复切换class类"/> 56 <input type="button" value="判断元素是否含有某个class类"/> 57 58 <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> 59 <ul> 60 <li title='苹果'>苹果</li> 61 <li title='橘子'>橘子</li> 62 <li title='菠萝'>菠萝</li> 63 </ul> 64 </body> 65 </html>
8设置和获取HTML，文本和值
1 $(function(){ 2 //获取<p>元素的HTML代码 3 $("input:eq(0)").click(function(){ 4 alert( $("p").html() ); 5 }); 6 //获取<p>元素的文本 7 $("input:eq(1)").click(function(){ 8 alert( $("p").text() ); 9 }); 10 //设置<p>元素的HTML代码 11 $("input:eq(2)").click(function(){ 12 $("p").html("<strong>你最喜欢的水果是?</strong>"); 13 }); 14 //设置<p>元素的文本 15 $("input:eq(3)").click(function(){ 16 $("p").text("你最喜欢的水果是?"); 17 }); 18 //设置<p>元素的文本 19 $("input:eq(4)").click(function(){ 20 $("p").text("<strong>你最喜欢的水果是?</strong>"); 21 }); 22 //获取按钮的value值 23 $("input:eq(5)").click(function(){ 24 alert( $(this).val() ); 25 }); 26 //设置按钮的value值 27 $("input:eq(6)").click(function(){ 28 $(this).val("我被点击了!"); 29 }); 30 });
$(function(){ $("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==this.defaultValue){ $(this).val(""); // 如果符合条件，则清空文本框内容 } }); $("#address").blur(function(){ // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==""){ $(this).val(this.defaultValue);// 如果符合条件，则设置内容 } }) $("#password").focus(function(){ var txt_value = $(this).val(); if(txt_value==this.defaultValue){ $(this).val(""); } }); $("#password").blur(function(){ var txt_value = $(this).val(); if(txt_value==""){ $(this).val(this.defaultValue); } }) });
1 $(function(){ 2 //设置单选下拉框选中 3 $("input:eq(0)").click(function(){ 4 $("#single").val("选择2号"); 5 }); 6 //设置多选下拉框选中 7 $("input:eq(1)").click(function(){ 8 $("#multiple").val(["选择2号", "选择3号"]); 9 }); 10 //设置单选框和多选框选中 11 $("input:eq(2)").click(function(){ 12 $(":checkbox").val(["check2","check3"]); 13 $(":radio").val(["radio2"]); 14 }); 15 16 });
1 $(function(){ 2 //设置单选下拉框选中 3 $("input:eq(0)").click(function(){ 4 $("#single option").removeAttr("selected"); //移除属性selected 5 $("#single option:eq(1)").attr("selected",true); //设置属性selected 6 }); 7 //设置多选下拉框选中 8 $("input:eq(1)").click(function(){ 9 $("#multiple option").removeAttr("selected"); //移除属性selected 10 $("#multiple option:eq(2)").attr("selected",true);//设置属性selected 11 $("#multiple option:eq(3)").attr("selected",true);//设置属性selected 12 }); 13 //设置单选框和多选框选中 14 $("input:eq(2)").click(function(){ 15 $(":checkbox").removeAttr("checked"); //移除属性checked 16 $(":radio").removeAttr("checked"); //移除属性checked 17 $("[value=check2]:checkbox").attr("checked",true);//设置属性checked 18 $("[value=check3]:checkbox").attr("checked",true);//设置属性checked 19 $("[value=radio2]:radio").attr("checked",true);//设置属性checked 20 }); 21 });
$(function(){ //设置单选下拉框选中 $("input:eq(0)").click(function(){ $("#single option").removeAttr("selected"); //移除属性selected $("#single option:eq(1)").attr("selected",true); //设置属性selected }); //设置多选下拉框选中 $("input:eq(1)").click(function(){ $("#multiple option").removeAttr("selected"); //移除属性selected $("#multiple option:eq(2)").attr("selected",true);//设置属性selected $("#multiple option:eq(3)").attr("selected",true);//设置属性selected }); //设置单选框和多选框选中 $("input:eq(2)").click(function(){ $(":checkbox").removeAttr("checked"); //移除属性checked $(":radio").removeAttr("checked"); //移除属性checked $("[value=check2]:checkbox").attr("checked",true);//设置属性checked $("[value=check3]:checkbox").attr("checked",true);//设置属性checked $("[value=radio2]:radio").attr("checked",true);//设置属性checked }); });
9遍历DOM树
$(function(){ var $body = $("body").children(); var $p = $("p").children(); var $ul = $("ul").children(); alert( $body.length ); // <body>元素下有2个子元素 alert( $p.length ); // <p>元素下有0个子元素 alert( $ul.length ); // <p>元素下有3个子元素 for(var i=0;i< $ul.length;i++){ alert( $ul[i].innerHTML ); }
$(function(){ var $p1 = $("p").next(); alert( $p1.html() ); // 紧邻<p>元素后的同辈元素 var $ul = $("ul").prev(); alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素 var $p2 = $("p").siblings(); alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素 });
$(function(){ $(document).bind("click", function (e) { $(e.target).closest("li").css("color","red"); }) }); $(function(){ //parent $("input:eq(0)").click(function(){ resetStyle(); $('.item-1').parent().css('background-color', 'red'); }); //parents $("input:eq(1)").click(function(){ resetStyle(); $('.item-1').parents('ul').css('background-color', 'red'); }); //closest $("input:eq(2)").click(function(){ resetStyle(); $('.item-1').closest('ul').css('background-color', 'red'); }); function resetStyle(){ $("*").removeAttr("style"); }
10CSS-DOM综合运用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-12-1</title>
<style type="text/css">
.test{
font-weight:bold;
color : red;
}
.add{
font-style:italic;
}
</style>
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
//获取<p>元素的color
$("input:eq(0)").click(function(){
alert( $("p").css("color") );
});
//设置<p>元素的color
$("input:eq(1)").click(function(){
$("p").css("color","red")
});
//设置<p>元素的fontSize和backgroundColor
$("input:eq(2)").click(function(){
$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
});
//获取<p>元素的高度
$("input:eq(3)").click(function(){
alert( $("p").height() );
});
//获取<p>元素的宽度
$("input:eq(4)").click(function(){
alert( $("p").width() );
});
//获取<p>元素的高度
$("input:eq(5)").click(function(){
$("p").height("100px");
});
//获取<p>元素的宽度
$("input:eq(6)").click(function(){
$("p").width("400px");
});
//获取<p>元素的的左边距和上边距
$("input:eq(7)").click(function(){
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
alert("left:"+left+";top:"+top);
});
});
//]]>
</script>
</head>
<body>
<input type="button" value="获取p元素的color"/>
<input type="button" value="设置p元素的color"/>
<input type="button" value="设置p元素的fontSize和backgroundColor"/>
<input type="button" value="获取p元素的高度"/>
<input type="button" value="获取p元素的宽度"/>
<input type="button" value="设置p元素的高度"/>
<input type="button" value="设置p元素的宽度"/>
<input type="button" value="获取p元素的的左边距和上边距"/>
<p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>