jQuery基础–创建节点和 添加节点

  • 2019 年 10 月 10 日
  • 笔记

创建节点

 $(function () {  //    var box = document.getElementById("box");  //  //    var a = document.createElement("a");  //    box.appendChild(a);  //    a.setAttribute("href", "http://web.itcast.cn");  //    a.setAttribute("target", "_blank");  //    a.innerHTML = "传智大前端";        $("#box").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');      });

　添加节点

<!DOCTYPE html>  <html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>Title</title>    <style>      div {        width: 400px;        height: 400px;        background-color: pink;      }    </style>  </head>  <body>    <div id="box">    我是内容  </div>    <p>我是外面的p元素</p>    <script src="jquery-1.12.4.js"></script>  <script>    $(function () {      //    //创建jq对象  //    var $li = $('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');  //    console.log($li);  //  //  //    $("div").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');        //添加到子元素的最后面      //$("div").append($("p"));      //$("p").appendTo($("div"));        //$("div").prepend($("p"));      //$("p").prependTo($("div"));    //    $('div').after($("p"));  //    $('div').before($("p"));        });  </script>    </body>  </html>

删除节点

<!DOCTYPE html>  <html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>Title</title>    <style>      div {        width: 400px;        height: 400px;        background-color: pink;      }    </style>  </head>  <body>    <div>    <p>1111</p>    <p>2222</p>  </div>    <p class='des'>我是外面的p元素</p>      <script src="jquery-1.12.4.js"></script>  <script>    $(function () {          $(".des").click(function () {        alert("hehe");      })        //可以清空一个元素的内容        //内存泄露：      //$("div").html("");      //清理门户（）      //$("div").empty();        //      //$("div").remove();            //false:不传参数也是深度复制,不会复制事件      //true:也是深复制，会复制事件      $(".des").clone(true).appendTo("div");    });  </script>  </body>  </html>

　　微博发布

<!DOCTYPE html>  <html>  <head lang="en">    <meta charset="UTF-8">    <title></title>    <style>      * {        margin: 0;        padding: 0;      }        ul {        list-style: none;      }        .box {        width: 600px;        margin: 100px auto;        border: 1px solid #000;        padding: 20px;      }        textarea {        width: 450px;        height: 160px;        outline: none;        resize: none;      }        ul {        width: 450px;        padding-left: 80px;      }        ul li {        line-height: 25px;        border-bottom: 1px dashed #cccccc;      }        input {        float: right;      }        </style>  </head>  <body>  <div class="box" id="weibo">    <span>微博发布</span>    <textarea name="" id="txt" cols="30" rows="10"></textarea>    <button id="btn">发布</button>    <ul id="ul">      </ul>  </div>    <script src="jquery-1.12.4.js"></script>  <script>    $(function () {        $("#btn").click(function () {          if($("#txt").val().trim().length == 0) {          return;        }        //就是文本框的值        $("<li></li>").text($("#txt").val()).prependTo("#ul");          $("#txt").val("");      })      });  </script>  </body>  </html>

　弹幕效果

<!doctype html>  <html>  <head>    <meta charset="utf-8">    <title></title>    <style type="text/css">      html, body {        margin: 0px;        padding: 0px;        width: 100%;        height: 100%;        font-family: "微软雅黑";        font-size: 62.5%;      }        .boxDom {        width: 100%;        height: 100%;        position: relative;        overflow: hidden;      }        .idDom {        width: 100%;        height: 100px;        background: #666;        position: fixed;        bottom: 0px;      }        .content {        display: inline-block;        width: 430px;        height: 40px;        position: absolute;        left: 0px;        right: 0px;        top: 0px;        bottom: 0px;        margin: auto;      }        .title {        display: inline;        font-size: 4em;        vertical-align: bottom;        color: #fff;      }        .text {        border: none;        width: 300px;        height: 30px;        border-radius: 5px;        font-size: 2.4em;      }        .btn {        width: 60px;        height: 30px;        background: #f90000;        border: none;        color: #fff;        font-size: 2.4em;      }        span {        width: 300px;        height: 40px;        position: absolute;        overflow: hidden;        color: #000;        font-size: 4em;        line-height: 1.5em;        cursor: pointer;        white-space: nowrap;      }      </style>  </head>    <body>    <div class="boxDom" id="boxDom">    <div class="idDom" id="idDom">      <div class="content">        <p class="title">吐槽:</p>        <input type="text" class="text" id="text"/>        <button type="button" class="btn" id="btn">发射</button>      </div>    </div>  </div>  </body>    <script src="jquery-1.12.4.js"></script>  <script>      $(function () {        //注册事件      var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];      $("#btn").click(function () {        var randomColor = parseInt(Math.random() * colors.length);        var randomY = parseInt(Math.random() * 400);          $("<span></span>")//创建span          .text($("#text").val())//设置内容          .css("color", colors[randomColor])//设置字体颜色          .css("left", "1400px")//设置left值          .css("top", randomY)//设置top值          .animate({left: -500}, 10000, "linear", function () {            //到了终点，需要删除            $(this).remove();          })//添加动画          .appendTo("#boxDom");            $("#text").val("");      });          $("#text").keyup(function (e) {        if (e.keyCode == 13) {          $("#btn").click();        }      });      });    </script>  </html>

VirMach 便宜 VPS

QNews

QNews