JQuery中的DOM操作（2）

最新推荐文章于 2022-03-18 18:18:27 发布

木易一

最新推荐文章于 2022-03-18 18:18:27 发布

阅读量289

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_43684713/article/details/90485308

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

八、JQuery创建DOM元素

js中创建DOM元素的方式有两种，为

document.createElement(); //object appendchild方式

var str=""; //innerHTML方式

在JQuery中，结合了js的两种方式，

函数$( )用于动态创建页面元素，语法格式为$(html)，其中参数html表示用于动态创建DOM元素的HTML标记字符串，例如：

要在页面动态创建一个标签并设置其内容，代码可以为

var str=$("小猫吃鱼");

创建完成，追加给父级节点，分为内部插入节点和外部插入节点两种方法。

九、插入节点

内部插入节点：

语法格式	参数说明	功能描述
append（content）	content表示追加到目标中的内容	向所选择的元素内部插入内容
append（function（index，html））	通过function函数返回追加到目标中的内容	向所选择的元素内部插入function函数所返回的内容
appendTo(content)	content表示被追加的内容	把所选择的元素追加到另一个指定的元素集合中
prepend(content)	content表示插入目标元素内部前面的内容	向每个所选择的元素内部前置内容
prepend(function(index,html))	通过function函数返回插入目标元素前面的内容	向所选择的元素内部前置function函数所返回的内容
prependTo(content)	content表示用于选择元素的JQuery表达式	将所选择的元素前置到另一个指定的元素集合中

上面方法的示例如下代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <style>
        .block{
            width: 200px;
            height: 100px;
            background-color: #45baff;
        }
    </style>
</head>
<body>
<div class="block">小猫抓老鼠</div>
<div class="block1">
    <p>1</p>
</div>
<div class="block1">
    <p>2</p>
</div>
<div class="block1">
    <p>3</p>
</div>
<script>
    var str=$("<span>小猫吃鱼</span>");
    //创建完成，追加span给block
//    $(".block").append(str);//追加到所选择元素的内容之后
    str.appendTo($(".block"));//追加到所选择元素的内容之后
    //上面两行代码的作用相同，使用的方法不同

    var sty=$("<span>小猫吃肉肉</span>");
    $(".block").prepend(sty);//追加到所选择元素的内容之前
//    sty.prependTo($(".block"));//追加到所选择元素的内容之前
    //上面两行代码的作用相同，使用的方法不同
    
    //function函数的示例
    $(".block1").append(function(index,html){
        console.log($(".block1").eq(index));//当前对象  输出为集合
        //创建dom对象
        var st=html;//将html里原本的值给st
        $(this).html("");//将原来的<p>清空
        var s=$("<span>"+st+"</span>");//定义s为<span>包裹<p>
        return s;
    });
</script>
</body>
</html>

上面代码的运行结果：

外部插入节点：

语法格式	参数说明	功能描述
after(content)	content表示插入目标元素外部后面的内容	向所选择的元素外部后面插入内容
after（function）	通过function函数返回插入目标外部后面的内容	向所选择的元素外部后面插入function函数所返回的内容
before(content)	content表示插入目标外部前面的内容	向所选择的元素外部前面插入内容
before（function）	通过function函数返回插入目标外部前面的内容	向所选择的元素外部前面插入function函数所返回的内容
insertAfter（content）	content表示插入目标元素外部后面的内容	将所选择的元素插入另一个指定的元素外部后面
insertBefore（content）	content表示插入目标元素外部前面的内容	将所选择的元素插入另一个指定的元素外部前面

示例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
    //外部插入节点
    var msg=$("<p>啦啦啦啦</p>");
    var msd=$("<p>哈哈哈哈</p>");
    $("#btn").after(msg);//在当前元素外面且后面追加
    $("#btn").before(msd);//在当前元素外面且前面追加
</script>
</body>
</html>

运行结果：

示例二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
    //外部插入节点
    var asd=$("<p>哇哇哇哇</p>");
    var asc=$("<p>嘻嘻嘻嘻</p>");
    asd.insertAfter($("#btn"));//在当前元素外面且后面追加
    asc.insertBefore($("#btn"));//在当前元素外面且前面追加
</script>
</body>
</html>

运行结果：

十、复制节点

在js中，复制元素比较复杂，在JQuery中可以通过clone( )方法实现，语法格式为clone( );

其功能为复制匹配的DOM元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将元素的全部行为进行复制，可以通过方法clone(true)实现。

clone( ) 默认参数为false 只是复制元素 ,参数为true 为深度克隆包括复制事件等

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
        $("#btn").click(function(){
            alert("hello");
        });
        var clonebtn=$("#btn").clone(false);//仅复制元素，即点击新的按钮不会弹出窗口
        $("body").append(clonebtn);
        var clonebtn2=$("#btn").clone(true);//连同元素的行为一起复制，点击新的按钮会弹出窗口
        $("body").append(clonebtn2);
