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

1.JQuery动画

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

2.遍历

遍历1. js的遍历方式* for(初始化值;循环结束条件;步长)2. jq的遍历方式1. jq对象.each(callback)2. $.each(object, [callback])3. for..of:jquery 3.0 版本之后提供的方式$(function () {//1.获取所有的ul下的livar citys = $("#city li");//2.遍历lifor (var i = 0; i < citys.length; i++) {if("上海" == citys[i].innerHTML){//break; 结束循环//continue; //结束本次循环，继续下次循环}//获取内容alert(i+":"+citys[i].innerHTML);}//2. jq对象.each(callback)callback是一个回滚函数citys.each(function (index,element) {//3.1 获取li对象 第一种方式 this（js对象）//alert(this.innerHTML);//alert($(this).html());//3.2 获取li对象 第二种方式 在回调函数中定义参数   index（索引） element（js元素对象）//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 (index,element) {//alert($(this).html());//alert(this.innerHTML);//可以用jq或者js对象if ("上海" == this.innerHTML){return true;}alert(index+":"+element.innerHTML);});//4. for ... of:jquery 3.0 版本之后提供的方式for(li of citys){alert($(li).html());}});<ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li>
</ul>

3.事件绑定

 事件绑定1. jquery标准的绑定方式* jq对象.事件方法(回调函数)；* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。* 表单对象.submit();//让表单提交$(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();//让表单提交});<input id="name" type="button" value="绑定点击事件">2. on绑定事件/off解除绑定* jq对象.on("事件名称",回调函数)* jq对象.off("事件名称")* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑$(function () {//1.使用on给按钮绑定单击事件  click$("#btn").on("click",function () {alert("我被点击了。。。")}) ;//2. 使用off解除btn按钮的单击事件$("#btn2").click(function () {//解除btn按钮的单击事件//$("#btn").off("click");$("#btn").off();//将组件上的所有事件全部解绑});});<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">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>$(function () {//获取按钮，调用toggle方法$("#btn").toggle(function () {//改变div背景色backgroundColor 颜色为 green$("#myDiv").css("backgroundColor","green");},function () {//改变div背景色backgroundColor 颜色为 pink$("#myDiv").css("backgroundColor","pink");});});<input id="btn" type="button" value="事件切换"><div id="myDiv" style="width:300px;height:300px;background:pink">点击按钮变成绿色，再次点击红色</div>

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的显示和隐藏动画效果其实就是控制display3. 使用  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;//开始定时器的idvar index;//随机角标$(function () {//处理按钮是否可以使用的效果//开始按钮可使用$("#startID").prop("disabled",false);//除了prop也可以用css//结束按钮不可使用$("#stopID").prop("disabled",true);//1. 给开始按钮绑定单击事件$("#startID").click(function () {// 1.1 定义循环定时器 20毫秒执行一次  setIntervalstartId = 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//floor  向下取整//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><!-- 大像框 -->
<divstyle="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><!-- 开始按钮 -->
<inputid="startID"type="button"value="点击开始"style="width:150px;height:150px;font-size:22px"><!-- 停止按钮 -->
<inputid="stopID"type="button"value="点击停止"style="width:150px;height:150px;font-size:22px"></body>
</html>

3.使用事件切换抽纸片人老婆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>点击抽奖</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script><style>.choujiang{height: 100px;width: 100px;font-size: 15px;/*下面三个实现按钮中文字的自动换行，这将环绕字到该按钮的规定宽度*/word-wrap: break-word !important;word-break: break-all !important;white-space: normal !important;}.jiagping{border: 2px solid black;width:800px;height:500px;}</style><script type="text/javascript" language="JavaScript">//1.定义一个数组存储图片资源var imgs = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg",];//定义循环定时器idvar startId;//定义图片路径数组的索引var index;//2.给按钮绑定事件//2.1先写入口函数$(function () {/*//2.2给按钮绑定开始抽奖点击事件//点击开始抽奖以后，图片需要不断变换，按钮提示信息变成暂停$("#choujiang").click(function () {//点击以后切换奖品里面的图片资源路径//通过循环定时器来实现图片的变换,20毫秒一次startId= setInterval(function () {//设置随机数来设置数组索引//Math.random()返回一个0-1之间的随机数，包括0但不包括1//Math.floor()返回小于或等于一个给定数字的最大整数index = Math.floor(Math.random() * 7);//6.999999999 -->  6$("#jiangping").prop("src",imgs[index]);},20)//提示用户暂停抽奖$("#choujiang").prop("value","暂停");});//2.3点击暂停，抽奖完成，图片不再变化，按钮提示信息变回去$("#choujiang").click(function () {//按钮提示信息变回去$("#choujiang").prop("value","点击开始抽奖");//停止定时器，图片不再辩护clearInterval(startId);})*///使用事件切换来完成上述功能$("#choujiang").toggle(function () {//提示用户暂停抽奖$("#choujiang").prop("value","正在抽奖，点击暂停");//点击以后切换奖品里面的图片资源路径//通过循环定时器来实现图片的变换,20毫秒一次startId= setInterval(function () {//设置随机数来设置数组索引//Math.random()返回一个0-1之间的随机数，包括0但不包括1//Math.floor()返回小于或等于一个给定数字的最大整数index = Math.floor(Math.random() * 7);//6.999999999 -->  6$("#jiangping").prop("src",imgs[index]);},20)},function () {//按钮提示信息变回去$("#choujiang").prop("value","点击开始抽奖");//停止定时器，图片不再辩护clearInterval(startId);})});</script>
</head><body>
<!--图片框-->
<div class="jiagping"><img src="../img/man00.jpg" alt="奖品内容就是美女" id="jiangping" style="width:800px; height:500px;">
</div>
<!--抽奖按钮-->
<input type="button" id="choujiang" value="点击开始抽奖" class="choujiang"></body>
</html>

5.JQuery插件使用

插件：增强JQuery的功能
实现方式：
1. $.fn.extend(object)
* 增强通过Jquery获取的对象的功能 $("#id")
2. $.extend(object)
* 增强JQeury对象自身的功能 $/jQuery

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">//使用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全局进行方法拓展

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

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

获取币种对应编号
/*** 获取币种* param bz* return*/public static String doUpdateBz(String bz){Map<String,String>map new HashMap<>();switch (bz){case "CNY":map.put("BZDM", "人民币");break;case "USD":map.put("BZDM"…...
2024/4/27 17:57:39
成立一家投资管理有限公司的资本是多少？
一般没有要求。先成立一家投资管理公司，然后再以投资管理公司的名义投资成立其他公司，进行具体的经营业务，这是一种比较理想的操作方式。便于公司的经营管理，又可以达到节税的目的，所以我们一般建议企业那么操作。 …...
2024/4/14 0:21:35
Android资深开发者告诉你：简历这样写绝对吸引面试官眼球，面试电话接到手软
基于组件化的框架，以 MVP 模式开发多个课程模块使用 Lint、FindBugs 等辅助工具优化代码，调优性能其他拿过省大学生数学竞赛三等奖，毕业后自学 Android 开发，写了近三年博客，热爱写代码分割线英文简历分割线 …...
2024/4/27 13:42:21
lvgl的图片使用
界面库lvgl使用图片有三种方式： 1、将图片转换为源文件使用转为源文件使用则需要使用在线或者离线图片转换工具，在线转换工具可使用官方提供的https://lvgl.io/tools/imageconverter 离线转换工具可以用git上大神封装的Windows版本的Lvgl_image…...
2024/4/14 0:21:20
6、基本运算符及注意点
内容描述： Overridepublic class Main {public static void main(String[] args) {int a10;int b20;System.out.println(ab);System.out.println(a-b);System.out.println(a*b);System.out.println(a/(double)b);//因为除法可能会导致小数的出现，int整型…...
2024/4/18 14:25:30
JavaSE——单元测试、反射、注解、动态代理
文章目录单元测试单元测试概述单元测试快速入门单元测试常用注解反射反射概述反射获取类对象反射获取构造器对象反射获取成员变量对象反射获取方法对象反射的作用-绕过编译阶段为集合添加数据反射的作用-通用框架的底层原理注解注解概述自定义注解元注解注解解析案例&#xff1…...
2024/4/14 0:21:20
如何选择数据防泄露软件
怎样选对一款加密软件一：市场上普遍的加密模式透明加密：透明加密的设计思路是基于windows的文件系统（过滤）驱动（IFS）技术，工作在windows的内核层。我们在安装计算机硬件时，经常要…...
2024/4/14 0:21:20
银行卡在哪个银行都能取款吗？
银行卡要想取款，分两种情况。第一种情况是在银行窗口取款，你是哪个银行的银行卡，就得在哪个银行取款，在不同的银行窗口是办理不了的，比如你的卡是工商银行的，你去建设银行窗口是取不了现金的。第二种情况…...
2024/4/27 14:03:15
第八届蓝桥杯Java B组题解
A.购物单题目描述小明刚刚找到工作，老板人很好，只是老板夫人很爱购物。老板忙的时候经常让小明帮忙到商场代为购物。小明很厌烦，但又不好推辞。这不，XX大促销又来了！老板夫人开出了长长的购物单，都是…...
2024/4/14 0:21:40
Unity技术-GameFramework文档系列（五）- 创建实体
往期文章分享点击跳转>GameFramework文档系列（一）- 简介和初步使用点击跳转>GameFramework文档系列（二）- 场景相关点击跳转>GameFramework文档系列（三）- 日志管理和UI点击跳转>GameFramework文…...
2024/4/27 13:51:48
2021入职培训有感：站在新的起点，迎接新的挑战
2021年新员工入职培训已经过去快半年的时间了，这篇文章是我培训完毕写的，还有三天就春节了，现在我把它公开发表，以纪念那难忘的培训时光。重回课堂 2021年有幸加入人教数字出版公司，入职已经四个多月了，基…...
2024/4/15 4:16:00
nginx static静态资源报404错误
nginx的静态资源配置中一开始使用/static/作为location，一直报404错误，按照网上的教程后面一直有/，之后翻看nginx的官方文档，发现里面不带最后的/，于是修改后重新访问，发现就可以访问到了，有同样…...
2024/4/18 8:04:54
Android记录11--异步更新之Handler，Android模块化面向接口编程
Message msg myhandler.obtainMessage(); // 将msg对象发送给目标对象 Handler msg.sendToTarget(); } class MyHandler extends Handl er { public MyHandler() { } // 带有参数的构造函数 public MyHandler(Looper looper) { super(looper); } Override public v…...
2024/4/14 0:22:21
django学习阶段总结记录:安装和配置
安装django: 在cdm中cd到虚拟空间执行pip安装,最好记住版本,这里不加django版本,默认安装最新版本,注意django版本和python版本是否适配,最好都用正式得最新版本,不用考虑是否适配的问题 Pip install django#安装django 安装MySQL插件: 用mysql数据库吧,不用纠结;需要学习一…...
2024/4/18 6:21:01
Swift 基础语法3 枚举enum 可选项
枚举命名首字母大写，内部的成员名称小写关联值关联值用例默认值（原始值） 隐式原始值递归枚举indirect Memorylayout 类似sizeof，获取变量的内存大小 64与操作系统相关内存对齐关联值为了赋值，变量会提前申请…...
2024/4/14 0:22:26
数据分析（一）矩阵和通用函数
矩阵矩阵是numpy.matrix类类型的对象，该类继承自numpy.ndarray，任何针对多维数组的操作，对矩阵同样有效，但是作为子类矩阵又结合其自身的特点，做了必要的扩充，比如：乘法计算、求逆等。矩阵对…...
2024/4/7 18:21:29
Unicode字符集和多字节字符集关系
Unicode字符集和多字节字符集关系在计算机中字符通常并不是保存为图像，每个字符都是使用一个编码来表示的，而每个字符究竟使用哪个编码代表，要取决于使用哪个字符集(charset)。在最初的时候，Internet上只有一种字符集——ANSI的ASCII字符集，它使用7 bits来表示一个字符，…...
2024/4/18 8:58:52
Ubuntu21.10下安装TensorFlow及配置GPU支持（cuda11.1+cudnn8.0.5）
文章目录一、前言二、安装NVIDIAdriver1. 添加PPA源2. 查看显卡硬件型号3. 安装NVIDIA驱动三、安装cuda1. 下载相关依赖2. 下载安装文件3. 安装cuda-toolkit4. 配置环境变量5. 检验安装四、安装cudnn1. 下载安装文件2. 安装cudnn8.2.13. 配置环境变量五、安装TensorFlow1. 安装…...
2024/4/22 17:37:54
[WC 2022 Day3 zmy] Od deski do deski（dp）
设 fi:1∼if_{i}:1\sim ifi:1∼i 能否分成若干个首尾相同的区间则有 fiORj<i(fj−1∧ajai)f_{i}\text{OR}_{j<i}(f_{j-1}\wedge a_ja_i)fiORj<i(fj−1∧ajai)。这是最原始的暴力 dpdpdp，时间 O(n2m)O(n^2m)O(n2m)。事实上，这…...
2024/4/19 11:57:59
cs61c笔记-Lecture7 RISC-V汇编语言
RISC-V汇编语言计算机表征架构/architecture of representation in cs计算机架构的构成（以RISC-V为例）指令集/instruction set寄存器/registerRISC-V下的寄存器RISC-V指令集句法/syntax加法&减法/addition & subtraction常数/immediate计算机表征…...
2024/4/14 0:22:41

JQuery高级部分