jq代码学习7--DOM操作
来源：互联网 发布：mcs51单片机是几位 编辑：程序博客网 时间：2024/05/16 11:35
1.查找属性节点和元素节点
<!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-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var $para =$("p"); var $li =$('lu li:eq(1)');//获取<ul>里的第二个<li>元素 var p_txt =$para.attr("title"); var ul_txt=$li.attr("title"); var li_txt=$li.text(); alert(p_txt); }) </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 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-2-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素 //包括元素节点,文本节点和属性节点 //其中title='香蕉' 就是创建的属性节点 var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素 //包括元素节点,文本节点和属性节点 //其中title='雪梨' 就是创建的属性节点 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示 $parent.append($li_2); // 等价于：$parent.append($li_1).append($li_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 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-3-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素 var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素 var $li_3 = $("<li title='其它'>其它</li>"); // 创建第三个<li>元素 var $parent = $("ul"); // 获取<ul>节点，即<li>的父节点 var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 $parent.append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面 $parent.prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面 $li_3.insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后 }); //]]> </script></head><body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul></body></html>4.删除节点
<!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-4-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("ul li").click(function(){ alert( $(this).html() ); }) var $li = $("ul li:eq(1)").detach(); // 获取第二个<li>元素节点后，将它从网页中删除。 //var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。 $li.appendTo("ul"); }); //]]> </script></head><body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul></body></html>5.复制文本节点
<!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-5-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("ul li").click(function(){ $(this).clone(true).appendTo("ul"); // 注意参数true //可以复制自己，并且他的副本也有同样功能。 }) }); </script></head><body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul></body></html>6.替换节点
<!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-6</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); }); //]]> </script></head><body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul></body></html>7.包裹文本节点
<!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-7-4</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrapInner("<b></b>"); // $("strong").wrapAll("<b></b>"); }); //]]> </script></head><body> <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul></body></html>8.属性操作
<!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-8</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //设置<p>元素的属性'title' $("input:eq(0)").click(function(){ $("p").attr("title","选择你最喜欢的水果."); }); //获取<p>元素的属性'title' $("input:eq(1)").click(function(){ alert( $("p").attr("title") ); }); //删除<p>元素的属性'title' $("input:eq(2)").click(function(){ $("p").removeAttr("title"); }); }); //]]> </script></head><body> <input type="button" value="设置<p>元素的属性'title'"/> <input type="button" value="获取<p>元素的属性'title'"/> <input type="button" value="删除<p>元素的属性'title'"/> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul></body></html>9.样式操作
<!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-9-1</title><style type="text/css">.high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/}.another{ font-style:italic; color:blue;}</style> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //获取样式 $("input:eq(0)").click(function(){ alert( $("p").attr("class") ); }); //设置样式 $("input:eq(1)").click(function(){ $("p").attr("class","high"); }); //追加样式 $("input:eq(2)").click(function(){ $("p").addClass("another"); }); //删除全部样式 $("input:eq(3)").click(function(){ $("p").removeClass(); }); //删除指定样式 $("input:eq(4)").click(function(){ $("p").removeClass("high"); }); //重复切换样式 $("input:eq(5)").click(function(){ $("p").toggleClass("another"); }); //判断元素是否含有某样式 $("input:eq(6)").click(function(){ alert( $("p").hasClass("another") ) alert( $("p").is(".another") ) }); }); //]]> </script></head><body> <input type="button" value="输出class类"/> <input type="button" value="设置class类"/> <input type="button" value="追加class类"/> <input type="button" value="删除全部class类"/> <input type="button" value="删除指定class类"/> <input type="button" value="重复切换class类"/> <input type="button" value="判断元素是否含有某个class类"/> <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul></body></html>10.设置和获取HTML、文本和值
<!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-10-4</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(){ //设置单选下拉框选中 $("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 }); }); //]]> </script></head><body> <input type="button" value="设置单选下拉框选中"/> <input type="button" value="设置多选下拉框选中"/> <input type="button" value="设置单选框和多选框选中"/><br/><br/><select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option></select><select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option></select><br/><br/><input type="checkbox" value="check1"/> 多选1<input type="checkbox" value="check2"/> 多选2<input type="checkbox" value="check3"/> 多选3<input type="checkbox" value="check4"/> 多选4<br/><input type="radio" value="radio1" name="a"/> 单选1<input type="radio" value="radio2" name="a"/> 单选2<input type="radio" value="radio3" name="a"/> 单选3</body></html>11.遍历节点
<!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-11-4</title> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(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"); } }); //]]> </script></head><body><input type="button" value="parent()"/><input type="button" value="parents()"/><input type="button" value="closest()"/><ul id="one" class="level-1"> <li class="item-i">I</li> <li id="ii" class="item-ii">II <ul class="level-2"> <li class="item-a"><a href="#" class="item-1">Home</a></li> <li class="item-b"><a href="#" class="item-2">Product</a></li> <li class="item-c"><a href="#" class="item-3">About</a></li> </ul> </li> <li class="item-iii">III</li></ul></body></html>12.CSS_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>阅读全文
0 0
- jq代码学习7--DOM操作
- JQ的DOM操作
- JQ DOM操作
- JQ-DOM操作-1
- JQ-DOM操作-2
- jq学习笔记DOM
- jq框架封装学习笔记4-DOM操作模块
- jq代码学习2——《锋利的JQUERY》 dom对象和jQ对象转换
- [JQ_node2] JQ dom操作&常用方法
- JQ对DOM的操作实例
- 通过jq选择器dom操作获得焦点
- jq的DOM操作增删改
- JQ DOM
- jq代码学习----- ajax $.ajax( )
- JQ中操作DOM的一些方法小结
- jq代码学习20----- jq serializeArray( ) fl ch6 207
- jq代码学习19----- jq中的ajax全局事件
- jquery学习--dom操作
- SQL语句之查询基础（一）
- C++ extern 关键字 声明变量为全局变量，多文件共享变量
- Esp8266学习之旅③ 利用 " 软件定时器 " 定时0.5秒闪烁点亮一盏LED。（附带demo）
- Android开发经验谈-很少有人会告诉你的Android开发基本常识
- （面试题四）【JAVAse部分】集合框架
- jq代码学习7--DOM操作
- 欢迎使用CSDN-markdown编辑器
- replication factor: 1 larger than available brokers: 0 问题解决方案
- 【LibUIDK界面库系列文章】RC控件语法
- 服务器刚部署好IIS，网站不能访问
- C++学习18：#include的两种形式
- FZU
- 带锁的门
- 【BZOJ1924】【SDOI2010】所驼门王的宝藏