</script>
</body>
</html>

十一、替换节点

在jQuery中，替换节点可以使用replaceWith()和replaceAll()这两种方法，其语法格式如下：

replaceWith(content) ，该方法是将所有选择的元素替换成指定的HTML或DOM元素，参数content为被所选择元素替换的内容

replaceAll(selector) ，该方法将所有所有选择的元素替换成指定selector的元素，参数selector为需要被替换的元素

案例：

效果图：

代码：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            width: 720px;
            margin: 0 auto;
            border: 1px solid black;
        }
        .list{
            line-height: 40px;
            border-bottom: 1px dashed silver;
            overflow: hidden;
        }
        .list>span{
            width: 120px;
            display: block;
            float: left;
            text-align: center;
        }
        button{
            width: 120px;
            border-style: none;
            background-color: transparent;
            cursor: pointer;
            color: #0000f8;
            outline: none;

        }
        .ipt{
            width: 120px;
            height: 40px;
            font-size: 16px;
            float: left;
            box-sizing: border-box;
            text-align: center;
            outline: none;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
    <div class="list">
        <span>张三</span>
        <span>20</span>
        <span>男</span>
        <span>110</span>
        <span>西安</span>
        <button>修改</button>
    </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $("button").each(function(index){
        $(this).prop("data-use",true);
        $(this).click(function(){
            if($(this).prop("data-use")==true){
                $(this).html("确定");
                $(".list").eq(index).find("span").each(function(){
                    var ipt=$("<input class='ipt' value='"+$(this).html()+"'>");
                    $(this).replaceWith(ipt);
                });
                $(this).prop("data-use",false);
            }
            else{
                $(this).html("修改");
                $(".list").eq(index).find("input").each(function(){
                    var ipt=$("<span>"+$(this).val()+"</span>");
                    $(this).replaceWith(ipt);
                });
                $(this).prop("data-use",true);
            }
        })
    });
</script>

</body>
</html>

十二、包裹节点

语法格式	参数说明	功能描述
wrap(html)	html为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用其他字符串代码包裹起来
wrap(elem)	elem参数用于包裹所选元素的DOM元素	把所有选择的元素用其他DOM元素包裹起来
wrap(fn)	fn参数为包裹结构的一个函数	把所有选择的元素用function函数返回的代码包裹起来
unwrap()	无参数	移除所选元素的父元素或包裹标记
wrapAll(html)	html为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素用单个元素包裹起来
wrapAll(elem)	elem参数用于包裹所选元素的DOM元素	把所有选择的元素用单个DOM元素包裹起来
wrapInner(html)	html为字符串代码，用于生成元素并包裹所选元素	把所有选择的元素的子内容（包括文本节点）用字符串代码包裹起来
wrapInner(elem)	elem参数用于包裹所选元素的DOM元素	把所有选择的元素的子内容（包括文本节点）用DOM元素包裹起来
wrapInner(fn)	fn参数为包裹结构的一个函数	把所有选择的元素的子内容（包括文本节点）用function函数返回的代码包裹起来

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    var  s=$("<span></span>");
    //wrap 用元素（对象或者字符串）包裹被选择元素  包的是一个元素
    $("#btn").wrap("<span></span>");//<span>包裹<button>
    //wrapAll 用元素（对象或者字符串）包裹被选择元素  包的是一个元素或者多个元素
    $(".btn").wrapAll("<span></span>");<span>包裹3个<button>
    //移除被包裹元素的父级元素或者包裹标记  unwrap()
    $(".btn").unwrap();
    //    $(".btn").wrapInner(s);//用包裹元素包裹被选择元素的子元素  span包裹文本
</script>
</body>
</html>

十三、元素的遍历

使用each()方法实现元素遍历

关于each()方法的使用如下代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    //元素的遍历  each
    $(".btn").each(function(index){
        $(this).click(function(){
            console.log(index)
        })
    });//遍历所有类名称为btn的元素，当点=点击它们时，输出自己的索引

    //在each 里面return false 提前终止遍历
        $(".btn").each(function(index){
            $(this).click(function(){
                console.log(index);
                if(index==2){
                    return false
                }
                console.log("你好")
            })
        });//当点击索引为2的btn元素时，不会输出你好
</script>

</body>
</html>

木易一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery中的DOM操作（2）

八、JQuery创建DOM元素js中创建DOM元素的方式有两种，为document.createElement(); //object appendchild方式var str=""; //innerHTML方式在JQuery中，结合了js的两种方式，函数$( )用于动态创建页面元素，语法格式为$(html)，其...
复制链接

扫一扫

专栏目录