1. 动画
(1) 三种方式显示和隐藏元素
<1> 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
1. 参数&＃xff1a;
1. speed&＃xff1a;动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如&＃xff1a;1000)
2. easing&＃xff1a;用来指定切换效果&＃xff0c;默认是"swing"&＃xff0c;可用参数"linear"
* swing&＃xff1a;动画执行时效果是 先慢&＃xff0c;中间快&＃xff0c;最后又慢
* linear&＃xff1a;动画执行时速度是匀速的
3. fn&＃xff1a;在动画完成时执行的函数&＃xff0c;每个元素执行一次。
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&＃xff1a;
DOCTYPE html>
<html>
<head><meta charset&＃61;"UTF-8"><title>Insert title heretitle><script type&＃61;"text/Javascript" src&＃61;"../js/jquery-3.3.1.min.js">script><script>$(function () {//默认方式&＃xff0c;显示和隐藏动画/*$("#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&＃61;"button" value&＃61;"点击按钮隐藏div" id&＃61;"b1">
<input type&＃61;"button" value&＃61;"点击按钮显示div" id&＃61;"b2">
<input type&＃61;"button" value&＃61;"点击按钮切换div显示和隐藏" id&＃61;"b3" ><div id&＃61;"showDiv" style&＃61;"width:300px;height:300px;background:pink">div显示和隐藏
div>
body>
html>
2. 遍历
(1) js的遍历方式
* for(初始化值;循环结束条件;步长)
(2)jq的遍历方式
1. jq对象.each(callback)
1. 语法&＃xff1a;
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element&＃xff1a;就是集合中的每一个元素对象
* this&＃xff1a;集合中的每一个元素对象
2. 回调函数返回值&＃xff1a;
* true:如果当前function返回为false&＃xff0c;则结束循环(break)。
* false:如果当前function返回为true&＃xff0c;则结束本次循环&＃xff0c;继续下次循环(continue)
2. $.each(object, [callback])
3. for..of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)
3. 事件绑定
(1)jquery标准的绑定方式
* jq对象.事件方法(回调函数)&＃xff1b;
* 注&＃xff1a;如果调用事件方法&＃xff0c;不传递回调函数&＃xff0c;则会触发浏览器默认行为。
* 表单对象.submit();//让表单提交
演示案例2&＃xff1a;
DOCTYPE html>
<html>
<head><meta charset&＃61;"UTF-8"><title>title><script src&＃61;"../js/jquery-3.3.1.min.js" type&＃61;"text/Javascript" charset&＃61;"utf-8">script><script type&＃61;"text/Javascript">$(function () {//1.获取name对象&＃xff0c;绑定click事件/*$("#name").click(function () {alert("我被点击了")}) ;*///给name绑定鼠标移动到元素之上的事件
$("#name").mouseover(function () {alert("鼠标来了");});//给name绑定鼠标移出事件
$("#name").mouseover(function () {alert("鼠标走了");});});script>
head>
<body>
<input id&＃61;"name" type&＃61;"text" value&＃61;"绑定点击事件">
body>
html>
(2) on绑定事件/off解除绑定
* jq对象.on("事件名称",回调函数)
* jq对象.off("事件名称")
* 如果off方法不传递任何参数&＃xff0c;则将组件上的所有事件全部解绑
演示案例3&＃xff1a;
DOCTYPE html>
<html>
<head><meta charset&＃61;"UTF-8"><title>title><script src&＃61;"../js/jquery-3.3.1.min.js" type&＃61;"text/Javascript" charset&＃61;"utf-8">script><script type&＃61;"text/Javascript">$(function () {//1.使用on给按钮绑定单击事件
$("#btn").on("click",function () {alert("我被点击了");});//1.使用off给按钮解除单击事件
$("#btn2").on("click",function () {$("#btn").off("click");})})script>
head>
<body>
<input id&＃61;"btn" type&＃61;"button" value&＃61;"使用on绑定点击事件">
<input id&＃61;"btn2" type&＃61;"button" value&＃61;"使用off解绑点击事件">
body>
html>
4.综合小案例
演示案例4&＃xff1a;
DOCTYPE html>
<html>
<head><meta charset&＃61;"UTF-8"><title>广告的自动显示与隐藏title><style>#content{width:100%;height:500px;background:#999}style><script type&＃61;"text/Javascript" src&＃61;"../js/jquery-3.3.1.min.js">script><script>/*需求&＃xff1a;1.当页面加载完成后,3秒后&＃xff0c;自动显示广告2.广告显示5秒后&＃xff0c;关闭分析&＃xff1a;1.使用定时器&＃xff0c;setTimeOut2.分析发现jQuery的动画效果是控制display*/$(function () {//定义定时器&＃xff0c;调用adshow方法&＃xff0c;3秒后执行
setTimeout(adShow,3000);setTimeout(adHide,8000)});//显示广告function adShow() {//获取广告div,调用显示方法
$("#ad").show("slow");}function adHide() {//获取广告div,调用显示方法
$("#ad").hide("slow");}script>
head>
<body>
<div><div id&＃61;"ad" style&＃61;"display: none;" ><img style&＃61;"width:100%" src&＃61;"../img/adv.jpg" />div><div id&＃61;"content">正文部分div>
div>
body>
html>
演示案例4&＃xff1a;
DOCTYPE html>
<html>
<head><meta charset&＃61;"UTF-8"><title>jquery案例之抽奖title><script type&＃61;"text/Javascript" src&＃61;"../js/jquery-3.3.1.min.js">script>
head>
<body>
<div style&＃61;"border-style:dotted;width:160px;height:100px"><img id&＃61;"img1ID" src&＃61;"../img/man00.jpg" style&＃61;"width:160px;height:100px"/>
div>
<divstyle&＃61;"border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id&＃61;"img2ID" src&＃61;"../img/man00.jpg" width&＃61;"800px" height&＃61;"500px"/>
div>
<inputid&＃61;"startID"type&＃61;"button"value&＃61;"点击开始"style&＃61;"width:150px;height:150px;font-size:22px"onclick&＃61;"imgStart()">
<inputid&＃61;"stopID"type&＃61;"button"value&＃61;"点击停止"style&＃61;"width:150px;height:150px;font-size:22px"onclick&＃61;"imgStop()"><script language&＃61;&＃39;Javascript&＃39; type&＃61;&＃39;text/Javascript&＃39;>//准备一个一维数组&＃xff0c;装用户的像片路径var imgs &＃61; ["../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 &＃61; setInterval(function () {//1.生成随机角标
index&＃61;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>
效果图&＃xff1a;
京公网安备 11010802041100号