一、jQuery的动画

1、jQuery自带的动画

　　1》变化的是width height opacity display

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>jQuery动画+创建jQuery变量</title>

    <style>

    div{

        width: 100px;

        height:200px;

        background-color: pink;

    }

    </style>

</head>

<body>

    <button>显示</button>

    <button>隐藏</button>

    <div></div>

    <script src="jQuery1-12-4.js"></script>

    <script>

        //第一个动画，变化的是width height opacity display

        $(function () {

           $("button:eq(0)").click(function(){

            //    $("div").show();

                $("div").show(1000);

           });

           $("button:eq(1)").click(function () {

            //    $("div").hide();

            $("div").hide(100);

           });
$("button:eq(2)").click(function () {
$("div").toggle();
});
        });

    </script>

</body>

</html>

　　2》变化的是height

        //第二个动画，变化的是opacity display

        $(function () {

            $("button:eq(0)").click(function () {

                $("div").slideUp("slow");//卷起 fast normal slow

            });

            $("button:eq(1)").click(function () {

                $("div").slideDown(1000);//放下

            });

            $("button:eq(2)").click(function () {

                $("div").slideToggle(1000);

            });

        });

　　3》淡入淡出

　　

//第三个动画：淡入淡出

        $(function () {

            $("button:eq(0)").click(function () {

                $("div").fadeOut(1000);

            });

            $("button:eq(1)").click(function () {

                $("div").fadeIn(1000);

            });

            $("button:eq(2)").click(function () {

                $("div").fadeToggle(1000);

            });

            $("button:eq(3)").click(function () {

                $("div").fadeTo(1000,0.3);//时间，定值，回调函数

            });

        })

2、自定义动画

 //自定义动画,该方法是异步的，因为底层使用了定时器

        //animation(json,时间,回调函数);

        $(function () {

            $("button:eq(0)").click(function () {

                $("div").animate({

                    "width": 0

                }, 100, function () {

                    alert("运行完成");

                });

            });

        });

二、创建对象

　　1、回顾原生js中是如何创建对象

//原生js中创建对象

        //第一种方式：

        // var p = document.createElement("p");

        // p.innerHTML = "我是一个p";

        // document.getElementsByTagName("div")[0].appendChild(p);

        //第二种方式

        // document.getElementsByTagName("div")[0].innerHTML = "<p>我是第二个p</p>";

        //第三种方式

        document.write("<p>我是第三个P</p>");

　　2、jQuery中创建元素的方式

　　

//jQuery中创建元素的方式

        var $p = $("<p>我是jquery生成的第一个标签</p>");

        //放到div中，在div末尾追加

        // $("div").append($p);//在div的末尾追加p

        // $p.appendTo($("div"));//追加到div,也是在末尾加

        //放在div中，在div的开头追加

        // $("div").prepend($p);//在开头追加

        // $p.prependTo($("div"));//在开头加

        //在div的外边

        // $("div").before($p);//前面

        // $("div").after($p);//后边

        //替换div内部

        $("div").html($p);

　　3、注意：添加的已有元素相当于剪切。

案例：选中左边的，移动到右边，选中右边的，移动到左边

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>选中移动</title>

    <style>

    *{

        padding: 0;

        margin: 0;

    }

    div{

        width: 100px;

        height: 400px;

        background-color: #ccc;

        float: left;

        margin-right: 10px;

        text-align: center;

    }

    button{

        width: 50px;

        height: 50px;

        margin: 10px;

    }

    select{

        width: 50px;

        height: 200px;

    }

    </style>

</head>

<body>

    <div>

        <p>水果摊</p>

        <select name="" id="sel1" multiple="multiple">

            <option value="">苹果</option>

            <option value="">香蕉</option>

            <option value="">鸭梨</option>

            <option value="">橙子</option>

            <option value="">黄瓜</option>

        </select>

    </div>

    <div>

        <button>></button>

        <button><</button>

        <button>>></button>

        <button><<</button>

    </div>

    <div>

        <p>购物车</p>

        <select name="" id="sel2" multiple="multiple">

        </select>

    </div>

    <script src="jQuery1-12-4.js"></script>

