jQuery操作DOM元素

妖狐艹你老母 2022-08-05 16:20 376阅读 0赞

HTML DOM常见操作:

　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.

查找节点

　　关于节点的查找,是利用选择器完成的.

插入节点

　　首先看一个例子,用原生的JavaScript如何创建并添加元素:

复制代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script>
  6.         var addItems = function(){
  7.             var number = parseInt(document.getElementById("number").value);
  8.             var div1 = document.getElementById("div1");
  10.             div1.innerHTML = "";//clear div before append
  12.             for(var i = 0; i < number; ++i){
  13.                 var input = document.createElement("input");
  14.                 input.setAttribute("type","text");
  15.                 var br = document.createElement("br")
  16.                 div1.appendChild(input);
  17.                 div1.appendChild(br);
  18.             }
  19.         }
  21.     </script>
  22. </head>
  23. <body>
  24. <input type="text" id="number"/>
  25. <input type="button" id="btn" value="Click" onclick="addItems();"/>
  26. <div id="div1">
  27. </div>
  28. </body>
  29. </html>

复制代码

　　jQuery插入元素的方法:

　　append(): 向每个匹配的元素内部追加内容.

　　appendTo(): 将所有匹配的元素追加到指定的元素中,即$(A).appendTo(B),是将A追加到B中.

　　prepend(): 向每个匹配的元素内部前置内容.

　　prependTo(): 将所有匹配的元素前置到指定的元素中,即$(A).prependTo(B),是将A前置到B中.

　　前面几个方法都是插入子元素,后面的这几个方法是插入兄弟元素.

　　after(): 在每个匹配的元素之后插入内容.

　　insertAfter(): 将所有匹配的元素插入到指定元素的后面.

　　before(): 在每个匹配的元素之前插入内容.

　　insertBefore(): 将所有匹配的元素插入到指定元素的前面.

　　jQuery支持方法链式的调用,即append()等方法返回的仍然是这个jQuery对象,后面可以继续调用append()方法.

　　下面我们将开始的那个例子用jQuery实现:

复制代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <script src="/jquery/jquery-1.11.1.min.js">
  5.     </script>
  6.     <script>
  8.         var addItems = function(){
  9.             var number = parseInt($("#number").val());
  10.             var div1 = $("#div1");
  12.             div1.html("");//clear div before append
  14.             var string = "";
  15.             for(var i = 0; i < number; ++i){
  16.                 string += "<input type='text'/><br/>"
  17.             }
  18.             div1.append(string);
  19.         }
  21.     </script>
  22. </head>
  23. <body>
  24. <input type="text" id="number"/>
  25. <input type="button" id="btn" value="Click" onclick="addItems();"/>
  26. <div id="div1">
  27. </div>
  28. </body>
  29. </html>

复制代码

　　插入已有节点->移动节点

　　除了可以插入新建的节点之外,还可以选择已有节点,插入到别的地方,以完成节点的移动操作.

　　注意这里是移动操作,即原来的节点会改变位置:

复制代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  9. $("ul li:eq(0)").appendTo("ul");
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <ul>
  16. <li title="li1">1</li>
  17. <li title="li2">2</li>
  18. <li title="li3">3</li>
  19. <li title="li4">4</li>
  20. <li title="li5">5</li>
  21. </ul>
  22. </body>
  23. </html>

复制代码

　　运行结果为:

161821076671573.png

删除节点

　　jQuery中删除节点的方法:

　　remove(): 移除所有匹配的元素.

　　empty(): 删除匹配的元素集合中所有内容,包括子节点.注意,元素本身没有被删除.

　　关于remove()方法,有几点需要说明一下:

　　1.remove()方法的返回值:

　　remove()方法会返回被删除节点的jQuery对象.可以把这个对象插入到其他的地方.

　　所以也可以用这种方法来移动节点:

复制代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  9. $("ul li:eq(0)").appendTo("ul");//move li method1
  11. //move method2:
  12. var removeLi = $("ul li:eq(0)").remove();//delete li
  13. removeLi.appendTo($("ul"));//add removed li
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <ul>
  21. <li title="li1">1</li>
  22. <li title="li2">2</li>
  23. <li title="li3">3</li>
  24. <li title="li4">4</li>
  25. <li title="li5">5</li>
  26. </ul>
  27. </body>
  28. </html>

