jQuery操作Dom

来源：互联网发布：电脑优化加速软件编辑：程序博客网时间：2024/06/07 03:52

    * 封装的DOM操作：
       * 查找页面节点：
           * 元素节点：所有选择器内容
           * 文本节点：text()
           * 属性节点：attr()
       * 创建元素节点：$(HTML代码)
       * 插入节点：具体内容看代码
       * 删除节点：
           * remove()：删除自身节点和所有后代节点
           * empty()：删除除自身节点外的所有后代节点
       * 替换节点：
           * replaceWith()：前面的元素是被替换的，后面的元素是替换的
           * replaceAll()：前面的元素是替换的，后面的元素是被替换的
           * replaceAll()是颠倒了replaceWith()
       * 复制节点：
           * clone(Boolean)：Boolean负责是否复制事件
           * DOM中的cloneNode(Boolean)：Boolean负责是否复制后代节点
       * 遍历节点：
           * 父节点：parent()
           * 子节点：children(表达式)
           * 上一个兄弟节点：prev()
           * 下一个兄弟节点：next()
           * find(表达式)：通过方法
       * 包裹节点：
           * wrap()：分别包裹
           * wrapAll()：一起包裹
           * wrapInner()：包裹后代节点

查找节点

<body> <ul>  <li id="bj"></li> <li id="tj" name="tianjin">天津</li> </ul></body>

 <script type="text/javascript">          //获取北京节点的文本节点//alert($("#bj").text());////$("#bj").text("北京");////alert($("#bj").text());//获取北京节点的name属性值/*alert($("#bj").attr("name"));$("#bj").attr("name","beijing");alert($("#bj").attr("name"));*/    </script>

创建节点

<script type="text/javascript">//在city下增加<li id="tj" name="tianjin">天津</li>节点//1 创建<li id="tj" name="tianjin">天津</li>////1 创建<li></li>//var $li = $("<li></li>");//创建元素节点：$(HTML代码)标签的闭合//////2 设置文本和属性//$li.attr("id","tj");//$li.attr("name","tianjin");//$li.text("天津");var $li = $("<li id='tj' name='tianjin'>天津</li>");//2 获取city标签var $city = $("#city");//3 插入$city.append($li);</script>

内部插入节点

<body> <ul id="city">  <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul>    <ul id="love">  <li id="fk" name="fankong">反恐</li> <li id="xj" name="xingji">星际</li> </ul><div id="foo1">Hello1</div>        </body>

<script type="text/javascript">//*   append(content) :向每个匹配的元素的内部的结尾处追加内容//append后面的元素插入到append前面的元素的后面//$("#bj").append($("#fk"));//*   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处//appendTo前面的元素插入到appendTo后面的元素的后面//$("#bj").appendTo($("#fk"));//*   prepend(content):向每个匹配的元素的内部的开始处插入内容//prepend后面的元素插入到prepend前面的元素的前面//$("#bj").prepend($("#fk"));//*   prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处//prependTo前面的元素插入到prependTo后面的元素的前面//$("#bj").prependTo($("#fk"));</script>

外部插入节点

<body> <ul id="city">  <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <p  id="p3">I would like to say: p3</p>  <p  id="p2">I would like to say: p2</p> <p  id="p1">I would like to say: p1</p>       </body>

<script type="text/javascript">//*  after(content) :在每个匹配的元素之后插入内容//after后面等元素插入到after前面的元素的后面$("#bj").after($("#p2"));//*  before(content):在每个匹配的元素之前插入内容 //before后面的元素插入到before前面的元素的前面//$("#bj").before($("#p2"));//*  insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面//insertAfter前面的元素插入到insertAfter后面的元素的后面//$("#bj").insertAfter($("#p2"));//*  insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面 //insertBefore前面的元素插入到insertBefore后面的元素的前面//$("#bj").insertBefore($("#p2"));</script>

删除节点

<body> <ul id="city">  <li id="bj" name="beijing">北京<p>海淀区</p></li> <li id="tj" name="tianjin">天津<p>河西区</p></li> <li id="cq" name="chongqing">重庆</li> </ul><p class="hello">Hello</p> how are <p>you?</p> </body>

