前端入门【JavaScript-II】

最新推荐文章于 2023-12-28 14:40:45 发布

Li_CSDN_Li

最新推荐文章于 2023-12-28 14:40:45 发布

阅读量233

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/Li_CSDN_Li/article/details/110231934

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习目标

-[ ] 能够使用JS获取页面中的指定元素【重点】
-[ ] 能够使用JS创建元素【了解】
-[ ] 能够使用JS对元素的属性进行操作【熟悉】
-[ ] 能够使用JS对元素的标签体进行操作【熟悉】
-[ ] 能够使用JS对指定元素的样式进行操作（获取或修改）【熟悉】
-[ ] 能够使用JS中的Array，Date对象【熟悉】

回顾Html和JavaScript基础

【案例】注册页面

在这里插入图片描述

【代码示例】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body >
		<div style="margin-left: 30%;margin-top: 30px;">
			<form action="#" method="get"  id="registForm" >
				会员注册USER REGISTER<br />
				用户名:<input type="text" name="username" id="username"><br />
				密码:<input type="password" name="password" id="password"><br />
				确认密码:<input type="password" name="repassword" id="repassword"><br />
				Email:<input type="text" name="email" id="email"><br />
				姓名:<input type="text" name="name"><br />
				性别:
					<input type="radio" name="sex" value="男"> 男
					<input type="radio" name="sex" value="女" />女<br />
				出生日期:<input type="text" name="birthday"><br />
				验证码:<input type="text" name="checkcode"><br />
					<input type="submit" value="注册" />
			</form>
		</div>
	</body>
</html>

第一章、DOM【重点】

一、DOM概述

DOM（Document Object Model）即文档对象模型；
- 文档：html；
- 对象：document对象；
document对象：当网页被加载时，浏览器会创建当前页面的文档对象模型；

在这里插入图片描述

document对象的作用：访问和操作html文档中的元素；

二、DOM操作html元素

1、获取元素【重点】

方法	参数	说明
document.getElementById( idValue )	元素（标签）的id属性值	通过标签的id属性值获取元素
document.getElementsByName（nameVal）	元素（标签）的name属性值	通过标签的name属性值获取元素
document.getElementsByTagName( tagName)	元素（标签）的名称	通过标签名获取（一类）元素
document.getElementsByClassName( classVal )	元素（标签）的class属性值	通过标签的class属性值获取一类元素

【注意事项】在同一个页面中id属性值最好是保证唯一；

【练习一】获取页面标签练习案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">

            window.onload = function (ev) {
                /*
			 * 【案例】通过document对象获取页面标签
			 */
                //点击btn1，在控制台打印id为username的标签对象
                document.getElementById("btn1").onclick = function (ev2) {
                    //获取id为username的标签对象
                   var userName =  document.getElementById("username");
                    console.log(userName);
                };

                //点击btn2，在控制台打印name为hobby的标签对象
                document.getElementById("btn2").onclick = function (ev2) {
                    //name为hobby的标签对象
                   var hobbies =  document.getElementsByName("hobby");
                    console.log(hobbies);

                };

                //点击btn3，在控制台打印标签名为input的标签对象
                document.getElementById("btn3").onclick = function (ev2) {
                    //标签名为input的标签对象
                   var inputs =  document.getElementsByTagName("input");
                    console.log(inputs);

                };

                //点击btn4，在控制台打印class属性值为form-item的标签对象
                document.getElementById("btn4").onclick = function (ev2) {
                    //class属性值为form-item的标签对象
                    var inputs = document.getElementsByClassName("form-item");
                    console.log(inputs);
                };
            }
		</script>
		
	</head>
	<body>
		<h2>document对象获取页面标签</h2>
		<button id="btn1">点击btn1，在控制台打印id为username的标签对象</button>
		<button id="btn2">点击btn2，在控制台打印name为hobby的标签对象</button>
		<button id="btn3">点击btn3，在控制台打印标签名为input的标签对象</button>
		<button id="btn4">点击btn4，在控制台打印class属性值为form-item的标签对象</button>
		<hr />
		<form action="#" method="get" id="registForm">
			用户名:<input  type="text" name="username" id="username" class="form-item"><br />
			 密码:<input type="password" name="password" id="password"  class="form-item"><br /> 
			  性别： <input type="radio" name="sex" value="男"> 男
				 <input type="radio" name="sex" value="女" />女<br />
			爱好：<input type="checkbox" name="hobby" value="sj"/>睡觉
				<input type="checkbox" name="hobby" value="bc"/>编程
				<input type="checkbox" name="hobby" value="cj"/>吃鸡<br />
			城市：<select name="city" id="city">
					<option value="bj">北京</option>
					<option value="sh">上海</option>
					<option value="gz">广州</option>
					<option value="sz">深圳</option>
				</select><br />
			<input type="submit" value="注册" />
		</form>
	</body>
