js 基础（2）

翻译 于 2018-11-18 17:39:03 发布 · 169 阅读 · 0
文章标签：

#js

一、js的DOM操作（重点）
1．js的DOM概述（document object model）
html文档加载到浏览器的内存中后，我们认为形成了一颗DOM树，即html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。
在这里插入图片描述
我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容进行修改，即通过js动态的修改内存中的那一份html及css的代码。

简单的html页面

<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
		<div>
			<a href="http://www.baidu.com">百度</a>
		</div>
	</body>
	
</html>

在这里插入图片描述
2．js的DOM的操作方法
(1)标签元素的操作
1）获得元素对象：

  • Document.getElementById();通过标签的属性值获取标签对象，返回的是单个的标签对象.
  • Document.getElementsByName();通过标签的name属性值获取标签对象，返回的是标签对象的数组。
  • Document.getElementsByTagName();通过标签的名称获取标签的对象,返回的是标签对象的数组
  • Document.getElementsByClassName();通过标签的class属性获取标签对象，返回的是标签对象的数组。

2）创建一个新元素

  • Document.createElement(tagName);创建标签对象

3）标签体的获取与设置：

  • Element.innerHTML :获取开始标签到结束标签之间的内容。包括标签
  • Element.innerText:获取开始标签到结束标签之间的文本，不包括标签

4）子节点的操作

  • Element.hasChildNodes();判断当前标签对象下是否含有子节点。返回值是boolean值
  • Element.remove();删除当前标签对象
  • parentElement.removeChild(childElement); 通过父标签对象删除子标签对象
  • parentElement.replaceChild(newChild,oldChild);替换父节点下的子节点。
  • parentElement.appendChild(ChildElement)；向父标签下追加子标签对象
  • ParentElement.insertBefore(newElement,refElement);向父标签下指定的子节点前添加标签对象

案例1：

  <body>
  	   <form name="form1" action="test.html" method="post" >
  	   	  <input class="ddd" type="text" name="username" value="传智播客10周年_1"  id="tid"  onchange="" >
		  		<input type="button" name="ok" value="保存1"/>
  	   </form>
  </body>

  
  <script language="JavaScript">
    //知识点：getElementById();通过标签的id的属性值获取标签对象。返回值是单个的标签对象
    
    // 需求：输出 <input type="text" name="username" value="heloworld"  id="tid" >标签value属性的值
    //首先获取id为tid的标签对象
    var myinput = document.getElementById("tid");
//  alert(myinput.value);
		//输出 <input type="text" name="username" value="传智播客10周年_1"  id="tid" >标签type属性的值
//	alert(myinput.type);
  	alert(myinput.className);
 </script>

案例2：

<body>
	<form name="form1" action="test.html" method="post">
		<input type="text" name="tname" value="helloworld_1" id="tid_1"><br>
		<input type="text" name="tname" value="helloworld_2" id="tid_2"><br>
		<input type="text" name="tname" value="helloworld_3" id="tid_3"><br>
		<input type="button" name="ok" value="保存1" />
	</form>
	<select name="edu" id="edu">
		<option value="博士">博士^^^^^</option>
		<option value="硕士" selected="selected">硕士^^^^^</option>
		<option value="本科">本科^^^^^</option>
		<option value="幼儿园">幼儿园^^^^^</option>
	</select>
	<select name="job" id="job">
		<option value="美容">美容^^^^^</option>
		<option value="IT">IT^^^^^</option>
		<option value="程序员">程序员^^^^^</option>
		<option value="建筑师">建筑师^^^^^</option>
	</select>
</body>
<script type="text/javascript">
//getElementsByTagName();通过标签的名称来获取标签对象。返回值是数组，数组中放的是标签对象。
//需求：获取所有的input元素,返回值是数组
    var inputs = document.getElementsByTagName("input");
  //  alert(inputs.length);
 /*  for(var i=0;i<inputs.length;i++){
 	alert(inputs[i].value);
  } */
  /* for(var i=0;i<inputs.length;i++){
	 	if(inputs[i].type=="text"){
	 		alert(inputs[i].value);
	 	}
} */

//需求：输出所有下拉选 id="edu"中option标签中 value属性的值
//首先找到id为edu的标签对象
/* var edu = document.getElementById("edu");
var options = edu.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
	alert(options[i].value);
}
 */
//需求：输出所有下拉选select的option标签中value的值
	var options = document.getElementsByTagName("option");
	for(var i=0;i<options.length;i++){
		if(options[i].selected){
			alert(options[i].value);
		}
}

</script>

案例3：

<body>
  	   <form name="form1" action="test.html" method="post" >
  	   	  <input type="text" name="tname" onchange="" value="传智播客10周年_1"  id="tid_1"  ><br>
				  <input type="text" name="tname" value="传智播客10周年_2"  id="tid_2"  ><br>
				  <input type="text" name="tname" value="传智播客10周年_3"  id="tid_3"  ><br>
				  <input type="button" name="ok" value="保存1"/>
  	   </form>
  </body>
  
  <script language="JavaScript">
  	//getElementsByName();通过标签的name属性值来获取标签对象。返回值是数组。


   //需求：通过元素的name属性获取所有元素的引用  name="tname"
   var inputs = document.getElementsByName("tname");
   //测试该数据的长度
// alert(inputs.length);
   //需求：遍历元素,输出所有value属性的值
/*   for (var i=0;i<inputs.length;i++) {
   		alert(inputs[i].value);
   }*/
   //需求：为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
   for (var i=0;i<inputs.length;i++) {
   	//判断标签对象的type属性，如果为text，那么就绑定事件。
   		i=3;
   	if(inputs[i].type=="text"){
   			//动态给标签对象绑定事件
			
   			inputs[i].onchange = function(){
   				//js中   this代表调用该函数的对象。
   				//此处：this就代表触发当前onchange事件的input标签对象
   				alert(i);
   				alert(this.value);			
   		}
   	}
   }
  </script>

