Python Day60 jQuery3，,一、文档操作（一）插

文章由Byrx.net分享于2021-06-25 06:06:07评论（377）

Python Day60 jQuery3，,一、文档操作（一）插


一、文档操作

（一）插入儿子元素

1、添加到指定元素内部的后面

　　$(A).append(B)：B作为A的最后一个儿子元素；$(A).appendTo(B)：A作为B最后一个儿子元素。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：

技术分享图片
<body><ul>    <li>111</li>    <li class="c1">222</li>    <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script>    $(".c1").append("<p>ppp</p>");                           //加到.c1里面最后    $(".c1").append($("<p>ppp</p>"));    $("<p>ddd</p>").appendTo("ul");                          //加到ul里面最后    $("<p>ddd</p>").appendTo($("ul"))</script></body>
技术分享图片

2、添加指定元素内部的前面

　　$(A).prepend(B)：B作为A的第一个儿子元素；$(A).prependTo(B)：A作为B第一个儿子元素。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：

技术分享图片
<body><ul>    <li>111</li>    <li class="c1">222</li>    <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script>    $(".c1").prepend("<p>ppp</p>");                         //加到.c1里面最前面    $(".c1").prepend($("<p>ppp</p>"));    $("<p>ddd</p>").prependTo("ul");                        //加到ul里面最前面    $("<p>ddd</p>").prependTo($("ul"))</script></body>
技术分享图片

（二）插入兄弟元素

1、添加到指定元素外部的后面

　　$(A).after(B)：B作为兄弟元素紧挨A元素后面；$(A).insertAfter(B)：A作为兄弟元素紧挨B元素后面。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：

技术分享图片
<body><ul>    <li>111</li>    <li class="c1">222</li>    <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script>    $(".c1").after("<p>ppp</p>");                        //<p>作为兄弟元素紧挨.c1后面    $(".c1").after($("<p>ppp</p>"));    $("<p>ddd</p>").insertAfter("ul");                   //<p>作为兄弟元素紧挨ul后面    $("<p>ddd</p>").insertAfter($("ul"))</script></body>
技术分享图片

2、添加到指定元素外部的前面

　　$(A).before(B)：B作为兄弟元素紧挨A元素前面；$(A).insertBefore(B)：A作为兄弟元素紧挨B元素前面。以上两种A必须为jQuery对象，而B既可以是DOM对象，又可以是jQuery对象，应用实例如下：

技术分享图片
<body><ul>    <li>111</li>    <li class="c1">222</li>    <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script>    $(".c1").before("<p>ppp1</p>");                            //p作为兄弟元素紧挨.c1元素前面    $(".c1").before($("<p>ppp2</p>"));    $("<p>ddd1</p>").insertBefore("ul");                       //p作为兄弟元素紧挨ul元素前面    $("<p>ddd2</p>").insertBefore($("ul"))</script></body>
技术分享图片

（三）移除和清空元素

　　remove（）：从DOM中删除所有匹配的元素；empty()：删除匹配的元素集合中所有的子节点。

技术分享图片
<body><ul>    <li class="c1">111</li>    <li class="c1">222</li>    <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script>    $(".c1").remove();                                        //将所有的.c1元素删除    $("ul").empty()                                           //将ul下的所有子节点清空</script></body>
技术分享图片

（四）替换

　　$(A).replaceWith(B)：A被B替换；$(A).replaceAll(B)：A替换所有的B，应用实例：

技术分享图片
<body><ul>    <li class="c1">111</li>    <li class="c1">222</li>    <li>333</li></ul><script src="jquery-3.2.1.min.js"></script><script>    $(".c1").replaceWith("<p>hhh</p>");                                  //.c1被<p>hhh</p>替换    $("<p>hhh</p>").replaceAll("li")                                     //<p>hhh</p>替换所有的li标签</script></body>
技术分享图片

（五）克隆

　　clone()，具体应用实例如下：

技术分享图片
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><p>稳重，我们能赢</p><script src="jquery-3.2.1.min.js"></script><script>    $("p").on("click",function () {        $(this).clone(true).insertAfter(this)                            //加上true表示连事件也会克隆，即点击复制后的标签内容也可以实现克隆事件    })</script></body></html>
技术分享图片

二、绑定事件

（一）事件绑定

　　常见的事件类型有：click(点击触发)、hover（悬浮触发）、focus（聚焦触发）、blur（非聚焦触发）、change（主要用于select标签，更改选中就会触发）、keyup（输入按键一弹起就会触发事件，如电商网站搜索框，用户每输入一个字符，都会帮你用户提示相关内容），绑定事件的语法如下：

jQuery对象.on(事件类型，function（）{})
技术分享图片
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><input type="text" placeholder="对子哈特" id="d1"><select name="" id="d2">    <option value="1">男</option>    <option value="2">女</option></select><p id="recommend"></p><script src="jquery-3.2.1.min.js"></script><script>    var $d=$("#d1");    //focus    $d.on("focus",function () {        $(this).attr("placeholder","")    });        //blur    $d.on("blur",function () {        $(this).attr("placeholder","对子哈特")    });        //keyup     $d.on("keyup", function () {        // 取值，发后端做联想检索        var userInput= $(this).val();        alert(userInput);    });    //change    $("#d2").on("change",function () {        if($(this).val()==1){            $("#recommend").text("为你推荐美女服务")        }        else{            $("#recommend").text("为你推荐帅哥服务")        }    })</script></body></html>
技术分享图片

（二）事件委托

　　　同样以js部分讲到事件委托用到表格删除为例，删除事件委托实例如下：

$("table").on("click", ".delete", function () {        $(this).parent().parent().remove();                           // 删除当前行    });

Python Day60 jQuery3

相关内容

评论关闭

最新python教程

python~HOT