</html>

2、标签value值与标签体的操作

属性	说明
element.value	获取标签的value值
element.innerText	获取标签体中的文本内容
element.innerHTML	获取标签体中的内容（包括子标签）

【注意】

value，innerText和innerHTML都是标签对象的属性。获取属性值直接用js标签对象.value 即可，赋值使用js标签对象.value="xxx" ；
value属性值的操作只针对有value属性的标签，如：<input type="text" name="username"> ;
innerText和innerHTML是操作标签体的，所以只是针对双标签，如：<span>我是标签体</span> ；

【练习二】value属性值操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">

			/*
				value作用：给标签设置默认值 radio  checkbox
                获取标签对象value值的方法：
                    标签对象.value
                操作：
                    获取value值：标签对象.value
                    设置value值：标签对象.value = "张三";
			*
			* */

			//页面加载完成后执行
			window.onload = function(){
				//点击btn1，使用alert弹出input标签的value值
                document.getElementById("btn1").onclick = function (ev) {
                    //使用alert弹出input标签的value值
                    var userName = document.getElementById("username");
                    var uName = userName.value;
                    alert(uName);
                }
				
				//点击btn2，给input标签的value值设置为："黑马程序员"
                document.getElementById("btn2").onclick = function (ev) {
                    //给input标签的value值设置为："黑马程序员"
                    var userName = document.getElementById("username");
                    var uName = userName.value = "黑马程序员";
                }
			}
		</script>
	</head>
	<body>
		<h2>dom操作标签的value和标签体</h2>
		<hr />
		
		<!--
			操作按钮：
		-->
		<h2>操作按钮</h2>
		<h3>1、value值操作</h3>
		<button id="btn1" >点击btn1，使用alert弹出input标签的value值</button>
		<button id="btn2">点击btn2，给input标签的value值设置为："黑马程序员"</button>
		<hr />
			用户名：<input type="text"  id="username"/>
	</body>
</html>

【练习三】标签体操作：innerText和innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
            /*
            * 标签体操作：
            *       innerText:
            *           获取innerText:标签体中的文本信息
            *           设置值：只能设置文本内容
            *
            *       innerHTML:
            *           获取innerHTML：获取标签体中的所有内容（html标签）
            *           设置值：设置html片段，被浏览器解析
            * */
			window.onload = function(){
				//获取
				//点击btn3，使用alert弹出id="myDiv"的innerText
				document.getElementById("btn3").onclick = function (ev) {
				    //使用alert弹出id="myDiv"的innerText
				    var myDiv = document.getElementById("myDiv");
				    var divText = myDiv.innerText;
                    alert(divText);
				}

				//点击btn5，使用alert弹出id="myDiv"的innerHTML
                document.getElementById("btn5").onclick = function (ev) {
                    //使用alert弹出id="myDiv"的innerText
                    var myDiv = document.getElementById("myDiv");
                    var divHtml = myDiv.innerHTML;
                    alert(divHtml);
                }
				
				
				//赋值
				//点击btn4，设置id="mySpan"的span的innerText值：<font color="red">;聪明的人，都很低调</font>
                document.getElementById("btn4").onclick = function (ev) {
                    //设置id="mySpan"的span的innerText值：< font color="red">;聪明的人，都很低调<font>;
                    var mySpan = document.getElementById("mySpan");
                    mySpan.innerText = "<font color='red'>聪明的人，都很低调</font>";
                }


				//点击btn6，设置id="heimaSpan"的span的innerHTML值：&lt;font color="red"&gt;聪明的人，都很低调&lt;font&gt;
                document.getElementById("btn6").onclick = function (ev) {
                    //设置id="mySpan"的span的innerHTML值：< font color="red">;聪明的人，都很低调<font>;
                    var mySpan = document.getElementById("mySpan");
                    mySpan.innerHTML = "<font color='red'>聪明的人，都很低调</font>";
                }

			}
			
			
		</script>
	</head>
	<body>
		<h2>dom操作标签的value和标签体</h2>
		<hr />
		
		<h3>2、标签体操作</h3>
		<h4>2.1 、innerText</h4>
		<button id="btn3">点击btn3，使用alert弹出id="myDiv"的innerText</button>
		<button id="btn4">点击btn4，设置id="heimaSpan"的span的innerText值：&lt;font color="red"&gt;聪明的人，都很低调&lt;font&gt;</button>

		<h4>2.2 、innerHTML</h4>
		<button id="btn5">点击btn5，使用alert弹出id="myDiv"的innerHTML</button>
		<button id="btn6">点击btn6，设置id="heimaSpan"的span的innerHTML值：&lt;font color="red"&gt;聪明的人，都很低调&lt;font&gt;</button>

		<hr />
			用户名：<input type="text" />
			<div id="myDiv">传智<span id="mySpan">播客</span></div>
	</body>
