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. Dinner Bet Gym - 101174D (期望dp)

    Problem D: Dinner Bet \[ Time Limit: 1.5 s \quad Memory Limit: 256 MiB \] 题意 题意是两个人在玩游戏,一共有\(n\)张牌,这 ...

  2. asyncapi 指南

    asyncapi 是可以用来创建异步机器可读定义api的指南,我们可以用来创建事件驱动的架构. 说明 asyncapi 的定义类似openapi,目前指南版本为2.0,很值得学习下 参考资料 http ...

  3. Traefik 2.0 tcp 路由试用

    对于tcp 的路由是基于sni (需要tls)但是可以通过统配(*) 解决不试用tls的,当然也可以让Traefik 自动生成tls 证书 以下是测试http 以及mysql 的tcp 路由配置(de ...

  4. 发布jar包到远端github仓库使用(将github仓库当作maven仓库)

    今天把单点登陆的core模块搬到了github仓库 并且利用github仓库作为maven仓库 在项目中进行了引用 1. 起初看技术博客没有完全引入进来,调整了一下OK了 2. 还可以将其他模块或者工 ...

  5. SDU暑假排位第一场 (Gym - 100889)

    啊今天有点挂机啊 D题和队友暴力后发现一组数据跑得飞快 然后遇上1e5组数据就没了..... 然后我疯狂优化暴力 然后去世了 最后半小时F也没写出来 主要还是最后有点慌并且没有考虑清楚 导致情况越写越 ...

  6. nginx.conf 配置解析之文件结构

    nginx.conf配置文件结构如下: ...... #主要定义nginx的全局配置 events{ #events(事件)块:主要配置网络连接相关 } http{ #http块:代理缓存和日志定义绝 ...

  7. 花了两个星期，我终于把 WSGI 整明白了

    在 三百六十行,行行转 IT 的现状下,很多来自各行各业的同学,都选择 Python 这门胶水语言做为踏入互联网大门的第一块敲门砖,在这些人里,又有相当大比例的同学选择了 Web 开发这个方向(包括我 ...

  8. To ssh://xxx.com:8022/test/project.git ! [remote rejected] master -> master (pre-receive hook declined) error: failed to push some refs to 'ssh://xxx.com:8022/test/project.git'

    To ssh://xxx.com:8022/test/project.git ! [remote rejected] master -> master (pre-receive hook dec ...

  9. unity序列化

    什么是序列化 unity的序列化在unity的开发中起着举重足轻的地位,许多核心的功能都是基于序列化和反序列化来实现的.序列化简单来讲就是就是将我们所要保存的数据进行二进制存储,然后当我们需要的时候, ...

  10. 【Beta】Scrum Meeting 9 & 助教参会记录

    目录 前言 任务分配 燃尽图 会议照片 签入记录 上周助教交流总结 Q:项目进度如何? Q:有关commit与issue关联的问题? Q:人员变动后分工的变化情况? Q:接下来还有什么新功能? Q:大 ...