jquery中的DOM操作 | 易学教程

内部插入

可用于动态生成标签，插入的内容是标签会被解析
追加到尾部

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery.js"></script>
</head>
<body>
<input type="button" id="btn" value="点击追加内容">
<p id="content">你好!</p>

<script>
  $('#btn').click(function () {
      $('#content').append('hello');  //append方法会在元素的结尾添加指定的内容（内部）
  });
</script>
</body>
</html>

appendTo ：把一个元素追加到另一个元素的尾部。变成它的子元素

<body>
<input type="button" id="btn" value="点击追加内容">
<div id="d">我爱你</div>
<p id="content">你好!</p>

<script>
  $('#btn').click(function () {
      $('#d').appendTo('#content');
  });
</script>
</body>

点击后的效果为

<p>
 <div>
 </div>
</p>

prepend（）
向选中元素的头部添加内容

prependTo()
把一个元素追加到另一个元素的头部。变成它的子元素

外部插入

after（）
在指定元素的后面添加内容（在闭合标签的外面）
例如：

<div id="d">我爱你</div>

使用after方法添加后的效果是：

<div id="d">我爱你</div> 添加的内容（在标签的外部）

before()
在指定元素的前面添加内容（在闭合标签的外面）
insertAfter()
把匹配的元素插入到另一个，指定的元素后面
insertBefore()
把匹配的元素插入到另一个，指定的元素前面

删除内容或节点
empty（）方法，删除节点内容，节点还存在。

<body>
<ul id="num">
    <li id="del">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
  $('#num').empty();   
</script>
</body>

remove（）方法，删除节点。（删除后，节点不存在）
remove方法可以传参数

 $('li').remove('#del');

复制（克隆）
clone()
克隆匹配的DOM元素，有一个参数true或者false，指示事件处理函数是否被复制。
克隆出来的元素存在于内存中，直接是看不见的，需要使用类似appendTo添加到指定位置。

替换

replaceWith()
将所有匹配的元素替换成指定的HTML或DOM元素

$("#btn").replaceWith('<li>替换的内容</li>');;

html()
可以获取元素的内容，也可以改变元素的内容

包裹
wrap
将选中的元素指定的标签包裹起来

<body>
<ul id="num">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
  $('#num').wrap('<div></div>');
</script>

unwrap
移除选中元素的父元素
wrapAll
把匹配到的所有元素包裹到一个元素里面，给他们加上一个父节点。
wrapInner
将选定元素的子节点或者里面的内容使用指定的元素包裹起来。

查找
JQ中除了提供类似于
$('#num li:eq(0)');这样的选择器来选择外，还提供了对应的方法名使用

ul id="num">
    <li id="li">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
  $('#num li').eq(1).html('肺炎') ; 这个索引可以从别处传过来。实现给指定元素添加属性的功能
</script>

来源：CSDN

作者：qq_857305819

链接：https://blog.csdn.net/qq_41490873/article/details/104079271

标签

jquery选择器

dom

jquery