创建节点

 $(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. Pandas 时间序列处理

    目录 Pandas 时间序列处理 1 Python 的日期和时间处理 1.1 常用模块 1.2 字符串和 datetime 转换 2 Pandas 的时间处理及操作 2.1 创建与基础操作 2.2 时 ...

  2. Latex--入门系列二

    Latex 专业的参考 tex对于论文写作或者其他的一些需要拍版的写作来说,还是非常有意义的.我在网上看到这个对于Latex的入门介绍还是比较全面的,Arbitrary reference.所以将会翻 ...

  3. HBase的访问方式

    这里只介绍三种最常用的方式 1.HBase shell HBase的命令行工具是最简单的接口,主要用于HBase管理 首先启动HBase 帮助 hbase(main):001:0> help 查 ...

  4. 调用SM30数据表维护的函数

    相关文章:http://www.cnblogs.com/caizjian/p/3248499.html 1.se11进去新建一个数据表 2.se55进去生产表维护 3.sm30进去维护数据表 4.se ...

  5. PgSQL · 特性分析 · PG主备流复制机制

    原文地址:http://mysql.taobao.org/monthly/2015/10/04/ PostgreSQL在9.0之后引入了主备流复制机制,通过流复制,备库不断的从主库同步相应的数据,并在 ...

  6. 解决SVN异常 cleanup failed

    winndows上偶尔使用SVN的时候就会整出一些有的没的问题,比如"cleanup failed to process the following paths previous opera ...

  7. VUE的双向绑定及局部组件的使用

    vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中 <!DOCTYPE html> <html lang="z ...

  8. python实现Restful服务 (基于flask)(1)

    参考:https://www.jianshu.com/p/6ac1cab17929 参考:https://www.cnblogs.com/alexyuyu/p/6243362.html 参考:http ...

  9. Django2 + ORM 做一个简单的登陆

    . ├── db.sqlite3 ├── manage.py ├── myormLogin │   ├── __init__.py │   ├── __pycache__ │   │   ├── __ ...

  10. redis学习 --Sorted Set

    一.概述: Sorted Set(有序集合)和Set类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted Set中的每一个成员都会有一个分数(sc ...