jQuery 节点操作

最新推荐文章于 2023-07-07 19:51:56 发布

Boss.陈

最新推荐文章于 2023-07-07 19:51:56 发布

阅读量210

点赞数 1

分类专栏： jQuery节点操作文章标签： jQuery节点操作

本文链接：https://blog.csdn.net/Boss_Chen0502/article/details/90344432

版权

jQuery节点操作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery 节点操作

1.动态创建元素

// $()函数的另外一个作用：动态创建元素
var $spanNode = $(“<span>我是一个span元素</span>”);
var node = $(“#box”).html（“<li>我是li</li>”）；

2.添加元素
在元素的最后一个子元素后面追加元素：
append()（重点）
作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）
如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。
如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。
常用参数：htmlString 或者 jQuery对象
不常用操作：（用法跟append()方法基本一致）
1.appendTo()
作用：同append()，区别是：把$(selector)追加到node中去
$(selector).appendTo(node);

2.prepend()
作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);

3.after()
作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);

4.before()
作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);
3.html创建元素
作用：设置或返回所选元素的html内容（包括 HTML 标记）
设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同

// 动态创建元素
$(selector).html(‘<span>***</span>’);
// 获取html内容
$(selector).html();

4.清空元素

// 清空指定元素的所有子元素（光杆司令）
// 没有参数
$(selector).empty();
$(selector).html(“”);
// “自杀” 把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();

5.复制元素

// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();

作者做了个小小的案例让大家看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select{
            width: 170px;
            height: 200px;
            font-size: 15px;
            background-color: skyblue;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<select name="" id="sel1" multiple>
    <option value="0">苹果</option>
    <option value="1">香蕉</option>
    <option value="2">芒果</option>
    <option value="3">菠萝</option>
</select>
<button>>>></button>
<button><<<</button>
<button>></button>
<button><</button>
<select name="" id="sel2" multiple>

</select>

<script>
    $(function () {
        $("button").eq(0).click(function () {
            $("#sel2").append($("#sel1 option"))
        });
        $("button").eq(1).click(function () {
            $("#sel1").append($("#sel2 option"))
        });
        $("button").eq(2).click(function () {
            $("#sel2").append($("#sel1 option:selected"))
        });
        $("button").eq(3).click(function () {
            $("#sel1").append($("#sel2 option:selected"))
        });
    })
</script>
</body>
</html>

效果展示
在这里插入图片描述

Boss.陈

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 节点操作

jQuery 节点操作1.动态创建元素// $()函数的另外一个作用：动态创建元素var $spanNode = $(“<span>我是一个span元素</span>”);var node = $(“#box”).html（“<li>我是li</li>”）；2.添加元素在元素的最后一个子元素后面追加元素：append()（重点）作用...
复制链接

扫一扫

专栏目录