jQuery基础_ 字节宝

使用jQuery快速高效制作网页交互特效

第一章-JavaScript基础

上机练习1

练习——统计包含“a”或“A”的字符串的个数

需求说明：使用数组存储一组字符串，并统计包含“a”或“A”的字符串的个数

关键代码：

代码语言：javascript复制

<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判断获取的运算符号

关键代码：

代码语言：javascript复制

<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()方法输入各科的考试成绩并累加，要求成绩必须非负数，否则给出相应的提示并退出程序如果各项输入正确，则弹出科目总成绩

关键代码：

代码语言：javascript复制

<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()输出水平线使用循环控制每个水平线的长度

关键代码：

代码语言：javascript复制

<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”
- 输入邮箱地址正确，输出用户名信息
- 正确的邮箱地址必须包含“@”和“.”，输入不正确提示相应的错误信息
- 邮箱地址为空提示相应的错误信息

关键代码：

代码语言：javascript复制

<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()方法在页面中弹出对话框，根据用户输入的星期一-星期日的不同，弹出不同的信息提示对话框，要求使用函数实现，要求如下：
- 输入“星期一”时，弹出“新的一周开始了。”
- 输入“星期二”，“星期三”，“星期四”时，弹出“努力工作”
- 输入“星期五”时，弹出“明天就是周末了”
- 输入其他内容，弹出“放松休息”

关键代码：

代码语言：javascript复制

<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

代码语言：javascript复制

<!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

代码语言：javascript复制

<!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 星期二

代码语言：javascript复制

<!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>

全选、全不选、反选

代码语言：javascript复制

<!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>

图片切换

代码语言：javascript复制


<!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>

随机点名器

代码语言：javascript复制

<!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-访问当当购物车页面节点

需求说明：单击“结算”按钮，使用节点的层次关系访问节点，在页面下方显示各个商品的价格和所有商品的总价

关键代码：

代码语言：javascript复制

