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. windows 命令

    1.查看端口占用:  netstat -ano|findstr 8080 2.查看网络端口:ipconfig/all

  2. podium micro-frontends 简单试用

    以下是一个简单的podium 试用,包含了layout 以及podlets,使用docker 运行 podium 主要包含了两大部分 podlets 片段服务 layouts 片段组合服务 环境准备 ...

  3. linux 所有命令无法使用

    配置nginx时,错误export之后linux 所有命令无法使用 出现这个问题是因为系统的环境变量没有正确配置造成的,造成这个原因有很多,比如系统升级,比如不正当操作等导致环境变量被覆盖修改,解决的 ...

  4. 第10组 Alpha冲刺（2/4）

    队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 完善项目APP原型 展示GitHub当日代码/文档签入记 ...

  5. 数据库MySQL调优实战经验总结<转>

    数据库MySQL调优实战经验总结 MySQL 数据库的使用是非常的广泛,稳定性和安全性也非常好,经历了无数大小公司的验证.仅能够安装使用是远远不够的,MySQL 在使用中需要进行不断的调整参数或优化设 ...

  6. Mongoose 多表（N个表）关联查询aggregate

    Mongoose 多表(N个表)关联查询概述 需求:文章(article),文章分类(articlecate),用户(user)这三个表之间的关系,一篇文章对应文章分类表中的某个类型,对应着用户表中的 ...

  7. Fluent的summary功能

    在Fluent计算当中,出现错误,大家经常在求助的时候问得很笼统和宽泛,这里介绍一下Fluent的summary功能,大家可以在求助的时候附上生成的文件,这样更加便于别人帮助你发现问题 然后在算例目录 ...

  8. Lucene创建索引和索引的基本检索(Lucene 之 Hello World)

    Author: 百知教育 gaozhy  注:演示代码所使用jar包版本为 lucene-xxx-5.2.0.jar 一.lucene索引操作 1.创建索引代码 try { // 1. 指定索引文件存 ...

  9. SpringBoot整合MyBatis例子

    1.pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  10. ChannelEventRunnable handle RECEIVED operation error, channel is NettyChannel解决方法

    [] 2019-11-23 16:17:40 [3673645] [c.a.d.r.t.d.ChannelEventRunnable]-[WARN] DubboServerHandler-10.20. ...