<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<style>
.demo{
width: 400px;
height: 400px;
background: red;
}
.test1{
width: 50px;
height: 50px;
background: yellow;
} </style>
<body>
<div class="demo"> <ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul> </div> </body>
<script>
// after 是在选中元素的后面
$('.demo').after("<div class='test1'></div>")
// before是在选中元素的前面
$('.demo').before("<div class='test1'></div>")
// append 是在选中元素的内部的所有元素后面
$('.demo').append("<div class='test1'></div>")
// prepend是在选中元素的内部的所有元素的前面
$('.demo').prepend("<div class='test1'></div>") </script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<style>
.demo{
width: 400px;
height: 400px;
background: red;
position: relative;
}
.test1{
width: 50px;
height: 50px;
background: yellow;
position: absolute;
top:;
left:;
} </style>
<body>
<input type="button" value="start" class="start">
<input type="button" value="stop" class="stop">
<div class="demo">
<div class="test1"></div>
</div> </body>
<script> $('.start').click(function(){
$(".test1").animate({left:'+=200'},);
})
$('.stop').click(function(){
$('.test1').clearQueue();
$('.test1').stop();
}) </script>
</html>

jquery - append prepend after before animate clearQueue stop的更多相关文章

  1. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  2. jquery append、prepend、before等等

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...

  3. (转)jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  4. jquery的append/prepend和after/before有什么区别呢?

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

  5. jQuery - 添加元素append/prepend和after/before的区别

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

  6. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  7. jQuery append xmlNode 修改 xml 内容

    jQuery append xmlNode 修改 xml 内容 http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/04/29/jqu ...

  8. jquery append

    将已经存在的一个dom对象A,通过jquery append插入另一个dom对象B,将会改变dom树结构--即A成为了B的子元素. 举个例子: js: $(".table-container ...

  9. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

随机推荐

  1. Android NDK学习(一):目录结构解析

    我们配置好NDK环境后,基本可以看到其目录结构如下图: 下面我们来分析一下NDK根目录的结构: ndk-build:该Shell脚本是Android NDK构建系统的起始点,一般在项目中仅仅执行这一个 ...

  2. MySQL结构

    MySQL属于关系型数据库管理系统(RDBMS),使用RDBMS时,最常见的系统结构就是客户端/服务器类型(C/S类型)这种结构. 服务器指的是用来接收其他程序发出的请求,并对该请求进行相应处理的程序 ...

  3. js连等赋值的陷阱

    先来看一段代码: (function(){ var x = y = 1; })(); console.log(y); console.log(x); 最开始我觉得这道题简直是送分题啊,很明显结果为,y ...

  4. 使用google wire解决依赖注入

    使用google wire解决依赖注入 google wire是golang的一个依赖注入解决的工具,这个工具能够自动生成类的依赖关系. 当我们写代码的时候,都希望,类都是一个个独立的结构,互不耦合, ...

  5. Linux常用命令之帮助和用户管理命令

    目录 1.帮助命令 一.获得命令或配置文件帮助信息:man 二.获得shell内置命令的帮助信息:help 三.获得命令的中文帮助信息:--help 2.用户管理命令 一.添加新用户:useradd ...

  6. 精读JavaScript模式(八),JS类式继承

    一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...

  7. 第5章 Linux上管理文件系统

    5.1 机械硬盘 机械硬盘由多块盘片组成,它们都绕着主轴旋转.每块盘片上下方都有读写磁头悬浮在盘片上下方,它们与盘片的距离极小.在每次读写数据时盘片旋转,读写磁头被磁臂控制着不断的移动来读取其中的数据 ...

  8. 从a文件判断是否删除b文件中的行(sed示例)

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html test.xml文件很大,内容结构如下: <?xml v ...

  9. haproxy(8):haproxy代理MySQL要考虑的问题

    HaProxy系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html haproxy可以通过 TCP协议 来代理MySQL.但是两个问题必须考虑: ...

  10. 南大算法设计与分析课程OJ答案代码(4)--变位词、三数之和

    问题 A: 变位词 时间限制: 2 Sec  内存限制: 10 MB提交: 322  解决: 59提交 状态 算法问答 题目描述 请大家在做oj题之前,仔细阅读关于抄袭的说明http://www.bi ...