jquery 将元素排到最后_jQuery 节点操作

最新推荐文章于 2022-09-13 14:08:17 发布

Solarex

最新推荐文章于 2022-09-13 14:08:17 发布

阅读量369

点赞数

文章标签： jquery 将元素排到最后

本文链接：https://blog.csdn.net/weixin_29035405/article/details/113537612

版权

好好学习，天天向上

本章主要内容是：创建元素、删除元素、清空元素、克隆元素

1、创建元素

语法 $('<li></li>')

追加元素 1

向父元素最后追加
- 语法：父元素jQuery对象.append(新创建的jQuery对象);
- 语法：新创建jQuery对象.appendTo('父元素选择器' 或父元素jQuery对象);

// 创建新的元素
var $newLi = $('<li>这是创建的标签</li>');
// 获取 ul 元素
var $ul = $("ul");
// $ul.append($newLi);
// $newLi.appendTo($ul);
$newLi.appendTo("ul");

向父元素最前面追加
- 语法：父元素jQuery对象.prepend(新创建的jQuery对象);
- 语法：新创建jQuery对象.prependTo('父元素选择器' 或父元素jQuery对象);

// $ul.prepend($newLi);
// $newLi.prependTo($ul);
$newLi.prependTo("ul");

追加元素 2

向元素后面追加新的兄弟
- 语法：jQuery对象.after(新创建的jQuery对象);
- 语法：新创建jQuery对象.insertAfter('选择器' 或 jQuery对象);

<ul>
    <li>这是原有的标签</li>
    <li class="old">这是原有的标签</li>
    <li>这是原有的标签</li>
    <li>这是原有的标签</li>
</ul>

// $oldLi.after($newLi);
// $newLi.insertAfter($oldLi);
$newLi.insertAfter(".old");

向元素前面追加新的兄弟
- 语法：jQuery对象.before(新创建的jQuery对象);
- 语法：新创建jQuery对象.insertBefore('选择器' 或 jQuery对象);

// $oldLi.before($newLi);
// $newLi.insertBefore($oldLi);
$newLi.insertBefore(".old");

2、删除元素

语法：jQuery对象.remove();
删除谁就让谁调用这个方法

<ul>
    <li>这是第 1 个标签</li>
    <li>这是第 2 个标签</li>
    <li class="third">这是第 3 个标签</li>
    <li>这是第 4 个标签</li>
    <li>这是第 5 个标签</li>
  </ul>

$(".third").remove();

3、清空元素

<div class="box">
  <p>段落</p>
  <h2>标题</h2>
</div>
<ul>
  <li>这是第 1 个标签</li>
  <li>这是第 2 个标签</li>
  <li class="third">这是第 3 个标签</li>
  <li>这是第 4 个标签</li>
  <li>这是第 5 个标签</li>
</ul>

清空方式1：jQuery对象.empty(); 推荐使用，清空内部的所有元素及元素相关的事件

$(".box").empty();

清空方式2：jQuery对象.html(''); 仅仅清空内部的元素，不清清理内存中的元素的事件

$(".box").html("");

4、克隆元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 20px;
        }
        .demo {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>标题1</h2>
        <p>段落1</p>
    </div>
    <div class="demo">
        <h2>标题2</h2>
        <p>段落2</p>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(".box").click(function(){
            alert("你好");
        });
    </script>
</body>
</html>

语法：jQuery对象.clone(布尔值); 返回克隆好的元素
参数：
- 默认是false,表示仅仅克隆内容

// 获取 box 元素
var $box = $(".box");
// 克隆 box
var $newBox = $box.clone(false); //只克隆内容，不克隆事件
// 添加到 body 最后
$("body").append($newBox);

- true，克隆内容和事件

var $newBox = $box.clone(true); //克隆内容，克隆事件

Solarex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 将元素排到最后_jQuery 节点操作

好好学习，天天向上本章主要内容是：创建元素、删除元素、清空元素、克隆元素1、创建元素语法 $('<li></li>')追加元素 1向父元素最后追加语法：父元素jQuery对象.append(新创建的jQuery对象); 语法：新创建jQuery对象.appendTo('父元素选择器' 或父元素jQuery对象); // 创建新的元素var $newLi = $('&l...
复制链接

扫一扫