一、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. QQ空间批量删除说说

    按下F12,贴下如下代码 var delay = 1000; function del() { if (document.querySelector(".app_canvas_frame&q ...

  2. Redis-GEO

    一. Redis的GEO特性 Redis3.2版本提供了GEO功能,支持存储地理位置信息用来实现诸如摇一摇,附近位置这类依赖于地理位置信息的功能.二. 命令2.1 增加地理位置信息 命令:geoadd ...

  3. 最全的机器学习&深度学习入门视频课程集

    资源介绍 链接:http://pan.baidu.com/s/1kV6nWJP 密码:ryfd     链接:http://pan.baidu.com/s/1dEZWlP3 密码:y82m 更多资源 ...

  4. day 84 Vue学习之vue-cli脚手架下载安装及配置

    Vue学习之vue-cli脚手架下载安装及配置   1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量 ...

  5. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  6. 第二篇：怕碰到是因为没掌握，来吧，zTree！

    一直以来看见web项目中的树就头疼.这次又给碰上了,什么也别说,这次自己整理一个版本出来实践一下.zTree v3.2的API界面非常清爽,但是在查看API之前,你需要自己先实践一下,知道基本的概念和 ...

  7. 二分图最佳匹配KM算法 /// 牛客暑期第五场E

    题目大意: 给定n,有n间宿舍 每间4人 接下来n行 是第一年学校规定的宿舍安排 接下来n行 是第二年学生的宿舍安排意愿 求满足学生意愿的最少交换次数 input 2 1 2 3 4 5 6 7 8 ...

  8. Go前言

    Go语言为并发而生 硬件制造商正在为处理器添加越来越多的内核以来提高性能.所有数据中心都在这些处理器上运行,今天的应用程序使用多个微服务来维护数据库连接,消息队列和维护缓存.所以,开发的软件和编程语言 ...

  9. wpf 让正执行的程序暂停几秒钟

    public static class DispatcherHelper     {         [SecurityPermissionAttribute(SecurityAction.Deman ...

  10. AJAX相关概念及应用

    1.Ajax(Asynchronous JavaScript And XML) 异步的JavaScript和XML XML 可扩展标记语言 Ajax是常用的WEB开发技术,是联系前端和后端的桥梁 应用 ...