</html>

【小结】innerText和innerHTML的区别

获取标签体内容：
1. innerText只能获取标签内的文本信息；
2. innerHTML获取标签体内的所有信息；
设置标签体内容：
1. innerText是把设置的内容都当成字符串，插入到标签体中；
2. innerHTML是把设置的内容当成html片段，插入到标签体中；

【练习四】注册表单校验案例

【需求】

给表单添加提交事件；
对用户名和密码进行非空校验；
校验不通过：在对应输入框后面显示错误提示信息；
校验通过：在对应的输入框后面显示"√"；
所有校验均通过后表单成功提交；

【素材】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <style>
            span{
                color: red;
            }

        </style>
	</head>
	<script>
		/*需求分析：表单校验
			确定事件：
				onsubmit
			技术分析：
				1.判断用户名，密码是否输入；
				2.如果用户名或者密码有一个没有输入，校验不通过
				    1.给用户名或密码框后面添加错误提示信息；
				    2.阻止表单提交；
				3.如果用户名和密码都输入，表单提交；
		*
		*
		* */

		/*
		 * 1. 给表单添加提交事件；
		 * 2. 对用户名和密码进行非空校验；    value
		 * 3. 校验不通过：在对应输入框后面显示错误提示信息；
		 * 4. 校验通过：在对应的输入框后面显示"√"；  innerText  innerHTML
		 * 5. 所有校验均通过后表单成功提交；
		 */
		
		
	</script>
	<body>
		<h2 align="center">注册表单校验</h2>
		<form action="#" method="get" id="registForm" >
			<table width="40%" height="60%"  align="center" bgcolor="#ffffff" align="center">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="40%"><input type="text" name="username" id="username"></td>
					<td width="40%"><span id="username_msg"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
					<td><span id="password_msg"></span></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
    <script>
        //给表单绑定表单提交事件
        document.getElementById("registForm").onsubmit = function (ev) {
            //校验
            var formFlag = true;

            //获取校验的标签对象
            var userName = document.getElementById("username");
            var password = document.getElementById("password");
            //用户名校验
            if(userName.value == ""){
                //给提示信息
                var userNameSpan = document.getElementById("username_msg");
                userNameSpan.innerHTML = "请输入用户名";
                formFlag = false;
            }else {
                var userNameSpan = document.getElementById("username_msg");
                userNameSpan.innerHTML = "√";
            }

            //密码校验
            if(password.value == ""){
                //给提示信息
                var passwordSpan = document.getElementById("password_msg");
                passwordSpan.innerHTML = "请输入密码";
                formFlag = false;
            }else {
                //给提示信息
                var passwordSpan = document.getElementById("password_msg");
                passwordSpan.innerHTML = "√";
            }
            return formFlag;
        }
    </script>
</html>