<script>

    $(function () {

        //移动到右边

        $("button:eq(0)").click(function () {

            $("#sel2").append($("#sel1>option:selected"));

        });

        //移动到左边

        $("button:eq(1)").click(function () {

            $("#sel1").append($("#sel2>option:selected"));

        });

        //全部移动到右边

        $("button:eq(2)").click(function () {

            $("#sel1>option").appendTo($("#sel2"));

        });

        //全部移动到左边

        $("button:eq(3)").click(function () {

            $("#sel1").append($("#sel2>option"));

        });

    });

</script>

</body>

</html>

的

　　

jQuery3动画+创建元素的更多相关文章

  1. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  2. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  3. js和jQuery创建元素和把元素插入到文档中所用的方法

    js创建元素: document.createElement(" 创建的元素");   //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...

  4. Javascript:DOM动态创建元素实例应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  6. jQuery如何创建元素

    1.$("<ul>").attr("id","taglist").appendTo("#tagCloud") ...

  7. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  8. JavaScript获取和创建元素

    1.JavaScript中获取元素 常用的获取document中元素的方法: 1) document.getElementById()  =>通过元素ID获取文档中特定的元素,如获取 id = ...

  9. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

随机推荐

  1. JQuery Ajax 向后台传参方式

    在jquery的ajax函数中,可以传入3种类型的数据 文本:"uname=alice&mobileIpt=110&birthday=1983-05-12" jso ...

  2. day27 模块：正则re, configparser, subprocess

    Python之路,Day15 = Python基础15 re 模块补充 ret = re.findall("c.d", "abc\nd", re.S) # 后面 ...

  3. SpringBoot_04_SpringBoot对ssm的整合

    1.在SpringBoot框架下对ssm进行整合 2.搭建一个web的SpringBoot框架 2.1添加pom.xml坐标(需要加上SpringBoot对jsp的支持,和对资源文件位置的说明) &l ...

  4. ImageMagick convert多张照片JPG转成pdf格式，pdfunite合并PDF文件

      在认识ImageMagick之前,我***的图像浏览软件是KuickShow,截图软件是KSnapShot,这两款软件都是KDE附带的软件,用起来也是蛮方便的.在一次偶然的机会中,我遇到了Imag ...

  5. （一）PHP基础知识考察点

    1,PHP引用变量的考察点: 概念:引用就是用不同的名字访问同一个变量内容. 定义方式: 使用&符号. PHP引用变量的工作原理 这里有个COW  copy on write  用zval() ...

  6. 前端笔记:animate+easing用法（hexo next主题自定义动画）

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io easing介绍 animate默认是有加速度 ...

  7. JAVA工具包_BeanUtils

    简介 大多数的java开发者通常在创建Java类的时候都会遵循JavaBean的命名模式,对类的属性生成getters方法和setters方法.通过调用相应的getXxx和setXxx方法,直接访问这 ...

  8. <python基础>封装,继承,多态,重写,重载

    什么是封装? 所谓的面向对象就是将我们的程序模块化,对象化,把具体事物的特性属性和通过这些属性来实现一些动作的具体方法放到一个类里面,这就是封装.封装是我们所说的面相对象编程的特征之一.除此之外还有继 ...

  9. Spring 事务传播行为（12）

    事务传播行为 指定是Spring中一个事务方法调用另一个事务方法时.处理的行为 使用方式: @Transactional(propagation=Propagation.REQUIRED) 事务的使用 ...

  10. 怎么取消主键自增长的问题（SQL Server）

    以前经常会碰到这样的问题,当我们删除了一条自增长列为1的记录以后,再次插入的记录自增长列是2了.我们想在插入一条自增长列为1的记录是做不到的.我们可以通过设置SET IDENTITY_INSERT & ...