JQuery高级笔记

最新推荐文章于 2022-12-03 15:00:05 发布
最新推荐文章于 2022-12-03 15:00:05 发布
阅读量83 收藏 1
点赞数 1
分类专栏： JQuery 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39561622/article/details/109256029
版权

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

<!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>
</head>
<script>
    //隐藏DIV
    function hideFn(){
        // $("#showDiv").hide("slow","swing",function (){
        //     alert("隐藏了")
        //
        // })
        // $("#showDiv").slideUp("slow","swing",function (){
        //     alert("隐藏了")
        //
        // })
        $("#showDiv").fadeOut("slow","swing",function (){
            alert("显示了")

        })
    }
    //显示DIV
    function showFn(){
        // $("#showDiv").show("normal","liner",function (){
        //     alert("显示了")
        //
        // })//默认显示和隐藏方式
        // $("#showDiv").slideDown("normal","swing",function (){
        //     alert("显示了")
        //
        // })//滑动显示和隐藏方式
        $("#showDiv").fadeIn("slow","swing",function (){
            alert("显示了")

        })//淡入淡出显示和隐藏方式
    }
    //切换显示和隐藏DIV
    function toggleFn(){
        // $("#showDiv").toggle("5000","swing",function (){
        //     alert("切换了")
        //
        // })
        $("#showDiv").slideToggle("slow","swing",function (){
            alert("隐藏了")

        })
    }
</script>
<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. 遍历

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 容器对象)

<!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.获取所有的ul下的li
            var citys = $("#city li");
            // //2.遍历li
            // for (var i = 0; i < citys.length; i++) {
            //     //获取内容
            //     alert(i + ":" + citys[i].innerHTML)
            // }
            //2. jq对象.each(callback)
            /*
            citys.each(function (index, element) {
                 //获取li对象 第一种方式 this
                 // alert(this.innerHTML);
                 //获取li对象 第二种方式 在回调函数中定义参数 index:就是元素在集合中的索引 element：就是集合中的每一个元素对象
                 alert(index + ":" + element.innerHTML);
             })
             */
            // 3.$.each(object, [callback])
            // $.each(citys, function () {
            //     alert($(this).html())
            // })
            // // 4. for..of
            for(li of citys){
                alert($(li).html())
            }
        })
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

3. 事件绑定

1. jquery标准的绑定方式

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

<!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").mouseout(function (){
                alert("鼠标走了")
            })
            */
            //简化操作 链式编程
            /*
            $("#name").mouseover(function (){
                alert("鼠标来了")
            }).mouseout(function (){
                alert("鼠标走了")
            })
            */
            // $("#name").focus();//让文本输入框获得焦点
            // 表单对象.submit() //让表单提交
        })

    </script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>

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

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

<!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给按钮绑定单击事件 click
            $("#btn").on("click",function (){
                alert("我被点击了")
            })
            // 2.使用off接触btn按钮的单击事件
            $("#btn2").click(function () {
                // 解除btn按钮的单击事件
                // $("#btn").off("click")
                $("#btn").off()//将组件上的所有事件全部解除
            })
        })

    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</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>

<!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 src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
     $(function (){
         $("#btn").toggle(function (){
             $("#myDiv").css("backgroundColor","green")
         },function (){
             $("#myDiv").css("backgroundColor","pink")
         })
     })
        

    </script>
</head>
<body>

    <input id="btn" type="button" value="事件切换">
    <div id="myDiv" style="width:300px;height:300px;background:pink">
        点击按钮变成绿色，再次点击红色
    </div>
</body>
</html>