/**
 * 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()删除当前商品

关键代码：

代码语言：javascript复制

/**
 * 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：制作课工场论坛发贴

关键代码：

代码语言：javascript复制

<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：制作带关闭按钮的滚动广告

需求说明：在页面中有一个图片和一个关闭按钮当滚动条向下或向右移动时，图片和关闭按钮随滚动条移动，相对于浏览器的位置固定单击“关闭”按钮时，页面中的图片和关闭按钮不显示

代码语言：javascript复制

<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

假设在页面中，有一个图片和五个数字链接，单击不同的数字链接显示不同的图片

关键代码：

代码语言：javascript复制


<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

如页面所示，单击“再上传一个图片”，按钮增加一行，可以增加许多相同的图片上传的行

关键代码：

代码语言：javascript复制

<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切换效果

关键代码：

代码语言：javascript复制

<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程序”

代码语言：javascript复制

<script type="text/javascript">
    $(function() {
    alert('我编写的第一个jQuery程序！')
})
</script>

上机练习2

上机练习2——制作当当网首页导航

需求说明：鼠标移至到“我的当当”上时显示二级菜单，并显示1px的颜色为#cc7304实线边框，当鼠标离开边框范围之后，二级菜单消失，边框消失

关键代码：

代码语言：javascript复制

<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变换网页效果

需求说明：制作《你是人间四月天》内容简介页面单击“你是人间四月天”标题后，标题字体变小，颜色变为蓝色，正文的字体颜色变为绿色，单击“查看全部”链接，显示内容简介

关键代码：

代码语言：javascript复制

<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——制作广告图片轮播切换效果

需求说明：实现图片轮播，具体效果参见代码

关键代码：

代码语言：javascript复制

<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()方法添加图片边框，单击图片显示边框

关键代码：

代码语言：javascript复制

<script type="text/javascript">
    $("#img").click(function(){
        $(this).css("border","3px solid #f00");
    })
</script>

简答题5

制作林薇因简介页面，单击“林薇因简介”链接显示简介内容，单击“主要作品”链接显示对应作品

关键代码：

代码语言：javascript复制

<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

关键代码：

代码语言：javascript复制

<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

关键代码：

代码语言：javascript复制

<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 单击图片“收藏”弹出对话框，显示信息为“您已收藏成功！”

关键代码：

代码语言：javascript复制

<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

代码语言：javascript复制

<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的箭头向下当鼠标移动至右侧列表上时，显示对应隐藏的内容，加入清单，鼠标指针离开后隐藏

代码语言：javascript复制

<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

关键代码

代码语言：javascript复制

<script type="text/javascript">
        $("dl:odd").css("background-color","#ececec");
</script>

简答题6

单击图片时，显示提示信息，单击提示信息后，隐藏提示信息

关键代码：

代码语言：javascript复制

<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方法完成页面特效

关键代码

代码语言：javascript复制

<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()实现鼠标指针移动至菜单上时，背景颜色变为橙色，移出后，背景颜色变为之前颜色

关键代码：

代码语言：javascript复制

<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速度隐藏

关键代码：

代码语言：javascript复制

<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

制作页面特效，初始状态下仅显示“购物特权”主菜单，单击“购物特权”二级菜单在显示和隐藏之间切换，当鼠标移动至二级菜单时，子菜单添加背景色

关键代码：

代码语言：javascript复制

<script type="text/javascript">

	$(".firstNav").click(function(){
		$("#nav .navsBox ul").toggle();
	})


	$("#nav .navsBox ul li").hover(function(){
		$(this).toggleClass("onbg");
	})
</script>

简答题6

当点击底部箭头时，隐藏菜单项的后四项，并且底部箭头向上，再次单击底部箭头，显示隐藏的菜单项，并且底部箭头向下

关键代码：

代码语言：javascript复制

<script type="text/javascript">
	$(".lastone").click(function(){
		$(".nav li:gt(6):not(.lastone)").toggle();

		$(".lastone").toggleClass("up");

	})
</script>

第八章-使用jQuery操作DOM对象

上机练习1

制作今日团购模块

需求说明：当鼠标指针移过商品信息时，使用addClass()方法添加样式，边框及背景颜色值为#d51938，说明文字变为白色当鼠标移出时，使用removeClass()方法恢复初始状态

关键代码：

代码语言：javascript复制

<script type="text/javascript">
    $("#pruduce .box").hover(function() {
    $(this).addClass("hoverstyle");
    },function(){
        $(this).removeClass("hoverstyle");
    })
</script>

上机练习2

制作QQ简易聊天框

需求说明：在输入框中输入聊天内容，单击“发送”按钮，在页面上显示聊天内容，左侧显示聊天者头像，右侧显示聊天昵称和聊天信息，使用assClass()方法为聊天内容添加背景色，边框为圆角，聊天内容发送完毕后，内容显示在聊天区域，输入框内容清空如果聊天内容过多，则聊天内容显示区域在垂直方向显示滚动条如果输入框中没有输入内容，则单击发送按钮，不做任何操作

关键代码：

代码语言：javascript复制

<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

制作课工场论坛发贴

需求说明；单击“我要发帖”按钮，弹出发帖界面在标题框中输入标题，选择所属板块，输入帖子内容单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示头像，标题，板块和发帖时间

关键代码:

代码语言：javascript复制

<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

制作凡客诚品帮助中心页面

需求说明：左导航，当前二级菜单项展开时，其余导航项关闭帮助中心，文本框获得焦点时，默认文字消失，失去焦点时，再次显示文字购物流程，鼠标指针移过时，当前项高亮显示，鼠标指针移动至父元素或祖先元素时，依旧高亮，只有当鼠标指针移动至其同辈元素时，同辈元素高亮，而去掉该元素的高亮样式右下角问题解决，当选中单选按钮，“未解决时”显示隐藏内容

关键代码：

代码语言：javascript复制

<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，鼠标指针移过时显示下划线，单击“删除”按钮时，其对应的图片和名称信息被删除，单击“新增按钮”时，增加游戏

关键代码：

代码语言：javascript复制

<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

鼠标移过商品时，图片变为半透明显示，鼠标移过时，图片恢复正常显示

关键代码：

代码语言：javascript复制

<script type="text/javascript">
    $("img").hover(function(){
    	$(this).addClass('transparent_class');
    },function(){
        $(this).removeClass('transparent_class');
    })
</script>

表格操作-实现商品信息的增删改操作

以下为完整代码：

代码语言：javascript复制

<!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

验证注册页面中的电子邮件

需求说明：电子邮箱不能为空电子邮箱必须包含特殊符号@和. 当电子邮箱框中的内容正确时，页面跳转到注册成功页面

关键代码：

代码语言：javascript复制

<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

验证贵美网站的注册页面

需求说明：使用文本输入提示的方式验证贵美网站，要求如下名字和姓氏均不能为空，

关键代码：

代码语言：javascript复制

<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组成

关键代码：

代码语言：javascript复制

<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 = /^1d{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 = /^((19d{2})|(200d)|(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完整代码：

代码语言：javascript复制

<!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="^1d{10}$"
                            required
                        />
                    </dd>
                </dl>
                <dl>
                    <dt>生日：</dt>
                    <dd>
                        <input
                            id="birth"
                            type="text"
                            pattern="(19d{2})|(200d)|(201[0-6])-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]d|3[0-1])"
                            required
                        />
                    </dd>
                </dl>
                <dl>
                    <dt>&nbsp;</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字符，再次输入密码必须一致必须选择性别电子邮箱地址不能为空，必须包含@和. 验证提示信息显示在对应表单元素的后面，例如：若用户名中包含非法字符，在文本框后进行提示

关键代码：

代码语言：javascript复制

<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个字符，包含字母和数字再次输入密码必须一致光标离开后验证数据的合法性，不合法直接在文本框后提示提交表单时，验证数据的合法性，不合法在文本框后提示

关键代码：

代码语言：javascript复制

<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 = /^1d{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个字母和下划线”离开密码框时，验证输入的密码合法性，不合法直接提示提交表单验证是时，验证用户名和密码输入内容的合法性，不合法直接提示

关键代码：

代码语言：javascript复制

<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

代码语言：javascript复制

<!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> &gt; <a href="#">我的淘宝</a> &gt;
            我的购物车
        </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>

代码语言：javascript复制

@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;
	}

代码语言：javascript复制

// 全选
$("#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

代码语言：javascript复制

<!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>

代码语言：javascript复制

* {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;
}

代码语言：javascript复制

$("#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

代码语言：javascript复制

/*新手入门下拉列表效果*/
$("#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();
});

