17 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]])
演示案例1：
<!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 () {
//默认方式，显示和隐藏动画
/*$("#b1").click(function () {
$("#showDiv").hide("slow","swing");
});
$("#b2").click(function () {
$("#showDiv").show("slow","swing");
});*/ //滑动隐藏方式
$("#b1").click(function () {
$("#showDiv").slideUp("slow");
}); //滑动显示方式
$("#b2").click(function () {
$("#showDiv").slideDown("slow");
}); //滑动切换方式
$("#b3").click(function () {
$("#showDiv").slideToggle("slow");
}) })
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" id="b1">
<input type="button" value="点击按钮显示div" id="b2">
<input type="button" value="点击按钮切换div显示和隐藏" id="b3" > <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 容器对象)
3. 事件绑定
(1)jquery标准的绑定方式
* jq对象.事件方法(回调函数)；
* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
* 表单对象.submit();//让表单提交
演示案例2：
<!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绑定鼠标移出事件
$("#name").mouseover(function () {
alert("鼠标走了");
}); });
</script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
</body>
</html>
(2) on绑定事件/off解除绑定
* jq对象.on("事件名称",回调函数)
* jq对象.off("事件名称")
* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
演示案例3：
<!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给按钮绑定单击事件
$("#btn").on("click",function () {
alert("我被点击了");
}); //1.使用off给按钮解除单击事件
$("#btn2").on("click",function () {
$("#btn").off("click");
})
}) </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
4.综合小案例
演示案例4：
<!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
*/
$(function () {
//定义定时器，调用adshow方法，3秒后执行
setTimeout(adShow,3000);
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>
演示案例4：
<!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"
]; $(function () {
var interval;
var index;
//1.给开始按钮绑定单击事件
$("#startID").click(function () {
interval = setInterval(function () {
//1.生成随机角标
index=Math.floor(Math.random()*7);
//2.设置src属性
$("#img1ID").prop("src",imgs[index]); },20);
}); //2.给结束按钮绑定事件
$("#stopID").click(function () {
//1.停止定时器
clearInterval(interval);
//2.给大相框设置src
$("#img2ID").prop("src",imgs[index]);
});
}) </script>
</body>
</html>
效果图：
17 JQuery高级----学习笔记的更多相关文章
- jquery 高级 学习笔记
--jquery 和 原生js可以共存,但不能混用.jquery 可以通过get()方法 转换为原生js. $("#div1").get(0).innerHTML; get() 需 ...
- jQuery源代码学习笔记_工具函数_noop/error/now/trim
jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...
- Python高级学习笔记
Python高级学习笔记,此笔记中包含Linux操作系统.Html+CSS+JS.网络协议等. 所有思维导图为本人亲手所画,请勿用于商用. 大哥们,求点赞哦. 第一天笔记:链接 第二天笔记:链接 第三 ...
- jQuery 基础学习笔记总结（一）
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...
- jQuery的学习笔记4
JQuery学习笔记3 2.9属性选择器 属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素.属性选择器一般都以中括号作为起止分界符 它的形式如下: ［attribute］ ［a ...
- jQuery的学习笔记2
jQuery学习笔记 Day two Chapter two 选择器 类选择器 语法结构:$(“.classname”) javascript里面没有类选择器所以这个时候使用jQuery会更加的简便 ...
- jQuery的学习笔记
JQuery学习笔记 Chapter one初识jQuery 1.2测试jQuery 在jQuery库中,$是jQuery的别名,如:$()相当于jQuery() 注意:在使用JQuery进行开发的时 ...
- 尚硅谷MySQL高级学习笔记
目录 数据库MySQL学习笔记高级篇 写在前面 1. mysql的架构介绍 mysql简介 mysqlLinux版的安装 mysql配置文件 mysql逻辑架构介绍 mysql存储引擎 2. 索引优化 ...
- Asp.Net 初级 高级 学习笔记
01.Main函数是什么?在程序中使用Main函数有什么需要注意的地方?02.CLR是什么?程序集是什么?当运行一个程序集的时候,CLR做了什么事情?03.值类型的默认值是什么?(情况一:字段或全局静 ...
随机推荐
- hibernate笔记
1.hibernate中的list()遍历方法和iterator()遍历方法之间的区别 1:返回的类型不一样,list()返回List, iterate()返回Iterator,2: 获取数据的方式不 ...
- [51 Nod 1584] 加权约数和
题意 求∑i=1N∑j=1Nmax(i,j)⋅σ1(ij)\large \sum_{i=1}^N\sum_{j=1}^Nmax(i,j)\cdot\sigma_1(ij)i=1∑Nj=1∑Nmax ...
- 经肝药酶CYP3A4代谢的药物对比记录
罗非昔布 罗非昔布,解热镇痛抗炎药,选择性环氧化酶-2(COX-2)抑制药,有研究表明,该类药可增加心脏病发作.卒中或其他严重后果概率,不良反应为,增加心肌梗死和心脏猝死的风险,现已撤市.经肝和肠壁细 ...
- SpringBoot终章(整合小型进销系统)
在前面的章节中我们学习Spring的时候可以看到配置文件比较多,所以我们有了SpringBoot 1. 引入依赖 <dependencies> <dependency> < ...
- Window IDEA开发工具 杀死指定端口 cmd 命令行 taskkill
Windows平台 两步方法 : 1 查询端口占用,2 强行杀死进程 netstat -aon|findstr "8080" taskkill /pid 4136-t -f ...
- 如何防范web前端安全攻击
一.对于XSS防御: 1.不要信任任何外部传入的数据,针对用户输入作相关的格式检查.过滤等操作,以及转义字符处理.最普遍的做法就是转义输入输出的内容,对于括号,尖括号,斜杠进行转义 function ...
- 在Matlab中画图输出
在Matlab中画图后,可能会调整格式.输出存储时,格式会忽然消失. 可以修改右下边Export setup,将Font size设置成auto. 这样就保留了编辑效果.
- CDH 版本 6.0.1 升级到 6.2.0 当前最新版本（CentOS 7.x）
前文「CDH CM版本 6.0.1 升级到 CM 6.2.0 当前最新版本(CentOS 7.x)」 承接上文,当我们完成 CM 6.2.0 的升级之后,我们已经相当于完成了80% minor 的升级 ...
- mysql avg()函数，获取字段的平均值
mysql> select * from table1; +----------+------------+-----+---------------------+ | name_new | t ...
- Tomcat的安装以及环境变量的配置
目录 下载 解压并配置环境变量 测试 关闭服务 Tomcat启动时,控制台和IDEA控制台中文乱码解决方案 下载 官方网址:Apache Tomcat® https://tomcat.apache.o ...