Jquery(十) DOM解析
来源：互联网 发布：梁山传奇翅膀升级数据 编辑：程序博客网 时间：2024/06/04 18:59
☆ 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 pp=$("ul>li:eq(1)").text();//获取乒乓球的文本 //alert(pp); var zq=$("ul>li:contains('足球')").attr("title");//通过title属性获取 alert(zq); }); </script> --> <!--创建节点--> <!-- <script type="text/javascript"> $(document).ready(function(){ //创建节点 var a=$("<li></li>"); //添加到ul中 $("ul").append(a); //创建带有文本的节点 var b=$("<li>排球</li>"); $("ul").append(b); //创建带有属性的节点 var c=$("<li title='绣球'>绣球</li>"); $("ul").append(c); }); </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> <!--复制节点--> <!-- <script type="text/javascript"> $(document).ready(function(){ /* var x=$("ul>li:eq(0)").clone(); $("ul").append(x); */ $("ul li").click(function(){ $(this).clone().appendTo("ul"); }); }); </script> --> <!--替换节点--> <!-- <script type="text/javascript"> $(document).ready(function(){ $("ul li:eq(0)").replaceWith("<strong><li>排球</li></strong>"); $("p").replaceWith("<strong>你喜欢运动吗?</strong>"); $("<li title='棒球'>棒球</li>").replaceAll("ul li:eq(2)"); }); </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> <!--包裹节点--> <!-- <script type="text/javascript"> $(document).ready(function(){ //$("p").wrap("<a href='#'></a>"); $("p").wrapInner("<a href='#'></a>"); }); </script> --><!-- 获取和删除属性--><!--<script type="text/javascript"> $(document).ready(function(){ //获取属性值 var pTitle=$("p").attr("title"); alert(pTitle); //设置属性值 $("p").attr("title","运动"); //获取属性 var p2=$("p").attr("title"); alert(p2); //移除属性 $("p").removeAttr("title"); //获取一下 var s=$("p").attr("title"); alert(s); }); --><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(){ var a=$("ul").children(); alert(a.length); var b=$("p").next(); alert(b); }); </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> 0 0
- Jquery(十) DOM解析
- jquery源码解析----DOM文档加载步骤
- 十、DOM
- Jquery中的DOM操作 (十.超链接提示效果)
- Android 开发之路十---------SAX,DOM,PULL解析XML
- 类jquery的php解析html dom库，simple_html_dom
- jquery dom
- jQuery-DOM
- JQuery DOM
- JQuery DOM
- jQuery DOM
- jQuery DOM
- JQuery DOM
- Jquery Dom
- JQuery DOM
- JQuery DOM
- JQuery DOM
- jQuery dom
- Python3网络爬虫(七)：使用Beautiful Soup爬取小说
- OOM 排查 工具方法
- 【Java】实现对服务器的自动巡检邮件通知
- #include 后面跟的“”与<>的区别
- 关于解决windows安装msi文件总是报错的方法
- Jquery(十) DOM解析
- Spring 的 事务管理
- 网络编程2之Socket简介和java.net包
- Maven安装及配置
- 使用jQuery获取父级节点、兄弟节点、子级节点的方法
- 【转载】HTML5 控制装置陀螺仪 ( 三轴 )
- eclipse创建maven项目时，jre版本和web.xml版本问题
- React native入门学习资料
- win10 WmiPrvSE.exe WMI Provider 占用CPU过高的问题
