JQuery 高级
1. 动画
2. 遍历
3. 事件绑定
4. 案例
5. 插件

1. 动画
　　1. 三种方式显示和隐藏元素
　　　　1. 默认显示和隐藏方式
　　　　　　1. show([speed,[easing],[fn])
　　　　　　1. 参数：
　　　　　　　　1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
　　　　　　　　2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
　　　　　　　　　　　　* swing：动画执行时效果是 先慢，中间快，最后又慢
　　　　　　　　　　　　* linear：动画执行时速度是匀速的
　　　　　　　　3. fn：在动画完成时执行的函数，每个元素执行一次。

　　　　　　2. hide([speed,[easing],[fn])
　　　　　　3. toggle([speed],[easing],[fn])

　　　　2. 滑动显示和隐藏方式
　　　　　　1. slideDown([speed],[easing],[fn])
　　　　　　2. slideUp([speed,[easing],[fn])
　　　　　　3. slideToggle([speed],[easing],[fn])

　　　　3. 淡入淡出显示和隐藏方式
　　　　　　1. fadeIn([speed],[easing],[fn])
　　　　　　2. fadeOut([speed],[easing],[fn])
　　　　　　3. fadeToggle([speed,[easing],[fn])

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Insert title here</title>

    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script>

        //注：下面的大部分方法没使用参数[easing],[fn]

        //隐藏div的三种方式

        function hideFn(){

/*          //默认方式一

            $("#showDiv").hide("slow","swing",function(){

                alert("隐藏了...")

            });

*/

/*

           //默认方式二

            $("#showDiv").hide(5000,"swing");

*/

/*

            //滑动方式

            $("#showDiv").slideUp("slow");

*/

            //淡入淡出方式

            $("#showDiv").fadeOut("slow");

        }

        //显示div的三种方式

        function showFn(){

            /*//默认方式一

            $("#showDiv").show("slow","swing",function(){

                alert("显示了...")

            });*/

            /*

            //默认方式二

            $("#showDiv").show(5000,"linear");

            */

            /*

            //滑动方式

            $("#showDiv").slideDown("slow");

            */

            //淡入淡出方式

            $("#showDiv").fadeIn("slow");

        }

        //切换显示和隐藏div的三种方式

        function toggleFn(){

            /*

            //默认方式

            $("#showDiv").toggle("slow");

*/

            /*

            //滑动方式

            $("#showDiv").slideToggle("slow");

*/

            //淡入淡出方式

            $("#showDiv").fadeToggle("slow");

        }

    </script>

</head>

<body>

    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">

    <input type="button" value="点击按钮显示div" onclick="showFn()">

    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

    <div id="showDiv" style="width:300px;height:300px;background:pink">

        div显示和隐藏

    </div>

</body>

</html>

2. 遍历

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

/*

        遍历

            1. js的遍历方式

             * for(初始化值;循环结束条件;步长)

            2. jq的遍历方式

                1. jq对象.each(callback)

                2. $.each(object, [callback])

                3. for..of:jquery 3.0 版本之后提供的方式

*/

            $(function () {

                //1.获取所有的ul下的li

                var citys = $("#city li");

                /* //2.遍历li

                for (var i = 0; i < citys.length; i++) {

                    if("上海" == citys[i].innerHTML){

                        //break; 结束循环

                        //continue; //结束本次循环，继续下次循环

                    }

                    //获取内容

                    alert(i+":"+citys[i].innerHTML);

                }*/

                //2. jq对象.each(callback)

                //citys.each(function (index, element) {

                    //3.1 获取li对象 第一种方式 this

                    //alert(this.innerHTML);

                    //alert($(this).html());//将this从js转为jq的写法

                    //3.2 获取li对象 第二种方式 在回调函数中定义参数 index（索引）element（元素对象）

                    //alert(index+":"+element.innerHTML);

                    //alert(index+":"+$(element).html());//将element从js转为jq的写法

                    /*                    //判断如果是上海，则结束循环

                    if("上海" == $(element).html()){

                        //如果当前function返回为false，则结束循环(break)。

                        //如果返回为true，则结束本次循环，继续下次循环(continue)

                        return true;

                    }

                    alert(index+":"+$(element).html());

                });

                //3. $.each(object, [callback])

                $.each(citys,function () {

                    alert($(this).html());

                });*/

                //4. for ... of:jquery 3.0 版本之后提供的方式

                for(li of citys){

                    alert($(li).html());

                }

             // });
　　　　　　}）；

    </script>

</head>

<body>

    <ul id="city">

        <li>北京</li>

        <li>上海</li>

        <li>天津</li>

        <li>重庆</li>

    </ul>

</body>

</html>

　　1. js的遍历方式
　　　　* for(初始化值;循环结束条件;步长)

//1.获取所有的ul下的li

var citys = $("#city li");

//2.遍历li

for (var i = 0; i < citys.length; i++) {

     if("上海" == citys[i].innerHTML){

     //break; 结束循环

     continue; //结束本次循环，继续下次循环

     }

     //获取内容

     alert(i+":"+citys[i].innerHTML);
}

　　2. jq的遍历方式
　　　　1. jq对象.each(callback)
　　　　　　1. 语法：
　　　　　　　　jquery对象.each(function(index,element){});
　　　　　　　　　　* index:就是元素在集合中的索引
　　　　　　　　　　* element：就是集合中的每一个元素对象

//2. jq对象.each(callback)

citys.each(function (index, element) {

     //获取li对象 第二种方式 在回调函数中定义参数 index（索引） element（元素对象）

     //判断如果是上海，则结束循环

     if("上海" == $(element).html()){

     //如果当前function返回为false，则结束循环(break)。

     //return false;

     //如果返回为true，则结束本次循环，继续下次循环(continue)

       return true;

     }
　　　//alert(index+":"+element.innerHTML)

     alert(index+":"+$(element).html());//将element从js转为jq的写法
});

　　　　　　　　　　* this：集合中的每一个元素对象(使用this的弊端是无法获取元素的index)

//2. jq对象.each(callback)

citys.each(function () {

    //获取li对象 第一种方式 this

    if("上海" == $(this).html()){

        //如果当前function返回为false，则结束循环(break)。

        //return false;

        //如果返回为true，则结束本次循环，继续下次循环(continue)

        return true;

     }

    //alert(this.innerHTML);

    alert($(this).html());//将this从js转为jq的写法

　　　　　　2. 回调函数返回值：
　　　　　　　　* true:如果当前function返回为false，则结束循环(break)。
　　　　　　　　* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

    if("上海" == $(this).html()){

        //如果当前function返回为false，则结束循环(break)。

        //return false;

        //如果返回为true，则结束本次循环，继续下次循环(continue)

        return true;

     }

　　　　2. $.each(object, [callback])

$.each(citys,function () {

     alert($(this).html());

});

　　　　3. for..of: jquery 3.0 版本之后提供的方式
　　　　　　　　* 语法for(元素对象 of 容器对象)

// for ... of:jquery 3.0 版本之后提供的方式

for(li of citys){

      alert($(li).html());

}

JQuery高级(一)的更多相关文章

  1. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  2. jQuery高级编程

    jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...

  3. JQuery高级笔记

    ## 今日内容:     1. JQuery 高级         1. 动画         2. 遍历         3. 事件绑定         4. 案例         5. 插件 ## ...

  4. jquery高级编程学习

    jquery高级编程 第1章.jQuery入门 类型检查 对象 类型检查表达式 String typeof object === "string" Number typeof ob ...

  5. JQuery 高级

    来源于传智播客老师发的笔记 今日内容: 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默 ...

  6. jQuery高级选择器和其等价方法

    jQuery选择器和css一样,但兼容性更好 <body> <p>p1</p> <p>p1</p> <p>p1</p> ...

  7. [jquery]高级篇--标签选择

    1>3中初始化 $(document).ready(function(){ alert("开始了"); }); $(function(){ trace("初始化方法 ...

  8. [jquery]高级篇--js绑定事件

    参考:  http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法.$(selector).on(eve ...

  9. [jquery]高级篇--获取div子元素

    参考: http://zhidao.baidu.com/link?url=IfeQQBn1xMLqWvwdkKbQYJ8mC6ciGi_8M1NYkm6iQ-kXBMX2f2ylN-ckzFLiynn ...

随机推荐

  1. [AGC007E] Shik and Travel

    题目 给定一棵n节点的 以1为根的 满二叉树 (每个非叶子节点恰好有两个儿子)n−1 条边. 第ii条边连接 i+1号点 和 ai, 经过代价为vi设这棵树有m个叶子节点定义一次合法的旅行为:(1) ...

  2. 构造方法（_ _construct) 和析构方法(__destruct)

    构造方法,是一个特殊的方法: 1,名字是固定的:_ _construct: 2,该方法通常都不要我们自己调用,而是在new一个对象的时候会自动调用. 3,该方法主要的目的是为了在new一个对象的时候, ...

  3. Centos7 守护进程supervisord 安装使用

    pervisor(http://supervisord.org/)是用Python开发的一个client/server服务,是Linux/Unix系统下的一个进程管理工具,不支持Windows系统.它 ...

  4. java基础之 final

    参考文档: 内存模型&final:http://www.infoq.com/cn/articles/java-memory-model-6/   根据程序上下文环境,Java关键字final有 ...

  5. [Beta]Scrum Meeting#9

    github 本次会议项目由PM召开,时间为5月14日晚上10点30分 时长20分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客整理文档 撰写博客整理文档 swoip 为适应新功能调整布局前 ...

  6. asp.net core 托管到windows服务，并用iis做反向代理

    使用NSSM把.Net Core部署至 Windows 服务   为什么部署至Windows Services 在很多情况下,很少会把.Net Core项目部署至Windows服务中,特别是Asp.n ...

  7. Spring Cloud Zuul 概览

    什么是API网关 网关这个词其实是一个硬件概念.因为按照定义,网络网关出现在网络的边缘,所以防火墙和代理服务器等相关功能 往往与之集成在一起.在家庭网络 和小型企业中,宽带路由器通常充当网络网关.它将 ...

  8. 【spring源码学习】spring事务中的嵌套事务中的保存点相关知识

    JDBC事务保存点(setSavepoint, releaseSavepoint )实例 以下是使用事务教程中描述的setSavepoint和回滚的代码示例. 此示例代码是基于前面章节中完成的环境和数 ...

  9. linux下使用clamav排查病毒

    clamav wget http://www.clamav.net/downloads/production/clamav-0.102.0.tar.gz ### Installyum -y insta ...

  10. tornado多进程模式不同进程写不同日志

    #coding: utf- ''' Author: Time: Target: ''' import logging import logging.handlers import os import ...