JQuery高级

最新推荐文章于 2024-09-04 01:58:19 发布
最新推荐文章于 2024-09-04 01:58:19 发布
阅读量456 收藏 1
点赞数
分类专栏： # jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45627031/article/details/107128192
版权

JQuery高级

一、 动画

三种方式显示和隐藏元素：
1. 默认显示和隐藏方式
1. show([speed,[easing],[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]])
4.参数分析：
  1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
  2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
    swing：动画执行时效果是 先慢，中间快，最后又慢
    linear：动画执行时速度是匀速的
  3. fn：在动画完成时执行的函数，每个元素执行一次。

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
    <script>
        //入口函数
            //点击按钮隐藏div
            function hideFn(){
                //获取id
                $("#showDiv").hide("slow","swing");
            }
            //点击按钮显示div
            function showFn(){
                //获取id
                $("#showDiv").show("slow");
            }
            //点击按钮div切换div显示和隐藏
            function toggleFn(){
                //获取id
                $("#showDiv").toggle("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(初始化值;循环结束条件;步长)
		break 结束循环
		continue 结束本次循环，继续下一次循环

//获取id
var city = $("#city li");
for (var i = 0; i < city.length; i++) {
    if ("上海"==city[i].innerHTML){
        //break;//结束本次循环
        continue//结束本次循环，继续下一次循环
    }
    alert(i + ":" + city[i].innerHTML);
    //js对象转换成 jq对象调用html方法
    document.write(i + ":" + $(city[i]).html());
}
2. jq的遍历方式

1.jq对象.each(callback)

var city = $("#city li");
city.each(function () {
alert(this.innerHTML)
})

2. 语法：jquery对象.each(function(index,element){});
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
this：集合中的每一个元素对象
回调函数返回值：
true:如果当前function返回为false，则结束循环(break)。
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

var city = $("#city li");
city.each(function (index,element) {
      if ("上海"==$(element).html()){
      // 如果当前function返回为false，则结束循环(break)。
      // 如果当前function返回为true，则结束本次循环，继续下次循环(continue)
          return true;
      }
      //index代表索引element代表js对象
      alert(index+":"+$(element).html());
})

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

var city = $("#city li");
 $.each(city,function () {
     alert($(this).html());
 })

4. for…of: jquery 3.0 版本之后提供的方式
语法：for(元素对象 of 容器对象)

var city = $("#city li");
         for (li of city){
             alert($(li).html());
         }

练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //入口函数
        $(function () {
            //第一种方式
            //获取id
            var city = $("#city li");
            for (var i = 0; i < city.length; i++) {
                if ("上海"==city[i].innerHTML){
                    //break;//结束本次循环
                    continue//结束本次循环，继续下一次循环
                }
                alert(i + ":" + city[i].innerHTML);
                //js对象转换成 jq对象调用html方法
                document.write(i + ":" + $(city[i]).html());
            }
            第二种方式
        var city = $("#city li");
        city.each(function () {
            alert(this.innerHTML)
        })
             //第三种方式
        var city = $("#city li");
        city.each(function (index,element) {
            if ("上海"==$(element).html()){
            // 如果当前function返回为false，则结束循环(break)。
            // 如果当前function返回为true，则结束本次循环，继续下次循环(continue)
                return true;
            }
            //index代表索引element代表js对象
            alert(index+":"+$(element).html());
 })
            //第四种
            var city = $("#city li");
            $.each(city,function () {
                alert($(this).html());
            })
            //第五种for..of: jquery 3.0 版本之后提供的方式
            var city = $("#city li");
            for (li of city){
                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="../../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //入口函数
        $(function () {
            //绑定id事件输出警告框
            $("#name").click(function () {
                alert("我被点击了")
            });
            //鼠标来了走了
            $("#name").mouseover(function () {
                alert("来看")
            });
            $("#name").mouseout(function () {
                alert("走了")
            });
            //链式编程
            $("#name").mouseover(function () {
                alert("来看")
            }).mouseout(function () {
                alert("走了")
            });
            //获得焦点
            $("#name").focus(function () {
                alert("获得焦点");
            })
        });
    </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="../../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //入口函数
        $(function () {
            //jq对象.on("事件名称",回调函数)
            $("#btn").on("click",function () {
                alert("点击")
            });
            //解除单击事件jq对象.off("事件名称")
            $("#btn2").click(function () {
                //解除btn的单击事件
                $("#btn").off("click")
            });
        });
    </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="../../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //函数入口
        $(function () {
            //获取按钮，调用toggle方法
            $("#btn").toggle(function () {
                //改变div背景色
                $("#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>
案例（广告显示和隐藏实现）
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 () {
           //定义定时器，调用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>

四、 插件（增强JQuery的功能）

1. $.fn.extend(object)

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

语法：

$.fn.extend({
 	check:function () {
     alert("aaaa")
	 }
});
$(function () {
 //获取按钮
 $("#btn-check").check()//通过jq对象调用
});

练习：

要求：全选或全不选效果实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $.fn.extend({
            check:function () {
                //让复选框选中
                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)

1.增强JQeury对象自身的功能 $/jQuery 通过$ 或者 jquery 来调用

练习

求2个值的最小值；扩展max方法：求2个值最大值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../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;
            }
        });
        alert($.max(1,2))
        alert($.min(1,2))
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

我是泛滥
关注
专栏目录
jQuery高级编程
09-01
《jQuery高级编程》从开发人员的层次对iQuery提供了一个全面的介绍。另外还深入介绍了iQuery的很多高级特性。, , 在《jQuery高级编程》第1部分中，深入介绍了iQuery的基础知识、介绍了如何选择或操作DOM元素，以及...
jQuery高级应用（上篇）
qq_37122159的博客
07-20 277
学习辅助资料为：JavaScript+jQuery动态网页设计案例课堂（第2版） jQuery的基础知识 jQuery是一个优秀的JavaScript脚本库。是一个兼容多浏览器的JavaScript框架。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>用...
Jquery(二)之高级用法
faramita_of_mine的博客
11-22 1276
Jquery之高级用法一、事件冒泡二、页面加载及常见事件三、隐藏（hide）/显示（show）四、淡入（fadeIn）/淡出（fadeOut）（自）五、滑入（slideUp）/滑出（slideDown）六、动画（animate）七、封装（自）八、ajax 方法九、find()与children()（自）十、请求的同步与异步十一、JQuery 对象和 DOM 对象 一、事件冒泡   在一个对象上触发某类事件（比如单击 onclick 事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如
jQuery基础——高级技巧
最新发布
m0_54066656的博客
09-04 998
JQ基础——高级技巧。
学习jQuery初级中级高级用法 一篇就够了_jquery-3(1)
2401_84160361的博客
04-29 756
jQuery提供了animate方法来实现更复杂的动画效果比如：图片用到了再去加载，常见于有大量图片的网页，比如电商网页。
学习jQuery初级中级高级用法 | 一篇就够了
m0_58667776的博客
09-10 893
本篇文章可以带你快速上手jQuery，本文包括jQuery各种常用以及初中高级用法，为后续学习可以做好铺垫，知识点非常全面。
jQuery 进阶之后的高级用法
一拳莫敌的博客
06-11 310
从 jQuery 项目的源码中，你可以创建一个自定义的构建，只包含你需要的部分，从而减少最终文件的体积。
jQuery高级在线配色器插件特效代码
03-20
【jQuery高级在线配色器插件特效代码】是一款专为前端开发者设计的强大工具，它集成了丰富的颜色选择和搭配功能，极大地提升了开发人员在设计网页色彩方案时的效率。这款插件不仅允许用户在线操作，同时也支持离线...
JQuery高级(学习笔记)
qq_42878218的博客
08-01 224
JQuery动画遍历事件绑定插件 动画 三种方式显示和隐藏元素 1、 参数： 1. speed：表示动画的速度。有三个预定义的值( “slow”, “normal”, “fast” ) 或 表示动画时长的毫秒数值(如：2000 ) easing：用来指定切换效果，默认是"swing"，可用参数"linear" 1) swing：动画执行时效果是 先慢，中间快，最后又慢 2) linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每个元素执行一次。 2、 默认显示和隐藏方式
【Ajax学习】jQuery高级用法
qq_53582888的博客
11-17 280
1、定义UI结构2、验证是否选择了文件注意：获取文件列表前，必须要将jQuery对象转换为DOM对象，因为files是DOM对象的属性jQuery对象转换为DOM对象的方法：$('名称')[0]3、向FormData中追加文件4、使用jQuery发起上传文件的请求注意：因为formdata自带setRequeseHeader，所以一定不要在ajax函数中再设置了，也就是说，在是同jQuery上传文件时，要固定写上contentType和processData为false。
jQuery高级用法、axios、同源与跨域、JSONP以及防抖与节流
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
08-16 434
　　重点： 　　一、jQuery高级用法 　　1、 jQuery实现文件上传 　　(1)定义UI结构 　　(2)验证是否选择了文件 　　①将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表 　　②判断是否选择了文件 　　(3)向FormData中追加文件 　　v...
JQuery高级用法
落拓子ю的博客
05-01 335
JQuery高级用法JQuery 高级1. 动画2. 遍历3. 事件绑定4. 案例5. 插件：增强JQuery的功能 下载链接: https://pan.baidu.com/s/1jiDjXM-ahwOpKmEOnceA0A提取码: 6dxx JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]...
笔记44-JQuery高级笔记
Saito__Asuka的博客
09-30 320
文章目录JQuery高级动画三种方式显示和隐藏元素 JQuery高级 动画 三种方式显示和隐藏元素 默认显示和隐藏方式 show([speed,[easing],[fn]]) 参数: speed: 动画的速度. 三个预定义的值(“slow”,“normal”.“fast”)或表示动画时长的毫秒数值 easing: 用来指定切换效果,默认是swing,可用参数linear swing: 动画执行时效果是 先慢，中间快，最后又慢 linear：动画执行时速度是匀速的 fn:在动画完成时执行的函数,
jQuery中$()函数的7种用法汇总
weixin_33981932的博客
11-16 5521
前言 jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口。其中我们用的非常频繁的一个函数是$()或者说是jQuery()，当我们调用他的时候会根据传入的参数的不同而达到不同的效果。 接下来会一一说一下这7中用法，欢迎大家指正...
javascript开发技巧
追求专业
07-08 133
1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var allItems = $("div.item"); var keepList = $("div#container1 div.item"); &lt;div&gt;class names: ...
JQuery高级操作详解
小皮皮LL的博客
08-22 803
文章目录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选择器的高级用法
newmiracle学习天地
05-18 482
jquery选择器的高级用法 根据类 然后根据属性 来获取 $(".danxuan_tiyan[is_select=1]")查看原文：http://newmiracle.cn/?p=1608
jQuery高级用法
m0_63400611的博客
03-26 177
jQuery实现文件上传 定义UI结构 <body> <input type="file" name="" id="file"> <button id="btnUpload">上传文件</button> </body> 验证是否选择了文件 $('#btnUpload').on('click', function() { //判断是否上传了文件 //转换为原生DOM对象才能调用files var f
前端高级之---jQuery基本用法(很全)
weixin_45591980的博客
10-02 578
其他版本下载：https://www.bootcdn.cn/jquery/ 3.5.1版本：https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js 注意：slim版没有Ajax 官网：https://jquery.com/ JQuery JQuary内部封装了原生的js代码（还添加了很多功能），书写更少的代码完成js操作，类似python模块 在前端模块不叫模块，叫类库 兼容多个浏览器 宗旨：write less do more 原.
jQuery高级编程与LinuxIDC资源指南
"jQuery高级编程.pdf" jQuery是一个广泛使用的JavaScript库，它的主要目标是简化JavaScript的开发，通过提供一套丰富的API来处理HTML文档对象模型（DOM）、事件处理、动画效果以及异步HTTP请求（Ajax）。jQuery的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值