<!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屏幕相关的概念

    1. 屏幕尺寸 实际的物理尺寸,作为屏幕的对角线测量. 为简单起见,安卓所有的实际屏幕尺寸为四个广义的大小:小,正常,大,和特大. 2. 屏幕密度 一个屏幕的物理区域内像素的数量:通常称为DPI(每英 ...

  2. Kali学习笔记3：TCPDUMP详细使用方法

    Kali自带Wireshark,但一般的Linux系统是不带的,需要自行下载,并且过程略复杂 而纯字符界面的Linux系统无法使用Wireshark 但是,所有Linux系统都会安装TCPDUMP:一 ...

  3. 电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现

    在淘宝.京东等电商网站,其门户网站都有一个商品品类的多级联动,鼠标移动,就显示,因为前端不是我做的,所以不说明前端实现,只介绍后端实现. 搭建部署SpringBoot环境 配置文件配置: 开启了对Th ...

  4. JAVA面试题-数组字符串基础

    1.大写的Integer和String是可变类还是不可变类?怎么定义不可变类?不可变.用final关键字,如public final class Integer extends Number 2.比较 ...

  5. virtualbox ubuntu 安装 openssh-server

    最近为了学 DevOps,自己动手在 virtualbox 上安装 ubuntu 系统,安装完后发现好坑,没办法用 XShell 连接.在线安装 openssh-server 又发现没有配置软件源,手 ...

  6. 如何配置React Native真机调试-iOS

    说在前面,本教程是建立在项目已经成功在模拟器上运行的基础上,如果你是还未配置好环境的新手,建议先从官网快速入门开始:官网英文版 . 中文版 ok, 切入正题,当你已经完成好环境配置,在模拟器上成功的运 ...

  7. C++版 - LeetCode 145: Binary Tree Postorder Traversal(二叉树的后序遍历，迭代法)

    145. Binary Tree Postorder Traversal Total Submissions: 271797 Difficulty: Hard 提交网址: https://leetco ...

  8. Android--使用剪切板在Activity中传值

    在Activity之间传递数据还可以利用一些技巧,不管windows还是Linux操作系统,都会支持一种叫剪切板的技术,也就是某一个程序将一些数据复制到剪切板上,然后其他的任何程序都可以从剪切板中获取 ...

  9. redis简单应用

    启动和结束 --启动redis服务 E:\redis>redis-server.exe redis.windows.conf --结束redis服务 127.0.0.1:6379> shu ...

  10. 安装mono和monoDevelop开发环境

    我之前用的是Ubuntu10.12版本的linux,一直被软件更新包困扰,总是保存缺少依赖包的问题!总之在网络上找到的软件更新包地址都不能解决问题.后来就用了比较新的TLS版本Ubuntu14.04. ...