复制代码

  1. 运行结果为:

161823406362672.png

　　注意直接写标签名(例如:appendTo(“ul”))和取jQuery对象(例如:appendTo($(“ul”)))的结果一样.

　　2.remove()方法的参数:

　　remove()方法默认情况下会删除选择器选中的所有元素.

　　比如下面的代码将删除所有

    下的
  • :

    1. //remove all li
    2. $("ul li").remove();

    　　remove()方法还可以接收参数,设置一些筛选条件,指定到底要删除其中的哪些节点.

    　　比如除了指定title的,其他全部移除:

    1. //remove some
    2. $("ul li").remove("li[title!='li2']");

    　　 empty()方法:删除匹配元素集合中的所有子节点,清空内容.但是元素本身还存在.

    　　比如:

    1. //empty children
    2. $("ul").empty();

    　　会删除

      中的所有子节点.

      　　而:

      1. //empty content
      2. $("ul li:eq(3)").empty();

      　　会得到这样的效果:

      161827087766227.png

      复制节点

      　　jQuery中复制节点的方法:

      　　clone(): 创建匹配元素集合的副本.

      　　clone()方法返回被复制的节点.

      　　看一个例子,每次点击

    • 都复制同样的元素并添加在
        末尾:

        复制代码

        1. <!DOCTYPE html>
        2. <html>
        3. <head>
        4. <script src="/jquery/jquery-1.11.1.min.js">
        5. </script>
        6. <script>
        7. $(document).ready(function(){
        8. $("ul > li").click(function(){
        9. $(this).clone().appendTo("ul");
        10. });
        11. });
        12. </script>
        13. </head>
        14. <body>
        15. <ul>
        16. <li title="li1">1</li>
        17. <li title="li2">2</li>
        18. <li title="li3">3</li>
        19. <li title="li4">4</li>
        20. <li title="li5">5</li>
        21. </ul>
        22. </body>
        23. </html>

        复制代码

        　　注意,clone出来的

      • 对象就没有click事件了,即点击复制添加出来的
      • ,不会再添加新的
      • .

        　　jQuery考虑到有时候会有需要clone所有的事件,所以clone方法可以带一个参数.

        　　clone(true): 复制节点,包括所有的事件处理.

        　　clone(false): 复制节点,但不包括事件处理.不带参数时默认是这种情况.

        替换节点

        　　jQuery中替换节点的方法:

        　　replaceAll(): 用指定的HTML内容或元素替换被选元素.

        　　语法: $(content).replaceAll(selector).

        　　replaceWith(): 用新内容替换所匹配到的元素.

        　　语法: $(selector).replaceWith(content).

        　　其中的content可以是HTML代码,可以是新元素,也可以是已经存在的元素.

        　　关于用已有元素替换:

        　　w3school的相关文档(http://www.w3school.com.cn/jquery/manipulation_replaceall.asp)中说:

        　　“已经存在的元素不会被移动,只会被复制.”这种说法是不正确的.

        　　实际做了实验之后,发现用已有元素替换,原来的元素是会被移除的:

        复制代码

        1. <html>
        2. <head>
        3. <script type="text/javascript" src="/jquery/jquery.js"></script>
        4. <script type="text/javascript">
        5. $(document).ready(function(){
        6. $("#button1").click(function(){
        7. alert("click event");
        8. $("#button1").replaceAll($("div"));
        10. });
        11. });
        12. </script>
        13. <style>
        14. div{
        15.      height:20px;background-color:yellow}
        16. </style>
        17. </head>
        18. <body>
        19. <p>
        20. This is paragraph:
        21. <div id="div1">This is a div 1</div>
        22. <div id="div2">This is a div 2</div>
        23. <p>
        24. This is button area:
        25. <br><button id="button1" class="btn1">Button1</button>
        28. </body>
        29. </html>

        复制代码

        　　页面初始状态:

        190844531414832.png

        　　点击按钮之后:

        190845142979962.png

        　　点击新得到的两个Button1,是可以弹出alert的,说明替换节点的时候连同节点事件一起放到了新的地方.

        　　查看官方文档:

        　　replaceAll(): http://api.jquery.com/replaceAll/

        　　replaceWith(): http://api.jquery.com/replaceWith/

        　　可以看到使用已有节点是不会复制该节点的,而是会移动该节点到新的地方.

        包裹节点

        　　包裹节点,意思是把匹配的元素用指定的内容或者元素包裹起来,即增加一个父元素.

        　　方法有:

        　　wrap(): 把匹配的元素用指定的内容或元素包裹起来.

        　　wrapAll(): 把所有匹配的元素用指定的内容或元素包裹起来,这里会将所有匹配的元素移动到一起,合成一组,只包裹一个parent.

        　　wrapInner(): 将每一个匹配元素的内容用指定的内容或元素包裹起来.

        　　例子代码:

        复制代码

        1. <html>
        2. <head>
        3. <script type="text/javascript" src="/jquery/jquery.js"></script>
        4. <script type="text/javascript">
        5. $(document).ready(function(){
        6. $("#button1").click(function(){
        7. $("#div1").wrap("<a href='www.google.com'>Google Wrap div1</a>");
        8. });
        9. $("#button2").click(function(){
        10. $("div").wrapAll("<a href='www.baidu.com'>Baidu Wrap all div</a>");
        11. });
        12. $("#button3").click(function(){
        13. $("div").wrapInner("<a href='www.sogou.com'>Sogou Wrap inner div</a>");
        14. });
        15. });
        16. </script>
        17. <style>
        18. div{
        19.      height:20px;background-color:yellow}
        20. </style>
        21. </head>
        22. <body>
        23. div1:<br/><div id="div1">This is a div 1</div>
        24. div2:<br/><div id="div2">This is a div 2</div>
        25. div3:<br/><div id="div3">This is a div 3</div>
        26. This is button area:
        27. <br/><button id="button1">Wrap</button>
        28. <br/><button id="button2">Wrap All</button>
        29. <br/><button id="button3">Wrap Inner</button>
        30. </body>
        31. </html>

        复制代码

        　

        　　 页面初始状态:

        190847098917876.png

        　　按第一个按钮,wrap特定的一个div:

        190848134064580.png190848500942623.png

        　　

        　　在按了第一个按钮之后,按第二个按钮,wrapAll将所有的div包裹进一个group:

        190849282035964.png190849372972244.png

        　　按了第一个按钮和第二个按钮之后,按第三个按钮,wrapInner,在每一个div内部添加一层嵌套:

        190850008911318.png 190850098604624.png

        相关杂项知识

        　　1.关于变量命名的一点题外话:

        　　变量命名习惯(不是标准):

        　　var $v jQuery对象变量以$符号开头命名.

        　　var v 普通HTML DOM对象变量.

        　　但是个人觉得初学者用这样的命名可能会有点混乱,会比较难以区分什么时候是命名,什么时候是jQuery操作符.

        　　所以目前的例子里先不这样用.

        　　2.小知识: 在HTML标签的字符串前面加上$符号即可将其转换为jQuery对象,比如:

        　　var child = $(“
        “);

        　　3.从第一个例子可以看出,JavaScript操纵DOM元素的方法和jQuery的相关方法名称区别如下:

        　　JavaScript: appendChild(), removeChild().

        　　jQuery: append(), remove(). 不过这个remove()移除的是自身.

        参考资料

        其他精彩文章

        jQuery教程(29)-jQuery插件开发之为插件方法指定参数

        jQuery教程(28)-jQuery插件开发之使用插件

        jQuery教程(27)-jQueryajax操作之修改默认选项

        jQuery教程(26)-ajax操作之使用JSONP加载远程数据

        jQuery教程(25)-ajax操作之安全限制

        更多关于android开发文章

发表评论

表情：
评论列表 （有 0 条评论，376人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jquery 操作DOM

    操作属性 -------------------- 通过attr可以获取标签的属性值， 还可以设置属性值， 和css()类似. 测试代码如下 <div c

    亦凉亦凉/ 0 赞/ 386 阅读

    相关 jQuery操作DOM元素

    作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。 实现上述两个功能当然可以使用原生js来完成，但在实际开

    男娘i男娘i/ 0 赞/ 409 阅读