【扩展校验方法】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<h2 align="center">注册表单校验</h2>
		<form action="#" method="get" id="registForm">
			<table width="40%" height="60%"  align="center" bgcolor="#ffffff" align="center">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="40%"><input type="text" onblur="checkUserName();" name="username" id="username"></td>
					<td width="40%"><span id="username_msg"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" onblur="checkPwd();" name="password" id="password"></td>
					<td><span id="password_msg"></span></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
	<script>
        /*
         *1、给用户名和密码标签静态绑定onblur事件；
         *2、实现onblur事件；
         *3、给表单绑定onsubmit事件；
         *4、表单提交之前，调用用户名和密码的校验事件；根据最终的校验结果进行表单的提交；
         */

        //校验用户名
        function checkUserName() {
            //判断用户名的value值
            var userName = document.getElementById("username").value;
            //userName == ""   -- false
            //没有输入的情况
            if(!userName){
                //给出提示信息
                document.getElementById("username_msg").innerHTML = "<font color='red'>请输入用户名！</font>";
                return false;
            }else {
                document.getElementById("username_msg").innerHTML = "<font color='green'>√</font>";
                return true;
            }
        };

        //校验密码
        function checkPwd() {
            //判断用户名的value值
            var password = document.getElementById("password").value;
            //userName == ""   -- false
            //没有输入的情况
            if(!password){
                //给出提示信息
                document.getElementById("password_msg").innerHTML = "<font color='red'>请输入密码！</font>";
                return false;
            }else {
                document.getElementById("password_msg").innerHTML = "<font color='green'>√</font>";
                return true;
            }
        }


        //校验表单
        document.getElementById("registForm").onsubmit = function (ev) {
            //获取用户名校验结果
            var userNameFlag = checkUserName();
            var pwdFlag = checkPwd();
            return userNameFlag && pwdFlag;

        };

	</script>
</html>

3、创建一个新元素

方法	参数	说明
document.createElement(“input”)	标签名	根据标签名创建一个标签

在这里插入图片描述

4、删除一个元素

方法	说明
element.remove();	删除当前标签对象

【练习四】创建和删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>dom对象创建和删除标签</h2>
		<hr />
		<!--
			操作按钮
			【需求】
			1.点击btn1后，创建一个input标签，并将其打印到控制台上
			2.点击btn2后，删除id为mySpan的标签
		-->
		<h3>操作按钮</h3>
		<button id="btn1">单击btn1，创建一个input标签</button>
		<button id="btn2">单击btn2，删除id="mySpan"的标签</button>

		<div id="myDiv">
			传智<span id="mySpan">播客</span>
		</div>
	</body>
<script>
</script>
</html>

5、父子元素操作

方法	说明
element.hasChildNodes();	判断当前标签对象下是否含有子节点。返回值是boolean值
parentElement.removeChild(childElement);	通过父标签对象删除子标签对象
parentElement.appendChild(ChildElement)；	向父标签下追加子标签对象

【练习五】父子元素操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				//<button id="btn1">单击btn1，判断id="myDiv"的标签是否有子元素</button><br />
				document.getElementById("btn1").onclick = function (ev) {
				    //判断id="myDiv"的标签是否有子元素
					var myDiv = document.getElementById("myDiv");
					var has = myDiv.hasChildNodes();
                    alert(has);

				}

				//<button id="btn2">单击btn2，删除id="myDiv"下的子标签</button><br />
                document.getElementById("btn2").onclick = function (ev) {
                    //删除id="myDiv"下的子标签
                    var myDiv = document.getElementById("myDiv");
                    var mySpan = document.getElementById("mySpan");
                    myDiv.removeChild(mySpan);
                }

				//<button id="btn3">单击btn3，创建一个新的span，追加到id="myDiv"内部后面</button><br />
                document.getElementById("btn3").onclick = function (ev) {
                    //单击btn3，创建一个新的input，追加到id="myDiv"内部后面
                    var myDiv = document.getElementById("myDiv");
                    var myInput = document.createElement("input");
                    myDiv.appendChild(myInput);

                }
			}
		</script>
	</head>
	<body>
		<h2>父子元素操作</h2>
		<hr />
		<h3>操作按钮</h3>
		<button id="btn1">单击btn1，判断id="myDiv"的标签是否有子元素</button><br />
		<button id="btn2">单击btn2，删除id="myDiv"下的子标签</button><br />
		<button id="btn3">单击btn3，创建一个新的span，追加到id="myDiv"内部后面</button><br />
		
		<div id="myDiv">
			传智<span id="mySpan">播客</span>
		</div>
		<div id="myDiv2"></div>
	</body>
