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. random库

    伪随机数的原因: random库中函数主要用于产生各种分布的伪随机数序列.random库中的随机函数是按照一定算法模拟产生的,其概率是确定的.可见的,所以被称为伪随机数.而真正意义上的随机数是按照实验 ...

  2. [Java] key

    Z2VueW1vJTIwJTI2JTI2JTI2JTIwMTYzJTNBJTBBdXNyJTIwLSUyMHd1a29uZ3N1bjEyMzQlMjAlMjMlMjAxNjMuc3VmZml4JTIw ...

  3. 安装和启动ElasticSearch服务遇到的几个问题

    首先安装和启动服务的教程是参考文章:ES入门之一 安装ElasticSearch 然后在最后的启动es服务时遇到了几个小问题,因此在这里记录一下. 因为我对linux并不是很熟悉,因此文中如果有说错的 ...

  4. Java中的long类型和Long类型比较大小

    Java中我们经常要做一些判断,而对于判断的话,用的最多的便是“>”.“==”.“<”的比较,这里我们进行一个Long类型数据和long类型数据的比较大小的讲解. Java中Long和lo ...

  5. 从工厂流水线小妹到Google上班程序媛，看完后，我跪服了！

    阅读本文大概需要 10.2 分钟. 文作者:Ling Sun 原文链接:https://www.zhihu.com/question/68154951/answer/546265013 我家境很不好, ...

  6. pyqt（day1）

    参考代码地址:https://github.com/cxinping/Pyqt5 pyqt在线帮助文档:https://www.riverbankcomputing.com/static/Docs/P ...

  7. 刷题记录：[De1CTF 2019]Giftbox && Comment

    目录 刷题记录:[De1CTF 2019]Giftbox && Comment 一.知识点 1.sql注入 && totp 2.RCE 3.源码泄露 4.敏感文件读取 ...

  8. 【技术博客】MySQL和Django常用操作

    MySQL和Django是搭建网站常用的配置之一,在此记录一下在Windows系统搭建网站时MySQL以及Django常用的操作. MySQL MySQL的SQL语句不区分大小写,推荐将保留字大写,数 ...

  9. Unknown command 'run' - try 'help'

    /******************************************************************************* * Unknown command ' ...

  10. web项目脱敏白名单管理

    写在前面 下午没事, 看一下同事写的脱敏白名单管理功能. 所谓的脱敏就是将页面中查询出的信息列表当中的身份证号及手机号等关键信息部分用*号代替.该功能主要思路是新增一个页面用于配置哪些页面以及页面中哪 ...