Jquery_高级操作笔记

最新推荐文章于 2024-04-24 22:50:14 发布
最新推荐文章于 2024-04-24 22:50:14 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： js java jquery javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaikai_gege/article/details/109594510
版权

一、动画效果

三种方式显示和隐藏元素

  • 默认显示和隐藏方式

(1).show([speed,[easing],[fn]])

  • 参数：
  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])
  • 淡入淡出显示和隐藏方式
  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>
        //隐藏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>

二、遍历

(1) js的遍历方式

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

(2) jq的遍历方式

  1. jq对象.each(callback)
  • 语法：
    jquery对象.each(function(index,element){});
    * index:就是元素在集合中的索引
    * element：就是集合中的每一个元素对象
    * this：集合中的每一个元素对象
  • 回调函数返回值：
    • true:如果当前function返回为false，则结束循环(break)。
    • false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
  1. $.each(object, [callback])
  2. 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">
/*

        遍历
            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());
                    //3.2 获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（元素对象）
                    //alert(index+":"+element.innerHTML);
                    //alert(index+":"+$(element).html());

                    //判断如果是上海，则结束循环
                    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. 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("鼠标走了...")
            });*/
            alert("我要获得焦点了...")
            //$("#name").focus();//让文本输入框获得焦点
            //表单对象.submit();//让表单提交
        });


    </script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>
  1. 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>
  1. 事件切换：toggle
  • jq对象.toggle(fn1,fn2…)

    • 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

    • 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