</html>

三、DOM操作元素属性

方法	参数	说明
element.getAtrribute(name)	属性名，如：id	根据属性名获取元素的属性值。只能获取标签上已有的属性。特殊属性获取：标签对象.属性名
element.setAtrribute(name,value)	属性名，如：id	设置元素的属性值（如果属性不存在则创建属性并赋值）
element.removeAtrribute(name)	属性名，如：id	根据属性名删除属性

【案例】动态改变字体颜色

获取素材中div的class属性值；
给div的id值设置成"newDiv"并添加一个新的属性“style”值为"color:red"；
移除div的style属性；

【练习六】属性操作

普通属性：name，id，type 获取普通属性：element.getAttribute(“name”);

特殊属性：checked，selected ，value 获取特殊属性：element.checked

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
			    /*
			    属性：
			    	获取属性：
			    		标签对象.getAttribute("id")  只能获取标签上声明的属性：name  id class
			    		标签对象.checked             特殊属性：checked selected，value
			    *
			    *
			    * */


				//<button id="btn1">点击btn1，获取id="myDiv"标签的class属性值</button>
                document.getElementById("btn1").onclick = function (ev) {
                    //获取id="myDiv"标签的class属性值
                    var myDiv = document.getElementById("myDiv");
                    var attribute = myDiv.getAttribute("class");
                    console.log(attribute);
                }


				//<button id="btn2">点击btn2，为id="mySpan"的标签添加一个新的属性"style"值为"color:red"</button>
                document.getElementById("btn2").onclick = function (ev) {
                    //为id="mySpan"的标签添加一个新的属性"style"值为"color:red"
                    var mySpan = document.getElementById("mySpan");
                    mySpan.setAttribute("style", "color:red");
                }

				//<button id="btn3">点击btn3，移除id="mySpan"标签的style属性</button>
                document.getElementById("btn3").onclick = function (ev) {
                    //移除id="mySpan"标签的style属性
                    var mySpan = document.getElementById("mySpan");
                    mySpan.removeAttribute("style");
                }
			}
		</script>
	</head>
	<body>
		<!--
			【案例】动态改变字体颜色
				1. 获取素材中div的class属性值；
				2. 给div的id值设置成"newDiv"并添加一个新的属性“style”值为"color:red"；
				3. 移除div的style属性；

		-->
		
		<h2>dom属性操作</h2>
		<hr />
		<h3>操作按钮</h3>
		<button id="btn1">点击btn1，获取id="myDiv"标签的class属性值</button>
		<button id="btn2">点击btn2，为id="mySpan"的标签添加一个新的属性"style"值为"color:red"</button>
		<button id="btn3">点击btn3，移除id="mySpan"标签的style属性</button>
		
		<div id="myDiv" class="myDiv">
			传智<span id="mySpan">播客</span>
		</div>

        选择框：<input type="checkbox" id="checkId">

	</body>
</html>

【练习七】全选、反选、删除、隔行变色

【需求】

完成表格隔行变色；

完成全选与取消全选功能；
完成反选功能；

