一动画效果
1.1方法
显示
show([speed,[easing],[fn]])
概述
显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
参数
speed[,fn]Number/String,FunctionV1.0
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]Number/String,String,FunctionV1.4.3
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
示例
描述:
显示所有段落
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show()
描述:
用缓慢的动画将隐藏的段落显示出来，历时600毫秒。
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show("slow");
描述:
用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show("fast",function(){
$(this).text("Animation Done!");
});
描述:
将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
隐藏
hide([speed,[easing],[fn]])
概述
隐藏显示的元素
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
参数
speed[,fn]Number/String,FunctionV1.0
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]Number/String,String,FunctionV1.4.3
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
示例
描述:
隐藏所有段落
jQuery 代码:
$("p").hide()
描述:
用600毫秒的时间将段落缓慢的隐藏
jQuery 代码:
$("p").hide("slow");
描述:
用200毫秒将段落迅速隐藏，之后弹出一个对话框。
jQuery 代码:
$("p").hide("fast",function(){
alert("Animation Done.");
});
剩下的自己揣摩 方式都一样
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
.main {
width: 400px;
height: 400px;
float: left;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="main">
<input type="button" value="隐藏div1" id="a1">
<input type="button" value="显示div1" id="a2">
<input type="button" value="切换div1" id="a3">
<div id="div1" class="box">
div1显示和隐藏
</div>
</div>
<div class="main">
<input type="button" value="滑出div2" id="b1">
<input type="button" value="滑入div2" id="b2">
<input type="button" value="切换div2" id="b3">
<div id="div2" class="box">
div2显示和隐藏
</div>
</div>
<div class="main">
<input type="button" value="淡出div3" id="c1">
<input type="button" value="淡入div3" id="c2">
<input type="button" value="切换div3" id="c3">
<div id="div3" class="box">
div3显示和隐藏
</div>
</div>
</body>
<script>
//隐藏
$("#a1").click(function () {
$("#div1").hide();
});
//演示
$("#a2").click(function () {
//参数 第一个(2000):出现的毫秒值 第二个(null):默认是swing 可选:linear(如果想用其他的可以导包) 第三个(fn):出现之后的回调函数
$("#div1").show(2000,null,function () {
alert("我显示了");
});
});
//切换 方法同上
$("#a3").click(function () {
$("#div1").toggle(2000);
});
</script>
<!-- 滑动效果 -->
<script>
$("#b1").click(function () {
$("#div2").slideUp(1000,"swing",function () {
alert("我滑出了");
});
});
$("#b2").click(function () {
$("#div2").slideDown(1000);
});
$("#b3").on("click",function () {
$("#div2").slideToggle(1000); //有则滑出 无责划入
});
</script>
<!-- 淡入淡出 -->
<script>
//一块写淡出
$("#c1").on("click",function () {
$("#div3").fadeOut(); //有则滑出 无责划入
});
//分开写 淡入
$("#c2").on("click",fadeIn);
function fadeIn() {
$("#div3").fadeIn(2000);
}
//切换 淡出 淡入
$("#c3").on("click",function () {
$("#div3").fadeToggle(); //有则滑出 无责划入
});
</script>
</html>
二 遍历
2.1原始方式遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原始方式遍历</title>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
window.onload = function () {
var city = $("#city li");
for(var citys of city){
console.log($(citys).text());
}
}
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
结果:
北京 01-原始方式遍历.html:12:25
上海 01-原始方式遍历.html:12:25
天津 01-原始方式遍历.html:12:25
重庆 01-原始方式遍历.html:12:25
2.2 jQuery方式便利
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery方式便利</title>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
var city = $("#city li");
//方式一
// city.each(function () {
// console.log($(this).text());
// });
// 北京 02-jQuery方式遍历.html:12:24
// 上海 02-jQuery方式遍历.html:12:24
// 天津 02-jQuery方式遍历.html:12:24
// 重庆 02-jQuery方式遍历.html:12:24
//方式二
$.each(city,function () {
console.log(city.text());
})
//北京上海天津重庆
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
三.事件绑定
3.1事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
//定义按钮btn-on 事件
$("#btn-on").on("click",function () { // 事件响应
alert("我操 我被点击了");
});
//定义按钮btn-on 事件
$("#btn-off").on("click",function () { // 关闭事件
$("#btn-on").off();
});
});
</script>
</head>
<body>
<input id="btn-on" type="button" value="使用on绑定点击事件">
<input id="btn-off" type="button" value="使用off解绑点击事件">
</body>
</html>
3.2 鼠标移入变成绿色，移出恢复粉红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#myDiv").mouseover(function () {
$(this).css("backgroundColor","green");
}).mouseout(function () {
$(this).css("backgroundColor","pink");
});
})
</script>
</head>
<body>
<div id="myDiv" style="width:300px;height:300px;background:pink">
鼠标移入变成绿色，移出恢复粉红色
</div>
</body>
</html>
3.3常见事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06_常见事件</title>
<style type="text/css">
#e02 {
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#e01").blur(function () {
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function () {
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function () {
$("#textMsg").html("键盘按下：keydown ");
}).keypress(function (event) {
$("#textMsg").append("键盘按：keypress ");
}).keyup(function () {
$("#textMsg").append("键盘弹起：keyup ");
});
var i = 0;
$("#e02").mouseover(function () {
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function () {
//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
}).mouseout(function () {
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function () {
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function () {
$("#divMsg").html("鼠标弹起：mouseup");
});
$("#e03").click(function () {
$("#buttonMsg").html("单击：click");
}).dblclick(function () {
$("#buttonMsg").html("双击：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text"/><span id="textMsg"></span> <br/>
<hr/>
<div id="e02"></div>
<span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>
四案例
4.1案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script src="../js/jquery-3.3.1.js"></script>
<script>
var time;
$(function () {
$("#ad").slideDown(2000);
setTimeout(function () {
$("#ad").slideUp(2000);
},4000)
})
</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.2案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script src="../js/jquery-3.3.1.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"
>
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px;"
>
<script language='javascript' type='text/javascript'>
var index = 0;
//准备一个一维数组，装用户的像片路径
var imgs = [
"../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
"../img/man07.png",
"../img/man08.jpg",
"../img/man09.bmp"
];
var time;
$(function () {
$("#stopID").click(function () {
$(this).prop("disabled",true);
$("#startID").prop("disabled",false);
clearInterval(time);
$("#img2ID").attr("src",imgs[index]).show();
});
$("#startID").click(function () {
ad();
$(this).prop("disabled",true);
$("#stopID").prop("disabled",false);
});
});
function ad() {
time = setInterval(function () {
index ++;
if(index > 9){
index = 0;
}
$("#img1ID").attr("src",imgs[index]).show();
console.log(index);
},100);
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的jquery表单校验页面</title>
<style type="text/css">
p{text-align: center;font-size:24px;}
table{margin: 0 auto;border: 0;}
table tr{height:40px;border:0;}
table tr td{padding:0 14px;border:1px solid #999}
.error{color:red}
</style>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_cn.js"></script>
<script>
$(function () {
//性别默认为男
$("#gender_male").prop("checked",true);
$.validator.addMethod("cardLength",function(value,element,params){
if(value.trim().length!=params[0] && value.trim().length != params[1]){
return false;
}
return true;
});
$("#empForm").validate({
rules:{
//真实姓名
realname:{
required:true,
},
//用户名
username:{
required:true,
rangelength:[5,8],
},
//密码
psw:{
//不能为空,长度6-12
required:true,
rangelength:[6,12],
},
//确认密码
psw2:{
equalTo:"#psw",
},
age:{
required:true,
range:[26,50],
},
card:{
required:true,
cardLength:[15,18],
},
},
messages:{
realname:{
required:"真实姓名不能为空",
},
username:{
required:"登录名不能为空",
rangelength:"长度在{0}~{1}之间",
},
psw:{
//不能为空,长度6-12
required:"密码不能为空",
rangelength:"长度在{0}~{1}之间",
},
psw2:{
equalTo:"两次密码不符",
},
age:{
required:"年龄不能为空",
range:"年龄在{0}~{1}之间",
},
card:{
required:"身份证不能为空",
cardLength:"身份证在{0}~{1}之间",
},
},
})
})
</script>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border=1>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12):</td>
<td><input type="password" id="psw" name="psw" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12):</td>
<td><input type="password" id="psw2" name="psw2" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/> 男
<input type="radio" id="gender_female" value="f" name="gender"/> 女
<!-- 如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了 -->
<label class="error" for="gender" style="display: none">请选择性别</label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<option value="">－请选择你的学历－</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1982/09/21):</td>
<td><input type="text" id="birthday" name="birthday" value="" /></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" /> 购物
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="card" name="card" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="保存"></td>
</tr>
</table>
</form>
<script type="text/javascript">
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
