jQuery基础--创建节点和 添加节点
创建节点
$(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基础--创建节点和 添加节点的更多相关文章
- 实验：Oracle单节点RAC添加节点
环境:RHEL 6.5 + Oracle 11.2.0.4 单节点RAC 需求:单节点RAC添加新节点 1.添加节点前的准备工作 2.正式添加节点 3.其他配置工作 1.添加节点前的准备工作 参考Or ...
- JavaScript基础1——在末尾添加节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- hadoop删除节点和添加节点
从hadoop移除机器把需要移除的机器增加到exclueds文件中,强制刷新datanode列表,等待decommission 状态正常后,即可停机下架,如有必要在namenode执行balancer ...
- EasyUI Tree添加节点
创建foods tree首先,我们创建foods tree,代码像这样: <div style="width:200px;height:auto;border:1px solid #c ...
- jQuery操作DOM基础 - 创建节点
案例:创建两个<li>元素节点,并且作为<ul>元素节点的子节点,添加到DOM树中 <!DOCTYPE html> <html lang="en&q ...
- JQuery 添加节点
Mark一段自己写的添加节点的代码 function reply2(){ $( "<div class=sec1-div5>"+"<div class= ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单添加节点
jQuery EasyUI 树形菜单 - 树形菜单添加节点 本教程向您展示如何附加节点到树形菜单(Tree).我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点. 创建食 ...
- javascript基础（六）： 获取节点实例 jquery获取当前节点的前一个节点
jquery获取当前节点的前一个节点步骤如下: 1.打开html开发工具,新建一来个html代码页面. 2.在html页面创建三个p标签,然后给这三个p标签设置不同的2113内容. 3.引入jquer ...
随机推荐
- Java缓存Ehcache-Ehcache的Cache在SSM框架中的配置
需要在Spring配置文件中配置: <!-- 配置缓存管理器工厂 --> <bean id="cacheManager" class="org.spri ...
- Angular.js 使用$http的response得到的phone属性为undefined
这是个坑~ 先说解决方案:把response打印出来找你的属性 记录一下,经验不足,有些东西想当然了,所有错误出现都应该一步步去排查!!!切记想当然的自以为. 源码: js $scope.phone= ...
- int型、char*、string、的swap算法
1.俩整数,不使用中间变量交换其值: int& intswap(int& a, int& b) { b ^= a; a ^= b; b ^= a; return b; } 2. ...
- Git命令——提交、查看、后退、前进
Git常用命令 1. 命令git init把这个目录变成Git可以管理的仓库: 2. 命令git commit把文件提交到仓库 这里需要注意的是,Git只能跟踪文本文件的改动,如txt文件,网页,所有 ...
- QT生成可执行的EXE程序
[转载] Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,如果自己去复制dll,很可能丢三落四,导致exe在别的电脑里无法正常运行.因此 Qt 官方开发环境里 ...
- [MethodImpl(MethodImplOptions.Synchronized)]、lock(this)与lock(typeof(...))
对于稍微有点经验的.NET开发人员来说,倘若被问及如何保持线程同步,我想很多人都能说好好几种.在众多的线程同步的可选方式中,加锁无疑是最为常用的.如果仅仅是基于方法级别的线程同步,使用System.R ...
- css3 :enabled与:disabled伪类选择器
css :enabled和:disabled伪类选择器 在Web表单中,有些表单元素(如输入框.密码框.复选框等)有“可用”和“不可用”这2种状态.默认情况下,这些表单元素都处在可用状态. 在CSS3 ...
- mybaties数据源配置类型（POOLED、JNDI、UNPOOLED）
dataSource的类型可以配置成其内置类型之一,如UNPOOLED.POOLED.JNDI. 如果将类型设置成UNPOOLED,mybaties会为每一个数据库操作创建一个新的连接,并关闭它.该方 ...
- prototype的用法
定义: prototype 属性使您有能力向对象添加属性和方法. 语法: object.prototype.name=value 实例: function prot(){ this.name = 'J ...
- 每次当浏览到网页,点击tab标签又回到顶部去了！
通常tab的标签使用a链接,而a链接的href值为#,这是一个锚点的属性,因此他会跳转到网页的顶端.如果你的tab包含一个id=tab,也可以设置为href="#tab"这样他就会 ...