JQuery-高级

最新推荐文章于 2020-09-29 14:51:43 发布
最新推荐文章于 2020-09-29 14:51:43 发布
阅读量316 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40332952/article/details/105989823
版权
博客
JavaWeb

文章目录

动画

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

默认显示和隐藏方式代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
    div {
        border: 1px solid red;
        width: 700px;
        height: 350px;
        margin: auto;
    }
</style>
<script>
    $(function () {
        /*setTimeout(showImg, 3000);
        setTimeout(hidImg, 11000);*/

        setTimeout(toggleImg,3000);
        setTimeout(toggleImg,6000);
    });

    function showImg() {
        /*$("img").show("slow","swing",function () {
            alert("图片显示");
        });*/
        $("img").show(5000, "swing");
    }

    function hidImg() {
        /*$("img").hide("slow","swing",function () {
             alert("图片隐藏");
         });*/
        $("img").hide(5000, "swing");
    }

    function toggleImg(){
        //toggle方法有很多变形方式,可以参考文档。
        //它还会根据元素是否隐藏,来判断是否显示元素。
        //不能设置数字
        $("img").toggle("slow","swing");
    }
</script>
<body>
<div>
    <img src="img/man06.jpg" width="100%" height="100%" style="display: none">
</div>
</body>
</html>

在这里插入图片描述

2. 滑动显示和隐藏方式

1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])

滑动显示和隐藏方式代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
    div {
        border: 1px solid red;
        width: 700px;
        height: 350px;
        margin: auto;
    }
</style>
<script>
    $(function () {
        //setTimeout(slideDownImg, 3000);
        //setTimeout(slideUpImg, 11000);

        setTimeout(slideToggleImg,3000);
        setTimeout(slideToggleImg,9000);
    });

    function slideDownImg() {
        /* $("img").slideDown("slow", "swing", function () {
             alert("图片显示")
         });*/
        $("img").slideDown(5000, "swing");
    }

    function slideUpImg() {
        /*$("img").slideUp("slow", "swing", function () {
            alert("图片隐藏");
        });*/
        $("img").slideUp(5000, "swing");
    }

    function slideToggleImg() {
        //$("img").slideToggle("slow","swing");
        $("img").slideToggle(3000);
    }
</script>
<body>
<div>
    <img src="img/man06.jpg" width="100%" height="100%" style="display:none">
</div>
</body>
</html>

在这里插入图片描述

3. 淡入淡出显示和隐藏方式

1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])

淡入淡出显示和隐藏方式代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
    div {
        border: 1px solid red;
        width: 700px;
        height: 350px;
        margin: auto;
    }
</style>
<script>
    $(function () {
        //setTimeout(fadeInImg, 3000);
        //setTimeout(fadeOutImg,6000)

        setTimeout(fadeToggleImg, 3000);
        setTimeout(fadeToggleImg, 6000);
    });

    function fadeInImg() {
        $("img").fadeIn("slow", "swing", function () {
            alert("图片显示");
        });
    }

    function fadeOutImg() {
        $("img").fadeOut("slow", "swing", function () {
            alert("隐藏图片");
        });
    }

    function fadeToggleImg() {
        //$("img").fadeToggle("slow","swing");
        $("img").fadeToggle(3000);
    }
</script>
<body>
<div>
    <img src="img/man06.jpg" width="100%" height="100%" style="display:none">
</div>
</body>
</html>

在这里插入图片描述

遍历

1. js的遍历方式

for(初始化值;循环结束条件;步长)

2. jq的遍历方式

1. jq对象.each(callback)

2. $.each(object, [callback])

3. for…of: jquery 3.0 版本之后提供的方式

