创建节点

 $(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>

　　

jQuery基础--创建节点和 添加节点的更多相关文章

  1. 实验：Oracle单节点RAC添加节点

    环境:RHEL 6.5 + Oracle 11.2.0.4 单节点RAC 需求:单节点RAC添加新节点 1.添加节点前的准备工作 2.正式添加节点 3.其他配置工作 1.添加节点前的准备工作 参考Or ...

  2. JavaScript基础1——在末尾添加节点

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. hadoop删除节点和添加节点

    从hadoop移除机器把需要移除的机器增加到exclueds文件中,强制刷新datanode列表,等待decommission 状态正常后,即可停机下架,如有必要在namenode执行balancer ...

  4. EasyUI Tree添加节点

    创建foods tree首先,我们创建foods tree,代码像这样: <div style="width:200px;height:auto;border:1px solid #c ...

  5. jQuery操作DOM基础 - 创建节点

    案例:创建两个<li>元素节点,并且作为<ul>元素节点的子节点,添加到DOM树中 <!DOCTYPE html> <html lang="en&q ...

  6. JQuery 添加节点

    Mark一段自己写的添加节点的代码 function reply2(){ $( "<div class=sec1-div5>"+"<div class= ...

  7. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

  8. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单添加节点

    jQuery EasyUI 树形菜单 - 树形菜单添加节点 本教程向您展示如何附加节点到树形菜单(Tree).我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点. 创建食 ...

  9. javascript基础（六）： 获取节点实例 jquery获取当前节点的前一个节点

    jquery获取当前节点的前一个节点步骤如下: 1.打开html开发工具,新建一来个html代码页面. 2.在html页面创建三个p标签,然后给这三个p标签设置不同的2113内容. 3.引入jquer ...

随机推荐

  1. Python学习第四十一天函数装饰器传参数的用法

    在不改变函数的结构的基础,我们给函数加新的功能,用是函数装饰器,如果要给函数传递参数,那么应该怎么做呢 @timerdef test2(name,age): time.sleep(3) print(' ...

  2. Git：将本地项目连接到远程（github、gitee、gitlab）仓库流程

    当进行协同开发或者为了代码安全备份需要,一般都会将本地代码和远程仓库相连接. 备注:Github.Gitee.Gitlab是三个常用的远程git仓库,操作流程基本一致. 提前环境要求: 1.node. ...

  3. Kintex7XC7K325T板卡七仙女

  4. java 生成时机时间

    import java.text.SimpleDateFormat;  import java.util.Date;  import java.util.Random;  public class t ...

  5. nginx 重写

    rewrite指令可在 server 块或者 location 块中配置. 语法: rewrite regex replacement [flag]; 1.rewrite 接收的 uri 不包含 ho ...

  6. Python---基础-小游戏用户猜数字

    一.10 < cost < 50 的等价表达式 cost = 40 10 < cost < 50 (10 < cost) and (cost < 50) 二.使用i ...

  7. 【java】Split函数踩坑记

    先看一段代码: String line = "openssh|7.1"; String[] pkg = line.split("|"); System.out. ...

  8. maven编译问题之 -The POM for XXX is invalid, transitive dependencies (if any) will not be available

    问题一: 把父工程tao-parent install 到maven本地仓后,接着install tao-common工程,然后报错 报错信息如下: [WARNING] The POM for com ...

  9. Docker Toolbox 学习教程【转载】

    最近在研究虚拟化,容器和大数据,所以从Docker入手,下面介绍一下在Windows下怎么玩转Docker.Docker本身在Windows下有两个软件,一个就是Docker,另一个是Docker T ...

  10. Leetcode_132. Palindrome Partitioning II_[DP]

    题目链接 Given a string s, partition s such that every substring of the partition is a palindrome. Retur ...