17 JQuery高级----学习笔记

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]])

演示案例1：

<!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>

        $(function () {

            //默认方式，显示和隐藏动画

            /*$("#b1").click(function () {

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

            });

            $("#b2").click(function () {

                $("#showDiv").show("slow","swing");

            });*/

            //滑动隐藏方式

            $("#b1").click(function () {

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

            });

            //滑动显示方式

            $("#b2").click(function () {

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

            });

            //滑动切换方式

            $("#b3").click(function () {

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

            })

        })

    </script>

</head>

<body>

<input type="button" value="点击按钮隐藏div" id="b1">

<input type="button" value="点击按钮显示div" id="b2">

<input type="button" value="点击按钮切换div显示和隐藏" id="b3" >

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

    div显示和隐藏

</div>

</body>

</html>

2. 遍历
(1) js的遍历方式
　　* for(初始化值;循环结束条件;步长)
(2)jq的遍历方式
　　1. jq对象.each(callback)
　　　　1. 语法：
　　　　　　jquery对象.each(function(index,element){});
　　　　　　* index:就是元素在集合中的索引
　　　　　　* element：就是集合中的每一个元素对象

　　　　　　* this：集合中的每一个元素对象
　　　　2. 回调函数返回值：
　　　　　　* true:如果当前function返回为false，则结束循环(break)。
　　　　　　* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
　　2. $.each(object, [callback])
　　3. for..of: jquery 3.0 版本之后提供的方式
　　　　for(元素对象 of 容器对象)

3. 事件绑定
(1)jquery标准的绑定方式
　　* jq对象.事件方法(回调函数)；
　　* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
　　* 表单对象.submit();//让表单提交

演示案例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">

        $(function () {

            //1.获取name对象，绑定click事件

           /*$("#name").click(function () {

               alert("我被点击了")

           }) ;*/

           //给name绑定鼠标移动到元素之上的事件

            $("#name").mouseover(function () {

                alert("鼠标来了");

            });

            //给name绑定鼠标移出事件

            $("#name").mouseover(function () {

                alert("鼠标走了");

            });

        });

    </script>

</head>

<body>

<input id="name" type="text" value="绑定点击事件">

</body>

</html>

(2) on绑定事件/off解除绑定
　　* jq对象.on("事件名称",回调函数)
　　* jq对象.off("事件名称")
　　* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

演示案例3：

<!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">

        $(function () {

            //1.使用on给按钮绑定单击事件

            $("#btn").on("click",function () {

                alert("我被点击了");

            });

            //1.使用off给按钮解除单击事件

            $("#btn2").on("click",function () {

                $("#btn").off("click");

            })

        })

    </script>

</head>

<body>

<input id="btn" type="button" value="使用on绑定点击事件">

<input id="btn2" type="button" value="使用off解绑点击事件">

</body>

</html>

4.综合小案例

演示案例4：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>广告的自动显示与隐藏</title>

    <style>

        #content{width:100%;height:500px;background:#999}

    </style>

    <!--引入jquery-->

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

    <script>

        /*需求：

        1.当页面加载完成后,3秒后，自动显示广告

        2.广告显示5秒后，关闭

        分析：

        1.使用定时器，setTimeOut

        2.分析发现jQuery的动画效果是控制display

        */

        $(function () {

           //定义定时器，调用adshow方法，3秒后执行

            setTimeout(adShow,3000);

            setTimeout(adHide,8000)

        });

        //显示广告

        function adShow() {

            //获取广告div,调用显示方法

            $("#ad").show("slow");

        }

        function adHide() {

            //获取广告div,调用显示方法

            $("#ad").hide("slow");

        }

    </script>

</head>

<body>

<!-- 整体的DIV -->

<div>

    <!-- 广告DIV -->

    <div id="ad" style="display: none;" >

        <img style="width:100%" src="../img/adv.jpg" />

    </div>

    <!-- 下方正文部分 -->

    <div id="content">

        正文部分

    </div>

</div>

</body>

</html>

演示案例4：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jquery案例之抽奖</title>

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

</head>

<body>

<!-- 小像框 -->

<div style="border-style:dotted;width:160px;height:100px">

    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>

</div>

<!-- 大像框 -->

<div

        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">

    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>

</div>

<!-- 开始按钮 -->

<input

        id="startID"

        type="button"

        value="点击开始"

        style="width:150px;height:150px;font-size:22px"

        onclick="imgStart()">

<!-- 停止按钮 -->

<input

        id="stopID"

        type="button"

        value="点击停止"

        style="width:150px;height:150px;font-size:22px"

        onclick="imgStop()">