遍历代码演示

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        var $lis = $("ul li");
        //使用js遍历
        for (var i = 0; i < $lis.length; i++) {
            if ("上海" == $lis[i].innerHTML) {
                //break; //结束循环
                continue; //结束本次循环，继续下次循环
            }
            //获取内容
            alert($lis[i].innerHTML);
        }

        //jq对象.each(callback)遍历
        $lis.each(function (index, elem) {
            //判断如果是上海，则结束循环
            if ("上海" == this.innerHTML) {
                //SyntaxError: unlabeled break must be inside loop or switch
                //语法错误：未标记的中断必须在循环或开关内部
                //break; //jq循环不能使用break,它不认为是在循环内部。
                //continue; jq循环不能使用continue,它不认为是在循环内部。

                //可以使用true和false代替
                //如果当前function返回为false，则结束循环(break)。
                //return false;
                //如果返回为true，则结束本次循环，继续下次循环(continue)。
                return true;
            }
            //获取li元素方式1
            //使用js对象设置文本体内容
            alert(this.innerHTML);
            //使用jq对象设置文本体内容
            //alert($(this).html());

            //获取li元素方式2
            //使用js对象设置文本体内容
            //alert(elem.innerHTML);
            //使用jq对象设置文本体内容
            //alert($(elem).html());
        });

        //$.each(object, [callback])遍历
        $.each($lis, function (index, elem) {
            alert(index + elem.innerHTML);
        });

        //for..of: jquery 3.0 版本之后提供的方式遍历
        for (elements of $lis) {
            alert(elements.innerHTML);
        }
    });
</script>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

事件绑定

1. jquery标准的绑定方式

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

jquery标准的绑定方式代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //1.获取name对象，绑定click事件
        $("#name").click(function () {
            alert("我被点击了...");
        });

        /*//2.给name绑定鼠标移入事件
         $("#name").mouseover(function () {
             alert("鼠标来了...")
         });

         //3.给name绑定鼠标移出事件
         $("#name").mouseout(function () {
             alert("鼠标走了...")
         });*/

        //简化操作,采用链式编程。
        /* $("#name").mouseover(function () {
             alert("鼠标来了...")
         }).mouseout(function () {
             alert("鼠标走了...")
         });*/

        /*
           如果绑定事件不传递回调函数,则会触发浏览器默认行为。
         */
        $("#name").focus();//让文本输入框获得焦点
        // 表单对象.submit();//让表单提交
    });
</script>
<body>
<div>
    <input id="name" type="text" value="绑定点击事件">
</div>
</body>
</html>

2. on绑定事件/off解除绑定

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

on绑定事件/off解除绑定代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>

<script>
    $(function () {
        //1.使用on给按钮绑定单击事件  click
        $("#btn").on("click", function () {
            alert("我被点击了...")
        });

        //2.使用使用off解绑事件
        $("#btn2").on("click", function () {
            //解绑btn按钮单击事件
            //$("#btn").off("click");
            //将组件上的所有事件全部解绑
            $("#btn").off();
        });
    });
</script>
<body>
<div>
    <input id="btn" type="button" value="使用on绑定点击事件">
    <input id="btn2" type="button" value="使用off解绑点击事件">
</div>
</body>
</html>

3. 事件切换：toggle

jq对象.toggle(fn1,fn2...)
当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

事件切换：toggle代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //获取按钮，调用toggle方法
        $("#btn").toggle(function () {
            //改变div背景色backgroundColor 颜色为 green
            $("#myDiv").css("backgroundColor", "green");
        }, function () {
            //改变div背景色backgroundColor 颜色为 pink
            $("#myDiv").css("backgroundColor", "pink");
        });
    });
</script>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
    点击按钮变成绿色，再次点击红色
</div>
</body>
</html>

1.9版本 .toggle() 方法删除,按钮被覆盖了。
在这里插入图片描述
导入js插件jQuery Migrate（迁移）插件可以恢复此功能。
在这里插入图片描述

案例

1.显示隐藏动画

代码演示

