1、扩展
css属性中的transition属性
作用：实现一些动画效果
<style type="text/css">
div{
width: 100px;
height: 100px;
border: #0000FF solid 5px;
background-color: red;
transition: background-color 3s,width 1s,transform 1s;
}
div:hover{
background-color: #FFFF00;
width: 200px;
transform: scale(1.5);
}
</style>2、表单验证和日期插件验证
使用的插件：
<script src="js/jquery-1.3.2.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.datepick.js"></script> 这是日期插件
<link rel="stylesheet" href="css/jquery.datepick.css" type="text/css" /> 日期显示样式
<script type="text/javascript">
$(function() {
//为生日输入框添加日期插件
$("input[name=birthday]").datepick({dateFormat:"yy-mm-dd"});
//为验证插件添加自定义规则
//如果想要激活一下的回调函数，需要两个条件
//1、必须使用自定义规则
//2、还要点击提交按钮
$.validator.addMethod("sfz",function(value){
//该回调函数，必须告诉jQuery表单验证插件，验证的结果使成立还是失败
document.title = value;
var re = /^\d{18}$|^\d{17}X$/;
//当函数返回true，表示验证成功，返回false表示验证失败，如果验证失败就提示错误信息
return re.test(value);
});
//为制定的form表单添加验证规则
//validate函数，只要传入一个参数，该参数就是一个json
//该json需要两个属性：rules messages
$("#testForm").validate({
rules:{
realname:{
required:true
},
loginname:{
required:true,
minlength:5,
maxlength:8
},
pwd1:{
required:true,
rangelength:[6,12]
},
pwd2:{
equalTo:"input[name=pwd1]"
},
gender:{
required:true
},
age:{
required:true,
//min:20,
//max:50
range:[18,30]
},
edu:{
min:1
},
like:{
required:true
},
email:{
email:true
},
idcard:{
sfz:true
},
xyk:{
creditcard:true
}
},
messages:{
realname:{
required:"真实姓名必填"
},
loginname:{
required:"登录名必须填写",
minlength:"至少5列",
maxlength:"至多8列"
},
pwd1:{
required:"密码必填",
rangelength:"密码必须在6~12之间"
},
pwd2:{
equalTo:"两次密码不一致"
},
age:{
required:"请填写年龄",
//min:"年龄不能小于20岁",
//max:"年龄不能大于50岁"
range:"年龄要在18到30岁之间"
},
edu:{
min:"学历必须有"
},
email:{
email:"这不是一个邮箱"
},
idcard:{
sfz:"这不是中国身份证"
},
xyk:{
creditcard:"这不是有效的卡号"
}
}
});
})
</script>$(function(){
/*
* json.javascript原生对象
* 1、json又叫直接量，必须用{}括起来
* 2、属性和属性值之间用：连接
* 3、属性和属性之间用“，”连接
* 4、属性和属性值都需要用双引号引起来，如果属性值使数字，则引号可以不打
*/
var p = {
"id":1,
"name":"张三丰",
"age":100
};
document.write(p.id+"<br />");
document.write(p.name+"<br />");
document.write(p.age)
})4、鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
/*鼠标箭头变为手指为poniter变为十字为crosshair要变为空是none*/
cursor: none;
}
</style>
<script src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
/*$("div:eq(0)").click(function(){
$("div:eq(0)").append("你单击了我<br>");
});
$("div:eq(0)").dblclick(function(){
$(this).append("你双击了我<br />");
});
$("div:eq(0)").mousedown(function(){
$(this).append("鼠标按下了<br />");
});
$("div:eq(0)").mouseup(function(){
$(this).append("鼠标抬起了<br />");
});
$("div:eq(0)").mouseover(function(){
$(this).append("鼠标移进了<br />");
});
$("div:eq(0)").mouseout(function(){
$(this).append("鼠标移出了<br />")
});
$("div:eq(0)").mousemove(function(){
$(this).append("鼠标在移动<br />");
});*/
/*
* //事件冒泡，在由一个tr进入另一个tr的时候也会执行同样的两个操作
* $("table:eq(0)").mouseover(function(){
alert("鼠标移进了")
});
$("table:eq(0)").mouseout(function(){
alert("鼠标移出了");
});*/
/*$("table:eq(0)").mouseenter(function(){
alert("鼠标进入了");
});
$("table:eq(0)").mouseleave(function(){
alert("鼠标移出了");
})*/
//演示鼠标事件对象
/*
* 每次鼠标事件发生时，浏览器除了会执行事件处理函数以外，还会创建一个鼠标事件对象
* 浏览器还把这个鼠标事件对象自动传入给事件处理函数中，该对象存放了鼠标事件发生时的鼠标坐标
*/
/*$("div:eq(0)").mousemove(function(e){
$(this).html(e.pageX+":"+e.pageY);
})*/
$(document).mousemove(function(e){
$("img:eq(0)").css("position","absolute");
$("img:eq(0)").css("left",e.pageX);
$("img:eq(0)").css("top",e.pageY);
})
function f1(){
//当不传参的时候可以使用arguments数组接收参数
alert(arguments[0]+":"+arguments[1]);
}
f1(1,2);
})
</script>
</head>
<body>
<div style="height: 400px;height: 400px;border: red solid 1px;">
</div>
<table id="a2" height="200" width="400" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<img src="img/lye.jpg" width="30px" height="50px"/>
</body>
</html>实现利用ASWD对一张图片进行移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
/*事件: 动作
事件源: 动作的承受着
事件处理程序: 动作发生之后,浏览器回调的函数*/
$(function(){
var left=false,right=false,up=false,down=false;
$(document).keydown(function(e) {
switch(e.keyCode) {
case 65:
left = true;
break;
case 68:
right = true;
break;
case 87:
up = true;
break;
case 83:
down = true;
break;
}
});
$(document).keyup(function(e) {
switch(e.keyCode) {
case 65:
left = false;
break;
case 68:
right = false;
break;
case 87:
up = false;
break;
case 83:
down = false;
break;
}
});
var x = 0, y = 0;
function move() {
document.title = new Date().getSeconds();
if(left) {
x--;
$("img:eq(0)").css("left",x);
}
if(right) {
x++;
$("img:eq(0)").css("left",x);
}
if(up) {
y--;
$("img:eq(0)").css("top",y);
}
if(down) {
y++;
$("img:eq(0)").css("top",y);
}
}
setInterval(move,1);
})
</script>
</head>
<body>
<img src="img/lye.jpg" width="150" height="200" style="position: absolute;"/>
</body>
</html>
实现了多级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function(){
/*$("input:eq(0)").focus(function(){
$(this).val("获取到焦点了");
})
$("input:eq(0)").blur(function(){
$(this).val("失去焦点了");
});
$("input").change(function(){
alert("hello");
})*/
$("select:eq(0)").change(function(){
$("select:eq(1)").empty();
switch ($(this).val()){
case "0":
break;
case "1":
$("select:eq(1)").append($("<option>曹操</option>"));
$("select:eq(1)").append($("<option>司马懿</option>"));
$("select:eq(1)").append($("<option>典韦</option>"));
break;
case "2":
$("select:eq(1)").append($("<option>刘备</option>"));
$("select:eq(1)").append($("<option>诸葛亮</option>"));
$("select:eq(1)").append($("<option>张飞</option>"));
break;
case "3":
$("select:eq(1)").append($("<option>孙权</option>"));
$("select:eq(1)").append($("<option>周瑜</option>"));
$("select:eq(1)").append($("<option>太史慈</option>"));
break;
}
})
})
</script>
</head>
<body>
<input type="text" />
<select>
<option value="0">请选择国家</option>
<option value="1">魏国</option>
<option value="2">蜀国</option>
<option value="3">吴国</option>
</select>
<select>
</select>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function(){
//文本框内容选中事件
$("input").select(function(){
alert(123);
});
//窗口大小变化事件
$(window).resize(function(){
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
$("body").css("backgroundColor","rgba("+r+","+g+","+b+",1)");
});
//滚动条事件
$(window).scroll(function(){
document.title = document.body.scrollTop;
})
})
</script>
</head>
<body>
<input type="text" />
<div style="margin-top: 2000px;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{width: 100px; height: 100px; background-color: red; float: left;}
#b{width: 100px; height: 100px; background-color: yellow; float: left;}
#c{width: 100px; height: 100px; background-color: blue; float: left;}
#d{width: 100px; height: 100px; background-color: gold; float: left;}
</style>
<script src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("div:eq(0)").slideUp(1000).slideDown(1000).slideToggle(1000).slideToggle(1000);
$("div:eq(1)").fadeOut(1000).fadeIn(1000).fadeToggle(1000).fadeToggle(1000);
$("div:eq(2)").hide(1000).show(1000).toggle(1000).toggle(1000);
$("div:eq(3)").fadeTo(1000,0.3);
//回调函数
function f1(){
$("img:eq(0)").fadeOut(1000,function(){
$("img:eq(0)").attr("src","img/lbb.jpg");
}).fadeIn(1000);
}
f1();
//$("img:eq(0)").clearQueue();停止动画队列
})
</script>
</head>
<body>
<div id="a">
123
</div>
<div id="b">456</div>
<div id="c">456</div>
<div id="d">456</div>
<img src="img/lye.jpg" width="200px" height="200px" />
</body>
</html>
扫一扫
1562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