【代码示例】：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>全选，反选</title>
        <style>
            tr{
                text-align: center;
                font-family: 楷体;
                font-size: 20px;
            }
            /*
            * 当鼠标悬浮在tr上面时，改变tr的背景色
            */
            tr:hover{
                background-color: #F2F2F2;
            }
            /*
            * 取消a标签的下划线
            */
            a{
                text-decoration: none;
            }

        </style>
	</head>
	<body>
		<h2>全选，反选，表格隔行变色，删除表格</h2>
		<hr />

		<table  width="600px" height="200px" cellspacing="0px" style="margin-left: 26%;margin-top: 3%;">
			<tr >
				<td align="left" colspan="5"><button id="fanBtn">反选</button></td>
			</tr>
			<tr>
				<td><input type="checkbox" id="checkAll"/></td>
				<th>分类ID</th>
				<th>分类名</th>
				<th>描述</th>
				<th>操作</th>
			</tr>
			<tr >
				<td><input type="checkbox"  class="myCheckBox"/></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机</td>
				<td><a href="#" onclick="delTr(this);">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="myCheckBox"/></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑</td>
				<td><a href="#" onclick="delTr(this);">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="myCheckBox"/></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴</td>
				<td><a href="#" onclick="delTr(this);">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="myCheckBox"/></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家具</td>
				<td><a href="#" onclick="delTr(this);">删除</a></td>
			</tr>
		</table>
	</body>	
	
	<script type="text/javascript">
        // - 完成全选与取消全选功能；
			// - 完成反选功能；
			// - 完成表格隔行变色；
			// - 完成动态删除表格

		//全选：
			//需求分析：选中第一个chekbox，下面的checkbox都被选中
            //技术分析：1、事件：给第一个checkbox绑定单击事件；
                    // 2、获取checkbox的checked属性，和设置checkbox属性；
                    // 3、获取多个checkbox操作；

		document.getElementById("checkAll").onclick = function (ev) {
		    //操作全选
            //var checkAllFlag = document.getElementById("checkAll").checked;
            //this：指向的是被绑定事件的标签对象
            var checkAllFlag = this.checked;
                //全选
                //全选下面所有的checkbox
                var checkboxes = document.getElementsByClassName("myCheckBox");
                //遍历数组---改变checked属性---true
                for (var i = 0;i<checkboxes.length;i++) {
                    checkboxes[i].checked = checkAllFlag;
                }
        };
        /*
        * 反选：当点击反选按钮后，下面的checkbox，如果是选中状态变为取消选中；如果是取消选中的状态，变为选中状态
        * 技术分析：
        *       1、事件：按钮的单击事件；
        *       2、获取所有的checkbox，判断checked属性；
        *       3、将属性修改为上次相反的属性；
        *
        * */
        document.getElementById("fanBtn").onclick = function (ev) {
            //实现反选
            var checkboxes = document.getElementsByClassName("myCheckBox");
            for (var i = 0;i<checkboxes.length;i++) {
                //反选
               checkboxes[i].checked = !checkboxes[i].checked;

                // if(myCheckboxFlag == true) {
                //     checkboxes[i].checked = false;
                // }else{
                //     checkboxes[i].checked = true;
                // }
            }
        };

        /*
        * 完成表格隔行变色；
        *   需求分析：
        *       1、页面加载完成之后，表格的奇数行和偶数行背景颜色改变；
        *   技术分析：
        *       1、事件：页面加载完成事件；
        *       2、获取所有的tr；数组
        *       3、遍历数组：判断奇数行和偶数行；红色--绿色
        *       4、设置属性：bgcolor="red"
        * */
        //表格隔行换色
        //1.通过标签名选中所有的tr
        var trs = document.getElementsByTagName("tr");
        for (var i = 0;i<trs.length;i++) {
            //判断奇数，偶数    i%2 == 0
            if(i % 2 == 0) {
                trs[i].setAttribute("bgcolor", "#FFFFFF");
            }else{
                trs[i].setAttribute("bgcolor", "#F2F2F2");
            }
        }

        /*
        * 动态删除表格：点击删除后，删除当前行
        * 技术分析：
        *       1、事件：点击事件----a
        *       2、删除当前行tr
        * */

        function delTr(aTag) {
            //dom对象.parentElement   :  获取当前标签的父标签
            aTag.parentElement.parentElement.remove();
        }

	</script>
</html>

总结

1、dom概念：
	dom： doucment object model ，把html抽象成一个对象-document
	作用：
		获取html元素：
		删除html元素：
		属性操作：
		value，标签体