案例4：

<body>
  	  <div id="city"><h1>海马</h1></div>
  </body>
    <script language="JavaScript">
  
  	//innerHTML :获取或者设置开始标签到结束标签之间的内容
  	//innerText:设置或者获取开始标签到结束标签之间的文本。


		//需求：在div层中插入 <h1>海马</h1>
		//首先获取标签对象
		var mydiv = document.getElementById("city");
//		mydiv.innerHTML = "<h1>海马</h1>";
		
		//需求：在div层中插入“<h1>海马</h1>” 文本
		mydiv.innerText = "<h1>海马</h1>";
		
		
	  //需求：读取div的标签体内容
	  alert(mydiv.innerHTML);
	  
	  //需求：读取div的标签体文本内容
	  alert(mydiv.innerText);
	  
  </script>

案例5：

   <form name="form1" action="test.html" method="post" >
      <input type="text" name="tname" value="helloworld_1"  id="tid_1"  ><br>
			  <input type="text" name="tname" value=helloworld_2"  id="tid_2"  ><br>
			  <input type="text" name="tname" value="helloworld_3"  id="tid_3"  ><br>
			  <input type="button" name="ok" value="保存1"/>
 </form>
   
   <select name="edu" id="edu">
   	  <option value="博士">博士^^^^^</option>
		  <option value="硕士">硕士^^^^^</option>
		  <option value="本科" selected="selected" >本科^^^^^</option>
		  <option value="幼儿园">幼儿园^^^^^</option>
   </select>
   
   
   
   <select name="job" id="job" >
   	  <option value="美容">美容^^^^^</option>
		  <option value="IT">IT^^^^^</option>
		  <option value="程序员">程序员^^^^^</option>
		  <option value="建筑师">建筑师^^^^^</option>
   </select>

案例6：

<body>
       <ul id="city">
		   	 <li id="bj" name="beijing">北京</li>
				 <li id="sh" name="shanghai">上海</li>
				 <li id="cq" name="chongqing">重庆</li>
		   </ul>
  </body>
  
  <script language="JavaScript">
  		//parentElement.removeChild(childElement);通过父标签删除子标签。
  		//自杀  childElement.remove();

     	//需求：删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
	 		//获取北京的父节点
	 		var city = document.getElementById("city");
	 		//获取需要被删除的子节点
	 		var li = document.getElementById("bj");
//	 		city.removeChild(li);

				li.remove();
  </script>

案例7：

<body>
	  您喜欢的城市:<br> 
	   <ul id="city">
	   	 <li id="bj" value="beijing" onclick="change()">北京</li>
			 <li id="sh" value="shanghai">上海</li>
			 <li id="cq" value="chongqing"> 重庆</li>
	   </ul>
	  
	  您喜欢的游戏:<br> 
	   <ul>
	   	 <li id="fk" value="fankong">反恐精英</li>
			 <li id="ms" value="moshou">魔兽</li>
			 <li id="cq" value="chuanqi">传奇</li>
	   </ul>   
  </body>
  
  <script language="JavaScript">
  		//parentElement.replaceChild(newChild,oldChild);

     	//需求：点击北京节点， 将被反恐节点替换
      function change(){
      	//获取父节点
      	var city = document.getElementById("city");
      	var old = document.getElementById("bj");
      	var newElement = document.getElementById("fk");
      	city.replaceChild(newElement,old);
      }
	
  </script>

(2)属性的操作
获得属性的值：element.getAtrribute(name)
设置属性的值：element.setAtrribute(name,value)
删除某个属性：element.removeAtrribute(name)

二、js的对象
在这里插入图片描述
与java一样，js也内置一些现成的对象供我们使用，js中内置对象有如下几个：
1．Array对象（重点）
Array对象是数组对象，跟java中的数组一个意思，但是使用语法上稍微有些区别。
(1)创建数组对象的方式：
创建一个空数组：var arr = new Array();
创建一个指定大的数组：var arr = new Array(size);
创建数组并填充元素：var arr = new Array(element0, element1, …, elementn);
直接创建元素数组：var arr = [element0, element1, …, elementn];

(2)数组中元素的获取：
通过索引的方式获得数组中的元素：
获得数组中的一个元素：arr[0]
遍历获得数组中的所有元素：
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
(3)多维数组操作
s中的数组跟java中的集合相似，也就是数组中的元素还是以是数组

arr = [
[1,2,3],
[4,5,6],
[7,8,9]
    			  ]
获取数组中的8数字可以：arr[2][1]

2．日期对象
(1)创建方式

  • 创建当前日期时间：var date = new Date();
  • 创建指定日期时间：var date = new Date(毫秒值);（其中毫秒值为1970-01-01至今的时间毫秒值）

(2)时间的获取

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

3．Math对象
Math对象是数学对象，是一个工具对象，因此Math对象不用使用new的方式创建，直接使用Math就可以调用对象内部的方法。

  • abs(x) 返回数的绝对值。
  • ceil(x) 对数进行上舍入。
  • floor(x) 对数进行下舍入。
  • random() 返回 0 ~ 1 之间的随机数。
  • round(x) 把数四舍五入为最接近的整数。

4．RegExp对象（重点）

<script type="text/javascript">
	/*
	 	js中的正则表达式要加上^  $;
	 	
	 	regExp.test(str);验证字符串的格式
	 	如果验证成功，那么返回true，失败返回false。
	 * */
	var regExp = new RegExp("^\\w{6}$");
	var username = "admin";
	var res = regExp.test(username);
	alert(res);
</script>
tangiwang
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值