Jquery(十) DOM解析

xiaoxiao2021-02-27 476

☆ 1.查找-创建-插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>查找节点创建节点插入节点</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.6.4.min.js"></script>      <script type="text/javascript"> $(document).ready(function(){ //创建节点 var x=$("<li title='棒球'>棒球</li>"); //末尾追加 $("ul").append(x); //置顶添加 var y=$("<li title='羽毛球'>羽毛球</li>"); $("ul").prepend(y); //添加足球的后边 var z=$("<li title='桌球'>桌球</li>"); $("ul>li:eq(1)").append(z); var f=$("<li title='橄榄球'>橄榄球</li>"); $("ul").after(f); var w=$("<li title='网球'>网球</li>"); $("ul").before(w); }); </script> </head> <body> <p title="你喜欢哪种运动?">你喜欢下边那种运动?</p> <ul> <li title="足球">足球</li> <li title="乒乓球">乒乓球</li> <li title="篮球">篮球</li> </ul> </body> </html>

☆ 2. 删除-复制-替换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>删除节点复制节点和替换节点</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.6.4.min.js"></script>  <script type="text/javascript"> $(document).ready(function(){ /* //节点本身已经不存在了 $("ul>li:eq(0)").remove(); //根据属性删除 $("ul li").remove("[title=篮球]"); */ //只是删除文本但是节点本身还存在 $("ul li:eq(0)").empty(); }); </script>     </head> <body> <p title="你喜欢哪种运动?">你喜欢下边那种运动?</p> <ul> <li title="足球">足球</li> <li title="乒乓球">乒乓球</li> <li title="篮球">篮球</li> </ul> </body> </html>

☆ 3.包裹节点和样式操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>包裹节点和样式操作 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.6.4.min.js"></script>     <style type="text/css"> .abc{ background:#aaa; } </style>  <script type="text/javascript"> $(document).ready(function(){ //获取p标签并且添加样式 $("p").addClass("abc"); //移除样式 $("p").removeClass("abc"); }); </script> </script> </head> <body> <p title="你喜欢运动吗?">你喜欢下边那种运动?</p> <ul> <li title="足球">足球</li> <li title="乒乓球">乒乓球</li> <li title="篮球">篮球</li> </ul> </body> </html>

☆ 4 .text和html以及val

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> text和html以及val</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* //获取文本 var t=$("p").text(); alert(t); //设置文本 $("p").text("你喜欢运动?"); */ /* var q=$("p").html(); alert(q); //设置 $("p").html("运动"); */ //设置属性值 var s=$("p").val(); alert(s); $("p").val("你好"); var w=$("p").val(); alert(w); }); </script> </head> <body> <p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p> <ul> <li title="足球">足球</li> <li title="乒乓球">乒乓球</li> <li title="篮球">篮球</li> </ul> </body> </html>

☆ 5.val的应用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>val的应用</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //获取焦点执行一个函数用于把文本框的内容清空 $("#t1").focus(function(){ //获取属性值 var tValue=$("#t1").val(); if(tValue=="账号/手机号码/邮箱" || tValue==""){ //设置value值为"" $("#t1").val(""); } }); //失去焦点执行一个函数用于恢复文本框的内容 $("#t1").blur(function(){ var a=$("#t1").val(); //没输入内容 if(a==""){ $("#t1").val("账号/手机号码/邮箱"); } }); }); </script> </head> <body> <form> <p>账号<input type="text" size="20" id="t1" value="账号/手机号码/邮箱"/></p> <p>密码<input type="password" size="21"/></p> <p> <input type="submit" value="登录"/> <input type="reset" value="重写"/> </p> </form> </body> </html>

☆ 6.DOM遍历节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> DOM遍历节点</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.6.4.min.js"></script>   <script type="text/javascript"> $(document).ready(function(){ $("ul").bind("click",function(e){ $(e.target).closest("li").css("color","red"); }); }); </script> </head> <body> <p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p> <ul> <li title="足球">足球</li> <li title="乒乓球">乒乓球</li> <li title="篮球">篮球</li> </ul> </body> </html>

☆ 7. CSS DOM操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>css DOM操作</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //<input type="button" value="获取p标签的颜色"/> $("input:eq(0)").click(function(){ var c=$("p").css("color"); alert(c); }); //<input type="button" value="设置p标签的颜色和字体大小"/> $("input:eq(1)").click(function(){ $("p").css({"font-size":"30px","background":"red"}); }); //<input type="button" value="获取p标签的高度"/> $("input:eq(2)").click(function(){ var x=$("p").height(); alert(x); }); //<input type="button" value="获取p标签的宽度"/> $("input:eq(3)").click(function(){ var y=$("p").width(); alert(y); }); //<input type="button" value="设置p标签的高度"/> $("input:eq(4)").click(function(){ $("p").height(300); }); //<input type="button" value="设置p标签的宽度"/> $("input:eq(5)").click(function(){ $("p").width(400); }); //<input type="button" value="获取p标签的上边距和左边距"/> $("input:eq(6)").click(function(){ var off=$("p").offset(); //获取上边距 var ot=off.top; //获取左边距 var of=off.left; alert("top--"+ot+"---left"+of); }); }); </script> </head> <body> <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标签的高度"/> <input type="button" value="设置p标签的宽度"/> <input type="button" value="获取p标签的上边距和左边距"/> <p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p> <ul> <li title="足球">足球</li> <li title="乒乓球">乒乓球</li> <li title="篮球">篮球</li> </ul> </body> </html>

转载请注明原文地址: https://www.6miu.com/read-1156.html

技术

最新回复(0)