jQuery中的DOM操作（一）

最新推荐文章于 2024-07-05 14:21:58 发布

liujing_555

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量615

点赞数 1

分类专栏： jQuery自学自讲

本文链接：https://blog.csdn.net/liujing_555/article/details/54834793

版权

jQuery自学自讲专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery中的DOM操作（一）
1、插入节点的方法：

append() : 向每个匹配的元素内部追加内容;
appendTo() : 将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中;
prepend() : 向每个匹配的元素内部前置内容;
prependTo() : 将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中;
after() : 在每个匹配的元素之后插入内容;
insertAfter() : 将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面；
before() : 在每个匹配的元素之前插入内容；
insertBefore() : 将所有匹配的元素插入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面。

2、删除节点：

1). remove()方法：
从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素；当某个节点用remove方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个纸箱已被删除的节点的引用，因此可以在以后再使用这些元素。Remove（）方法可以通过传递参数来选择性地删除元素。如remove（“li[tittle!=haha]”）；
2). detach()方法：
这个方法不会把匹配的元素从jQuery对象中删除，因为可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
3). empty()方法：
不是删除节点，而是清空节点，他能清空元素中的所有后代节点。

3、复制节点
clone()方法，复制节点后，被复制的新元素本应并不具有任何行为，但如果clone（）方法中传递一个参数true，其含义为复制元素的同时复制元素所绑定的事件。

<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>

4、替换节点

replaceWith()方法，将所有匹配的元素都替换成指定的HTML或DOM元素。

 $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");

replaceAll()方法，作用同replaceWith()方法，只是颠倒了replaceWith()操作

 $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");

【注意】如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

5、包裹节点

wrap():把某个节点包裹起来；

 $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来

wrapAll()：将所有匹配的元素用一个元素包裹起来；
【注意】如果被包裹的多个元素间有其他元素，其他元素会被放到包裹元素之后

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
      $("strong").wrapAll("<b></b>");
  });
  </script>

</head>
<body>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <div>中间的元素</div>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <ul>
      <li title='苹果'>苹果</li>
      <li title='橘子'>橘子</li>
      <li title='菠萝'>菠萝</li>
    </ul>

</body>
</html>

wraplnner()：将每一个匹配元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

6、属性操作

获取属性和设置属性
attr(“属性名称”)；
attr(“属性名称”,”属性值”)；
attr({“tittle”:”your tittle”,”name”:”test”});[为同一元素设置多个属性]
【注意】jQuery中很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，技能设置元素属性，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()、css()等方法。
列表内容
removeAttr(“属性名称”);
【注意】jQuery1.6中新增了prop()和removeProp()，分别用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性。

liujing_555

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的DOM操作（一）

1、插入节点的方法：append() : 向每个匹配的元素内部追加内容; appendTo() : 将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中;prepend() : 向每个匹配的元素内部前置内容;prependTo() : 将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规
复制链接

扫一扫

专栏目录