<!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>
        $(function () {
            //方式1:使用show和hide实现
            //setTimeout(showImg,3000);
            //setTimeout(hideImg,9000);

            //方式2:使用toggle实现
            setTimeout(toggleImg, 3000);
            setTimeout(toggleImg, 6000);
        });

        //定义一个显示图片的方法
        function showImg() {
            $("#ad").show(3000);
        }

        //定义一个隐藏图片的方法
        function hideImg() {
            $("#ad").hide(3000);
        }

        //toggle方法显示/隐藏图片
        function toggleImg() {
            $("#ad").toggle("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>

在这里插入图片描述

2.抽奖

代码演示

<!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>
<script>
    //准备一个一维数组，装用户的像片路径
    var imgs = [
        "img/man00.jpg",
        "img/man01.jpg",
        "img/man02.jpg",
        "img/man03.jpg",
        "img/man04.jpg",
        "img/man05.jpg",
        "img/man06.jpg"
    ];
    /*
       分析:
        完成该需求其实就是围绕着点击开始和点击停止两个按钮展开的。

       点击开始
         1.首先为开始按钮绑定一个单击事件。
         2.在点击开始按钮后,开始按钮应该要失效,停止按钮有效。
         3.在单击事件中调用循环定时方法。
             3.1.在循环定时方法中产生一个0-6的随机数
             3.2.再将产生的随机数作为索引,去动态设置小像框src属性。

       点击停止
         1.首先为停止按钮绑定一个单击事件。
         2.在点击关闭按钮后,开始按钮有效,停止按钮失效。
         3.清除定时器
         4.在将生成的索引,去动态设置大相框的src属性。
     */
    $(function () {
        //定义定时器标记
        var startId;
        var index;
        //为开始按钮绑定一个单机事件
        $("#startID").click(function () {
            //设置按钮开始按钮可用,停止按钮不可用。
            $("#startID").prop("disabled", true);
            $("#stopID").prop("disabled", false);

            startId = setInterval(function () {
                //产生一个0-6随机数
                index = Math.floor(Math.random() * 7);
                //设置小像框属性src
                $("#img1ID").prop("src", imgs[index]);
            }, 50);
        });

        //为停止按钮绑定一个单机事件
        $("#stopID").click(function () {
            //设置按钮开始按钮不可用,停止按钮可用。
            $("#startID").prop("disabled", false);
            $("#stopID").prop("disabled", true);

            //清除定时器
            clearInterval(startId);
            //将该图片设置到大相框
            $("#img2ID").prop("src",imgs[index]);
        });
    });
</script>
<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">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px">
</body>
</html>

在这里插入图片描述

插件：增强JQuery的功能

1. $.fn.extend(object)

Jquery获取的对象
增强通过Jquery获取的对象的功能 $("#id")

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
       
        //1.定义jqeury的对象插件
        $.fn.extend({
            //定义了一个check()方法。所有的jq对象都可以调用该方法
            check:function () {
               //让复选框选中
                //this:调用该方法的jq对象
                this.prop("checked",true);
            },
            uncheck:function () {
                //让复选框不选中

                this.prop("checked",false);
            }
            
        });

        $(function () {
           // 获取按钮
            //$("#btn-check").check();
            //复选框对象.check();

            $("#btn-check").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").check();

            });

            $("#btn-uncheck").click(function () {
                //获取复选框对象
                $("input[type='checkbox']").uncheck();

            });
        });
    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>

2. $.extend(object)

Jquery自身的对象
增强JQeury对象自身的功能 $/jQuery代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            max:function (a,b) {
                //返回两数中的较大值
                return a >= b ? a:b;
            },
            min:function (a,b) {
                //返回两数中的较小值
                return a <= b ? a:b;
            }
        });

        //调用全局方法
        var max = $.max(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);
    </script>
