[Web 前端] 029 jQuery 元素的“节操”

目录

jQuery 元素的节点操作

  • 记下方代码为 code1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <script src="./jquery-1.8.3.min.js"></script>
    <style>
        *{margin:0;padding:0}
        .wrap{
            width: 800px;
            height: 600px;
            border: 1px solid red;
        }
        .item{
            width: 100px;
            height: 100px;
            background: blue;
            border-radius: 50%;
            float: left;
        }
    </style>
</head>
<body>
    <button>在元素内部之末插入元素</button>
    <button>在元素内部之首插入元素</button>
    <button>在元素外部之末插入元素</button>
    <button>在元素外部之首插入元素</button>
    <button>删除节点</button>
    <button>清空</button>
    <button>克隆</button>
    <button>注意</button>
    <div class="wrap"></div>
    <script>
        // ...... (1)
    </script>
</body>
</html>

1. 创建节点

  • code1 的 (1) 处加入如下代码
var oDiv = $('<div>这是一个div元素</div>');

2. 插入节点

  • 同“创建节点”一样,“插入节点”的代码均写在 code1 的 (1) 处,且在“创建节点”的代码下面
  • 先写两个会用到的函数,不妨写在 code1 的 (1) 处的末尾
// 1. 定义随机数函数
function rund(m, n){
    return Math.floor(Math.random() * (n-m+1)) + m;
}

// 2. 定义创建新元素的函数
function creatDiv(){
    oDiv = $('<div class="item"></div>');
    oDiv.css('background', 'rgb('+rund(0,255)+','+rund(0,255)+','+rund(0,255)+')');
}

2.1 在现存元素的内部,从后面插入元素

2.1.1 方法一:append()

$('button').eq(0).click(function(){
    creatDiv();                                     // 调用创建新元素的函数
    $('.wrap').append(oDiv);                        // 在 wrap 内部之末插入 oDiv
});

2.1.2 方法二:appendTo()

$('button').eq(0).click(function(){
    creatDiv();
    oDiv.appendTo($('.wrap'));                      // 将 oDiv 插入到 wrap 内部之末
});

2.2 在现存元素的内部,从前面插入元素

2.2.1 方法一:prepend()

$('button').eq(1).click(function(){
    creatDiv();
    $('.wrap').prepend(oDiv);                       // 在 wrap 内部之首插入 oDiv
});

2.2.2 方法二:prependTo()

$('button').eq(1).click(function(){
    creatDiv();
    oDiv.prependTo($('.wrap'));                     // 将 oDiv 插入到 wrap 内部之末
});

2.3 在现存元素的外部,从后面插入元素

2.3.1 方法一:after()

$('button').eq(2).click(function(){
    creatDiv();
    $('.wrap').after(oDiv);                         // 在 wrap 外部之末插入 oDiv
});

2.3.2 方法二:insertAfter()

$('button').eq(2).click(function(){
    creatDiv();
    oDiv.insertAfter($('.wrap'));                   // 将 oDiv 插入到 wrap 外部之末
});

2.4 在现存元素的外部,从前面插入元素

2.4.1 方法一:before()

$('button').eq(3).click(function(){
    creatDiv();
    $('.wrap').before(oDiv);                        // 在 wrap 外部之首插入 oDiv
});

2.4.2 方法二:insertBefore()

$('button').eq(3).click(function(){
    creatDiv();
    oDiv.insertBefore($('.wrap'));                  // 将 oDiv 插入到 wrap 外部之首
});

3. 删除节点与清空节点

3.1 删除节点

$('button').eq(4).click(function(){
    $('.wrap').remove();                            // 删除元素,可以删除自己
    // $('body').remove();                              // 使用 body 标签也行
});         

3.2 清空节点

$('button').eq(5).click(function(){
    $('.wrap').empty();                             // 清空元素,不删除自己
});

4. 克隆节点

  • 如果单纯的只是为了克隆元素,那么里面不需要传参数
  • 如果需要连同元素身上的事件一起克隆,那就在括号中写 true
$('button').eq(6).click(function(){
    // var newBtn = $('button').eq(6).clone();          // 注意 true 填与不填的区别
    var newBtn = $('button').eq(6).clone(true);
    $('.wrap').before(newBtn);                      // 将克隆的元素插入到 wrap 外部的前面
});

5. 注意事项

  • 插入元素的时候,要先进行克隆,再进行插入操作,不然相当于对原来的元素作“剪切”+“粘贴”
$('button').eq(7).click(function(){
    $('.wrap').append($('button').eq(0));           // 将第一个按钮添加到 wrap 中
    // $('.wrap').append($('button').eq(0).clone());   // 先克隆,再插入
});
上一篇:使用Haproxy+lua代理Mongodb副本集


下一篇:剑指offer刷题