1.课前测试
创建用户信息登记表单：姓名，邮箱
1.要求姓名是2-5个汉字,邮箱要符合邮箱格式，
2.使用正则表达式校验
3.其中取值，和设置提示消息用jQuery的方法完成
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<style type="text/css">
.txt{
color:red;
fon
t-size:10px;
}
</style>
<!-- <script type="text/javascript"></script> -->
</head>
<body>
<fieldset>
<legend>登录表单</legend>
<form action="" method="get" id="frm"> <!-- form表单 -->
姓名：
<!-- <input type="text" id="name1" onblur="checkName()" /> -->
<input type="text" id="name1" name="name" /> <!-- name=" " 提交成功时显示 -->
<div id="mydiv1"></div>
邮箱：
<!-- <input type="text" id="email" onblur="checkEmail()" /> -->
<input type="text" id="email" name="email" />
<div id="mydiv2"></div>
</form>
<input type="button" value="提交" id="bt" />
</fieldset>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//不能写到函数外部，否则每次刷新之后，新的值不能被函数调用 （可以封装成函数的形式，调用到函数里）
/*
var num1=$("#name1").val();
var mz=/^[\u4e00-\u9fa5]{2,5}$/;
var num2=$("#email").val();
var yx=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
var pd1 = mz.test(num1);
var pd2 = yx.test(num2);
alert(pd1);*/
$("#name1").blur(function(){
$("#mydiv1").addClass("txt");
var num1=$("#name1").val();
var mz=/^[\u4e00-\u9fa5]{2,5}$/;
if(mz.test(num1)==false){
//if(!pd1){
$("#mydiv1").html("名字格式不对，请重新输入！");
return false;
}
$("#mydiv1").html("");
return true;
})
$("#email").blur(function(){
$("#mydiv2").addClass("txt");
var num2=$("#email").val();
var yx=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
if(yx.test(num2)==false){
//if(!pd2){
$("#mydiv2").html("email格式不对，请重新输入！");
return false;
}
$("#mydiv2").html("");
return true;
})
$("#bt").click(function(){
var num1=$("#name1").val();
var mz=/^[\u4e00-\u9fa5]{2,5}$/;
var num2=$("#email").val();
var yx=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
if(mz.test(num1) && yx.test(num2)){
//if(pd1 && pd2){
$("#frm").submit();
}
})
</script>
</body>
</html>
运行结果如下：
2.jquery对象和js对象的区别
js和jq获取div\文本框的内容
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<input type="button" id="btnJS" value="原生js方式设值取值"/>
<input type="button" id="btnJQ" value="jq方式设值取值"/>
<hr/>
<div id="mydiv">这是一个div</div>
<input type="text" id="txtName"/>
<!--引入jquery-->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//原生js绑定按钮单击
btnJS.onclick=function(){
//alert(123);
//原生js设值div的内容
document.getElementById("mydiv").innerHTML="设置了div";
//原生js设值文本框的值
document.getElementById("txtName").value="张三丰";
//原生js获取div的内容
alert(document.getElementById("mydiv").innerHTML);
//原生js获取文本框的值
alert(document.getElementById("txtName").value)
}
//jq绑定按钮单击
$("#btnJQ").click(function(){
//jq设置div的内容
$("#mydiv").html("jq设置div的内容");
//jq设置文本框的内容
$("#txtName").val("张无忌");
//jq获取div的内容
alert($("#mydiv").html());
//jq获取文本框的内容
alert($("#txtName").val());
})
</script>
</body>
</html>
运行结果如下：
3.对比js对象和jq对象
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<input type="button" id="btn" value="对比js对象和jq对象"/>
<hr/>
<div id="mydiv">这是一个div</div>
<input type="text" id="txtName"/>
<!--引入jquery-->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//页面加载事件
$(function(){
$("#btn").click(function(){
//js元素对象:使用js方式获取的元素对象
/*console.log("打印js元素对象")
console.log(document.getElementById("mydiv"));
console.log(document.getElementById("txtName"));*/
console.log("===============================");
//jq元素对象:使用jq方式获取的元素对象
/*console.log("打印jq元素对象");
console.log($("#mydiv"));
console.log($("#txtName"));*/
//对比得出结论:
//jq对象就是对js做了一层包装
//所以两者之间可以转换:
//js对象变为jq对象: $(js对象)-> jq对象
var jsdiv = document.getElementById("mydiv");
var jqdiv = $(jsdiv); //将js变成了jq
jqdiv.html("用jq的方式设置内容");
//jq对象变为js对象: jq对象.get(0)->js对象
// jq对象[0] ->js对象
var jqtxt = $("#txtName");
var jstxt = jqtxt.get(0);//通过jq对象获取js对象
jstxt.value="用js方式设置数据";
})
})
</script>
</body>
</html>
运行结果如下：
4.绑定事件 标签选择器 批量获取div 动态添加div元素
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
.txt{
border:1px solid black;
height:30px;
}
div{
border:1px solid black;
width:500px;
height:30px;
}
</style>
</head>
<body>
<button type="button" id="btn">创建div</button>
<hr/>
<div>这是一个div1</div>
<div>这是一个div2</div>
<div>这是一个div3</div>
<div>这是一个div4</div>
<div>这是一个div5</div>
<!--引入jq-->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//标签选择器，批量获取div
//alert($("div").length);
//alert($("div").size());
//$("div").css("border","1px solid black")
// .width(500).height(30)
/*
$("div").click(function(){
//this：触发事件的当前元素
//alert($(this).html());
$("div").css("background-color","white");
$(this).css("background-color","red");
})*/
/*
$("div").on("click",function(){
//this：触发事件的当前元素
//alert($(this).html());
$("div").css("background-color","white");
$(this).css("background-color","red");
})*/
//绑定动态元素事件:通过容器来绑定目标元素的单击时间
$(document).on("click","div",function(){
//this：触发事件的当前元素
//alert($(this).html());
$("div").css("background-color","white");
$(this).css("background-color","red");
})
//动态添加div元素
$("#btn").click(function(){
$("body").append("<div>这是一个div"+($("div").size()+1)+"</div>");
})
})
</script>
</body>
</html>
运行结果如下：
5.动画 show() hide() slideUp() slideDown() slideToggle() animate()
图片、代码的路径如下如所示：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<input type="button" value="显示" id="btnShow"/>
<input type="button" value="隐藏" id="btnHide"/>
<input type="button" value="折叠" id="btnZD"/>
<input type="button" value="展开" id="btnZK"/>
<input type="button" value="折叠/展开" id="btnZZ"/>
<input type="button" value="动画方法" id="btnDH"/>
<hr/>
<div id="mydiv"></div>
<!--引入jq-->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv").css({
width:300,
height:300,
backgroundColor:"red",
position:"absolute",
left:100,
top:100
})
$("#btnShow").click(function(){
$("#mydiv").show(2000);
})
$("#btnHide").click(function(){
$("#mydiv").hide(2000);
})
$("#btnZD").click(function(){
$("#mydiv").slideUp(3000);
})
$("#btnZK").click(function(){
$("#mydiv").slideDown(3000);
})
$("#btnZZ").click(function(){
//slideToggle:切换状态
$("#mydiv").slideToggle(3000);
})
$("#btnDH").click(function(){
//动画属性:宽度和高度,位置,透明度
$("#mydiv").animate({left:500},1000,function(){
alert("我动了")
})
.delay(200)
.animate({top:500},1000,function(){
alert("我动了")
})
})
})
</script>
</body>
</html>
运行结果如下：
6.节点方法 first() last() eq(3)
图片、代码的路径如下如所示：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<button type="button" id="btn">测试</button>
省份:
<select id="pro">
<option value="">请选择</option>
<option value="河南">河南</option>
<option value="河北">河北</option>
</select>
水果:
<select id="fruit">
<option value="">请选择</option>
<option value="苹果">苹果</option>
<option value="橘子">橘子</option>
</select>
<ul>
<li>这是li1</li>
<li>这是li2</li>
<li>这是li3</li>
<li>这是li4</li>
<li>这是li5</li>
<li>这是li6</li>
</ul>
<!--引入jq-->
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
/*
//:selected :获取选中项
var opt = $(":selected");
//opt:jq对象
opt.each(function(i,el){
//this:js元素
//alert(this.innerHTML);
alert(i+" "+$(el).html())
})*/
/*
//ul li:所有li
//$("ul li").css("color","red");
//ul li:first 第一个
$("ul li:first").css("color","red");
//ul li:last 最后一个
$("ul li:last").css("color","red");
//ul li:eq(3) 索引是3的li
$("ul li:eq(3)").css("color","red");
*/
$("ul li").first().css("color","red");
$("ul li").last().css("color","red");
$("ul li").eq(3).css("color","red");
})
})
</script>
</body>
</html>
运行结果如下：
7.jQuery事件对象event/e属性
图片、代码的路径如下如所示：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<div id="mydiv" style="border:1px solid red;width:100px;height:100px"></div>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).mousemove(function(e){
//$("#mydiv").html(
//"x:"+window.event.clientX+" y:"+window.event.clientY);
$("#mydiv").html(
"x:"+e.clientX+" y:"+e.clientY);
})
})
</script>
</body>
</html>
运行结果如下：
8.省市级联
图片、代码的路径如下如所示：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<div id="con">
</div>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//省市级联
var proAry = ["河南","河北"];
//二维数组
var cityAry =new Array(2);
cityAry["河南"]=["郑州","洛阳","开封"];
cityAry["河北"]=["石家庄","衡水","保定"];
$(function(){
$("#con").append("省份:");
$("#con").append(
$("<select id='pro'></select>").
append("<option value=''>请选择</option>")
);
//添加省份选项
//$(proAry):将数组包装为jq对象
//循环数组
$(proAry).each(function(){
$("#pro").append("<option value='"+this+"'>"+this+"</option>")
})
//添加市
$("#con").append("市:");
$("#con").append(
$("<select id='city'></select>").
append("<option value=''>请选择</option>")
);
//绑定省份下拉切换事件
$("#pro").change(function(){
//先清空市的选项
//清空所有子选项
//$("#city").empty();
$("#city option:gt(0)").remove();
//获取选中的省份
var sheng = $(this).val();
//alert(sheng);
//通过省份，获取对应的市
$.each(cityAry[sheng],function(){
//添加市的选项
$("#city").append("<option value='"+this+"'>"+this+"</option>")
})
})
})
</script>
</body>
</html>
运行结果如下：
9.jq实现图书购物车添加
图片、代码的路径如下如所示：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<table id="bookTab" border="1" width="600" align="center">
<thead>
<tr>
<th>编号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyBook">
</tbody>
</table>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var bookAry = [
{"bookId":1001,"name":"西游记","author":"吴承恩","price":20},
{"bookId":1002,"name":"西游记2","author":"吴承恩2","price":22}
];
$(function(){
$(bookAry).each(function(){
//this:当前遍历的元素对象
$("#tbodyBook").append(
$("<tr></tr>").append(
$("<td></td>").html(this.bookId),
$("<td></td>").html(this.name),
$("<td></td>").html(this.author),
$("<td></td>").html(this.price),
$("<td></td>").html("<input type='button' value='添加'/>")
)
)
})
})
</script>
</body>
</html>
运行结果如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118155.html
