一、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. Scala 方法与函数简单记录

    /** * Scala 方法与函数 * Scala 有方法与函数,二者在语义上的区别很小.Scala 方法是类的一部分,而函数是一个对象可以赋值给一个变量.换句话来说在类中定义的函数即是方法 */ o ...

  2. 用while实现登录操作(3次过后，输入yes,使counter置0,还可以玩)

    用while实现登录操作(输入yes,使counter置0,还可以玩)#_author:Administrator#date:2019/10/24user_name="star"p ...

  3. 「题解」：$d$

    问题 A: $d$ 时间限制: 1 Sec  内存限制: 512 MB 题面 题面谢绝公开. 题解 赛时切掉了然而过程十分曲折. 贪心思路很好想.然而一开始错误以为是单峰.其实几个峰都有可能. 开场写 ...

  4. 数论+线性dp——cf1174A

    直接推公式没有推出来 看了题解才会做.. 首先能够确定前面几个数的gcd一定是2^j * 3^k, 其中k<=1 那么可以用dp[i][j][k]来表示到第i位的gcd是2^j*3^k f(j, ...

  5. Responder对象

    Responder对象 响应者是一个对象,它可以响应事件并处理它们.所有响应者对象是类的,最终从UIResponder的( IOS)或NSResponder ( OS X)继承实例.这些类声明一个编程 ...

  6. 在ubuntu下编写python

    一般情况下,ubuntu已经安装了python,打开终端,直接输入python,即可进行python编写. 默认为python2 如果想写python3,在终端输入python3即可. 如果需要执行大 ...

  7. os.path.dirname(__file__)使用、Python os.path.abspath(__file__)使用

    python中的os.path.dirname(__file__)的使用 - CSDN博客https://blog.csdn.net/u011760056/article/details/469698 ...

  8. spring加载属性配置文件内容

    在spring中提供了一个专门加载文件的类PropertyPlaceholderConfigurer,通过这个类我们只需要给定需要加载文件的路径就可以 通过该类加载到项目,但是为了后面在程序中需要使用 ...

  9. python爬取（自动化）豆瓣电影影评，并存储。

    from selenium import webdriverfrom selenium.webdriver import ActionChainsimport time driver = webdri ...

  10. Apache Pig和Solr问题笔记（一）

    记录下最近两天散仙在工作中遇到的有关Pig0.12.0和Solr4.10.2一些问题,总共有3个,如下: (1)问题一: 如何Pig中使用ASCII和十六进制(hexadecimal)的分隔符进行加载 ...