一、jquery事件
jquery事件没有前缀on
二、jquery中的动画
2.1显示与隐藏动画
隐藏 hide(参数一,参数二)
显示 show(参数一,参数二)
显示或隐藏 toggle(参数一,参数二)
参数一是显示或者隐藏的速度,参数二是显示或者隐藏后的执行的函数名称
2.2淡入淡出动画
淡入 fadein(参数一,参数二)
淡出 fadeout(参数一,参数二)
淡入或者淡出 fadeToggle(参数一,参数二)
参数一是淡入淡出效果时间,参数二是完成淡入淡出后执行函数的名称
2.3滑动动画
向下滑(显示)slideDown()
向上滑(隐藏)slideUp()
向下向上滑(显示隐藏)slideToggle()
2.4自定义动画
注意点:自定义动画需要加上定位
语法:
$(选择器名称).animate({
属性:属性值,
属性:属性值
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<img style="width: 200px;height: 200px;position: absolute;" src="img/QQ图片20210419113833.jpg" />
<script>
$("img").mouseover(function(){
$("img").animate({
left:'200px',
width:'400px',
height:'400px',
});
});
$("img").mouseleave(function(){
$("img").animate({
left:'150px',
width:'200px',
height:'200px',
});
});
</script>
</body>
</html>
三、jquery-DOM
和js中的innerText和innerHtml,value相像,
注意prop()可以设置与获取标签属性值
四、追加元素
在被选中元素结尾插入内容 append()
在被选定的元素开头插入内容 prepend()
在被选定的元素之后插入内容(在上面) after()
在被选定的元素之前插入内容(在下面) before()
区别之处
append是在标签内对元素内容进行追加
after是在标签下面对元素进行追加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<style>
#tv_1{
border: red solid 1px;
}
</style>
</head>
<body>
<p id="tv_1">hello</p>
<p><input type="button" value="点击1" /> </p>
<script>
$("p input").click(function(){
/*$("#tv_1").append("<p>???</p>")*/
$("#tv_1").after("<p>???</p>")
})
</script>
</body>
</html>
五、删除元素
六、jquery操作类样式
被选元素添加一个或多个类 addClass()
被选元素删除一个类或多个类 removeClass()
添加或删除 toggleClass()
七、jquery操作css样式
语法:
$("选择器").css({"属性名":"属性值",“属性名”:“属性值”})
八、validate前端验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="js/jquery.validate.js" ></script>
<script type="text/javascript" src="js/messages_zh.js" ></script>
<style>
label{
color:deeppink;
font-family: "楷体";
}
</style>
</head>
<body>
<form id="f1" method="get" action="增加样式.html">
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td>
</tr>
<tr>
<td>用户名(必填字段,长度范围6~10)</td>
<td colspan="2">
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>Email(符合邮件格式)</td>
<td colspan="2">
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>出生日期(日期格式)</td>
<td colspan="2">
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>薪资(数字)</td>
<td colspan="2">
<input type="text" name="sal" />
</td>
</tr>
<tr>
<td>一天工作时长(值范围6~16)</td>
<td colspan="2">
<input type="text" name="workForday" />
</td>
</tr>
<tr>
<td>密码(必须填写)</td>
<td colspan="2">
<input type="text" name="pwd" id="pwd"/>
</td>
</tr>
<tr>
<td>确认密码(必须填写,且与密码值要相同)</td>
<td colspan="2">
<input type="text" name="repwd" />
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
<script>
$(function(){
$("#f1").validate({
rules:{
username:{
required:true,
rangelength:[6,10]
},
email:{
email:true
},
birthday:{
dateISO:true
},
sal:{
number:true
},
workForday:{
range:[6,16]
},
pwd:{
required:true
},
repwd:{
required:true,
equalTo:pwd
}
},
messages:{
repwd:{
required:"密码要填哦",
equalTo:"密码要一样啊!到底懂不懂啊!"
},
workForday:{
rangelength:"时间不够,继续加班!"
},
username:{
required:"用户名要填的呀!"
}
}
});
});
</script>
</body>
</html>
九、过滤选择器
十、层级选择器
十一、属性选择器