一、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. java 数组常见操作

    1.遍历  依次访问数组中的每个元素 public class ArrayDemo04 { public static void main(String[] args) { int[] arr = { ...

  2. 一阶段项目 总结 之 两张图片对比 手写 jquery 也可以使用beer slider 插件

    <!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title> ...

  3. LUOGU P3048 [USACO12FEB]牛的IDCow IDs(组合数)

    传送门 解题思路 组合数学.首先肯定是要先枚举位数,假如枚举到第\(i\)位.我们可以把第一位固定,然后那么后面的随意放\(1\),个数就为\(C_{i-1}^{k-1}\).然后每次枚举时如果方案\ ...

  4. SpringCloud学习笔记（六）：Feign+Ribbon负载均衡

    简介 官网解释: http://projects.spring.io/spring-cloud/spring-cloud.html#spring-cloud-feign Feign是一个声明式WebS ...

  5. PAT甲级——A1137 Final Grading【25】

    For a student taking the online course "Data Structures" on China University MOOC (http:// ...

  6. 有关Tensorboard问题

    先说我的各个版本: 操作系统: win7 64 Python: 3.5 Tensorflow: 1.2 Tensorboard: 1.6 错误一: 只显示Graphs,不显示Histogram和Sca ...

  7. webpack 简单笔记（三）vue-cli 使用 webpack-bundle-analyzer 分析

    当我们使用CommonsChunkPlugin插件时可以使用webpack-bundle-analyzer插件来分析分块是否达到我们的目地 安装 npm install --save-dev webp ...

  8. Ubuntu环境下使用npm编译从git上clone下来的前端（Javascript）项目

    一.更新Ubuntu软件源 打开终端依次输入: $ sudo apt-get update $ sudo apt-get install -y python-software-properties s ...

  9. 嘴巴题9 Codeforces 453A. Little Pony and Expected Maximum

    A. Little Pony and Expected Maximum time limit per test 1 second memory limit per test 256 megabytes ...

  10. centos7 搭建 php7 + nginx (1)

    前言 曾今,写过几篇类似的文章,但是发现几个月后,自己回头再看的时候,有种支离破碎的感觉.自己写的并不全,所以今天打算写一篇比较详细的文档.争取下次环境的减的时候,只需要拷贝复制粘贴即可完成环境搭建. ...