代码语言：javascript复制

/*左侧菜单栏，浏览同级分类*/
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()
    });
});

代码语言：javascript复制

/*购物车推荐效果*/
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();
});

代码语言：javascript复制

/*省份城市联级效果*/
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("");
    }
});

代码语言：javascript复制

/*单击文本框，所有文本框背景发生改变*/
$("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部分

代码语言：javascript复制

<!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>

代码语言：javascript复制

/*
 * 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完成投票功能

打开调查页面，界面如下：

如果需要添加其他课程，在文本框中输入课程名称，点击“添加”按钮完成添加，添加时需要非空判断，提示“课程名称不允许为空！”。

星级显示功能，当选择对应的分数时以星级形式显示调查结果，结果一栏以图片显示

删除功能，点击“删除”按钮后提示“是否删除？”，选择“是”就删除选中行数据

点击“提交”按钮，将课程评分结果显示出来

代码如下：

HTML部分
JS部分
CSS部分

代码语言：javascript复制

<!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>

代码语言：javascript复制

$(".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);

代码语言：javascript复制

* {
    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;
}

小测验

布局如下：

“计算器”要求如下：点击“计算”按钮，显示结果。运算符有：** - * / %，注意，除数不能为0**

点击“图片变换”，显示第2个div（绿色边框），共4张图，每隔1秒切换一张。鼠标悬浮时动画停止，鼠标离开时动画继续。

点击“注册”，显示第3个div（蓝色边框）

文本框失去焦点时，要求如下：

Ø 用户名不能为空。用户名的长度只能是3~5位;

Ø 密码不能为空。密码由字母或数字组成，长度不能小于6位;

Ø 性别在页面加载时，默认选中”男”;

Ø 手机号不能为空。手机号码只能是135、138、139的格式，总长度11位;

Ø 年级有“一年级”、“二年级”、“三年级”，默认选中“一年级”。

如果输入正确，点击“注册”，在表单下面显示注册信息（红色加粗楷体）：

HTML部分
CSS部分
JS部分

代码语言：javascript复制

<!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>
                    运算符:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>
                    &nbsp;&nbsp;&nbsp;&nbsp;<input
                        id="btnSubmit"
                        type="button"
                        value="注册"
                    />
                </form>
                <div id="yes"></div>
            </div>
        </div>

        <script src="js/index.js"></script>
    </body>
</html>

代码语言：javascript复制

* {
    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;
}

代码语言：javascript复制

// 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

jquery html html5

0 人点赞