</head>
<body>
</body>
</html>
ginger_mr
关注
专栏目录
JQ中的兼容问题（知识点为摘录）
yeni784742321的博客
06-12 415
1.$(document).ready(Fn)、$(window).load(Fn)、$(Fn) 、jQuery(function($){ }): ready事件可以加在任意元素上；ready事件不要求页面完全加载完，只需要加载完dom结构即可触发；ready事件可以同时注册多个，执行时，按照注册的先后顺序执行。就算是注册不同元素的ready事件，也是按照先后顺序执行； loa
web-JQuery高级
zcl_200886的专栏
06-01 213
动画： 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2. easing：用来指定切换效果，默认是"swing"，可用参数"linear" * swing：动画执行时效果是 先慢，中间快，最后又慢 * linear：动画执行时速度是匀速的 3. fn：在动画完成时执行的函数，每
web前端学习-第二十一天
qq_45654474的博客
09-29 237
jQuery笔记1jQuery1. 基础知识1.1基本概念1.2基本语法2. 选择器基本选择器：层次选择器：过滤选择器事件什么是事件常见的DOM事件 jQuery 1. 基础知识 1.1基本概念 jQuery是JS库，能够帮助我们轻松实现一些原本比较麻烦的功能 jQuery每个版本分两个小版本：压缩版与未压缩版，压缩版文件较小，但是没有排版和注释 不便于阅读；未压缩版文件较大，有排版和注释，便于阅读 jQuery实际上就是一个js文件，加载到页面就可以直接使用了 也可以通过CDN（Content Distr
jQuery基础知识
泪光无悔
03-14 459
1.$(document).ready  文档加载完毕的时候发生 例如：$(document).ready(function()){alert(‘document是获取整个文档对象’);}) 2.鼠标点击事件 例如： $(document).ready(function){ $(‘div’).click(function(){ alert(‘’test); }) }) test
JQuery基础知识1
欢迎您的到来
08-15 339
1.1基本概念JQuery是一个JS库,能够帮助我们轻松实现一些原本可能比较麻烦的功能。 Jquery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便阅读；而未压缩版文件较大，有排版和注释，便于阅读。Jquery实际上就是一个js文件，加载到页面就可以直接使用了。<script src="../jquery-3.2.1.min.js"></script>也可以通
jQuery高级应用（上篇）
qq_37122159的博客
07-20 261
学习辅助资料为：JavaScript+jQuery动态网页设计案例课堂（第2版） jQuery的基础知识 jQuery是一个优秀的JavaScript脚本库。是一个兼容多浏览器的JavaScript框架。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>用...
jquery-migrate
03-05
jQuery Migrate是应用迁移辅助插件，是用于高级版本兼容低级版本辅助插件。 例如jQuery版本用的是1.x，计划升级到3.x，就可以在页面删除1.x版本，换成3.x版本，如果有脚本错误，就引入jquery-migrate插件用于兼容低...
jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_
10-03
在学习和使用jQuery 3.5.1时，建议从基础入手，理解其核心概念和常用API，然后逐步探索高级特性和插件。同时，结合实际项目进行实践，将理论知识转化为实际技能。通过不断练习，你将会发现jQuery能够让你的...
jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】
11-01
此外，jQuery还提供了更高级的选择器，如`:first`、`:last`、`:even`等，用于更复杂的元素筛选。 2. **DOM操作（DOM Manipulation）** jQuery提供了丰富的DOM操作方法，如`append()`、`prepend()`用于元素的插入，...
jquery-easyui-1.7.0.zip官方文档
11-04
源码对于高级开发者来说，是一份宝贵的资源。通过阅读和研究源码，可以深入了解组件的工作原理，定制化组件功能，甚至扩展新的组件。 总结，jQuery EasyUI 1.7.0以其丰富的组件、强大的功能和良好的文档支持，成为...
jquery-3.3.1.min.js
05-15
或者与Ajax库如axios或fetch配合，处理更高级的数据请求。 总的来说，jQuery 3.3.1是一个高效、易用的前端工具库，对于开发者来说，它是快速构建动态网页的得力助手。无论你是初学者还是经验丰富的开发者，掌握...
基于微信小程序的新生报到系统设计与实现.docx
最新发布
09-13
基于微信小程序的新生报到系统设计与实现.docx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值