jQuery笔记五——节点相关方法

文章目录

  • 添加节点相关方法
  • 删除节点相关方法
  • 替换节点相关方法
  • 复制节点相关方法

添加节点相关方法


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加节点相关方法title>
    <script src="js/jquery-1.12.4.js">script>
    <script>
        $(function() {
            $("button").click(function() {
                // 创建一个节点
                var $li = $("
  • 新增的li
  • "
    ) // 添加节点 // $("ul").append($li);//会将元素添加到指定元素内部的最后 // $("ul").prepend($li);//会将元素添加到指定元素内部的最前 // $li.appendTo("ul");//会将元素添加到指定元素内部的最后 // $li.prependTo("ul"); //会将元素添加到指定元素内部的最前 // $("ul").after($li);//会将元素添加到指定元素外部的后面 // $("ul").before($li);//会将元素添加到指定元素外部的前面 // $li.insertAfter("ul");//会将元素添加到指定元素外部的后面 // $li.insertBefore("ul")//会将元素添加到指定元素外部的前面 }); });
    script> head> <body> <button>添加button> <ul> <li>我是第1个lili> <li>我是第2个lili> <li>我是第3个lili> ul> body> html>
    • 内部:添加到指定元素内部最后:$("ul").append($li);,添加到指定元素内部最前:$("ul").prepend($li);
    • 外部:添加到指定元素外部的后面:$("ul").after($li);,添加到指定元素外部的前面:$("ul").before($li);

    删除节点相关方法

    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>删除节点相关方法title>
        <script src="js/jquery-1.12.4.js">script>
        <script>
            $(function() {
                $("button").click(function() {
                    // $("div").remove();//删除指定元素
                    // $("div").empty();//删除指定元素的内容和子元素
                    // $("li").detach(".item");//与remove类似
                });
            });
        script>
    head>
    
    <body>
        <button>删除节点button>
        <ul>
            <li class="item">我是第1个lili>
            <li>我是第2个lili>
            <li class="item">我是第3个lili>
            <li>我是第4个lili>
            <li class="item">我是第5个lili>
        ul>
        <div>我是div
            <p>我是段落p>
        div>
    body>
    
    html>
    
    • remove():删除指定元素。
    • empty():删除指定元素的内容和子元素。

    替换节点相关方法

    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>替换节点相关方法title>
        <script src="js/jquery-1.12.4.js">script>
        <script>
            $(function() {
    
                $("button").click(function() {
                    // 新建元素
                    var $h6 = $("
    我是标题6
    "
    ); // 替换元素 // $("h1").replaceWith($h6);//替换所有匹配的元素为指定的元素 $h6.replaceAll("h1");//替换所有匹配的元素为指定的元素 }); });
    script> head> <body> <button>替换节点button> <h1>我是标题1h1> <h1>我是标题1h1> <p>我是段落p> body> html>
    • $("h1").replaceWith($h6);$h6.replaceAll("h1");:替换所有匹配的元素为指定的元素。

    复制节点相关方法

    
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>复制节点相关方法title>
        <script src="js/jquery-1.12.4.js">script>
        <script>
            $(function() {
                $("button").eq(0).click(function() {
                    // 浅复制一个元素
                    var $li = $("li:first").clone(false);
                    // 将复制的元素添加到ul中
                    $("ul").append($li);
                });
                $("button").eq(1).click(function() {
                    // 深复制一个元素
                    var $li = $("li:first").clone(true);
                    // 将复制的元素添加到ul中
                    $("ul").append($li);
                });
                $("li").click(function() {
                    alert("hello");
                });
            });
        script>
    head>
    
    <body>
        <button>浅复制节点button>
        <button>深复制节点button>
        <ul>
            <li>我是第1个lili>
            <li>我是第2个lili>
            <li>我是第3个lili>
            <li>我是第4个lili>
            <li>我是第5个lili>
        ul>
    body>
    
    html>
    
    • clone(flase)浅复制,只会复制元素,不会复制元素的事件。
    • clone(true)深复制,会复制元素的事件。

    jQuery笔记五——节点相关方法_第1张图片

    你可能感兴趣的:(jQuery)