4. 案例

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>
        /*
            需求：
                1. 当页面加载完，3秒后。自动显示广告
                2. 广告显示5秒后，自动消失。
            分析：
                1. 使用定时器来完成。setTimeout (执行一次定时器)
                2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
                3. 使用  show/hide方法来完成广告的显示
         */
        //入口函数，在页面加载完成之后，定义定时器，调用这两个方法
        $(function () {
            //定义定时器，调用adShow方法 3秒后执行一次
            setTimeout(adShow, 3000);
            //定义定时器，调用adHide方法，8秒后执行一次
            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>

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>
    <script language='javascript' type='text/javascript'>

        /*
            分析：
                1. 给开始按钮绑定单击事件
                    1.1 定义循环定时器
                    1.2 切换小相框的src属性
                        * 定义数组，存放图片资源路径
                        * 生成随机数。数组索引
                2. 给结束按钮绑定单击事件
                    1.1 停止定时器
                    1.2 给大相框设置src属性

         */
        var imgs = ["../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg",
        ];
        var startId;//开始定时器的id
        var index;//随机角标
        $(function () {
            //处理按钮是否可以使用的效果
            $("#startID").prop("disabled", false);
            $("#stopID").prop("disabled", true);
            //1. 给开始按钮绑定单击事件
            $("#startID").click(function () {
                // 1.1 定义循环定时器 20毫秒执行一次
                startId = setInterval(function () {
                    //处理按钮是否可以使用的效果
                    $("#startID").prop("disabled", true);
                    $("#stopID").prop("disabled", false);
                    //1.2生成随机角标 0-6
                    index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                    //1.3设置小相框的src属性
                    $("#img1ID").prop("src", imgs[index]);
                }, 20);
            });
            //2. 给结束按钮绑定单击事件
            $("#stopID").click(function () {
                //处理按钮是否可以使用的效果
                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);
                // 1.1 停止定时器
                clearInterval(startId);
                // 1.2 给大相框设置src属性
                $("#img2ID").prop("src", imgs[index]).hide();
                //显示1秒之后
                $("#img2ID").show(1000);
            });
        });
    </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">
<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px">
</body>
</html>

5. 插件：增强JQuery的功能

	1. 实现方式：
		1. $.fn.extend(object) 
			* 增强通过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">
    $.fn.extend({
        //定义了一个check方法，所有的jq对象可以调用该方法
        check:function (){
            //让复选框选中

            //this:调用方法的jq对象
            this.prop("checked",true)
        },
        uncheck:function (){
            //让复选框不选中
            this.prop("checked",false)
        }
    })
    $(function (){
        //获取按钮
        // $("#btn-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="check()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheck()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>

		2. $.extend(object)
			* 增强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(3,4)
        alert(max)
        var min=$.min(3,4)
        alert(min)
    </script>
</head>
<body>
</body>
</html>
觅花晨
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery高级笔记.md
03-11
快速使用JQuery框架及高级技巧 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的...
我的JQuery笔记.doc
06-30
以上是jQuery基础操作的简要概述，实际应用中，jQuery还提供了许多高级功能，如动画效果、Ajax请求、插件扩展等。学习jQuery，不仅可以提高开发效率，还能让你的网页交互更加流畅、美观。在学习过程中，结合实践不断...
JQuery高级操作详解
小皮皮LL的博客
08-22 776
文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件 文章目录JQuery高级操作详解1.动画2.遍历3.事件绑定4.插件 JQuery高级操作详解 1.动画 三种方式显示和隐藏元素： 默认显示和隐藏方式 show([speed,[easing],[fn]])。（显示） hide([speed,[easing],[fn]])。（隐藏） toggle([speed,[easing],[fn]])。（在显示和隐藏之间切换） 三个参数： 1.speed：动画的速度。三个预定义的值(“s
JQuery高级
最新发布
qq761358496的博客
12-03 67
JQuery高级
JQuery 案例
南淮北安的博客
04-06 743
文章目录一、广告的自动显示与隐藏二、抽奖 一、广告的自动显示与隐藏 需求： * 当页面加载完，3秒后。自动显示广告 * 广告显示5秒后，自动消失。 分析： * 使用定时器来完成。setTimeout (执行一次定时器) * 分析发现JQuery的显示和隐藏动画效果其实就是控制display * 使用 show/hide方法来完成广告的显示 代码 <!--引入jquery--&g...
Jquery的高级进阶、以及使用教程
等不到的晴天的博客
04-10 1118
Jquery概述 jQuery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操作等功能。 Jquery基本语法 HTML引入Jquery： Jquery环境引入 Jquery对象与dom对象的区别 Jquery选择器 基本选择器 层级关系选择器 属性选择器 过滤选择器 对象遍历 Jquery的dom操作 Jquery操作内容 Jquery操作属性 Jque...
jquery学习笔记
05-16
同时，jQuery还提供了更高级的选择器，如`:first`、`:last`、`:even`等。 3. 链式调用：jQuery对象的方法返回的都是jQuery对象，允许我们进行链式调用，如`$("#myDiv").css("color", "red").fadeIn(500);`。 二、...
jquery完全笔记 带目录 高清 经典前端js笔记 前端必看
08-07
jQuery笔记，个人总结的jQuery全部特性，可以作为参考手册，可以作为学习笔记，其中源码本人在springmvc全部测试通过
jQuery学习笔记
09-02
详细的记录了jQuery开发从初级到高级的每个部分。最后还包括了开发自己框架的步骤实例！
JQuery 高级
takeuherat的博客
09-02 117
JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2. easing：用来指定切换效果，默认是"swing"，...
JavaWeb快速入门--JQuery(2)
龙源IT 的博客
05-02 773
JQuery 高级：动画、遍历、绑定事件
21 jquery高级
lovetg0419的博客
11-03 187
********************************* 学会查文档********************************** 1. 2.       1. 动画                                                                                                   ...
（转）什么？你还不会写JQuery 插件
weixin_30650039的博客
11-07 939
原文地址：http://www.cnblogs.com/joey0210/p/3408349.html 前言　　 如今做web开发，jquery 几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的...
jQuery 多种高级页面属性和动画效果
孺子-小哥
10-13 5682
完成目标：利用jQuery语法完成多种页面属性和动画效果 1.文字淡入淡出，显示及隐藏 代码： Title $(function () { $('p').click(function () { $('p').toggle("slow") })
10个最佳高级jQuery插件
06-28 133
让我们面对现实吧，有时候我们将不得不花费一些钱，以便能够获得我们真正想要的（具有非常不错的真棒功能，即更好的jQuery插件！）。 今天，我们有一个名单10个最佳的jQuery插件溢价 ，我们想展示给你。 请享用！ 相关文章： 10高级CSS3和HTML5兆丰菜单 10个高级jQuery的倒计时脚本 1.肯伯恩斯：jQuery的滑块作用充分响应 这个jQuery滑块全系列配备的4个版本...
jquery使用教程4
jitaguizhao的博客
03-11 116
我们来看看jquery是如何实现淡入 淡出效果的. fadeOut(speed,callback) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 $("#fadeOut1").click(function(){ $("#fadeOut"...
JQuery自学指南：从基础到高级组件应用
JQuery教程自学笔记深入探讨了这款强大的JavaScript库，它旨在简化HTML和JavaScript交互，使得前端开发更加高效。本教程分为两大部分：基础概念和jQuery UI组件。 一、概述 jQuery的核心价值在于其简洁易用的语法，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值