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. PHP的简单了解

    PHP 标识符/关键字/数据类型 标识符:其实标识符就是变量的名称,函数与类的名称也是标识符.PHP中标识符的规则: 1.标识符可以是任意长度的字母.数字.下划线,且不得以数字开头. 2.PHP中标识 ...

  2. bzoj4066: 简单题 K-Dtree

    bzoj4066: 简单题 链接 bzoj 思路 强制在线.k-dtree. 卡常啊.空间开1e6就T了. 代码 #include <bits/stdc++.h> #define my_m ...

  3. CCF 201909-4 推荐系统

    CCF 201909-4 推荐系统 试题编号: 201909-4 试题名称: 推荐系统 时间限制: 5.0s 内存限制: 512.0MB 问题描述: 算法设计 由于我们需要选出得分最大的K件商品,得出 ...

  4. qwq。。胡诌qwq

    1,十里寒塘,红楼灯火阑珊,晓风残月,思念醒了一半. 晨钟催落月,淑气催黄鸟,而花千树而你还未还,三月烟花,只剩远影孤帆,珠箔飘灯,大雁独自来返,柳絮铺地,桃花落了菀晚, 琴声弹起,雨落长安,长夜漫漫 ...

  5. exlucas易错反思

    模板和题解 复习了一下 exlucas的模板,结果写挂四次(都没脸说自己以前写过 是该好好反思一下呢~ 错的原因如下: 第一次WA:求阶乘的时候忘了递归处理(n/p)! 第二次WA:求阶乘时把p当成循 ...

  6. 一起学Makefile（四）

    变量的定义 makefile中的变量,与C语言中的宏类似,它为一个文本字符串(变量的值,其类型只能是字符串类型)提供了一个名字(变量名). 变量的基本格式: 变量名   赋值符   变量值 变量名指的 ...

  7. 第08组 Alpha冲刺（3/6）

    队名:955 组长博客:https://www.cnblogs.com/cclong/p/11872693.html 作业博客:https://edu.cnblogs.com/campus/fzu/S ...

  8. 重置GPU显存 Reset GPU memory after CUDA errors

    Sometimes CUDA program crashed during execution, before memory was flushed. As a result, device memo ...

  9. [原创]App弱网测试方法介绍

    [原创]App弱网测试方法介绍 1 什么是弱网? 弱网就是在非正常网络状态下,用户在访问网络时遭遇到网络延迟或是丢包,造成使用产品时用户体验不佳或反感的场景. 2   为什么要进行弱网测试 简而方之, ...

  10. 创建第一个react项目

    前提:已安装部署好nodejs环境 查看nodejs是否安装以及版本 1,win+r输入cmd打开命令行页面 2,路径换到nodejs目录 3,输入node -v查看版本 创建项目 1,win+r输入 ...