2、dom操作：
	【1】获取标签：
		   id： document.getElementById(id值)   					一个
		   name： document.getElemetsByName("hobby")				数组
		   class：document.getElemetsClassName("form-item")      数组
			tagName:document.getElemetsByTageName("input")		 数组
    【2】value，标签体
		value：form表单标签
			  获取value值：document.getElementById(id值) .value
			  设置value值：document.getElementById(id值) .value = "新的value值"
	   标签体： <div id="myDiv">asdasda<span>sds</span></div>   文本+标签
			  innerText:操作文本
					取值：var 文本信息 = document.getElementById(id值).innerText
					设置值：document.getElementById(id值).innerText="文本数据"
			  innerHTML：操作标签体（文本+标签）
					取值：var （文本信息+标签） = document.getElementById(id值).innerHTML
					设置值：document.getElementById(id值).innerHTML="文本数据"+标签

   【3】标签创建，删除
		1、创建： document.createElement(标签名);
		2、删除：
				自己删除自己：  document.getElementById(id值).remove();
				父标签删除子标签： 父标签对象.removeChild(子标签对象);
		3、父子标签操作：
				1、判断父标签是否有子节点： 父标签.hasCildNodes();
				2、在父标签内部的后面追加子标签： 父标签.appendChild(子标签);
				3、通过子标签获取父标签： 子标签.parentElement

   【4】标签属性操作：
			1、获取属性： 
					标签对象.getAttribute("name")  注意：只能够获取，标签上已有的属性
					标签对象.cheked(selected)	    获取特殊属性
		    2、设置属性：
					标签对象.setAttribute(name,value)
			3、移除属性：
					标签对象.removeAttribute(name);

3、案例应用：
	思路： JS案例
		1、确定事件：
		2、书写具体的事件处理方法；

第二章、JavaScript常用对象

在这里插入图片描述

一、Array–数组对象

Array对象是数组对象，跟java中的数组一个意思，但是使用语法上稍微有些区别。

1、创建数组对象

在JS中，创建数组有以下4种方式：

创建数组	说明
var arr1 = new Array();	无参的构造方法，创建一个长度为0的数组
var arr2 = new Array(5);	有参的构造方法，指定数组的长度
var arr3=new Array(2,4,10,6,41);	有参的构造方法，指定数组中的每个元素
var arr4 = [4,3,20,“hello”,true,null,undefined]	使用中括号的方式创建数组

2、JS中数组的特点

数组的长度是可变的；
数组中可存储任意类型的数据；
JS数组是不连续的；

3、JS数组的常用方法

与Java中不同的是，JS的数组对象有很多方法：

方法名	功能
concat()	连接两个或更多的数组，并返回结果
reverse()	将数组进行反转
join(separator)	与split()功能相反，将数组通过分隔符，拼成一个字符串。
sort()	对字符串数组进行排序如果要对数字进行排序，要指定比较器函数。 sort(function(m,n)) 数字两两比较 1) 如果m大于n，则返回正整数 2) 如果m小于n，则返回负整数 3) 如果m等于n，则返回0

【案例】数组常用方法练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 数组常用方法演示：
			 * 
			 * 假如有3个数组如下：
			 *  var arr1 = [1,3,5,7];
			 *  var arr2 = [2,4,6,8];
			 *  var arr3 = ["hello","world","传智播客","1"];
			 * 
			 * 分别演示数组的：concat(),reverse(),join(separator),sort()方法
			 */
			 var arr1 = [1,3,5,7];
			 var arr2 = [2,4,6,8];
			 var arr3 = ["hello","world","传智播客","1"];
			 
			 console.log(arr1.concat(arr2));
			 console.log(arr1.reverse());
			 console.log(arr1.sort());
			 //自定义排序规则   倒叙排列
			 console.log( arr1.sort(function(m,n){
			 	return n-m;
			 }))
		</script>
	</head>
	<body>
	</body>
</html>

4、数组的取值与赋值

4.1 从数组中取值

假如有数组：var arr = [5,2,0];

获取数组的某一个元素：通过索引获取，如:arr[0]能够获取第一个元素；
获取数组的所有元素：遍历数组，并通过索引获取，如下:

var arr = [5,2,0];
for(var i = 0;i<arr.length;i++){
     alert(arr[i]);
}

4.2 给数组设置值

给数组中的元素赋值有两种方式：

通过索引获取元素后直接赋值；
调用数组的push()方法；

【示例】给数组中的元素赋值

//创建一个数组，并给其中的元素赋值为1,2,3...10共10个数；

//创建一个数组
var arr = new Array();
//方式一：直接通过索引赋值
for(var i = 0;i<10;i++){
   arr[i] = i+1;
}

//方式二：使用push方法  注意push方法会改变数组长度，不要在遍历过程中使用
arr.push(10);

二、Date–日期对象

与Java中一样，JavaScript中提供的Date对象也是提供给我们处理日期和时间；

1、创建日期对象

创建当前日期时间：var date = new Date();
创建指定日期时间：var date = new Date(毫秒值);

