2021-01-08
主要内容:
1、jQuery动画效果
显示与隐藏:show,hide,toggle
淡入淡出:fadeIn,fadeOut,fadeToggle;淡入指的是针对与页面入的
划入划出:slideDown,slideUp,slideToggle;划入指的是针对页面划入
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#d1{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn10").click(function () {
$("#d1").show("slow",function () {
alert("我显示完了");
})
});
$("#btn11").click(function () {
$("#d1").hide("slow");
});
$("#btn12").click(function () {
$("#d1").toggle(5000);
});
$("#btn20").click(function () {
$("#d1").fadeIn("slow");//淡入:淡入页面
});
$("#btn21").click(function () {
$("#d1").fadeOut("slow");
});
$("#btn22").click(function () {
$("#d1").fadeToggle("slow");
});
$("#btn30").click(function () {
$("#d1").slideDown("slow");//划入:划入页面
});
$("#btn31").click(function () {
$("#d1").slideUp("slow");
});
$("#btn32").click(function () {
$("#d1").slideToggle("slow");
});
})
</script>
</head>
<body>
<input type="button" id="btn10" value="显示">
<input type="button" id="btn11" value="隐藏">
<input type="button" id="btn12" value="显示隐藏切换"><br/>
<input type="button" id="btn20" value="淡入">
<input type="button" id="btn21" value="淡出">
<input type="button" id="btn22" value="淡入淡出切换"><br/>
<input type="button" id="btn30" value="划入">
<input type="button" id="btn31" value="划出">
<input type="button" id="btn32" value="划入划出切换"><br/>
<hr/>
<div id="d1"></div>
</body>
</html>
案例:
描述:页面加载后,3秒后右下角出现一幅广告图片(show),双击(dblclick)图片,隐藏(hide)
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#adv{
width: 220px;
height: 220px;
border:1px solid pink;
background-image: url("images/1.png");
position: absolute;
right: 0px;
bottom: 0px;
display: none;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
function showAdv() {
$("#adv").show("slow");
}
setTimeout(showAdv,3000);//方法不能加括号
$("#adv").dblclick(function () {//双击事件
$(this).hide();
})
})
</script>
</head>
<body>
<div id="adv"></div>
</body>
</html>
2、jQuery操作CSS
案例:1、表格隔行变色:
①:css(“样式属性”,“值”)或css({“样式属性”:“值”,“样式属性”:“值”})
获取样式:对象.css(“color”);
设置样式:对象.css(“color”,“blue”);
②:addClass:为每个匹配的元素添加指定的类名,来更改样式等
③:removeClass:从所有匹配的元素中删除全部或者指定的类。
④:toggleClass:如果存在(不存在)就删除(添加)一个类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
td,th{
padding: 0px;
border:1px solid black;
width: 190px;
height: 35px;
text-align: center;
}
.even{
background-color: #c3f3c3;
}
.odd{
background-color: #f3c3f3;
}
.highLight{
background-color: pink;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
//头
$("tr:eq(0)").css("backgroundColor","green");
//隔行变色
$("tr:gt(0):even").addClass("even");
$("tr:gt(0):odd").addClass("odd");
//高亮
$("tr:gt(0)").mouseover(function () {
$(this).addClass("highLight");
}).mouseout(function () {
$(this).removeClass("highLight");
})
})
</script>
</head>
<body>
<table>
<tr>
<th><input type="checkbox" id="selectBtn"/>选择</th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>所属门派</th>
</tr>
<tr>
<td><input type="checkbox" name="userid" value="1"/></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td>华山派</td>
</tr>
<tr>
<td><input type="checkbox" name="userid" value="2"/></td>
<td>2</td>
<td>任盈盈</td>
<td>女</td>
<td>日月神教</td>
</tr>
<tr>
<td><input type="checkbox" name="userid" value="3"/></td>
<td>3</td>
<td>岳灵珊</td>
<td>女</td>
<td>华山派</td>
</tr>
<tr>
<td><input type="checkbox" name="userid" value="4"/></td>
<td>4</td>
<td>林平之</td>
<td>男</td>
<td>华山派</td>
</tr>
<tr>
<td><input type="checkbox" name="userid" value="5"/></td>
<td>5</td>
<td>岳不群</td>
<td>男</td>
<td>华山派</td>
</tr>
<tr>
<td><input type="checkbox" name="userid" value="6"/></td>
<td>6</td>
<td>左冷禅</td>
<td>男</td>
<td>嵩山派</td>
</tr>
</table>
</body>
</html>
3、jQuery操作属性
attr或prop
操作checked、disabled、selected等属性时,可以使用prop
操作其他属性的标签属性时,使用attr。
注意:如果使用attr不行,就换prop(和jQuery的版本存在关系)
案例:
1、全选全不选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
//方式一:选项的状态和选择按钮保持一致
$("#selector").click(function () {
var selectorStatus = $(this).prop("checked");//获取selector状态
$("input[name='hobby1']").prop("checked",selectorStatus);
});
//方式二
$("#btn1").click(function () {
$("input[name='hobby2']").prop("checked",true);
});
$("#btn2").click(function () {
$("input[name='hobby2']").prop("checked",false);
});
$("#btn3").click(function () {
//jquery的遍历
$("input[name='hobby2']").each(function () {
//this表示当前遍历的元素,是dom对象
$(this).prop("checked",!$(this).prop("checked"));
//将获取name=hobby2的元素的checked属性的状态,并将其取反赋值给自己
});
});
})
</script>
</head>
<body>
<input type="checkbox" id="selector"/>选择<br/>
<input type="checkbox" name="hobby1" value="fb">足球
<input type="checkbox" name="hobby1" value="bb">篮球
<input type="checkbox" name="hobby1" value="ppb">乒乓球
<hr/>
<input type="button" id="btn1" value="全选"/>
<input type="button" id="btn2" value="全不选"/>
<input type="button" id="btn3" value="反选"/><br/>
<input type="checkbox" name="hobby2" value="fb"/>足球
<input type="checkbox" name="hobby2" value="bb"/>篮球
<input type="checkbox" name="hobby2" value="ppb"/>乒乓球
</body>
</html>
jQuery的each遍历.each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
$("ul li").each(function () {
alert($(this).text())//text获取文本内容
})
})
})
</script>
</head>
<body>
<input id="btn1" type="button" value="打印"/>
<ul>
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
</body>
</html>
4、jQuery操作DOM
案例:
省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
var pros = ["北京市","山东省","广东省"];
var citys = {
"北京市":["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","顺义 区","通州区","大兴区","房山区","门头沟区","昌平区","平谷区","密云区","怀柔区","延庆区"],
"山东省":["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊 市","济宁市","泰安市","威海市","日照市","滨州市","德州市","聊城市","临沂市","菏泽市"],
"广东省":["广州市","深圳市","珠海市","汕头市","佛山市","江门市","湛江 市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山 市","潮州市","揭阳市","云浮市"]
};
//初始化省和市,添加子元素“选择”
$("#province").html("<option value=''>==省份==</option>")//innerHTML
$("#city").html("<option value=''>==城市==</option>");
//初始化省份选择
$(pros).each(function () {
$("#province").append("<option value='"+this+"'>"+this+"</option>");
})
//注册事件
$("#province").change(function () {
$("#city").html("<option value=''>==城市==</option>");
var cityOPtions = citys[$(this).val()];//获取省份对象的数组
$(cityOPtions).each(function () {
$("#city").append("<option value='"+this+"'>"+this+"</option>");
})
})
})
</script>
</head>
<body>
地址:<select id="province" name="province"></select>
<select id="city" name="city"></select>
</body>
</html>
5、★★★★★JSON
JSON简介:
JSON的数据格式:
6、表单校验
介绍:
jQuery本身是一个函数库,功能很强大。还支持扩展,扩展的部分就是jQuery的自定义内容。
工具导入:
step1、先导入jQuery.js
step2、再导入jQuery.validate.js
step3、消息提示包message_zh.js
注意:必须按照这个顺序导入
表单绑定验证方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
<script type="text/javascript">
$(function () {
$("#f1").validate()
})
</script>
</head>
<body>
<form id="f1">
用户名:<input type="text" id="username" required="true" rangelength="[3,6]"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
指定验证规则
1、。validate()表单验证函数
rules:验证规则
message:提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.js"></script>
<script type="text/javascript">
$(function () {
$("#f1").validate({
"rules":{//验证规则
"username":{//name属性
"required":true,
"rangelength":[3,6]
},
"password":{
"required":true,
"rangelength":[6,16]
},
"repassword":{
equalTo:"#password"//id选择器
},
"email":"email",
"birthday":{
"dateISO":"yyyy-MM-dd"
}
}
})
})
</script>
</head>
<body>
<form id="f1">
用户名:<input type="text" id="username" name="username"/><br/>
密码:<input type="password" id="password" name="password"/><br/>
确认密码:<input type="password" id="repassword" name="repassword"/><br/>
电子邮箱:<input type="text" id="email" name="email"/><br/>
出生日期:<input type="text" id="birthday" name="birthday"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>