<script type="text/javascript">   //删除<li id="bj" name="beijing">北京</li>$("#bj").remove();   //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).$("#tj").empty();/* * empty()：清空后代节点，删除除了自身节点外所有节点 * remove()：删除自身节点及所有后代节点 */</script>

复制节点

<body><button>保存</button><br>    <p>段落</p></body>

 <script type="text/javascript">//button增加事件$("button").click(function(){alert("button");});    //克隆button 追加到p上 ,但事件不克隆//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为$("button").clone(true).appendTo($("p"));    //克隆button 追加到p上 ,但事件也克隆//clone(true): 复制元素的同时也复制元素中的的事件     </script>

替换节点

<p>段落</p><p>段落</p><p>段落</p><button>保存</button>

<script type="text/javascript">    //$("button")用 <p>tttttttt</P>替换$("button").replaceWith($("<p>tttttttt</P>"));    // p 用  <button>保存</button>  替换$("<button>保存</button>").replaceAll($("p"));/* * replaceWith():前面的元素是被替换的，后面的元素是替换的 * replaceAll()：前面的元素是替换的，后面的元素是被替换的 * replaceAll()是颠倒了replaceWith() */</script>

样式操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>08_样式操作.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><style type="text/css">   .one{    width: 200px;    height: 140px;    margin: 40px;    background: red;    border: #000 1px solid;float:left;    font-size: 17px;    font-family:Roman;} div,span{    width: 140px;    height: 140px;    margin: 20px;    background: #9999CC;    border: #000 1px solid;float:left;    font-size: 17px;    font-family:Roman;}div.mini{    width: 30px;    height: 30px;    background: #CC66FF;    border: #000 1px solid;    font-size: 12px;    font-family:Roman;} </style></head><body> <input type="button" value="采用属性增加样式"  id="b1"/> <input type="button" value=" addClass"  id="b2"/> <input type="button" value="removeClass"  id="b3"/> <input type="button" value=" 切换样式"  id="b4"/> <input type="button" value=" hasClass"  id="b5"/>  <h1>天气冷了</h1> <h2>天气又冷了</h2>    <br><div id="mover">   动画</div><br><span class="spanone">    span</span></body><script type="text/javascript">//<input type="button" value="采用属性增加样式"  id="b1"/>$("#b1").click(function(){$("#mover").attr("class","one");});//<input type="button" value=" addClass"  id="b2"/>$("#b2").click(function(){$("#mover").addClass("mini");});//<input type="button" value="removeClass"  id="b3"/>$("#b3").click(function(){/* * removeClass()：删除所有样式 * removeClass(class)：删除指定样式 */$("#mover").removeClass();});//<input type="button" value=" 切换样式"  id="b4"/>$("#b4").click(function(){//切换样式：在没有样式和指定样式之间$("#mover").toggleClass("one");});//<input type="button" value=" hasClass"  id="b5"/>$("#b5").click(function(){//alert($("#mover").hasClass("one"));});</script></html>

遍历节点

<body> <ul id="city">  <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="nj" name="nanjing">南京</li> </ul></body>

<script type="text/javascript">//获取天津节点的父节点//alert($("#tj").parent().attr("id"));//获取city标签的所有子节点//alert($("#city").children().length);//获取city标签的第一个子节点//alert($("#city").children(":first").attr("name"));//获取天津节点的上一个兄弟节点//alert($("#tj").prev().attr("name"));//获取天津节点的下一个兄弟节点//alert($("#tj").next().attr("name"));alert($("#city").find("li").length);</script>

包裹节点

<body><strong title="jQuery">jQuery</strong><strong title="jQuery">jQuery</strong></body>

<script type="text/javascript">//jQuery代码如下：$("strong").wrap("<b></b>");/* * 得到的结果如下 * <b><strong title="jQuery">jQuery</strong></b> * <b><strong title="jQuery">jQuery</strong></b> *///jQuery代码如下：$("strong").wrapAll("<b></b>");/* * 得到的结果如下 * <b> * <strong title="jQuery">jQuery</strong> * <strong title="jQuery">jQuery</strong> * </b> *///jQuery代码如下：$("strong"). wrapInner("<b></b>");/* * 得到的结果如下 * <strong title="jQuery"><b>jQuery</b></strong> * <strong title="jQuery"><b>jQuery</b></strong> */</script>

0 0