<!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 () {
               //改变div背景色backgroundColor 颜色为 green
               $("#myDiv").css("backgroundColor","green");
           },function () {
               //改变div背景色backgroundColor 颜色为 pink
               $("#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>

四、案例

广告的隐藏和显示

  • 需求：
  1. 当页面加载完，3秒后。自动显示广告
  2. 广告显示5秒后，自动消失。
  • 分析：
  1. 使用定时器来完成。setTimeout (执行一次定时器)
  2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
  3. 使用 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 () {
            //设置一个定时器,3秒后调用显示方法
            setTimeout(adshow,3000);
            //8秒后调用隐藏方法
            setTimeout(adhide,8000);
        });
        //设置显示方法
        function adshow(){
            //淡入效果
            $("#ad").fadeIn("slow")
        }
        //设置隐藏方法
        function adhide(){
            //淡出效果
            $("#ad").fadeOut("slow")
        }

    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="img/baoer.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

抽奖

分析：

  • 给开始按钮绑定单击事件
  1. 定义循环定时器
  2. 切换小相框的src属性
    *定义数组，存放图片资源路径
    *生成随机数。数组索引
  • 给结束按钮绑定单击事件
    *停止定时器
    *给大相框设置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>

    <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",
                    ];
        var startId;//开始定时器的id
        var index;//随机角标
        $(function () {
            //设置按钮的点击效果 开始能点
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true);


            //给开始一个点击事件
            $("#startID").click(function () {
                //设置一个循环定时器20毫秒循环一次
                $("#startID").prop("disabled",true);
                $("#stopID").prop("disabled",false);
                startId = setInterval(function () {
                    //设置一个随机的imgs的脚标 0-6
                    index =Math.floor(Math.random()*7)// 原本random是0.000-0.999需要乘以7然后floor向下取整
                    $("#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();
                //淡入效果
                $("#img2ID").fadeIn("slow");

            })



        });


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

五、插件

  1. 定义jqeury的对象：$.fn.extend({}) 可以自定义一些方法，jqeury的对象可以直接调用
<!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>

jquery的全局变量： $.extend({}) 自定义方法,全局变量 $可以直接调用

<!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>
KaiKai-G
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery_学习笔记.zip
11-01
自定义追加删除数据行(页面html,js,css样式)...通过JQuery实现,用的是Layui前端框架
jQuery中setTimeout的几种使用方法
Green的专栏
03-28 360
转自：http://www.studyday.net/2011/01/177
jquery.easing.js 使用动画过度效果
xiaozhu0301的博客
06-12 1130
使用 jquery.easing.js 增强动画过渡效果 jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。 jquery.easing.js 这个插件，
setInterval、setTimeout、animation、animate的区别
宁静致远
11-27 1561
1.setInterval setInterval()方法可按照指定的周期来调用函数或者计算表达式（以毫秒为单位） 语法： setInterval(函数表达式，毫秒数)； setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用作clearInterval()方法的参数。 例如： setInter...
Jquery实战_读书笔记1—选择jQuery
10-29
近期公司积极组织我们这些开发人员学习进步，督促我们学习更多的技术来...为此我选择了jQuery作为我学习的方向，同时我也是想将我的学习心得分享给大家，以后我会不断的更新一系列jQuery方面的学习纪要，帮助大家学习。
Jquery实战_读书笔记2 选择器
10-29
jQuery相对于其他的javascript框架优秀的特点之一就是元素选择功能，通过简单的一条件语句可以查询一些复杂的元素
jQuery1.11.0_20140330_jquery_
10-02
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"...jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities
Jquery_基础学习笔记
08-28
Jquery_基础学习笔记 jquery还是要好好看看 不错的框架
Java前端_Jquery基础操作笔记
LongKai_G
11-05 1652
Jquery 一、JavaScript和Jquery区别 JavaScript：将所有的div标签内的元素内容设置为aaa //js获取全部名为div的html元素对象（div标签） var divs = document.getElementsByTagName("div"); //弹出对话框 divs内div对象的个数 alert(divs.length); //将所有的div（数组）内元素内容设置为aaa for (var i = 0; i <di
JSON的基操笔记、Jackson解析器和Ajax结合案例
LongKai_G
11-11 1593
JSON 一、 JSON格式和数据的获取 定义基本格式 获取name的值 有两种：(1) json对象.键 (2) json对象[“键”] var person = {"name": "张三", age: 23, 'gender': true}; //获取name的值 有两种 1.json对象.键 2.json对象["键"] //var name = person.name; var name = person["name"]; 嵌套格式 JSON—数组—JSON
AJax的基本操作
LongKai_G
11-11 1296
Ajax AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上** 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加
关于Thymeleaf模板
LongKai_G
12-26 977
Thymeleaf模板Thymeleaf模板概述SpringBoot引入依赖和使用Thymeleaf模板的表达式 Thymeleaf模板概述 前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。 jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，SpringBoot这个项目首先是以jar的方式，不是war，像第二，我们用的还是嵌入式的Tomcat，所
spring-mvc常用的配置+Ajax回顾+异步验证账户密码
LongKai_G
12-23 635
这里写目录标题零、spring-mvc常用的配置一、ajax失去焦点发送请求二、ajax点击后发送请求并标签内容三、ajax异步验证账户密码 零、spring-mvc常用的配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
string模拟实现
m0_73969414的博客
04-23 1215
c++中string的模拟实现，面试必会知识点
【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-18 946
2、开发环境为TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql5.0，使用java语言开发。(5)投票选项管理：对投票选项信息进行添加、删除、修改和查看。(6)投票记录管理：对投票记录信息进行添加、删除、修改和查看。(1)管理员管理：对管理员信息进行添加、删除、修改和查看。(2)用户管理：对用户信息进行添加、删除、修改和查看。(3)公告管理：对公告信息进行添加、删除、修改和查看。(4)投票管理：对投票信息进行添加、删除、修改和查看。4）投票浏览查看、查看投票、投票记录。
javaweb-SpringBoot基础
kussm_的博客
04-20 1147
Spring的官网(Spring的简介：Spring makes Java simple。Spring Boot 可以帮助我们非常快速的构建应用程序、简化开发、提高效率。创建一个子包controller。
MSE实现全链路灰度实践
最新发布
云计算、数据库、大数据、深度学习、NLP、Python
04-24 134
待更新。
Web前端 Javascript笔记5
cycyzh的博客
04-18 1015
script>'console.log("哈哈哈佳人们好困")'}, 3000)​let t1 = setTimeout('console.log("你们看到这句话的时候我早已身价百万！！")', 4000)​</script>3秒，四秒后出来的东西，出现前会返回计时器编号。
js/plugin/jquery_ajax_document.js
08-26
js/plugin/jquery_ajax_document.js是一个使用jQuery库的插件，用于处理Ajax请求和处理文档对象的操作。 该插件提供了一些方法来发送Ajax请求，可以将请求发送到服务器并获取响应数据。通过使用这些方法，我们可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值