<script language='javascript' type='text/javascript'>

    //准备一个一维数组，装用户的像片路径

    var imgs = [

        "../img/man00.jpg",

        "../img/man01.jpg",

        "../img/man02.jpg",

        "../img/man03.jpg",

        "../img/man04.jpg",

        "../img/man05.jpg",

        "../img/man06.jpg"

    ];

    $(function () {

        var interval;

        var index;

        //1.给开始按钮绑定单击事件

        $("#startID").click(function () {

           interval = setInterval(function () {

               //1.生成随机角标

               index=Math.floor(Math.random()*7);

               //2.设置src属性

               $("#img1ID").prop("src",imgs[index]);

           },20);

        });

        //2.给结束按钮绑定事件

        $("#stopID").click(function () {

            //1.停止定时器

            clearInterval(interval);

            //2.给大相框设置src

            $("#img2ID").prop("src",imgs[index]);

        });

    })

</script>

</body>

</html>

效果图：

17 JQuery高级----学习笔记的更多相关文章

jquery 高级学习笔记
--jquery 和原生js可以共存,但不能混用.jquery 可以通过get()方法转换为原生js. $("#div1").get(0).innerHTML; get() 需 ...
jQuery源代码学习笔记_工具函数_noop/error/now/trim
jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...
Python高级学习笔记
Python高级学习笔记,此笔记中包含Linux操作系统.Html+CSS+JS.网络协议等. 所有思维导图为本人亲手所画,请勿用于商用. 大哥们,求点赞哦. 第一天笔记:链接第二天笔记:链接第三 ...
jQuery 基础学习笔记总结（一）
Jquery 学习笔记总结感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...
jQuery的学习笔记4
JQuery学习笔记3 2.9属性选择器属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素.属性选择器一般都以中括号作为起止分界符它的形式如下: ［attribute］［a ...
jQuery的学习笔记2
jQuery学习笔记 Day two Chapter two 选择器类选择器语法结构:$(“.classname”) javascript里面没有类选择器所以这个时候使用jQuery会更加的简便 ...
jQuery的学习笔记
JQuery学习笔记 Chapter one初识jQuery 1.2测试jQuery 在jQuery库中,$是jQuery的别名,如:$()相当于jQuery() 注意:在使用JQuery进行开发的时 ...
尚硅谷MySQL高级学习笔记
目录数据库MySQL学习笔记高级篇写在前面 1. mysql的架构介绍 mysql简介 mysqlLinux版的安装 mysql配置文件 mysql逻辑架构介绍 mysql存储引擎 2. 索引优化 ...
Asp.Net 初级高级学习笔记
01.Main函数是什么?在程序中使用Main函数有什么需要注意的地方?02.CLR是什么?程序集是什么?当运行一个程序集的时候,CLR做了什么事情?03.值类型的默认值是什么?(情况一:字段或全局静 ...

随机推荐

51nod1423 最大二“货”
[传送门] 单调栈其实就是个后缀$max/min$,这道题可以维护一个单调递减的单调栈,pop元素的时候,能pop掉的元素就是第二大,当前元素为第一大.遇到第一个不能pop掉的时候当前元素就是第二大, ...
bg/fg
将一个在后台暂停的命令,变成继续执行 (在后台执行). 一般ctrl+z就把前台命令调到了后台将后台中的命令调至前台继续运行
Python 08 skimage
原文:https://www.cnblogs.com/xdjun/p/7874794.html 命令: pip install numpy pip install scipy pip install ...
开源项目 10 CSV
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Data; using Syst ...
【区间dp】P1063 能量项链
一道区间dp的水题题目链接来快活啊! 思路很简单的区间dp,思路和floyed差不多,就是需要把项链处理成环形用$f[l][r]$表示以$a[l]$开头$a[r]$结尾的数串的最大 ...
时间datetime模块
datetime模块 import datetime --时间加减的模块 #返回当前时间 print(datetime.datetime.now()) --2019-09-28 17:22:14.54 ...
Element源码---初识框架
序言如果前期直接看源码,你会发现源码越看越看不懂,越看越难,觉得没有办法入手去写,其实首先想要了解项目结构最简单的方法就是通过目录 1.项目理念 2.解析目录目前想不到更好的办法整理element ...
mysql5.7 之 sql_mode=only_full_group_by问题
在使用查询时,使用到了group by 分组查询,报如下错误: ERROR (): In aggregated query without GROUP BY, expression # of SELE ...
kubernetes监控终极方案-kube-promethues
kube-promethues简介前面我们学习了Heapster+cAdvisor方式监控,这是Prometheus Operator出现之前的k8s监控方案.后来出现了Prometheus Ope ...
hotspot编译
"AA=="1",==", /usr/bin/make -s VERBOSE="-s" LOG_LEVEL="warn" ...

17 JQuery高级----学习笔记

17 JQuery高级----学习笔记的更多相关文章

随机推荐

热门专题