【注意】：其中毫秒值为1970-01-01至今的时间毫秒值

	<script type="text/javascript">
		//创建当前时间的日期对象
		var date1 = new Date();
		
		//创建指定时间的日期对象
		var date2 = new Date(1526478783348);
	</script>

2、时间的获取

获得年： getFullYear() 从 Date 对象以四位数字返回年份。
获得月： getMonth() 从 Date 对象返回月份 (0 ~ 11)。
获得星期：getDay() 从 Date 对象返回一周中的某一天 (1 ~ 7)。
获得日： getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
获得毫秒值：getTime() 返回 1970 年1 月 1 日至今的毫秒数。

【案例】日期对象练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <script src="../js/dateFmt.js"></script>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/*
		 *日期对象：
		 * 		处理日期
		 *
		 * 创建日期对象：
		 * 		var date1 = new Date();当前日期对象
		 * 		var date2 = new Date(millseconds);指定日期对象
		 *
		 * 常用方法：
		 * 【需求】将当前的日期按照"yyyy-MM-dd hh:mm:ss"格式输出
		 */


        var fmtDate = getFmtDate();
        console.log(fmtDate);


        var dateFtt2 = dateFtt("yyyy/MM/dd hh:mm:ss",new Date());
        console.log(dateFtt2);

	</script>
</html>

//自定义日期格式化方法
function getFmtDate() {
    var date1 = new Date();
    var year = date1.getFullYear();
    var month = date1.getMonth()+1;
    var date = date1.getDate();

    var hour = date1.getHours();
    var minute = date1.getMinutes();
    var seconds = date1.getSeconds();

    var dateTime = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + seconds;
    return dateTime;

}


//返回指定格式的日期
function dateFtt(fmt,date)
{ //author: meizz
    var o = {
        "M+" : date.getMonth()+1,                 //月份
        "d+" : date.getDate(),                    //日
        "h+" : date.getHours(),                   //小时
        "m+" : date.getMinutes(),                 //分
        "s+" : date.getSeconds(),                 //秒
        "q+" : Math.floor((date.getMonth()+3)/3), //季度
        "S"  : date.getMilliseconds()             //毫秒
    };
    if(/(y+)/.test(fmt))
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
        if(new RegExp("("+ k +")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    return fmt;
}

三、RegExp --正则对象

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

1、创建正则对象

var patt=new RegExp(pattern);
var patt=/pattern/;

2、JS常用正则

手机号校验：/^1(3|5|6|7|8)\d{9}$/;
邮箱校验：

/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

正整数：/^[1-9]+\d*$/；

3、正则常用方法

方法	参数	说明
test(val)	被检验的数据	使用方法：reg.test(val)

【正则校验案例】

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		
	</script>
	<body>
		<form action="#" method="get" >
			<table width="60%" height="60%"  align="center" bgcolor="#ffffff">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="40%"><input type="text" name="username" id="username"></td>
					<td width="40%"><span id="username_msg"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
					<td><span id="password_msg"></span></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email" id="email"></td>
					<td><span id="email_msg"></span></td>
				</tr>
				<tr>
					<td>手机号:</td>
					<td><input type="text" name="phone" id="phone"></td>
					<td><span id="phone_msg"></span></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>

<script>
	//校验email -- onblur
    document.getElementById("email").onblur = function (ev) {
        //创建正则校验
        var email = this.value;
        var emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!emailReg.test(email)){
           //不符合规则--提示
            document.getElementById("email_msg").innerHTML = "请输入正确的邮箱地址";
        }else{
            document.getElementById("email_msg").innerHTML = "√";

        }
    }
</script>
</html>

总结

在这里插入图片描述

Li_CSDN_Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门【JavaScript-II】

学习目标-[ ] 能够使用JS获取页面中的指定元素【重点】-[ ] 能够使用JS创建元素【了解】-[ ] 能够使用JS对元素的属性进行操作【熟悉】-[ ] 能够使用JS对元素的标签体进行操作【熟悉】-[ ] 能够使用JS对指定元素的样式进行操作（获取或修改）【熟悉】-[ ] 能够使用JS中的Array，Date对象【熟悉】回顾Html和JavaScript基础【案例】注册页面【代码示例】<!DOCTYPE html><html> <head>
复制链接

扫一扫

专栏目录