javaweb-JQuery高级-40

最新推荐文章于 2022-12-09 10:22:03 发布

lidashent

最新推荐文章于 2022-12-09 10:22:03 发布

阅读量127

点赞数

分类专栏： javaweb 文章标签： java

本文链接：https://blog.csdn.net/lidashent/article/details/108059107

版权

javaweb 专栏收录该内容

92 篇文章 0 订阅

订阅专栏

文章目录

今日内容：

1. JQuery 高级
	1. 动画
	2. 遍历
	3. 事件绑定
	4. 案例

源代码已经上传到github,地址为：
https://github.com/Jonekaka/learn_web_20817

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

滑动显示和隐藏方式
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>
    // 为什么不能加载完成后使用？，索引无法定位到按钮功能函数
    // 如果先看视频，再做，做不出来又要回去看，浪费时间，细节不到位，不清楚
    // 如果先做，又不懂道理，只会照葫芦画瓢而已，没有印象，都不可取
    // $(function () {
        function  hideFn() {
   /*         $("#showDiv").hide("slow","swing",function () {
                alert("隐藏");
            });*/
/*            // 默认方式
            $("#showDiv").hide(5000,"swing");*/
/*            // 滑动方式
            $("#showDiv").slideUp("slow");*/
//          淡入淡出方式
            $("#showDiv").fadeOut("slow");
        };
        function  showFn() {
/*                     $("#showDiv").show("slow","swing",function () {
             alert("展示");
         });*/
/*                        // 默认方式
                        $("#showDiv").show(5000,"swing");*/
/*                        // 滑动方式
                        $("#showDiv").slideDown("slow");*/
//          淡入淡出方式
            $("#showDiv").fadeIn("slow");
        }
        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>

遍历
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)
 	5. $.each(object, [callback])
 	6. 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 () {
            // 获得ul下的所有li
            var citys=$("#city li");
/*            // 遍历对象
            for(var i=0;i<citys.length;i++){
                alert(i+citys[i].innerHTML);
            }*/
            // 使用jq遍历。
            citys.each(function (index,element) {
/*                // 获得li对象，第一种方式this
                // alert(this.innerHTML);
                alert($(this).html());*/
/*// 获得li对象第二种方式，在回调函数中定义参数  index(索引)  element(元素对象)
                alert(index+element.innerHTML);*/

            });
            // // jq遍历对象，$.each(object,[callback])全局遍历
            // $.each(citys,function () {
            //     alert($(this).html());
            // });
            // 使用for 。。。of Jqery  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. 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 () {

        // 标准的绑定方式
        // 使用click方法
/*       $("#name").click(function () {
           alert("点击");
       });*/
/*       $("#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>

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 () {
        // 用on给按钮添加click事件
        $("#btn").on("click",function () {
            alert("绑定了点击事件");
        });
// 使用off取消绑定
        $("#btn2").click(function () {
            // 注意解绑的id
            $("#btn").off("click");
            // $("#btn").off();解除全部绑定
        });
        });
    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

事件切换：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 () {
            // 使用toggle方法
            $("#btn").toggle(function () {
                $("#myDiv").css("backgroundColor","green");
            },function () {
                $("#myDiv").css("backgroundColor","red");
            });
        });
    </script>
</head>
<body>

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

广告的出现与消失案例

/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。

		            分析：
		                1. 使用定时器来完成。setTimeout (执行一次定时器)，完成定时触发函数
		                2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display，调用show,hide方法就可以控制，函数实现
		         */

<!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 () {
            // 定时器,方法如果写（）会立刻执行，不要写
            setTimeout(adShow,3000);
            // 想要5秒后消失，就需要加上之前显示的时间，计时是相互干扰的，从页面加载完毕统一算起
            setTimeout(adHide,8000);
        });
        // 广告出现
        function  adShow() {
            $("#ad").show("slow");
        }
        // 广告消失
        function adHide() {
            $("#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>

抽奖案例

/*
分析：
1. 给开始按钮绑定单击事件
1.1 定义循环定时器，触发函数随机切换图片
1.2 函数获得src属性，随机切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
* 点击停止禁用开始按钮，开启停止按钮

		                2. 给结束按钮绑定单击事件
		                    1.1 停止定时器
		                    1.2 给大相框设置src属性
		                    停止按钮禁用，开始按钮开启
		
		         */

<!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"
    ];
    // 开启定时器的id
    var startId;
    // 随机坐标变量
    var index;
    $(function () {
        // 初始化按钮
        $("#startID").prop("disabled",false);
        $("#stopID").prop("disabled",true);
        // 给开始按钮绑定单击事件
        $("#startID").click(function () {
            // 定时器定期触发函数，循环定时器，而非一次性的
            startId=setInterval(function () {
                // 禁用开始按钮，释放停止按钮
                $("#startID").prop("disabled",true);
                $("#stopID").prop("disabled",false);
                // 生成索引范围内随机数,向下取整,0.000-0.999
                index=Math.floor(Math.random()*7);
                // 设置图片
                $("#img1ID").prop("src",imgs[index]);
            },20)
        });
        // 结束按钮绑定事件
        $("#stopID").click(function () {
            // 禁用关闭按钮，释放开始按钮
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);
            // 停止定时器
            clearInterval(startId);
            // 设置大相框图片,但是先隐藏，实现动画效果
            $("#img2ID").prop("src",imgs[index]).hide();
            // 显示1s以后
            $("#img2ID").show(1000);
        });
    });
</script>
</body>
</html>

插件自定义

：增强JQuery的功能
	1. 实现方式：
		1. $.fn.extend(object) 对象级插件
			* 增加更多的功能，这些功能可以是自定义的，都可以调用，增强通过Jquery获取的对象的功能  $("#id")，
			* this调用该方法的jq对象

<!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的对象新插件
    // $.fn.extend(object) 对象级插件
       $.fn.extend({
           // 定义一个check方法，所有的jq对象都可以调用该方法
           check:function () {
               // 让复选框选中
               // 调用该方法的jq对象
               this.prop("checked",true);
           },
           uncheck:function () {
               // 让复选框不选中
               this.prop("checked",false);
           }
       });
    // 调用插件
    $(function () {
    //     获得按钮
        $("#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)全局性插件，
			* 增强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(1,2);
        alert(max);
    </script>
</head>
<body>
</body>
</html>

lidashent

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaweb-JQuery高级-40

文章目录今日内容：JQuery 高级今日内容：1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例源代码已经上传到github,地址为：JQuery 高级1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
复制链接

扫一扫

专栏目录