jQuery基础
使用jQuery快速高效制作网页交互特效
第一章-JavaScript基础
上机练习1
- 练习——统计包含“a”或“A”的字符串的个数
需求说明：使用数组存储一组字符串，并统计包含“a”或“A”的字符串的个数
关键代码：
<script type="text/javascript">
var a = ["America","Greece","Britain","Canada","China","Egypt"];
var count = 0;
for(var i in a) {
document.write(a[i] + "<br/>");
if (a[i].toLowerCase().indexOf("a") > -1) {
count++;
}
}
document.write("共有" + count + "个字符串中包含a或者A。");
</script>上机练习3
- 练习——编写一个带有两个变量和一个运算符的四则运算函数
需求说明：单击页面上的按钮时，调用函数，使用prompt()方法获取两个变量的值和一个运算符 运算结果使用alert()方法显示出来 使用Switch判断获取的运算符号
关键代码：
<script type="text/javascript">
function clec() {
var num1 = prompt("请输入第一个数：") * 1;
var num2 = prompt("请输入第二个数：") * 1;
var v = prompt("请输入运算符：");
switch(v) {
case "+":
alert("两数结果为：" + num1 + num2);
break;
case "-":
alert("两数结果为：" + num1 - num2);
break;
case "*":
alert("两数结果为：" + num1 * num2);
break;
case "/":
if(num2 == 0) {
alert("输入有误！结果为" + num2)
} else {
alert(num1 / num2);
}
}
}
</script>上机练习4
- 练习——统计考试科目的成绩
需求说明： 单击按钮调用函数，统计考试成绩 使用prompt()方法输入考试科目的数量，要求数量的数值类型必须非零，非负数，否则给出相应的提示并退出程序 根据考试科目的数量，使用prompt()方法输入各科的考试成绩并累加，要求成绩必须非负数，否则给出相应的提示并退出程序 如果各项输入正确，则弹出科目总成绩
关键代码：
<script type="text/javascript">
function f1() {
var subject = prompt("请输入考试科目数量：") * 1;
if(subject <= 0) {
alert("输入的非零");
return;
} else if (isNaN(subject)) {
alert("输入的不是数字！");
return;
}
var n = 0;
for (var i = 0; i < subject; i++) {
a = prompt("请输入第" + (i+1) + "门考试成绩：") * 1;
if (a < 0) {
alert("输入的数字不能为负数！");
return;
}
n += a;
}
alert(subject +"门成绩是：" + n);
}
</script>简答题3
- 使用JavaScript输出图形
使用document.write()输出水平线 使用循环控制每个水平线的长度
关键代码：
<script type="text/javascript">
for(var i = 61,j = -1;i < 71;){
document.write("<hr width=" + i+"%/>");
if(i<11) {
j=1;
}
i+=10*j;
}
</script>简答题4
- 验证邮箱地址的有效性，要求如下：
- 定义一个有参函数用来验证邮箱地址的有效性
- 使用prompt()方法用来输入邮箱地址，默认值是“susan@sohu.com”
- 输入邮箱地址正确，输出用户名信息
- 正确的邮箱地址必须包含“@”和“.”，输入不正确提示相应的错误信息
- 邮箱地址为空提示相应的错误信息
关键代码：
<script type="text/javascript">
f1(prompt("请输入邮箱地址：","susan@suhu.com"));
function f1(email) {
if (email == "") {
alert("邮箱不能为空") ;
} else if (email.split("@").length==1 || email.split(".").length==1) {
alert("邮箱地址必须包含@和.");
} else {
arr = email.split("@");
alert("邮箱地址正确，邮箱名称是："+arr[0]) ;
}
}
</script>简答题5
- 使用prompt()方法在页面中弹出对话框，根据用户输入的星期一-星期日的不同，弹出不同的信息提示对话框，要求使用函数实现，要求如下：
- 输入“星期一”时，弹出“新的一周开始了。”
- 输入“星期二”，“星期三”，“星期四”时，弹出“努力工作”
- 输入“星期五”时，弹出“明天就是周末了”
- 输入其他内容，弹出“放松休息”
关键代码：
<script type="text/javascript">
var day = prompt("请输入今天是星期几：");
switch(day) {
case "星期一": alert("新的一周开始了。");
break;
case "星期二":
case "星期三":
case "星期四": alert("努力工作。");
break;
case "星期五": alert("明天就是周末了。");
break;
default: alert("放松休息。");
break;
}
</script>第二章-JavaScript操作BOM对象
一些小案例，欢迎参考
点击按钮，文本框值加1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="a" value=""/>
<input type="button" onclick="f1()" value="点我试试" />
<script type="text/javascript">
function f1() {
a.value = a.value * 1 + 1;
}
</script>
</body>
</html>计算器：加减乘除求余，需要判断是不是数字，以及除数不能为0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
第一个数：<input type="text" id="one"><br>
第二个数：<input type="text" id="two"><br>
运算符：<select id="three">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select><br>
<button id="four">提交</button><br>
<h3 id="result"></h3>
<script type="text/javascript">
var input1 = document.getElementById('one');
var input2 = document.getElementById('two');
var input3 = document.getElementById('three');
var input4 = document.getElementById('four');
input4.onclick = function(){
if (isNaN(input1.value) || isNaN(input2.value)) {
alert("只能是数字！")
} else {
if (input3.value == '+') {
sum = (input1.value)*1 + (input2.value)*1;
document.getElementById("result").innerHTML = sum;
} else if (input3.value == '-') {
jian = (input1.value)*1 - (input2.value)*1;
document.getElementById("result").innerHTML = jian;
} else if (input3.value == '*') {
cheng = (input1.value)*1 * (input2.value)*1;
document.getElementById("result").innerHTML = cheng;
} else if (input3.value == '/') {
chu = (input1.value)*1 / (input2.value)*1;
document.getElementById("result").innerHTML = chu;
}
}
}
</script>
</body>
</html>时钟显示：月份、日期、小时、分钟、秒，如果不足2位，前面补0，例：2020年11月17日 02:01:33 PM 星期二
<!DOCTYPE html>
<html language="zh-CN">
<head>
<meta charset="utf-8">
<title>作业3</title>
</head>
<body>
<h2 align="center" id="a"></h2>
<script type="text/javascript">
function clock_12h() {
var today = new Date();
var hous = "";
if (today.getHours() > 12) {
hous = "PM";
} else {
hous = "AM";
}
var day = "";
switch(today.getDay()) {
case 1: day = "星期一";break;
case 2: day = "星期二";break;
case 3: day = "星期三";break;
case 4: day = "星期四";break;
case 5: day = "星期五";break;
case 6: day = "星期六";break;
case 7: day = "星期日";break;
}
month = (today.getMonth() + 1);
a.innerHTML =
today.getFullYear() + "年"
+ t(month) + "月"
+ t(today.getDate()) + "日" + ' '
+ t(today.getHours()) + "时"
+ t(today.getMinutes()) + "分"
+ t(today.getSeconds()) + "秒" + ' '
+ hous + " " + day;
}
function t(d) {
if (d <= 9) {
d = "0" + d;
}
return d;
}
var mytime = setInterval("clock_12h()",1000);
</script>
</body>
</html>全选、全不选、反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox"/>
<input type="button" onclick="a()" value="全选" />
<input type="button" onclick="b()" value="全不选" />
<input type="button" onclick="c()" value="反选" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<script type="text/javascript">
var input = document.getElementsByTagName("input");
function a() {
for (var i = 0; i < input.length; i++) {
input[i].checked = true;
}
}
function b() {
for (var i = 0; i < input.length; i++) {
input[i].checked = false;
}
}
function c() {
for (var i = 0; i < input.length; i++) {
input[i].checked = !input[i].checked;
}
}
</script>
</body>
</html>图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换</title>
<style type="text/css">
*{margin: 2px; padding: 0px;}
div {
width: 524px;
height: 190px;
position: relative;
margin: 0px auto;
}
ul {
position: absolute;
right: 0px;
bottom: 0px;
}
li{
list-style: none;
border-radius: 50%;
background-color: #CCCCCC;
width: 25px;
height: 25px;
line-height: 25px;
float: left; text-align: center;
margin: 5px;
}
.high{
background-color: rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<div onmouseover="clearInterval(s)" onmouseout="s = setInterval('chg()',1200)">
<img src="images/1.jpg" id="img">
<ul>
<li onmouseover="num(0)">1</li>
<li onmouseover="num(1)">2</li>
<li onmouseover="num(2)">3</li>
<li onmouseover="num(3)">4</li>
</ul>
</div>
<script type="text/javascript">
var img = document.getElementById("img");
var index = 1;
var arr = document.getElementsByTagName("li");
// 第一次加载的时候，第一个ul先变亮
arr[0].className = "high";
function chg() {
index++;
if (index > 4) {
index = 1;
}
img.src = "images/" + index + ".jpg";
for (var i = 0; i < arr.length; i++) {
arr[i].className = "";
}
arr[index-1].className = "high";
}
s = setInterval('chg()',1200);
function num(i) {
index = i;
chg();
}
</script>
</body>
</html>随机点名器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业6</title>
<style type="text/css">
#a{
text-align: center;
margin-top: 20%;
font-size: 120px;
color: aquamarine;
}
</style>
</head>
<body>
<h1 style="text-align: center;">按任意键开始随机点名</h1>
<h1 id="a"></h1>
<script type="text/javascript">
arr = [
"张三",
"李四",
"王五",
"赵六",
"孙权",
"曹操",
"李白"];
var flag = true;
var i;
window.onkeyup = function f1(event) {
// if (event.keyCode == 13) { // 回车键
if (flag) {
i = setInterval("f2()",100);
flag = false;
} else {
clearInterval(i);
flag = true;
}
// }
}
function f2() {
var index = Math.floor(Math.random()*arr.length);
a.innerHTML = arr[index];
}
</script>
</body>
</html>第三章-JavaScript操作DOM对象
练习1-访问当当购物车页面节点
需求说明： 单击“结算”按钮，使用节点的层次关系访问节点，在页面下方显示各个商品的价格和所有商品的总价
关键代码：
/**
* Created by zongjuan.wang on 2016/6/1.
*/
/*关闭窗口*/
function close_plan(){
window.close();
}
function collection(){
var flag=confirm("移入收藏后，将不再购物车显示，是否继续操作?");
if(flag==true){
alert("移入收藏成功!");
}
}
function del(){
var flag=confirm("您确定要删除商品吗?");
if(flag==true){
alert("删除成功!");
}
}
function minus(num){
var prices=document.getElementsByName("price")[num].value;
var count=parseInt(document.getElementsByName("amount")[num].value)-1;
if(count<1){
alert("不能再减了，再减就没有啦！");
}
else{
document.getElementsByName("amount")[num].value=count;
var totals=parseFloat(prices*count);
document.getElementById("price"+num).innerHTML="¥" +totals;
total();
}
}
function plus(num){
var prices=document.getElementsByName("price")[num].value;
var count=parseInt(document.getElementsByName("amount")[num].value)+1;
document.getElementsByName("amount")[num].value=count;
var totals=parseFloat(prices*count);
document.getElementById("price"+num).innerHTML="¥" +totals;
total();
}
function total(){
var prices=document.getElementsByName("price");
var count=document.getElementsByName("amount");
var sum=0;
for(var i=0; i<prices.length;i++){
sum+=prices[i].value*count[i].value;
}
document.getElementById("totalPrice").innerHTML="¥" +sum;
}
total();
function accounts() {
con.lastElementChild.innerHTML =
"您购买的商品信息如下：" + "<br>"
+ "白岩松：白说：" + price0.innerText + "<br>"
+ "岛上书店：" + price1.innerText + "<br>"
+ "商品总计：" + totalPrice.innerText;
}练习2-操作当当购物车页面
单击“删除”按钮，使用parentNode访问当前节点的父节点等，使用removeChild()删除当前商品
关键代码：
/**
* Created by zongjuan.wang on 2016/6/1.
*/
/*关闭窗口*/
function close_plan(){
window.close();
}
function collection(){
var flag=confirm("移入收藏后，将不再购物车显示，是否继续操作?");
if(flag==true){
alert("移入收藏成功!");
}
}
function minus(num){
var prices=document.getElementsByName("price")[num].value;
var count=parseInt(document.getElementsByName("amount")[num].value)-1;
if(count<1){
alert("不能再减了，再减就没有啦！");
}
else{
document.getElementsByName("amount")[num].value=count;
var totals=parseFloat(prices*count);
document.getElementById("price"+num).innerHTML="¥" +totals;
total();
}
}
function plus(num){
var prices=document.getElementsByName("price")[num].value;
var count=parseInt(document.getElementsByName("amount")[num].value)+1;
document.getElementsByName("amount")[num].value=count;
var totals=parseFloat(prices*count);
document.getElementById("price"+num).innerHTML="¥" +totals;
total();
}
function total(){
var prices=document.getElementsByName("price");
var count=document.getElementsByName("amount");
var sum=0;
for(var i=0; i<prices.length;i++){
sum+=prices[i].value*count[i].value;
}
document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML="¥" +sum.toFixed();
}
total();
function del(a) {
if (confirm("是否删除?")) {
a.parentNode.parentNode.remove();
total();
}
}练习3：制作课工场论坛发贴
关键代码：
<script type="text/javascript">
function show() {
document.getElementsByClassName("post")[0].style.display = "block";
}
var arr = ["tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg"];
function pus() {
var li = document.createElement("li");
var div = document.createElement("div");
var img = document.createElement("img");
var index = Math.floor(Math.random()*4);
img.src = "images/" + arr[index];
div.appendChild(img);
li.appendChild(div);
var h1 = document.createElement("h1");
h1.innerText = title.value;
li.appendChild(h1);
var p = document.createElement("p");
var sp1 = document.createElement("span");
var sp2 = document.createElement("span");
sp1.innerText = "板块：" + sel.value;
var d = new Date();
sp2.innerText = "发表时间：" + d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
p.appendChild(sp1);
p.appendChild(sp2);
li.appendChild(p);
ul.insertBefore(li,ul.firstChild);
// 发布完成之后，清空文本框
title.value = "";
content.value = "";
document.getElementsByClassName("post")[0].style.display = "none";
}
</script>练习4：制作带关闭按钮的滚动广告
需求说明： 在页面中有一个图片和一个关闭按钮 当滚动条向下或向右移动时，图片和关闭按钮随滚动条移动，相对于浏览器的位置固定 单击“关闭”按钮时，页面中的图片和关闭按钮不显示
<script type="text/javascript">
var img1 = document.getElementById("close");
window.onscroll = function() {
var top = parseInt(document.documentElement.scrollTop || document.body.scrollTop);
float.style.top = (60+top) + "px";
img1.style.top = (60+top) +"px";
}
function adv_close(a) {
a.remove();
float.remove();
}
</script>简答题3
- 假设在页面中，有一个图片和五个数字链接，单击不同的数字链接显示不同的图片
关键代码：
<script type="text/javascript">
function toto(a) {
var arr = ["1.gif","2.gif","3.jpg","4.jpg","5.gif"];
document.getElementById("photo").setAttribute("src","images/" + arr[a]);
}
</script>简答题4
- 如页面所示，单击“再上传一个图片”，按钮增加一行，可以增加许多相同的图片上传的行
关键代码：
<script type="text/javascript">
up.onclick = function() {
var copy = document.getElementById("upload").cloneNode(true);
copy.lastElementChild.firstElementChild.value = "";
main.insertBefore(copy,addBtn);
}
</script>简答题5
- 制作一个Tab切换效果
关键代码：
<script type="text/javascript">
var li = document.getElementsByTagName("li");
var d = document.getElementsByClassName("div_bg")[0];
var div = d.getElementsByTagName("div");
function xx(n) {
for (var i = 0; i < li.length; i++) {
li[i].className = "bg";
div[i].style.display = "none";
}
li[n].className = "nobg";
div[n].style.display = "block";
}
xx(0);
</script>第四章-JavaScript对象及初识面向对象
待更…….
第五章-初识jQuery
上机练习1
- 上机练习1——编写第一个jQuery程序
打开页面时。弹出窗口，提示信息为“我编写的第一个jQuery程序”
<script type="text/javascript">
$(function() {
alert('我编写的第一个jQuery程序！')
})
</script>上机练习2
- 上机练习2——制作当当网首页导航
需求说明： 鼠标移至到“我的当当”上时显示二级菜单，并显示1px的颜色为#cc7304实线边框，当鼠标离开边框范围之后，二级菜单消失，边框消失
关键代码：
<script type="text/javascript">
$("#a").hover(function(){
$("#menu-ul").css("display","block").css("border","1px solid #ee7306");
},function(){
$("#menu-ul").css("display","none");
})
</script>上机练习3
- 上机练习3——使用jQuery变换网页效果
需求说明： 制作《你是人间四月天》内容简介页面 单击“你是人间四月天”标题后，标题字体变小，颜色变为蓝色，正文的字体颜色变为绿色， 单击“查看全部”链接，显示内容简介
关键代码：
<script type="text/javascript">
$("#div h1").click(function() {
$(this).css("font-size","20px").css("color","aqua");
$("#div p").css("color","green");
})
$("#div a").click(function() {
$(this).attr("href","shige.html");
})
</script>上机练习4
- 上机练习4——制作广告图片轮播切换效果
需求说明： 实现图片轮播，具体效果参见代码
关键代码：
<script type="text/javascript">
var index = 1;
function chg() {
index++;
if (index > 6) {
index = 1;
}
$("#adver").css("background","url('images/adver0"+index+".jpg')");
$("li").removeClass("higt");
$("li").eq(index-1).addClass("higt");
}
var s = setInterval('chg()',1200);
$("li").eq(0).addClass("higt");// 加载的时候第一个li先变颜色
$("#adver").hover(function() {
clearInterval(s);
$("#left,#right").css("display","block");
},function(){
s = setInterval('chg()',1200);
$("#left,#right").css("display","none");
});
$("#left").click(function() {
index--;
if (index == 0) {
alert("这是第一张图片哦！");
index++;
return;
}
$("#adver").css("background","url('images/adver0"+(index)+".jpg')");
$("li").removeClass("higt");
$("li").eq(index-1).addClass("higt");
})
$("#right").click(function() {
if (index == 6) {
alert("已经是最后一张了哦！")
index--;
}
chg();
})
$("li").hover(function() {
index = $(this).text()-1;
chg();
})
</script>简答题4
- 使用css()方法添加图片边框，单击图片显示边框
关键代码：
<script type="text/javascript">
$("#img").click(function(){
$(this).css("border","3px solid #f00");
})
</script>简答题5
- 制作林薇因简介页面，单击“林薇因简介”链接显示简介内容，单击“主要作品”链接显示对应作品
关键代码：
<script type="text/javascript">
$("#one").click(function(){
$(this).next().toggleClass("high");
})
// var flag = true;
// $("#one").click(function(){
// if(flag){
// $(this).next().css("display","block");
// flag = false;
// } else {
// $(this).next().css("display","none");
// flag = true;
// }
// })
$("#two").click(function(){
$(this).next().toggleClass("high");
})
// var flag1 = true;
// $("#two").click(function(){
// if(flag1){
// $(this).next().css("display","block");
// flag1 = false;
// } else {
// $(this).next().css("display","none");
// flag1 = true;
// }
// })
</script>第六章-jQuery选择器
上机练习1
- 制作图书简介页面
需求说明： 根据提供的素材，在图书简介页面上增加jQuery代码，使用基本选择器和层次选择器，获取并设置页面元素 “自营图书几十万”……一行字体颜色为红色 京东价￥24.10字体为24xp，红色加粗显示 【定价，￥35.00】字体颜色为#cccccc，价格中有中划线 《dl》标签中的字体颜色均为红色 单击“以下促销……”链接，显示隐藏的内容，，此部分字体颜色均为红色， “加购价”“满减”“105-5”“200-16”字体颜色为白色，背景颜色为红色，上下内边距为1px，左右内边距为5px，外右边距为5px
关键代码：
<script type="text/javascript">
$(".intro").css("color","red");
$("#jdPrice>span").css("font-size","24px").css("font-weight","bold").css("color","red");
$("#jdPrice>span+").css("color","#cccccc").css("text-decoration","underline");
$("dl").css("color","red");
var flag = true;
$(".textRight dl dt").click(function(){
if (flag) {
$(".textRight dl dd").css("display","block");
flag = false;
} else {
$(".textRight dl dd").css("display","none");
flag = true;
}
})
$(".dd").css("color","white").css("background-color","red").css("padding","1px 5px 1px 5px").css("margin-right","5px");
$("#ticket span").css("color","white").css("background-color","red").css("padding","1px 5px 1px 5px").css("margin-right","5px");
</script>上机练习2
- 使用jQuery美化英雄联盟简介页
需求说明： 单击p元素后，设置class为txt_box的元素的内class为current的元素的背景颜色为#6ff，p的组他不是有span的背景颜色为#f9f，紧邻好h1后的p元素的背景颜色为#ff6，”即时对战“文本颜色为#fff，背景颜色为#f00
关键代码：
<script type="text/javascript">
$("#tit").click(function () {
$(".current").css("background-color","#6ff");
})
$("#content>span").css("background-color","#f9f");
$("h1+").css("background-color","#ff6");
$("#content>span>span").css("color","#fff");
$("#content>span>span").css("background-color","#f00");
</script>上机练习3
- 制作非缘勿扰页面特效
需求说明： 单击标题“非缘勿扰”dd元素中有id属性的span元素的文本{主演，导演，标签，剧情}颜色值为#ff0099，字体加粗 单击文本“导演”，文字“赖水清”为加粗 单击文本“标签”他之后的“苏有朋”和“2013”的背景颜色为#e0f8ea，字体颜色为#10a14b，并且文本与背景颜色上下边缘间距3px，左右边缘边距为8px 单击图片“收藏”弹出对话框，显示信息为“您已收藏成功！”
关键代码：
<script type="text/javascript">
$(".right dl dt").click(function(){
$(".right [id]").css("color","#ff0099").css("font-weight","bold");
})
$("#director").click(function(){
$("[title='导演']").css("font-weight","bold");
})
$("#label").click(function(){
$("#label~").css("background-color","#e0f8ea").css("color","#10a14b").css("padding","2px 8px 2px 8px");
})
$("[alt='收藏本片']").click(function(){
alert("收藏成功！！！");
})
</script>上机练习4
- 制作隔行变色的商品列表
需求说明： 根据提供的素材，添加jQuery代码，完成效果制作，隔行变色（不包括表头）偶数行背景色为#eff7d1，奇数行背景色为#f7e195
<script type="text/javascript">
$(document).ready(function(){
$("tr:not(.t-head):even").css("background-color","#eff7d1");
$("tr:not(.t-head):odd").css("background-color","#f7e195");
})
</script>上机练习4
- 全网热播视频
需求说明： 使用选择器not()设置两个图片右侧内容边距为10px 使用选择器.last设置右侧列表背景颜色为#f0f0f0 使用层次选择器.frist.not()设置前三个视屏名称前的数字1.2.3背景颜色为#f0a30f，后面的背景颜色为#a4a3a3 3.5.6.7后的箭头向上，4.8.9.10的箭头向下 当鼠标移动至右侧列表上时，显示对应隐藏的内容，加入清单，鼠标指针离开后隐藏
<script type="text/javascript">
$("#play ul>li:not(li:last)").css("margin-right","10px");
$("#play ul>li:last").css("background-color","#f0f0f0");
$("#play ul>li:not(li:last) span,#play ol>li span:first").css("background-color","#f0a30f");
$("#play ol>li>span:not(span:first)").css("background-color","#a4a3a3");
$("#play ol>li").hover(function(){
$(this).find("p:hidden").show();
},function(){
$(this).find("p:visible").hide();
});
$("ol>li:eq(0),ol>li:eq(2),ol>li:eq(3),ol>li:eq(4)").css("background-image","url('images/orange.jpg')").css("background-repeat","no-repeat").css("background-position","190px -3px");
$("ol>li:not(:eq(0),:eq(2),:eq(3),ol:eq(4))").css("background-image","url('images/green.jpg')").css("background-repeat","no-repeat").css("background-position","190px -3px");
</script>简答题5
- 当前页面加载完毕时，隔行变色，背景色为#ececec
关键代码
<script type="text/javascript">
$("dl:odd").css("background-color","#ececec");
</script>简答题6
- 单击图片时，显示提示信息，单击提示信息后，隐藏提示信息
关键代码：
<script type="text/javascript">
$("dd img").click(function(){
$("dt img:hidden").show();
})
$("dt img").click(function(){
$("dt img:visible").hide();
})
</script>第七章-jQuery中的事件和动画
上机练习1
- 制作京东首页右侧固定层
需求说明： 默认状态下仅显示图标，背景颜色为深灰色，当鼠标指针移动至图片上时，背景颜色为深红色，并且在图标左侧显示文本 使用鼠标时间，show，css，hide方法完成页面特效
关键代码
<script type="text/javascript">
$("li").hover(function(){
$(this).find("p:hidden").show();
$(this).find("span").css("background-color","#c81623")
},function(){
$(this).find("p:visible").hide();
$(this).find("span").css("background-color","#7a6e6e")
})
</script>上机练习2
- 仿京东左侧菜单
需求说明： 使用hover()实现鼠标指针移动至菜单上时，显示二级菜单，移出后隐藏 使用toggleClass()实现鼠标指针移动至菜单上时，背景颜色变为橙色，移出后，背景颜色变为之前颜色
关键代码：
<script type="text/javascript">
$("li").hover(function(){
$(this).find("div:hidden").show();
$(this).toggleClass("orange");
},function(){
$(this).find("div:visible").hide();
$(this).toggleClass("orange");
})
</script>上机练习3
- 京东常见问题分类页面
需求说明： 使用复合事件hover()实现鼠标移动至“联系客服”，二级菜单以slow速度显示，离开时，以slow速度隐藏 单击常见问题分类下的一级菜单时，使用slideDown()方法实现二级菜单以slow速度显示，当再次单击一级菜单时，使用slideUp()方法已slow速度隐藏
关键代码：
<script type="text/javascript">
$("#lxkf").hover(function(){
$(".top-m ul.topDown").show("slow");
},function(){
$(".top-m ul.topDown").hide("fast");
})
var flag = true;
$(".nav dt").click(function(){
if(flag){
$(this).siblings().slideDown("slow");
flag = false;
} else {
$(this).siblings().slideUp("slow");
flag = true;
}
})
</script>简答题5
- 制作页面特效，初始状态下仅显示“购物特权”主菜单，单击“购物特权”二级菜单在显示和隐藏之间切换，当鼠标移动至二级菜单时，子菜单添加背景色
关键代码：
<script type="text/javascript">
$(".firstNav").click(function(){
$("#nav .navsBox ul").toggle();
})
$("#nav .navsBox ul li").hover(function(){
$(this).toggleClass("onbg");
})
</script>简答题6
- 当点击底部箭头时，隐藏菜单项的后四项，并且底部箭头向上，再次单击底部箭头，显示隐藏的菜单项，并且底部箭头向下
关键代码：
<script type="text/javascript">
$(".lastone").click(function(){
$(".nav li:gt(6):not(.lastone)").toggle();
$(".lastone").toggleClass("up");
})
</script>第八章-使用jQuery操作DOM对象
上机练习1
- 制作今日团购模块
需求说明： 当鼠标指针移过商品信息时，使用addClass()方法添加样式，边框及背景颜色值为#d51938，说明文字变为白色 当鼠标移出时，使用removeClass()方法恢复初始状态
关键代码：
<script type="text/javascript">
$("#pruduce .box").hover(function() {
$(this).addClass("hoverstyle");
},function(){
$(this).removeClass("hoverstyle");
})
</script>上机练习2
- 制作QQ简易聊天框
需求说明： 在输入框中输入聊天内容，单击“发送”按钮，在页面上显示聊天内容，左侧显示聊天者头像，右侧显示聊天昵称和聊天信息，使用assClass()方法为聊天内容添加背景色，边框为圆角，聊天内容发送完毕后，内容显示在聊天区域，输入框内容清空 如果聊天内容过多，则聊天内容显示区域在垂直方向显示滚动条 如果输入框中没有输入内容，则单击发送按钮，不做任何操作
关键代码：
<script type="text/javascript">
$("#send").click(function(){
var uName = new Array("时尚伊人","六月奇迹","松松");
var headImg = new Array("head01.jpg","head02.jpg","head03.jpg");
var iNum = Math.floor(Math.random()*3);
var headStr = "<div><img src=images/"+headImg[iNum]+"></div>";
var userName = "<p>"+uName[iNum]+"</p>";
var chatStr = "<span>"+$(".chatText").val()+"</span>";
var currentStr = "<section>"+headStr+userName+chatStr+"</section>";
var str = $(".chatBody").html();
if ($(".chatText").val().length > 0) {
$(".chatBody").html(str+currentStr);
$(".chatText").val("");
$(".chatBody section").addClass("bg");
} else {
alert("您还未输入内容！")
}
})
$(".btn span:first").click(function(){
if (confirm("您确定关闭页面吗？")) {
window.close();
}
})
</script>上机练习3
- 制作课工场论坛发贴
需求说明； 单击“我要发帖”按钮，弹出发帖界面 在标题框中输入标题，选择所属板块，输入帖子内容 单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示头像，标题，板块和发帖时间
关键代码:
<script type="text/javascript">
$(".bbs header span").click(function () {
$(".post").toggle();
})
var arr = ["tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg"];
$(".post .btn").click(function () {
var $li = $("<li></li>");
var index = Math.floor(Math.random()*4);
var $img = $("<div><img src=images/"+arr[index]+"></div>");
var $title = $("<h1>"+$(".title").val()+"</h1>");
var p = $("<p></p>");
var d = new Date();
var time = d.getFullYear()+"-"+parseInt(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes();
$(p).append("<span>版块："+$(".post select").val()+"</span>");
$(p).append("<span> 发表时间："+time+"</span>");
$($li).append($img);
$($li).append($title);
$($li).append(p);
$(".bbs section ul").prepend($li);
$(".post .content").val("");
$(".post .title").val("");
$(".post").hide();
})
</script>上机练习4
- 制作凡客诚品帮助中心页面
需求说明： 左导航，当前二级菜单项展开时，其余导航项关闭 帮助中心，文本框获得焦点时，默认文字消失，失去焦点时，再次显示文字 购物流程，鼠标指针移过时，当前项高亮显示，鼠标指针移动至父元素或祖先元素时，依旧高亮，只有当鼠标指针移动至其同辈元素时，同辈元素高亮，而去掉该元素的高亮样式 右下角问题解决，当选中单选按钮，“未解决时”显示隐藏内容
关键代码：
<script type="text/javascript">
$("#nav ul li div").click(function () {
var i = $(this).parent().index();
$("#nav li:not(:eq(" + i + ")) ul").slideUp();
$(this).siblings().toggle();
});
$(".search")
.focus(function () {
$(this).val("");
})
.blur(function () {
$(this).val("请输入要查询的问题");
});
$("[name='IsAvail']").click(function () {
$(".wenti").show();
});
$(".qiehuan input:first").click(function () {
$(".wenti").hide();
});
var i = 0;
$("#tab_bg div").hover(function () {
i = $(this).index();
$("#tab_bg").attr("class", "tab_bg" + i);
$("#tab_bg div a").css("color", "#000");
$("#tab_bg div a:eq(" + i + ")").css("color", "#fff");
});
</script>简答题4
- 制作游戏列表页面，游戏列表放置一个边框颜色为#cccccc的1px实现框中，该线框与浏览器四周间距为10px，与其内容之间间距为15px，标题文字大小为14px，颜色为#0066ff，超链接颜色为#ff3300，鼠标指针移过时显示下划线，单击“删除”按钮时，其对应的图片和名称信息被删除，单击“新增按钮”时，增加游戏
关键代码：
<script type="text/javascript">
$(".add").click(function() {
var arr = ["p1.jpg","p2.jpg","p3.jpg","p4.jpg"];
var index = Math.floor(Math.random()*4);
var str = ["街机三国","霸域","斗破乾坤","大航海家OL"];
var $g = $("<dl><dt><img src=images/"+arr[index]+" /></dt><dd>"+str[index]+"</dd><dd><a class='del' href='javascript:void(0);'>删除</a></dd></dl>");
$($g).insertBefore($('.clear'));
$('.del').click(function(){
$(this).parents("dl").remove();
})
})
$('.del').click(function(){
$(this).parents("dl").remove();
})
</script>简答题5
- 鼠标移过商品时，图片变为半透明显示，鼠标移过时，图片恢复正常显示
关键代码：
<script type="text/javascript">
$("img").hover(function(){
$(this).addClass('transparent_class');
},function(){
$(this).removeClass('transparent_class');
})
</script>表格操作-实现商品信息的增删改操作
以下为完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
table {
margin: 0px auto;
width: 600px;
border-collapse: collapse; /*折叠。去掉单元格之间的空*/
}
thead tr {
background-color: #999;
}
tr {
height: 80px;
}
td {
text-align: center;
}
p {
text-align: center;
height: 50px;
line-height: 50px;
cursor: pointer;
}
span {
color: #0094ff;
}
#spPrice {
color: #f00;
font-weight: bold;
}
thead tr th {
width: 120px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th><input id="chkAll" type="checkbox" /></th>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>倚天剑</td>
<td class="s">1</td>
<td class="p">100</td>
<td>
<input
type="image"
src="images/edit.jpg"
title="编辑"
onclick="edit(this)"
/>
<input type="image" src="images/del.jpg" title="删除" onclick="del(this)"/>
</td>
</tr>
</tbody>
</table>
<p>
<span id="spAdd">新增</span>
<span id="spDel">批量删除</span>
</p>
<p>总价格：<span id="spPrice">100</span>元</p>
<script type="text/javascript">
// 克隆tr行
var $tr = $("tbody tr:first").clone(true);
// 奇偶行背景颜色改变
function chg() {
$("tbody tr:even").css("background-color","pink");
$("tbody tr:odd").css("background-color","orange");
}
chg();
// 添加商品信息
$("#spAdd").click(function () {
$("tbody").append($tr.clone(true));
chg();
sum();
});
// 删除单个商品信息
function del(a) {
if (confirm("你他妈确定删除吗？")) {
$(a).parents("tr").remove();
sum();
}
}
// 全选
$("#chkAll").click(function () {
var cl = this.checked;
$("input[type='checkbox']").each(function () {
this.checked = cl;
});
});
// 批量所有商品信息
$("#spDel").click(function () {
$(":checked:not('#chkAll')").parents("tr").remove();
chg();
sum();
});
// 编辑商品
function edit(a) {
var $tds = $(a).parents("tr").children();
if (a.title == "编辑") {
$(a).attr({"src":"images/save.jpg","title":"保存"});
for(var i = 1; i < 4; i++) {
$tds.eq(i).html("<input value='"+$tds.eq(i).text()+"' />");
}
// $.each($tds, function(i,d){
// if (i >= 1 && i <= 3) {
// $tds.eq(i).html("<input />");
// }
// })
} else {
$(a).attr({"src":"images/edit.jpg","title":"编辑"});
for(var i = 1; i < 4; i++) {
$tds.eq(i).html($tds.eq(i).children().val());
}
sum();
}
}
// 计算总价格
function sum() {
var money = 0;
var count = $("tbody tr");
for (var i = 0; i < count.length; i++) {
money += $(count).eq(i).children().eq(2).text()*$(count).eq(i).children().eq(3).text();
}
$("#spPrice").text(money);
}
</script>
</body>
</html>第九章-表单效验
上机练习1
- 验证注册页面中的电子邮件
需求说明： 电子邮箱不能为空 电子邮箱必须包含特殊符号@和. 当电子邮箱框中的内容正确时，页面跳转到注册成功页面
关键代码：
<script type="text/javascript">
let flag = false;
$("#Button").click(function() {
// let reg = /^.*([@.]).*(?!\1)[@.].*$/;
let reg = /^(.*[@])(.*[.]).*$/;
if ($("#email").val() == "") {
alert("电子邮件不能为空");
} else if (!reg.test($("#email").val())) {
alert("电子邮件必须包含@和.");
} else {
flag = true;
}
})
$("form").submit(function() {
return flag;
})
</script>上机练习2
- 验证贵美网站的注册页面
需求说明： 使用文本输入提示的方式验证贵美网站，要求如下 名字和姓氏均不能为空，
关键代码：
<script type="text/javascript">
let flag = false;
$("#fname").blur(function () {
let s = "";
let reg = /^[\D]+$/;
if (this.value.trim() == "") {
s = "名字不能为空";
} else if (!reg.test(this.value)) {
s = "不能包含数字";
}
$(this).next().text(s);
})
$("#lname").blur(function () {
let s = "";
let reg = /^[\D]+$/;
if (this.value.trim() == "") {
s = "姓氏不能为空";
} else if (!reg.test(this.value)) {
s = "不能包含数字";
}
$(this).next().text(s);
})
$("#pass").blur(function() {
let s = "";
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (this.value.length < 6) {
s = "密码不能少于六位";
}
$(this).next().text(s);
})
$("#rpass").blur(function() {
let s = "";
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (this.value != $("#pass").val()) {
s = "两次输入的密码不一致";
}
$(this).next().text(s);
})
$("#email").blur(function() {
let s = "";
let reg = /^(.*[@])(.*[.]).*$/;
if (this.value.trim() == "") {
s = "电子邮件不能为空";
} else if (!reg.test($("#email").val())) {
s = "电子邮件必须包含@和.";
}
$(this).next().text(s);
})
$("form").submit(function () {
$(":text,:password").trigger("blur");
return $("form span").text() == "";
});
</script>上机练习3
- 使用正则表达式验证注册页面
需求说明： 使用html5新增的属性设置用户名和密码的默认提示信息 用户名只能是由英文和数字组成，长度为4-16个字符，并且以英文字母开头，当输入用户名符合法则提示 密码只能由英文字母和数字组成，长度为4-10字符 手机号只能是1开头的11位数字 生日的年份为1900-2016，生日格式为1980-5-12或1980-05-04组成
关键代码：
<script type="text/javascript">
$("#user").blur(function () {
let s = "";
// let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,20}$/;
let reg = /^(?![0-9]+$)(?![A-Za-z]+$)([0-9a-zA-Z]){4,16}$/;
if (this.value.trim() == "") {
s = "用户名不能为空";
} else if (!reg.test(this.value)) {
s = "用户名由英文字母和数字组成的4-16位字符，以字母开头";
}
$(this).next().text(s);
});
$("#pwd").blur(function () {
let s = "";
let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,10}$/;
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (!reg.test(this.value)) {
s = "密码由英文字母和数字组成的4-10位字符";
}
$(this).next().text(s);
});
$("#repwd").blur(function () {
let s = "";
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (this.value != $("#pwd").val()) {
s = "两次输入的密码不一致";
}
$(this).next().text(s);
});
$("#email").blur(function () {
let s = "";
let reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
if (this.value.trim() == "") {
s = "邮箱不能为空";
} else if (!reg.test(this.value)) {
s = "Email格式不正确，例如web@126.com";
}
$(this).next().text(s);
});
$("#mobile").blur(function () {
let s = "";
let reg = /^1\d{10}$/;
if (this.value.trim() == "") {
s = "手机号码不能为空";
} else if (!reg.test(this.value)) {
s = "手机号码只能是1开头的11位数字";
}
$(this).next().text(s);
});
$("#birth").blur(function () {
let s = "";
let reg = /^((19\d{2})|(200\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/
if (this.value.trim() == "") {
s = "生日不能为空";
} else if (!reg.test(this.value)) {
s = "生日不合法";
}
$(this).next().text(s);
});
$("[type='image']").click(function () {
$(":text,:password").trigger("blur");
return false;
});
</script>上机练习4
- 使用HTML5验证博客园注册页面
需求说明： 使用html5新增的属性validity相结合的方式验证此页面 使用html5新增的属性设置用户名和密码的默认提示信息 用户名只能是由英文和数字组成，长度为4-16个字符，并且以英文字母开头，当输入用户名符合法则提示 密码只能由英文字母和数字组成，长度为4-10字符 手机号只能是1开头的11位数字 生日的年份为1900-2016，生日格式为1980-5-12或1980-05-04组成
html完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>使用HTML5方式验证注册页面</title>
<link rel="stylesheet" href="css/register.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<section id="register">
<div>
<img src="images/logo.jpg" alt="logo" /><img
src="images/banner.jpg"
alt="banner"
/>
</div>
<h1 class="hr_1">新用户注册</h1>
<form action="" method="post" name="myform">
<dl>
<dt>用户名：</dt>
<dd>
<input
id="user"
type="text"
pattern="^[A-z][A-z0-9]{3,15}"
required
/>
</dd>
</dl>
<dl>
<dt>密码：</dt>
<dd>
<input
id="pwd"
type="password"
pattern="^[a-zA-Z0-9]{4,10}$"
required
/>
</dd>
</dl>
<dl>
<dt>确认密码：</dt>
<dd><input id="repwd" type="password" required /></dd>
</dl>
<dl>
<dt>电子邮箱：</dt>
<dd><input id="email" type="email" required /></dd>
</dl>
<dl>
<dt>手机号码：</dt>
<dd>
<input
id="mobile"
type="text"
pattern="^1\d{10}$"
required
/>
</dd>
</dl>
<dl>
<dt>生日：</dt>
<dd>
<input
id="birth"
type="text"
pattern="(19\d{2})|(200\d)|(201[0-6])-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])"
required
/>
</dd>
</dl>
<dl>
<dt> </dt>
<dd>
<input
name=""
type="image"
src="images/register.jpg"
class="btn"
/>
</dd>
</dl>
</form>
</section>
<script type="text/javascript">
$(".btn").click(function () {
var u = document.getElementById("user");
if (u.validity.valueMissing) {
u.setCustomValidity("用户名不能为空");
} else if (u.validity.patternMismatch) {
u.setCustomValidity(
"用户名由英文字母和数字组成的4-16位字符，以字母开头"
);
} else {
u.setCustomValidity("");
}
var p = document.getElementById("pwd");
if (p.validity.valueMissing) {
p.setCustomValidity("密码不能为空");
} else if (p.validity.patternMismatch) {
p.setCustomValidity("密码由英文字母和数字组成的4-10位字符");
} else {
p.setCustomValidity("");
}
var r = document.getElementById("repwd");
if (r.validity.valueMissing) {
r.setCustomValidity("密码不能为空");
} else if (r.value != $("#pwd").val()) {
r.setCustomValidity("两次密码必须一致");
} else {
r.setCustomValidity("");
}
var m = document.getElementById("mobile");
if (m.validity.valueMissing) {
m.setCustomValidity("手机号码不能为空");
} else if (m.validity.patternMismatch) {
m.setCustomValidity("手机号码只能是1开头的11位数字");
} else {
m.setCustomValidity("");
}
var b = document.getElementById("birth");
if (b.validity.valueMissing) {
b.setCustomValidity("生日不能为空");
} else if (b.validity.patternMismatch) {
b.setCustomValidity(
"生日的年份是1900~2016，生日格式为1980-5-12或1988-05-04的形式"
);
} else {
b.setCustomValidity("");
}
});
</script>
</body>
</html>
简答题3
- 验证百度注册页面
制作百度注册页面，使用jQuery验证用户名，密码等表单数据的有效性 光标离开文本框时，验证数据的合法性，如果不符合要求则提示 提交表单时使用submit方法验证数据的合法性，根据验证函数的返回值true和false来决定是否提交表单 用户名不能为空，长度为4-12字符，并且用户名只能由字母，数字和下划线组成 密码长度为6-12字符，再次输入密码必须一致 必须选择性别 电子邮箱地址不能为空，必须包含@和. 验证提示信息显示在对应表单元素的后面，例如：若用户名中包含非法字符，在文本框后进行提示
关键代码：
<script type="text/javascript">
$("#user").blur(function () {
let s = "";
let reg = /^\w{4,12}$/;
if (this.value.trim() == "") {
s = "用户名不能为空";
} else if (!reg.test(this.value)) {
s = "用户名只能由字母、数字和下划线组成";
}
$(this).next().text(s);
});
$("#pwd").blur(function () {
let s = "";
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (!(this.value.length >= 6 && this.value.length <= 12)) {
s = "密码长度为6-12位";
}
$(this).next().text(s);
});
$("#repwd").blur(function () {
let s = "";
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (this.value != $("#pwd").val()) {
s = "两次输入的密码不一致";
}
$(this).next().text(s);
});
$("#email").blur(function () {
let s = "";
let reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
if (this.value.trim() == "") {
s = "电子邮件不能为空";
} else if (!reg.test(this.value)) {
s = "Email格式不正确，例如web@126.com";
}
$(this).next().text(s);
});
var flag = false;
$(":radio").click(function () {
$(this).each(function (i,d) {
if ((this.checked)[i]) {
flag = true;
}
})
});
$("form").submit(function () {
var flag = true;
$(":text,:password").trigger("blur");
if (!($("#s1")[0].checked) && !($("#s2")[0].checked)) {
$("#sexId").text("必选");
flag = false;
}else{
$("#sexId").text("");
}
return $("form div").text() == "" && flag;
});
</script>简答题4
- 使用正则表达式验证注册页面
需求说明： 用户名为5-16字符，包含字母，下划线和数字，首位必须是字母 email格式如web@sohu.com 手机号码必须是11位数字，首位必须是1 密码由4-10个字符，包含字母和数字 再次输入密码必须一致 光标离开后验证数据的合法性，不合法直接在文本框后提示 提交表单时，验证数据的合法性，不合法在文本框后提示
关键代码：
<script type="text/javascript">
$("#user").blur(function () {
let s = "";
let reg = /^[a-zA-Z_]\w{5,16}$/;
if (this.value.trim() == "") {
s = "用户名不能为空";
} else if (!reg.test(this.value)) {
s = "用户名由英文字母、数字和下划线成的5-16位字符，以字母开头";
}
$(this).next().text(s);
});
$("#mobile").blur(function () {
let s = "";
let reg = /^1\d{10}$/;
if (this.value.trim() == "") {
s = "手机号码不能为空";
} else if (!reg.test(this.value)) {
s = "手机号码必须以1开头的11位数字";
}
$(this).next().text(s);
});
$("#email").blur(function () {
let s = "";
let reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
if (this.value.trim() == "") {
s = "电子邮件不能为空";
} else if (!reg.test(this.value)) {
s = "Email格式不正确，例如web@126.com";
}
$(this).next().text(s);
});
$("#pwd").blur(function () {
let s = "";
let reg = /^[0-9][a-zA-Z]{3,9}$/;
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (!reg.test(this.value)) {
s = "密码必须是4-10个字符，包含字母和数字";
}
$(this).next().text(s);
});
$("#repwd").blur(function () {
let s = "";
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (this.value != $("#pwd").val()) {
s = "两次输入的密码不一致";
}
$(this).next().text(s);
});
$("[type='image']").click(function () {
$(":text,:password").trigger("blur");
return false;
});
</script>简答题5
- 制作注册验证
需求说明： 光标进入用户名文本框时，提示用户输入“首位为字母的4-15个数字，字母，下划线”，离开文本框时验证用户名的合法性，不合法直接提示 光标进入密码框时提示“4-10个字母和下划线”离开密码框时，验证输入的密码合法性，不合法直接提示 提交表单验证是时，验证用户名和密码输入内容的合法性，不合法直接提示
关键代码：
<script type="text/javascript">
/*用户名*/
$("#user").focus(function () {
$(this).next().text("首位为字母的4-16个数字、字母、下划线");
});
$("#user").blur(function () {
var s = "";
var reg = /^[a-zA-Z][0-9a-zA-Z_]{3,15}$/;
if (!reg.test(this.value)) {
s = "用户名不正确";
}
$(this).next().text(s);
});
/*密码*/
$("#pwd").focus(function () {
$(this).next().text("4-10个字母和下划线");
});
$("#pwd").blur(function () {
var s = "";
var reg = /^[a-zA-Z_]{4,10}$/;
if (!reg.test(this.value)) {
s = "密码不正确";
}
$(this).next().text(s);
});
/*提交*/
$("[type='image']").click(function () {
$(":text,:password").trigger("blur");
return $("form div").text() == "";
});
</script>第十章-课程总复习
淘宝购物车页面
- html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>淘宝购物车页面</title>
<link href="css/myCart.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">
您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> >
我的购物车
</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<form action="" method="post" name="myform">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
id="shopping"
>
<tr>
<td class="title_1">
<input
id="allCheckBox"
type="checkbox"
value=""
/>全选
</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">
店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a
href="#"
>纤巧百媚</a
>
<img
src="images/taobao_relation.jpg"
alt="relation"
/>
</td>
</tr>
<tr id="product1">
<td class="cart_td_1">
<input
name="cartCheckBox"
type="checkbox"
value="product1"
/>
</td>
<td class="cart_td_2">
<img
src="images/taobao_cart_01.jpg"
alt="shopping"
/>
</td>
<td class="cart_td_3">
<a href="#"
>日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a
><br />
颜色：棕色 尺码：37<br />
保障：<img
src="images/taobao_icon_01.jpg"
alt="icon"
/>
</td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6">
<img
src="images/taobao_minus.jpg"
alt="minus"
class="hand"
/>
<input
id="num_1"
type="text"
value="1"
class="num_input"
readonly="readonly"
/>
<img
src="images/taobao_adding.jpg"
alt="add"
class="hand"
/>
</td>
<td class="cart_td_7"></td>
<td class="cart_td_8">
<a href="javascript:void(0);">删除</a>
</td>
</tr>
<tr>
<td colspan="8" class="shopInfo">
店铺：<a href="#">香港我的美丽日记</a> 卖家：<a
href="#"
>lokemick2009</a
>
<img
src="images/taobao_relation.jpg"
alt="relation"
/>
</td>
</tr>
<tr id="product2">
<td class="cart_td_1">
<input
name="cartCheckBox"
type="checkbox"
value="product2"
/>
</td>
<td class="cart_td_2">
<img
src="images/taobao_cart_02.jpg"
alt="shopping"
/>
</td>
<td class="cart_td_3">
<a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a
><br />
保障：<img
src="images/taobao_icon_01.jpg"
alt="icon"
/>
<img src="images/taobao_icon_02.jpg" alt="icon" />
</td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">265.00</td>
<td class="cart_td_6">
<img
src="images/taobao_minus.jpg"
alt="minus"
class="hand"
/>
<input
id="num_2"
type="text"
value="1"
class="num_input"
readonly="readonly"
/>
<img
src="images/taobao_adding.jpg"
alt="add"
class="hand"
/>
</td>
<td class="cart_td_7"></td>
<td class="cart_td_8">
<a href="javascript:void(0);">删除</a>
</td>
</tr>
<tr>
<td colspan="8" class="shopInfo">
店铺：<a href="#">实体经营</a> 卖家：<a href="#"
>林颜店铺</a
>
<img
src="images/taobao_relation.jpg"
alt="relation"
/>
</td>
</tr>
<tr id="product3">
<td class="cart_td_1">
<input
name="cartCheckBox"
type="checkbox"
value="product3"
/>
</td>
<td class="cart_td_2">
<img
src="images/taobao_cart_03.jpg"
alt="shopping"
/>
</td>
<td class="cart_td_3">
<a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a
><br />
保障：<img
src="images/taobao_icon_01.jpg"
alt="icon"
/>
<img src="images/taobao_icon_02.jpg" alt="icon" />
</td>
<td class="cart_td_4">3</td>
<td class="cart_td_5">85.00</td>
<td class="cart_td_6">
<img
src="images/taobao_minus.jpg"
alt="minus"
class="hand"
/>
<input
id="num_3"
type="text"
value="1"
class="num_input"
readonly="readonly"
/>
<img
src="images/taobao_adding.jpg"
alt="add"
class="hand"
/>
</td>
<td class="cart_td_7"></td>
<td class="cart_td_8">
<a href="javascript:void(0);">删除</a>
</td>
</tr>
<tr>
<td colspan="8" class="shopInfo">
店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#"
>taobao豆豆</a
>
<img
src="images/taobao_relation.jpg"
alt="relation"
/>
</td>
</tr>
<tr id="product4">
<td class="cart_td_1">
<input
name="cartCheckBox"
type="checkbox"
value="product4"
/>
</td>
<td class="cart_td_2">
<img
src="images/taobao_cart_04.jpg"
alt="shopping"
/>
</td>
<td class="cart_td_3">
<a href="#"
>相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a
><br />
保障：<img
src="images/taobao_icon_01.jpg"
alt="icon"
/>
</td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">12.00</td>
<td class="cart_td_6">
<img
src="images/taobao_minus.jpg"
alt="minus"
class="hand"
/>
<input
id="num_4"
type="text"
value="2"
class="num_input"
readonly="readonly"
/>
<img
src="images/taobao_adding.jpg"
alt="add"
class="hand"
/>
</td>
<td class="cart_td_7"></td>
<td class="cart_td_8">
<a href="javascript:void(0);">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
<a id="deleteAll" href="javascript:void(0);"
><img src="images/taobao_del.jpg" alt="delete"
/></a>
</td>
<td colspan="5" class="shopend">
商品总价（不含运费）：<label
id="total"
class="yellow"
></label>
元<br />
可获积分
<label class="yellow" id="integral"></label>
点<br />
<input
name=" "
type="image"
src="images/taobao_subtn.jpg"
/>
</td>
</tr>
</table>
</form>
</div>
<script src="js/test.js"></script>
</body>
</html>
- css
@charset "gb2312";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0px;
padding:0px;
}
a{
color:#1965b3;
text-decoration: none;
}
a:hover{
color:#CD590C;
text-decoration:underline;
}
img{
border:0px;
vertical-align:middle;
}
#header{
height:40px;
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#nav{
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#navlist{
width:800px;
margin:0px auto 0px auto;
height:23px;
}
#navlist li{
float:left;
height:23px;
line-height:26px;
}
.navlist_red_left{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -92px;
width:3px;
}
.navlist_red{
background-color:#ff6600;
text-align:center;
font-size:14px;
font-weight:bold;
color:#FFF;
width:130px;
}
.navlist_red_arrow{
background-color:#ff6600;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray{
background-color:#e4e4e4;
text-align:center;
font-size:14px;
font-weight:bold;
width:150px;
}
.navlist_gray_arrow{
background-color:#e4e4e4;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray_right{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -138px;
width:3px;
}
#content{
width:800px;
margin:10px auto 5px auto;
clear:both;
}
.title_1{
text-align:center;
width:50px;
}
.title_2{
text-align:center;
}
.title_3{
text-align:center;
width:80px;
}
.title_4{
text-align:center;
width:80px;
}
.title_5{
text-align:center;
width:100px;
}
.title_6{
text-align:center;
width:80px;
}
.title_7{
text-align:center;
width:60px;
}
.line{
background-color:#a7cbff;
height:3px;
}
.shopInfo{
padding-left:10px;
height:35px;
vertical-align:bottom;
}
.num_input{
border:solid 1px #666;
width:25px;
height:15px;
text-align:center;
}
.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
background-color:#e2f2ff;
border-bottom:solid 1px #d1ecff;
border-top:solid 1px #d1ecff;
text-align:center;
padding:5px;
}
.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
border-right:solid 1px #FFF;
}
.cart_td_3{
text-align:left;
}
.cart_td_4{
font-weight:bold;
}
.cart_td_7{
font-weight:bold;
color:#fe6400;
font-size:14px;
}
.hand{
cursor:pointer;
}
.shopend{
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.yellow{
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}- js
// 全选
$("#allCheckBox").click(function () {
var cl = this.checked;
$(":checkbox").each(function () {
this.checked = cl;
});
});
// 子级若手动全选，则父级复选框勾选
$("[name='cartCheckBox']").click(function () {
var n1 = $("#content [name='cartCheckBox']").length;
var n2 = $("#content [name='cartCheckBox']:checked").length;
if (n1 == n2) {
allCheckBox.checked = true;
} else {
allCheckBox.checked = false;
}
});
// 删除单个商品
$(".cart_td_8").click(function () {
$(this).parents("tr").prev().remove();
$(this).parents("tr").remove();
count();
});
// 删除所选商品
$("#deleteAll").click(function () {
$(":checked:not(#allCheckBox)").parents("tr").prev().remove();
$(":checked:not(#allCheckBox)").parents("tr").remove();
count();
});
function count() {
let summer = 0;
let int = 0;
$("tr .cart_td_1").each(function (i, dom) {
let pp = $(dom).parent();
// 商品数量
let num = $(pp).children(".cart_td_6").find("input").val();
// 商品小计
let price = num * $(pp).children(".cart_td_5").text();
// 显示商品小计
$(pp).children(".cart_td_7").html(price);
// 计算总价
summer += price;
// 计算积分
int += $(pp).children(".cart_td_4").text() * num;
});
// 显示商品总价
$("#total").text(summer);
// 显示积分
$("#integral").text(int);
}
count();
// 增加商品
$("[alt='add']").click(function () {
let i = $(this).prev().val() * 1;
$(this)
.prev()
.val(i + 1);
count();
});
// 减少商品
$("[alt='minus']").click(function () {
let i = $(this).siblings().val() * 1;
if (i > 1) {
$(this)
.siblings()
.val(i - 1);
} else {
alert("不能在减了哦！");
}
count();
});
新用户注册页面
- html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>网易新用户注册页面</title>
<link rel="stylesheet" href="css/register.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="header"><img src="images/register_logo.gif" alt="logo" /></div>
<div id="main">
<form id="registerForm" action="" method="post" name="myform">
<dl>
<dt>通行证用户名：</dt>
<dd>
<input
type="text"
id="userName"
class="inputs userWidth"
/>
@163.com
</dd>
<dd><div id="userNameId"></div></dd>
</dl>
<dl>
<dt>登录密码：</dt>
<dd><input type="password" id="pwd" class="inputs" /></dd>
<dd><div id="pwdId"></div></dd>
</dl>
<dl>
<dt>重复登录密码：</dt>
<dd><input type="password" id="repwd" class="inputs" /></dd>
<dd><div id="repwdId"></div></dd>
</dl>
<dl>
<dt>性别：</dt>
<dd>
<input
name="sex"
type="radio"
value=""
checked="checked"
/>男 <input name="sex" type="radio" value="" />女
</dd>
</dl>
<dl>
<dt>真实姓名：</dt>
<dd><input type="text" id="realName" class="inputs" /></dd>
</dl>
<dl>
<dt>昵称：</dt>
<dd><input type="text" id="nickName" class="inputs" /></dd>
<dd><div id="nickNameId"></div></dd>
</dl>
<dl>
<dt>关联手机号：</dt>
<dd><input type="text" id="tel" class="inputs" /></dd>
<dd><div id="telId"></div></dd>
</dl>
<dl>
<dt>保密邮箱：</dt>
<dd><input type="email" id="email" class="inputs" /></dd>
<dd><div id="emailId"></div></dd>
</dl>
<dl>
<dt></dt>
<dd>
<input name=" " type="image" src="images/button.gif" />
</dd>
</dl>
</form>
</div>
<script src="js/test.js"></script>
</body>
</html>- css
* {padding:0;margin:0;}
#header,#main{
width:600px;
margin:0 auto;
}
#main{
padding: 10px;
border: 1px #999999 solid;
border-radius: 8px;
overflow: hidden;
}
.inputs{
border:solid 1px #a4c8e0;
width:150px;
height:15px;
}
.userWidth{
width:110px;
}
dl dd div{
display: inline-block;
font-size:12px;
color:#000;
margin-left: 5px;
line-height: 18px;
}
dl{
clear:both;
line-height: 22px;
}
dt,dd{
float:left;
}
dt{
width:110px;
text-align:right;
font-size:14px;
height:30px;
line-height:25px;
}
dd{
font-size:12px;
color:#666666;
}
dl>dd:first-of-type{width: 170px;}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
border:solid 1px #ff3300;
background:#fff2e5 url(../images/li_err.gif)5px 2px no-repeat;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
border:solid 1px #01be00;
background:#e6fee4 url(../images/li_ok.gif) 5px 2px no-repeat;
padding:2px 5px 0px 25px;
line-height:20px;
}
- js
$("#userName").blur(function () {
let s = "";
let reg = /^[0-9A-z][0-9A-z.\-_]{2,16}[0-9a-zA-Z]$/;
if (this.value.trim() == "") {
s = "用户名不能为空";
addclass("#userNameId", "error_prompt");
} else if (!reg.test(this.value)) {
addclass("#userNameId", "error_prompt");
s =
"长度为4-16位，由字母，下划线，减号，点数字组成，数字、字母开头或结尾";
} else {
addclass("#userNameId", "ok_prompt");
s = "输入正确";
}
$("#userNameId").text(s);
});
$("#pwd").blur(function () {
let s = "";
let reg = /^[\w]{6,16}$/;
if (this.value.trim() == "") {
addclass("#pwdId", "error_prompt");
s = "密码不能为空";
} else if (!reg.test(this.value)) {
addclass("#pwdId", "error_prompt");
s = "密码长度6-16位";
} else {
addclass("#pwdId", "ok_prompt");
s = "输入正确";
}
$("#pwdId").text(s);
});
$("#repwd").blur(function () {
let s = "";
if (this.value.trim() == "") {
addclass("#repwdId", "error_prompt");
s = "密码不能为空";
} else if (this.value != $("#pwd").val()) {
addclass("#repwdId", "error_prompt");
s = "两次密码不一致";
} else {
addclass("#repwdId", "ok_prompt");
s = "输入正确";
}
$("#repwdId").text(s);
});
$("#nickName").blur(function () {
let s = "";
var nickName = this.value;
var len = nickName.replace(/[\u4e00-\u9fa5]/g, "xx").length;
if (this.value.trim() == "") {
addclass("#nickNameId", "error_prompt");
s = "昵称不能为空";
} else if (len < 4 || len > 20) {
addclass("#nickNameId", "error_prompt");
s = "昵称不合法";
} else {
addclass("#nickNameId", "ok_prompt");
s = "输入正确";
}
$("#nickNameId").text(s);
});
$("#tel").blur(function () {
let s = "";
let reg = /^1[358]\d{9}$/;
if (this.value.trim() == "") {
addclass("#telId", "error_prompt");
s = "关联手机不能为空";
} else if (!reg.test(this.value)) {
addclass("#telId", "error_prompt");
s = "以数字13，15，18开头的11位数字";
} else {
addclass("#telId", "ok_prompt");
s = "输入正确";
}
$("#telId").text(s);
});
$("#email")
.focus(function () {
$("#emailId").text("请输入您常用的电子邮件");
addclass("#emailId", "import_prompt");
})
.blur(function () {
let s = "";
let reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
if (this.value.trim() == "") {
addclass("#emailId", "error_prompt");
s = "邮件不能为空";
} else if (!reg.test(this.value)) {
addclass("#emailId", "error_prompt");
s = "Email格式不正确，例如web@126.com";
} else {
addclass("#emailId", "ok_prompt");
s = "输入正确";
}
$("#emailId").text(s);
});
function addclass(i, d) {
$(i).attr("class", d);
}
$("form").submit(function () {
$(":text,:password").trigger("blur");
return false;
});
第十一章-项目：蔚蓝网上书店
以下代码仅是JavaScript，不包括html和css，若要下载全部文件（html，css，js和图片素材）请点击最后的链接（待更新）
- 首页js
- 图书展示js
- 购物车js
- 新用户注册js
- 用户登录js
/*新手入门下拉列表效果*/
$("#menu").hover(function () {
// 向下展开，淡入动画
$("#dd_menu_top_down").slideDown("slow");
},function () {
// 向上展开，淡入动画
$("#dd_menu_top_down").slideUp("slow");
})
/*广告弹窗*/
// window.open("open.html","广告","height=327,width=400");
/*设置广告随滚动条滚动, 方式二，可在layout.css .right中设置固定定位*/
var rightTop = parseInt($("#right").css("top"));//获取当前广告距离顶端的距离
$(window).scroll(function () {
var top = $(window).scrollTop();
$("#right").css("top",top+rightTop+"px");
});
/*单击图片上关闭按钮，隐藏图片和关闭按钮*/
$("#dd_close").click(function () {
$("#right").hide();
})
/*图片轮播*/
var index = 1; // 图片的下标
// 开始时，第一个数字高亮
$("#scroll_number li").eq(0).addClass("scroll_number_over");
function chg() {
index++;
if (index > 4) {
index = 1;
}
// 切换图片
$("#scroll_img>li>img").attr("src","images/scroll-0"+index+".jpg");
// $("#scroll_img li").eq(index).fadeIn();
$("#scroll_number li").removeClass("scroll_number_over");
// $("#scroll_img li").eq(index).siblings().fadeOut();
// 根据图片的下标，数字高亮
$("#scroll_number li").eq(index-1).addClass("scroll_number_over");
}
var s = setInterval("chg()",1000);
// 鼠标移动某个数字上，呈现某张图片
$("#scroll_number li").hover(function(){
// 先清除定时器
clearInterval(s);
// 获取当前鼠标悬停的数字下标
index = $(this).index();
chg();
},function(){
// 鼠标离开时开始定时器
setInterval(chg(),1000);
})
/*右上角无缝滚动*/
var i = 0;
function ff() {
$("#express").css("margin-top",i--);
if (i == -20) {
// 滑动至最后，再次添加至最前面
$("#express").append($("#express li:first"));
$("#express").css("margin-top",i=0);
}
}
setInterval(ff,10);
/*电子书特效，移动至电子书图片上时，图片放大，移出后还原*/
$(".book img").hover(function () {
$(this).toggleClass("hi");
})
/*右下角tab切换效果*/
$(".tab ol li").mouseover(function () {
var i = $(this).index();// 获得当前悬停元素下标
// 设置鼠标悬停的元素样式且同时设置其同辈元素的样式
$(this).css({background:"#ffffff",borderBottom:"none"}).siblings("li").css({background:"#efefef",borderBottom: "1px solid #ccc"});
// 根据当前鼠标悬停元素的下标，设置对应ul显示，其他同辈ul隐藏
$(".tab>ul").eq(i).show().siblings("ul").hide();
});
$(".tab ul li").mouseover(function () {
// 当前元素的子节点dl显示
$(this).children("dl").show();
$(this).children("p").hide();
// 当前元素的同辈元素的子节点p显示
$(this).siblings().children("p").show();
$(this).siblings().children("dl").hide();
});/*左侧菜单栏，浏览同级分类*/
var arr = ["中国当代小说（13880）","中国近现代小...（640）","中国古典小说（1547）",
"四大名著（696）","港澳台小说（838）","外国小说（5119）",
"侦探/悬疑/推...（2519）","惊悚/恐怖（798）","魔幻（369）","科幻 （513）",
"武侠（574）","军事（726）","情感 （6700）",
"社会（4855）","都市（949）","乡土（99）","职场（176）",
"财经（292）","官场（438）","历史（1329）","影视小说（501）",
"作品集（2019）","世界名著（3273）"];
function add() {
//循环添加li
for (var i = 0; i < arr.length; i++) {
// blue样式在global.css文件中
$("#product_catList_class").append("<li> · <a class='blue'>"+arr[i]+"</a></li>");
}
}
add();
/*大图列表互相切换*/
$(document).ready(function () {
//获取列表排列的所有标签及内容
var list = $("#product_storyList_content").html();
//设置大图模式的内容
function bigImg() {
var left = $(".product_storyList_content_left");//获取图片
var html = "";//最后返回的大图模式内容
$(".product_storyList_content_right").find("ul").each(function (i,d) {
var lastLi = $(this).last("li");
var img = ["<div class='big_img_list'><ul><li class='bookImg'>"+left.eq(i).html()+"</li>"];
img.push("<li><dl><dd>"+lastLi.find(".footer_dull_red").html()+"</dd>");
img.push("<dd class='product_content_delete'>"+lastLi.find("dl").children("dd").eq(5).text()+"</dd>");
img.push("<dd>"+lastLi.find("dl").children("dd").children("span").eq(0).text()+"</dd></dl></li>");
img.push("<li>"+$(this).children("li").eq(5).html()+"</li>");
img.push("<li>"+$(this).children("li").eq(2).html()+"</li>");
img.push("<li>"+$(this).children("li").eq(1).html()+"</li>");
img.push("<li>"+$(this).children("li").eq(3).html()+"</li>");
img.push("<li>"+$(this).children("li").eq(4).html()+"</li></div>");
html+=img.join("");
});
return html;
}
var imgHtml = bigImg();
//切换为大图
$("[name=bigImg]").click(function () {
$(this).addClass("click").siblings("a").removeClass("click");
$("#product_storyList_content").html(imgHtml);
$("#product_storyList_content").children().find("ul").hover(function () {
$(this).addClass("over").parent().addClass("over");
},function () {
$(this).removeClass("over").parent().removeClass("over");
});
$(".product_catList_end").hide()
});
//切换为列表
$("[name=array]").click(function () {
$(this).addClass("click").siblings("a").removeClass("click");
$("#product_storyList_content").html(list);
$(".product_catList_end").show()
});
});/*购物车推荐效果*/
var flag = true;
$(".shopping_commend_right").click(function () {
$("#shopping_commend_sort").toggle();
if (flag) {
// 按钮背景图片发生改变
$(this).children().attr("src","images/shopping_arrow_down.gif");
flag = false;
} else {
$(this).children().attr("src","images/shopping_arrow_up.gif");
flag = true;
}
})
/*购物车部分效果*/
// 删除商品
$(".blue").click(function () {
if(confirm("您确定要删除商品吗？")){
$(this).parent().parent().remove();//删除当前行
money();
}
addAttr();
})
// 清空商品添加样式
function addAttr() {
var div = $("<div class='empty_product'><div>您还没挑选商品，<a> 去挑选看看>></a></div></div>");
if ($("#myTableProduct tr").length == 0) {
$("#myTableProduct").append(div);
}
}
// 清空购物车
$("#removeAllProduct").click(function () {
$("#myTableProduct tr").remove();
// 清空购物车后，提示文字信息，样式在layout.css中
addAttr();
$("#product_total").html(""); //总金额
$("#product_save").html(""); //节省金额
$("#product_integral").html(""); //可获得积分
});
// 金额
function money() {
var len = $(".shopping_product_list_4").length;
var wMoney = 0;//蔚蓝价
var sMoney = 0;//市场价
var num = 0;//数量
var total = 0;//总价
var saveMoney = 0;//节省金额
var integral = 0;//单个商品积分
var allintegral = 0;//可获得积分
for (var j = 0; j < len; j++) {
wMoney = parseFloat($(".shopping_product_list_4 label").eq(j).html());
num = parseFloat($(".shopping_product_list_5 input").eq(j).val());
sMoney = parseFloat($(".shopping_product_list_3 label").eq(j).html());
integral = parseFloat($(".shopping_product_list_2 label").eq(j).html());
total += wMoney*num;
saveMoney += sMoney*num;
allintegral += integral*num;
}
$("#product_total").html(total.toFixed(2));//总金额
$("#product_save").html((saveMoney-total).toFixed(2));//节省金额
$("#product_integral").html(allintegral)//可获得积分
}
money();
// 数量改变时
$(".shopping_product_list_5 input").change(function () {
money();
});/*省份城市联级效果*/
var cityList = new Array();
cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
cityList['江苏省'] = ['南京市','苏州市','无锡市'];
cityList['浙江省'] = ['杭州市','宁波市','温州市'];
cityList['四川省'] = ['四川省','成都市'];
cityList['海南省'] = ['海口市','三亚市'];
cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
cityList['山东省'] = ['济南市','青岛市','烟台市'];
cityList['江西省'] = ['江西省','南昌市'];
cityList['广西省'] = ['柳州市','南宁市'];
cityList['安徽省'] = ['安徽省','合肥市'];
cityList['河北省'] = ['邯郸市','石家庄市'];
cityList['河南省'] = ['郑州市','洛阳市'];
cityList['湖北省'] = ['荆州市','武汉市','宜昌市'];
cityList['湖南省'] = ['湖南省','长沙市'];
cityList['陕西省'] = ['陕西省','西安市'];
cityList['山西省'] = ['太原市','大同市'];
cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
cityList['其他'] = ['其他'];
for (var i in cityList) {
$("#province").append(new Option(i,i));
}
$("#province").change(function () {
$("#city").empty();
for (var i in cityList[this.value]) {
$("#city").append(
new Option(
cityList[this.value][i]
)
);
}
});
/*使用html5的方式进行表单验证*/
$("#registerBtn").click(function () {
//验证邮箱
var email = document.getElementById("email");
if(email.validity.patternMismatch){
email.setCustomValidity("邮箱格式如：web@bdqn.cn或web@bdqn.com.cn");
} else if (email.validity.valueMissing){
email.setCustomValidity("必填项");
} else {
email.setCustomValidity("");
}
//验证昵称
var name = document.getElementById("nickName");
if(name.validity.valueMissing){
name.setCustomValidity("昵称不能为空");
} else if (name.validity.patternMismatch){
name.setCustomValidity("格式有误");
} else {
name.setCustomValidity("");
}
//验证密码
var pwd = document.getElementById("pwd");
if(pwd.validity.valueMissing){
pwd.setCustomValidity("密码不能为空");
} else if (pwd.validity.patternMismatch){
pwd.setCustomValidity("密码必须是6^20位的英文和数字");
} else {
pwd.setCustomValidity("");
}
// 验证两次输入密码一致
var r = document.getElementById("repwd");
if (r.validity.valueMissing) {
r.setCustomValidity("密码不能为空");
} else if (r.value != $("#pwd").val()) {
r.setCustomValidity("两次密码必须一致");
} else {
r.setCustomValidity("");
}
});/*单击文本框，所有文本框背景发生改变*/
$("input").focus(function() {
// 添加背景样式为浅绿色
$("input").css("background-color","#f1ffed")
}.blur(function() {
// 失去焦点时，文本框背景颜色还原
$("input").css("background-color","white")
}))
/*用户名和密码均不能为空*/
$("#loginForm").submit(function () {
// 表单提交事件
var email = $("#email").val();// 获取邮件文本框值
if (!email) {// 判断文本框是否有值
alert("请输入Email地址或昵称！");
return false;
}
var pwd = $("#pwd").val();
if (!pwd) {
alert("请输入密码！");
return false;
}
// 结果都为true，则提交表单数据
return true;
});
/*登录按钮鼠标悬停时和离开时背景发生改变*/
$("#btn").hover(function () {
// 添加按钮背景样式
$(this).addClass("login_btn_over");
},function () {
// 删除按钮背景样式
$(this).removeClass("login_btn_over");
})
$("#quick_register").hover(function () {
// 判断元素中是否包含指定样式，内样式在layout文件中
if (!$(this).hasClass("login_register_over")) {
// 如果没有此样式，则添加
$(this).addClass("login_register_over");
}
},function () {
if ($(this).hasClass("login_register_over")) {
$(this).removeClass("login_register_over");
}
});人员信息表格的增删改
1。需求说明。 1）点击人员信息表右上角的添加按钮，弹出人员详细信息窗口； 2）修改弹出窗口的标题为“新建人员信息”； 3）点击确定验证输入框中的数据是否符合标准;输入标准主要有以下两点: 1，所有的输入框不能为空，为空时显示“***不能为空！”； 2，个别输入框要符合具体的要求： 年龄：“年龄为100以内的整数！” 手机号：“手机号为11位数字！” 邮箱：“请输入正确的邮箱！” 4） 输入的信息不符合标准时，点击确定不能进行下一步操作，只能当数据验证没问题才能进行下一步操作； 5） 数据验证通过后，点击确定按钮关闭当前的弹出窗口，并在表格中增加一行数据； 6）点击弹出窗口的关闭按钮 和取消按钮时，关闭当前的弹出框； 7）每次进入新建弹出窗口后，输入框无任何缓存信息； 2．需求说明。 1）点击表格中每一列的编辑按钮 或表格中每一行的姓名列，弹出人员详细信息窗口； 2）修改弹出窗口的标题为“人员详细信息”； 3）将当前行数据信息，回显至弹出界面中对应的输入框中； 4） 数据验证通过后，点击确定按钮关闭当前的弹出窗口，修改当前点击行的数据信息； 5）其他要求与说明1中的3、4、6步骤相同； 3． 需求说明。 1） 点击每行中的删除按钮 ，删除当前行数据信息；
以下为关键代码，不包含样式。
- HTML部分
- JS部分
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>表格</title>
<link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/personInfo.css" rel="stylesheet">
</head>
<body>
<h1 class="title">
模拟人员信息表示例
</h1>
<!--表格Dom代码-->
<div class="box">
<div class="tool-bar">
<h2 id="gridTitle">人员信息表</h2>
<!--添加按钮代码-->
<i class="fa fa-plus-circle" id="add" title="添加" aria-hidden="true"></i>
</div>
<!--表格显示代码-->
<table>
<!--列头示例代码-->
<thead>
<tr id="table_head">
<th name="name">姓名</th>
<th name="age">年龄</th>
<th name="position">职业</th>
<th name="mobile">手机号</th>
<th name="email">邮箱</th>
<th name="option">操作</th>
</tr>
</thead>
<!--表格内容代码-->
<tbody>
<tr id="row_1">
<td name="name">张睿</td>
<td name="age">30</td>
<td name="position">数据库分析师</td>
<td name="mobile">15200110301</td>
<td name="email">rui.zhang@163.com</td>
<td name="option">
<i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
<i class="fa fa-trash" title="删除" aria-hidden="true"></i>
</td>
</tr>
<tr id="row_2">
<td name="name">李鑫</td>
<td name="age">32</td>
<td name="position">架构师</td>
<td name="mobile">15200113211</td>
<td name="email">xin.zhang@163.com</td>
<td name="option">
<i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
<i class="fa fa-trash" title="删除" aria-hidden="true"></i>
</td>
</tr>
<tr id="row_3">
<td name="name">王源</td>
<td name="age">23</td>
<td name="position">软件测试工程师</td>
<td name="mobile">15200112311</td>
<td name="email">yuan.zhang@163.com</td>
<td name="option">
<i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
<i class="fa fa-trash" title="删除" aria-hidden="true"></i>
</td>
</tr>
<tr id="row_4">
<td name="name">赵志娅</td>
<td name="age">29</td>
<td name="position">web前端工程师</td>
<td name="mobile">15200112911</td>
<td name="email">zhiya.zhang@163.com</td>
<td name="option">
<i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
<i class="fa fa-trash" title="删除" aria-hidden="true"></i>
</td>
</tr>
<tr id="row_5">
<td name="name">李小强</td>
<td name="age">28</td>
<td name="position">UI设计师</td>
<td name="mobile">15200112811</td>
<td name="email">xiaoqiang.zhang@163.com</td>
<td name="option">
<i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
<i class="fa fa-trash" title="删除" aria-hidden="true"></i>
</td>
</tr>
<tr id="row_6">
<td name="name">冯旭</td>
<td name="age">26</td>
<td name="position">运维工程师</td>
<td name="mobile">15200112611</td>
<td name="email">xu.zhang@163.com</td>
<td name="option">
<i class="fa fa-pencil-square-o" title="编辑" aria-hidden="true"></i>
<i class="fa fa-trash" title="删除" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
<!--弹出窗口的Dom代码
注：
.fade 用作隐藏界面的样式类
.in 用作显示界面的样式类
.red 增加红色的边框显示
-->
<div id="personDetail" class="alert fade ">
<div class="alert-bg"></div>
<div class="box alert-message">
<div class="tool-bar alert-header">
<h2 id="alertTitle">人员详细信息</h2>
<!--关闭按钮的代码-->
<i class="fa fa-times-circle" id="circle" title="关闭" aria-hidden="true"></i>
</div>
<!--form 表单 存储和回显界面信息页面代码-->
<form>
<div>
<span>姓名：</span><input id="edit_name" required="required" name="name" placeholder="请输入姓名！">
</div>
<div>
<span>年龄：</span><input id="edit_age" name="age" pattern="^(?:0|[1-9][0-9]?|100)$" required="required" placeholder="请输入年龄！">
</div>
<div>
<span>职业：</span><input id="edit_position" name="position" required="required" placeholder="请输入职业！">
</div>
<div>
<span>手机号：</span><input id="edit_mobile" pattern="^\d{11}$" name="mobile" required="required" placeholder="请输入手机号！">
</div>
<div>
<span>邮箱：</span><input id="edit_email" pattern="^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$" name="email" required="required" placeholder="请输入邮箱！">
</div>
<div class="button-group">
<!--取消和关闭按钮-->
<button type="reset" id="cancle">取消</button>
<button type="submit" id="submit">确定</button>
</div>
</form>
</div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="index.js"></script>
</body>
</html>/*
* CSS样式说明：
* .fade 用作隐藏界面的样式类
* .in 用作显示界面的样式类
* 请在下面空白处编写对应的JS代码；
* */
var f = ""; // 标识变量，用于判断用户点击的是新增还是修改
// 新增弹窗
$("#add").click(function () {
$("#personDetail").show();
$("#alertTitle").text("新建人员信息");
f = 1;
});
// 关闭弹窗
$("#circle,#cancle").click(function () {
$(this).parents("#personDetail").hide();
// 清空内容
$("#personDetail form div input").val("");
});
$("#submit").click(function () {
// 判断全部数据合法
var a = true; // 方式一
var b = ""; // 方式二
//验证邮箱
var email = document.getElementById("edit_email");
if (email.validity.patternMismatch) {
email.setCustomValidity("邮箱格式不正确");
a = a && false;
} else if (email.validity.valueMissing) {
email.setCustomValidity("邮箱必填项");
a = a && false;
} else {
email.setCustomValidity("");
b += "1";
}
// 验证手机号
var mobile = document.getElementById("edit_mobile");
if (mobile.validity.patternMismatch) {
mobile.setCustomValidity("手机号为11位数字");
a = a && false;
} else if (mobile.validity.valueMissing) {
mobile.setCustomValidity("手机号必填项");
a = a && false;
} else {
mobile.setCustomValidity("");
b += "1";
}
// 验证年龄
var age = document.getElementById("edit_age");
if (age.validity.patternMismatch) {
age.setCustomValidity("年龄必须是100以内的整数");
a = a && false;
} else if (age.validity.valueMissing) {
age.setCustomValidity("年龄必填项");
a = a && false;
} else {
age.setCustomValidity("");
b += "1";
}
// 验证职业
var position = document.getElementById("edit_position");
if (position.validity.valueMissing) {
position.setCustomValidity("职业必填项");
a = a && false;
} else {
position.setCustomValidity("");
b += "1";
}
// 验证姓名
var name = document.getElementById("edit_name");
if (name.validity.valueMissing) {
name.setCustomValidity("姓名必填项");
a = a && false;
} else {
name.setCustomValidity("");
b += "1";
}
// 在原有数据上再次克隆，保留事件
var tr = ccc.clone(true);
// 改变tr标签中的数据，以便进行替换
$(tr).children("td").eq(0).text($("#edit_name").val());
$(tr).children("td").eq(1).text($("#edit_age").val());
$(tr).children("td").eq(2).text($("#edit_position").val());
$(tr).children("td").eq(3).text($("#edit_mobile").val());
$(tr).children("td").eq(4).text($("#edit_email").val());
// 获得最后一行id值
var id = $("tbody tr:last").index();
// 验证都通过
if (b.length == 5) {
// 清空文本信息
$("#personDetail form div input").val("");
if (f == 1) {// 添加数据
$(tr).attr("id","row_"+(id+2));
// 添加数据，追加到表格最后
$("tbody").append(tr);
$("#personDetail").hide();
} else if (f == 2) {// 修改数据
$(tr).attr("id","row_"+(index+1));
// 新内容替换到原行上
$("tbody tr").eq(index).replaceWith(tr);
$("#personDetail").hide();
}
return false;
}
});
// 删除当前行，同时改变id
$(".fa-trash").click(function () {
// 获得当前下标
var j = $(this).parents("tr").index();
// 遍历后面的tr，改变id值
$(this).parents("tr").nextAll().each(function (i,dom) {
$(dom).attr("id","row_"+(i+j+1))
})
// 删除当前行
$(this).parents("tr").remove();
})
var index = 0; // 当前行下表
$("tbody [name='name'],[title='编辑']").click(function() {
$("#personDetail").show();
// 弹窗内赋默认值
$("#edit_name").val($(this).parents("tr").children("td").eq(0).text());
$("#edit_age").val($(this).parents("tr").children("td").eq(1).text());
$("#edit_position").val($(this).parents("tr").children("td").eq(2).text());
$("#edit_mobile").val($(this).parents("tr").children("td").eq(3).text());
$("#edit_email").val($(this).parents("tr").children("td").eq(4).text());
index = $(this).parents("tr").index();
f = 2;
})
// 克隆第一行数据
var ccc = $("#row_1").clone(true);星级评分
- 题目：使用Jquery完成投票功能
- 打开调查页面，界面如下：
star-1
- 如果需要添加其他课程，在文本框中输入课程名称，点击“添加”按钮完成添加， 添加时需要非空判断， 提示“课程名称不允许为空！”。
star-2
- 星级显示功能，当选择对应的分数时以星级形式显示调查结果， 结果一栏以图片显示
star-3
- 删除功能， 点击“删除”按钮后提示“是否删除？”，选择“是”就删除选中行数据
star-4
- 点击“提交”按钮，将课程评分结果显示出来
star-5
代码如下：
- HTML部分
- JS部分
- CSS部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>星际评分</title>
<link rel="stylesheet" href="index.css">
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>青鸟课程评分</h2>
<table>
<thead>
<tr>
<th>课程</th>
<th>评分</th>
<th>结果</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>
<select class="sel">
<option value="1">☆</option>
<option value="2">☆☆</option>
<option value="3">☆☆☆</option>
<option value="4">☆☆☆☆</option>
<option value="5">☆☆☆☆☆</option>
</select>
</td>
<td><div><img src="images/filled.gif"></div></td>
<td><input type="button" class="del" value="删除"></td>
</tr>
<tr>
<td>Sql</td>
<td>
<select class="sel">
<option value="1">☆</option>
<option value="2">☆☆</option>
<option value="3">☆☆☆</option>
<option value="4">☆☆☆☆</option>
<option value="5">☆☆☆☆☆</option>
</select>
</td>
<td><div><img src="images/filled.gif"></div></td>
<td><input type="button" class="del" value="删除"></td>
</tr>
<tr id="submit">
<td colspan="4"><b>其他课程：</b><input type="text" id="class"> <input type="button" id="add" value="添加"> <input type="button" id="adds" value="提交"></td>
</tr>
</tbody>
</table>
<div>
<h3>评分结果如下：</h3>
<ul>
<li>一星：<span id="one"></span></li>
<li>二星：<span id="two"></span></li>
<li>三星：<span id="three"></span></li>
<li>四星：<span id="four"></span></li>
<li>五星：<span id="five"></span></li>
</ul>
</div>
<script src="js/index.js"></script>
</body>
</html>
$(".del").click(function () {
if (confirm("是否删除？")) {
$(this).parents("tr").remove();
}
});
$("#add").click(function () {
var name = $("#class").val();
var tr = $(trs).clone(true);
if (name == "") {
alert("课程名称不允许为空！");
} else {
$(tr).children("td").eq(0).text(name);
$("#submit").before(tr);
$("#class").val("");
}
});
$(".sel").change(function () {
var index = $(this).val();
var img = "";
for (let i = 0; i < index; i++) {
img += "<img src='images/filled.gif'>";
}
var div = "<div>" + img + "</div>";
$(this).parents("tr").find("div").replaceWith(div);
});
$("#adds").click(function () {
$("#div").toggle();
var one = "";
var two = "";
var three = "";
var four = "";
var five = "";
$("tbody tr:not(#submit)").each(function (i, dom) {
var star = $(dom).children("td").eq(1).children().val();
if (star == 1) {
one += $(dom).children("td").eq(0).text() + " ";
$("#one").text(one);
} else if (star == 2) {
two += $(dom).children("td").eq(0).text() + " ";
$("#two").text(two);
} else if (star == 3) {
three += $(dom).children("td").eq(0).text() + " ";
$("#three").text(three);
} else if (star == 4) {
four += $(dom).children("td").eq(0).text() + " ";
$("#four").text(four);
} else if (star == 5) {
five += $(dom).children("td").eq(0).text() + " ";
$("#five").text(five);
}
});
});
var trs = $("tbody").children("tr").eq(0).clone(true);* {
margin: 0 auto;
padding: 0 auto;
}
h2 {
text-align: center;
margin-bottom: 10px;
}
table{
border-bottom: 3px dashed #ddd;
border-right: 3px dashed #ddd;
}
td, th {
padding: 8px;
width: 100px;
border-left: 3px dashed #ddd;
border-top: 3px dashed #ddd;
text-align: center;
}
td:nth-child(3), th:nth-child(3) {
width: 160px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#div {
display: none;
}小测验
- 布局如下：
image-20220402122501466
- “计算器”要求如下：点击“计算”按钮，显示结果。运算符有：**+ - * / %，注意，除数不能为0**
image-20220402122704288
image-20220402122735190
- 点击“图片变换”，显示第2个div（绿色边框），共4张图，每隔1秒切换一张。鼠标悬浮时动画停止，鼠标离开时动画继续。
image-20220402123312260
- 点击“注册”，显示第3个div（蓝色边框）
image-20220402122946264
文本框失去焦点时，要求如下：
Ø 用户名不能为空。用户名的长度只能是3~5位;
Ø 密码不能为空。密码由字母或数字组成，长度不能小于6位;
Ø 性别在页面加载时，默认选中”男”;
Ø 手机号不能为空。手机号码只能是135、138、139的格式，总长度11位;
Ø 年级有“一年级”、“二年级”、“三年级”，默认选中“一年级”。
image-20220402123103818
- 如果输入正确，点击“注册”，在表单下面显示注册信息（红色加粗楷体）：
image-20220402123129211
- HTML部分
- CSS部分
- JS部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>测试</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="div">
<ul id="title">
<li class="high">计算器</li>
<li>图片切换</li>
<li>注册</li>
</ul>
<div id="bo1">
<div>
第一个数：<input type="text" id="one"><br>
运算符: <select id="three">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
<option>%</option>
</select><br>
第二个数：<input type="text" id="two"><br>
<button id="four">计算</button><br>
<span>结果：<span id="result"></span></span>
</div>
</div>
<div id="bo2" style="display:none">
<img src="images/春.jpg">
<h6></h6>
</div>
<div id="bo3" style="display:none">
<form action="" method="post" id="myform">
用户名：<input
id="txtName"
type="text"
/><span id="spName"></span><br>
密码：<input
id="txtPwd"
type="password"
/><span id="spPwd"></span><br>
性别：<input name="gen" type="radio" checked value="男" />男
<input name="gen" type="radio" value="女" />女<br>
手机号：<input
id="txtMobile"
type="text"
/><span id="spMobile"></span><br>
年级：<select id="texGrade">
<option>一年级</option>
<option>二年级</option>
<option>三年级</option>
</select>
<span id="spGrade"></span><br>
<input
id="btnSubmit"
type="button"
value="注册"
/>
</form>
<div id="yes"></div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li {
float: left;
padding: 5px 10px;
margin-right: 5px;
border: 1px solid red;
}
ul {
height: 40px;
}
.div {
width: 600px;
height: 700px;
margin: 0 auto;
}
.high {
background-color: orange
}
.div>div {
height: 500px;
}
#bo1 {
border: 1px solid red;
}
#bo2 {
border: 1px solid greenyellow;
}
#bo2 img {
display: block;
margin: 0 auto;
}
#bo2 h6 {
text-align: center;
}
#bo3 {
border: 1px solid blue;
}
#bo1 div {
margin: 0 auto;
width: 300px;
}
#bo1 #four {
margin-left: 80px;
}
#myform span {
color: red;
}
#yes {
font-weight: bold;
font-family: '楷体';
color: red;
}
form {
margin-bottom: 20px;
}// tab切换
$("#title li").click(function () {
$(this).addClass("high").siblings("li").removeClass("high");
var inx = $(this).index();
$(".div>div").eq(inx).show().siblings("div").hide();
})
// 计算器
var input1 = document.getElementById('one');
var input2 = document.getElementById('two');
var input3 = document.getElementById('three');
var input4 = document.getElementById('four');
input4.onclick = function() {
if ((input2.value*1) == 0) {
document.getElementById("result").innerHTML = "除数不能为零！";
} else {
if (input3.value == '+') {
sum = (input1.value)*1 + (input2.value)*1;
document.getElementById("result").innerHTML = (input1.value)*1 + input3.value + (input2.value)*1 + "=" + sum;
} else if (input3.value == '-') {
jian = (input1.value)*1 - (input2.value)*1;
document.getElementById("result").innerHTML = (input1.value)*1 + input3.value + (input2.value)*1 + "=" + jian;
} else if (input3.value == '*') {
cheng = (input1.value)*1 * (input2.value)*1;
document.getElementById("result").innerHTML = (input1.value)*1 + input3.value + (input2.value)*1 + "=" + cheng;
} else if (input3.value == '/') {
chu = (input1.value)*1 / (input2.value)*1;
document.getElementById("result").innerHTML = (input1.value)*1 + input3.value + (input2.value)*1 + "=" + chu;
} else if (input3.value == '%') {
baif = (input1.value)*1 % (input2.value)*1;
document.getElementById("result").innerHTML = (input1.value)*1 + input3.value + (input2.value)*1 + "=" + baif;
}
}
}
// 图片切换
var index = -1;
var arr = ["春","夏","秋","冬"];
function chg() {
index++;
if (index > 3) {
index = 0;
}
$("#bo2>h6").text(arr[index] + "天");
$("#bo2>img").attr("src","images/"+arr[index]+".jpg");
}
chg();
var s = setInterval("chg()",1000);
// 图片暂停
$("#bo2>img").hover(function(){
clearInterval(s);
},function(){
setInterval(chg,1000);
})
// 验证用户名
$("#txtName").blur(function(){
let s = "";
if (this.value.trim() == "") {
s = "用户名不能为空";
} else if (!(this.value.length <= 5 && this.value.length >= 3)) {
s = "用户名的长度只能是3~5位";
}
$("#spName").text(s);
})
// 验证密码
$("#txtPwd").blur(function(){
let s = "";
let reg = /^[0-9A-Za-z]{6,}$/;
if (this.value.trim() == "") {
s = "密码不能为空";
} else if (!reg.test(this.value)) {
s = "密码由字母或数字组成，长度不能小于6位";
}
$("#spPwd").text(s);
})
// 验证手机号
$("#txtMobile").blur(function(){
let s = "";
let reg = /^1(35|38|39)\d{8}$/;
if (this.value.trim() == "") {
s = "手机号不能为空";
} else if (!reg.test(this.value)) {
s = "手机号码只能是135、138、139的格式，总长度11位";
}
$("#spMobile").text(s);
})
// 验证表单数据合法性
$("#btnSubmit").click(function(){
$(":password,:text").trigger("blur");
if ($("#myform span").text() == "") {
$("#yes").html("注册成功！个人信息如下<br>姓名："+$("#txtName").val()+"<br>密码："+$("#txtPwd").val()+"<br>性别："+$('[name=gen]:checked').val()+"<br>手机号："+$("#txtMobile").val()+"<br>年级："+$("#texGrade").val()+"<br>" )
};
})我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=34p2zwgxqewwg
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-03-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录