一、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. 校园商铺-2项目设计和框架搭建-10验证controller

    1.新建package:com.csj2018.o2o.web.superadmin 2.建立AreaController.java package com.csj2018.o2o.web.super ...

  2. BZOJ 1037 （ZJOI 2008） 生日聚会

    题目描述 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: 对于任意连续 ...

  3. JSON对象和字符串之间的相互转换 – JSON.parse() 和 JSON.stringify()

    所有现代浏览器都支持 JSON 对象,有两个非常有用的方法来处理 JSON 格式的内容: JSON.parse(string) :接受一个 JSON 字符串并将其转换成一个 JavaScript 对象 ...

  4. http://www.2cto.com/ 红黑联盟

    http://www.2cto.com/ 红黑联盟,一个不错的学习或者开阔眼界的网站,内部由中文书写.比较适合国人.

  5. hexo next中遇到的bug，引发出的关于jquery中click()函数和on("click",function())的区别

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...

  6. POJ-1976-A Mini Locomotive-dp

    A train has a locomotive that pulls the train with its many passenger coaches. If the locomotive bre ...

  7. dedecms 调用英文标题和栏目描述

    调用英文标题: 参考文献 http://www.dedecms51.com/dedecmsjiaocheng/chengxukaifa/149476.html 增加 dede/templets/cat ...

  8. 18-3-bind

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

  9. linux 命令 find与rm实现查找并删除目录或文件

    504  find /Volumes/WD/data/data/sg3d/server -type d |grep .svn 505  find /Volumes/WD/data/data/sg3d/ ...

  10. 2 _ 基本框架 _ 检测VMX环境

    VT 是先开为大,谁先开谁上层,谁上层 谁权限大. 1 判断是否支持 VMX intel 白皮书 第3卷 传入 参数eax =1, 返回值 ecx 的第5位 = 1 则 surpported VMX. ...