Javascript复习(三)

1.字符串对象(String)

2.Number 对象

3.JavaScript Array(数组)

4.JavaScript Boolean(布尔)【注意Boolean对象与boolean值的差异】

  1.创建boolena对象

1.1直接赋值

Var  boo1=false;

1.2通过构造器创建boolean对象

通过构造器创建boolean对象可以将

数字0--false   非0--true

字符串 “”---false  非””--true

null---false

NaN---false

对象【Boolean对象】-- true

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Boolean类型</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
			1.JS中的布尔类型永远只有两个值: true和false (这一点和Java一样)
			2.在Boolean类型中有一个函数叫:Boolean().
				语法格式:
					Boolean(数据)
					Boolean()函数的作用是将非布尔类型转换成布尔类型
					
			*/
		   //var username = "lucy"; //true
		   var username ="";//false
			/* 
			 if(Boolean(username)){
				 alert("欢迎你"+username);
			 }else{
				 alert("用户名不能为空!");
			 }
			 */
			
		/*	
			if(username){
				alert("欢迎你"+username);
			}else{
				alert("用户名不能为空");
			}
		*/
	   
	   //if()括号会把其中的值转换为布尔值
	   //规律: “有”就转换成true,“没有”就转换成false
	   alert(Boolean(1));//true
	   alert(Boolean(0));//false
	   alert(Boolean(""));//false
	   alert(Boolean("abc"));//true
	   alert(Boolean(null));//false
	   alert(Boolean(NaN));//false
	   alert(Boolean(undefined));//false
	   alert(Boolean(Infinity));//true
	   
	   /*
	   while(10/3){
		   alert("hehe");
	   }
	   */
	  
	  
	  //Null类型只有一个值, null
	  alert(typeof null);//“object”
	   
		</script>
	</body>
</html>

valueOf() 返回 Boolean 对象的原始值。boolean数据值

注意:

1.创建Boolena对象是通过new Boolean()的方式得到的是Boolean对象,通过valueOf()得到的是boolean的原始值。

2.无论是不是Boolen对象,只要是对象,在if语句的判断条件中会被转换成boolean值且一定是true。通过Boolen对象提供的valueOf()方法得到Boolen对象中的boolean数据值。

5.JavaScript Date(日期)

1、创建Date对象

new Date(); //当前系统时间

例如:得到当前系统时间   

var date=new Date();

document.write(date);

Thu Nov 19 2020 11:01:14 GMT+0800 (中国标准时间)
2.new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数

例如:

var date2=new Date(10000);

document.write("<h1>"+date2+"</h1>");

3.new Date(dateString)

例如:

var date3=new Date("2018/12/1 12:29:30");

document.write("<h1>"+date3+"</h1>");
4.new Date(year, month, day, hours, minutes, seconds, milliseconds)

例如:

 

  1. Date的常用方法

getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

    getFullYear()获取年份

getMonth()获取月份【从0开始数,我们在使用的是需要+1】

getDate()获取月中的天数

getDay()获取星期

getHours()获取小时数

getMinutes()获取分钟数

getSeconds()获取秒数

setFullYear(y,m,d) 设置具体的日期。

setMonth()设置月份【从0开始数,我们在使用的是需要-1】

setDate()设置月中的天数

setDay()设置星期

setHours()设置小时数

setMinutes()设置分钟数

setSeconds()设置秒数

setTime()设置毫秒数,得到从 1970 年 1 月 1 日设置的毫秒数重新给出时间日期

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Date对象</title>
		<script type="text/javascript">
			//1创建date对象
			var date=new Date();
			document.write(date+"<br />");
			//getTime()返回从1970年一月一日至今的毫秒数
			document.write(date.getTime()+"<br />");
			//getFullYear()获取年份
			document.write(date.getFullYear()+"<br />");
			//getMonth()获取月份
			document.write(date.getMonth()+"<br />");
			//getDate()获取月份中的天数
			document.write(date.getDate()+"<br />");
			//getday()获取星期
			document.write(date.getDay()+"<br />");
			//getHours()获取小时数
			document.write(date.getHours()+"<br />");
			//getMinutes获取分钟
			document.write(date.getMinutes()+"<br />");
			//getSeconds获取秒数
			document.write(date.getSeconds()+"<br />");
			
			
			//setFullYear()设置具体日期;
			//【月份从0开始数,我们在设置的是需要+1】
			date.setFullYear(2019,10,20);
			date.setHours(12);
			date.setMinutes(12);
			date.setSeconds(12);
			//setTime设置毫秒数,
			//得到从 1970 年 1 月 1 日设置的毫秒数重新给出时间日期
			date.setFullYear(2020,10,24);
			date.setHours(12);
			date.setMinutes(12);
			date.setSeconds(12);
			//date.setTime(10000);
			
			document.write(date+"<br />");
			
			//new Date(milliseconds) 返回从 1970 年 1 月 1 日至今的毫秒数
			var date2=new Date(10000);
			document.write(date2+"<br />");
			
			//new Date(dateString)设置具体日期
			var date3=new Date("2020-2-2 2:2:2");
			//var date3=new Date("2018年12月1日 12:29:30");错误
			var date3=new Date("2020/2/2 2:2:2");
			document.write(date3+"<br />");
			
			//new Date(year, month, day, hours, minutes, seconds, milliseconds)
			var date4=new Date(2020,2,2 ,2,2,2,200);
			document.write(date4+"<br />");
			//----------------------------------
		    
			
			var a=date.getFullYear();
			var a1=a.toString();
			var cstring="";
			
			var d=date.getMonth();
			var d1=d.toString();
			var cstring1="";
			
			var e=date.getDate();
			var e1=e.toString();
			var cstring2="";
			//alert(d);
			alert(e);

			
			
			for(var i=0;i<a1.length;i++){
				cstring=gethanzi(a1.charAt(i));
				
			}
			for(var i=0;i<d1.length;i++){
				cstring1=yue(d1.charAt(i));
				
			}
			for(var i=0;i<e1.length;i++){
				cstring2=ri(e1.charAt(i));
				
			}
			
			
			alert(cstring+"年"+cstring1+"月"+cstring2+"日");
			
			function gethanzi(num){
				switch(num){
					case"0":cstring=cstring+"零";break;
					case"1":cstring=cstring+"壹";break;
					case"2":cstring=cstring+"贰";break;
					case"3":cstring=cstring+"叁";break;
					case"4":cstring=cstring+"肆";break;
					case"5":cstring=cstring+"伍";break;
					case"6":cstring=cstring+"陆";break;
					case"7":cstring=cstring+"柒";break;
					case"8":cstring=cstring+"捌";break;
					case"9":cstring=cstring+"玖";break;
				}
			return cstring;
			}
			
			function yue(num2){
				switch(num2){
				case"0":cstring1=cstring1+"零";break;
				case"1":cstring1=cstring1+"壹";break;
				case"2":cstring1=cstring1+"贰";break;
				case"3":cstring1=cstring1+"叁";break;
				case"4":cstring1=cstring1+"肆";break;
				case"5":cstring1=cstring1+"伍";break;
				case"6":cstring1=cstring1+"陆";break;
				case"7":cstring1=cstring1+"柒";break;
				case"8":cstring1=cstring1+"捌";break;
				case"9":cstring1=cstring1+"玖";break;
				}
				return cstring1;
			}
			
			function ri(num3){
				switch(num3){
				case"0":cstring2=cstring2+"零";break;
				case"1":cstring2=cstring2+"壹";break;
				case"2":cstring2=cstring2+"贰";break;
				case"3":cstring2=cstring2+"叁";break;
				case"4":cstring2=cstring2+"肆";break;
				case"5":cstring2=cstring2+"伍";break;
				case"6":cstring2=cstring2+"陆";break;
				case"7":cstring2=cstring2+"柒";break;
				case"8":cstring2=cstring2+"捌";break;
				case"9":cstring2=cstring2+"玖";break;
				}
				return cstring2;
			}
			
			
			// var rq=new Array();
			// for(var i=0;i<cstring.length;i++){
			// 	rq[i]=cstring[i];
				
			// }
			// rq.splice(3,0,["年"]);
			
			
			
			// for(var i=0;i<rq.length;i++){
			// 	rq1[i]=getrq(rq.charAt(i));
				
			// }
			// var rq1=new String("");
			
			// document.write(rq1);
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

两个日期比较

日期对象也可用于比较两个日期。

下面的代码将当前日期与 2100 年 1 月 14 日做了比较:

var x=new Date();
x.setFullYear(2100,0,14);//设置一个时间用来比较
var today = new Date(); //得到当天的时间日期
if (x>today){
alert("今天是2100年1月14日之前");
}else{
alert("今天是2100年1月14日之后");
}

6.JavaScript Math(算数)

Math(算数)对象的作用是:执行常见的算数任务。

算数值【常量值】

Math.E  --  自然常数,为数学中一个常数,是一个无限不循环小数,且为超越数,其值约为2.718281828459045。
Math.PI------圆周率

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数学对象</title>
		<script type="text/javascript">
			document.write("自然常数="+Math.E+"<br />");
			document.write("圆周率="+Math.PI+"<br />");
			document.write("平方根="+Math.sqrt(9)+"<br />");
			document.write("立方根="+Math.cbrt(8)+"<br />");
			document.write("次幂="+Math.pow(2,3)+"<br />");
			document.write("随机数="+Math.random()+"<br />");
			document.write("最为接近的整数="+Math.round(-12.6)+"<br />");
			document.write("最大数="+Math.max(1,2,3,4,5)+"<br />");
			document.write("最小数="+Math.min(1,2,3,4,4,5)+"<br />");
		</script>
	</head>
	<body>
	</body>
</html>

7.JavaScript RegExp 对象

RegExp:是正则表达式(regular expression)的简写。

RegExp就是一个用来检索,判断文本数据的一种格式。在做数据校验的时候经常使用。

创建格式:

var patt=new RegExp(pattern,modifiers);

var patt=/pattern/modifiers; 【不推荐使用】

注意:当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)

var re = new RegExp("\\d+");   

\s

匹配任何不可见字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。

\W

匹配任何非单词字符。等价于“[^A-Za-z0-9_]”

^

匹配输入字行首

$

匹配输入行尾

*

任意次

?

零次或一次

{n}

匹配确定的n

{n,}

至少匹配n

{n,m}

最少匹配n次且最多匹配m

.点

 

\d

匹配一个数字字符

\w

匹配包括下划线的任何单词字符

+

一次或多次(大于等于1次)

[a-z]

字符范围。匹配指定范围内的任意字符

[^a-z]

负值字符范围。匹配任何不在指定范围内的任意字符

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>正则表达式</title>
		<script type="text/javascript">
			var zhengze=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
			var tel="15895926135";
			var test1=zhengze.test(tel);
			document.write("<h1>"+test1+"</h1>");
			
			var chazhao=new RegExp("jsc");
			var zhi="ilgnimelajsc";
			var test2=chazhao.exec(zhi);
			if(test2==null){
				document.write("不存在");
				
			}else{
				document.write("<h1>存在,值="+test2+"</h1>");
			}
		</script>
 	</head>
 	<body>
 		
 	</body>
 </html>

Javascript中的元素

  1. 变量  【var】
  2. 运算,表达式  【1.赋值 2.算数{++,--} 3.比较{===} 4.逻辑 5.typeof】
  3. 语句  【1.顺序结构  2.选择结构{switch{...break}} 3.循环{for/in} 4.....】
  4. 函数{方法} 【function】
  5. 数据类型
  6. 对象 【1.内置对象 2.DOM  3 BOM】

JavaScript 类型转换---数据类型的转换

1.通过使用 JavaScript 函数 例如:toString()

2.通过 JavaScript 自身自动转换 例如:var  num1=100;  var res=num1+”hello”;

1.将数字转换为字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类型转换</title>
		<script type="text/javascript">
		//1.通过使用 JavaScript 函数 例如:toString()
		//2.通过 JavaScript 自身自动转换 例如:var  num1=100;  var res=num1+”hello”;	
		  
		var num1=100;
		document.write("<h1>num1==="+typeof num1+num1+"</h1>");
		var test1=num1+"";
		document.write("<h1>test1==="+typeof test1+test1+"</h1>");
		var bool1=false;
		var test2=bool1+1;
		document.write("<h1>test2==="+typeof test2+test2+"</h1>");
		
		//将数字转换为字符串;
		//1.全局方法 String() 可以将数字转换为字符串。
		var num2=100;
		var string1=new String(num2);//string object;
		var string11=String(num2);//string,value;
		document.write("<h1>string1==="+typeof string1+string1+"</h1>");
		document.write("<h1>string11==="+typeof string11+string11+"</h1>");
	    //2.number 方法 tostring();
	    var  string2=num2.toString()    //string value;
		document.write("<h1>string2==="+typeof test2+test2+"</h1>");
		//3.toFixed(小数的位数)把数字转化为字符串,结果的小鼠点后有指定位数的数字;
		var tofixed1=num2.toFixed(0);
		document.write("<h1"+typeof tofixed1+tofixed1+"</h1>");
		//4.+""
		num2=100;
        var kong=num2+"";
		document.write("<h1>空字符串"+kong+typeof+kong);
		//将包含数字值的字符串转换为数字
		var str1="25";
		//全局方法 Number()可以将字符串转换为数字
		var num3=new Number(str1);
		document.write("<h1>num3==="+num3+",type=="+typeof num2+"</h1>");
		//2.包含数字值的字符串*1
		var str4="1000";
		var num4=str4*1;
		document.write("<h1>num4==="+num4+"type=="+typeof num4+"</h1>");
		//3一元运算符;
		var str5="100";
		var num5=+str5;//Number value
		document.write("<h1>num5==="+num5+",type=="+typeof num5+"</h1>");
		//=======================================
		//将布尔值转换位字符串
		//1.全局方法 String() 可以将布尔值转换为字符串;
		var bool2=true;
		var string3=new String(bool2); 
		var string33=String(bool2);
		document.write("<h1>bool-string"+typeof string3+string3+"</h1>");
		//Boolean 方法  toString();
		var string4=bool2.toString();
		document.write("<h1>bool-string"+typeof string33+string33+"</h1>");
		
		//将字符串转换位布尔值
		//1.空字符串被转换成false
		var str1="";
		var bool3=new Boolean(str1);//Boolean object
		var bool33=Boolean(str1);//Boolean value
		document.write("<h1>string--boolean"+typeof bool3+bool3+"</h1>");
		document.write("<h1>string--boolean"+typeof bool33+bool33+"</h1>");
		//2,非空字符串被转换成true;
		
		var feikong="asds";
		var bool4=new Boolean(feikong);
		var bool44=Boolean(feikong);//Boolean object
		document.write("<h1>string--boolean"+typeof bool4+bool4+"</h1>");
		document.write("<h1>string--boolean"+typeof bool44+bool44+"</h1>");
		//注意:值位false的字符串被转换成boolean值位true值,因为值位false的字符串也是非空字符串;
		var false1="false";
		var bool5=Boolean(false1);
		document.write("<h1>string--boolean"+typeof bool5+bool5+"</h1>");
		//将数字转换位布尔值
		//1.数字0被转换位false
		var number1=0;
		var boolnum=new Boolean(number1);
		var boolnum1=Boolean(number1);
		document.write("<h1>string--boolean"+typeof boolnum+boolnum+"</h1>");
		document.write("<h1>string--boolean"+typeof boolnum1+boolnum1+"</h1>");
		
		//2.非0数字被转换位true;
		var number2=123;
		var  boolnum2=new Boolean(number2);
		var boolnum22=Boolean(number2);
		document.write("<h1>string--boolean"+typeof boolnum2+boolnum2+"</h1>");
		document.write("<h1>string--boolean"+typeof boolnum22+boolnum22+"</h1>");
		//将布尔值转换为数字
		var boolnum3=true;//true=》1;
		var numbool1=new Number(boolnum3);
		var numbool11= Number(boolnum3);
		document.write("<h1>string--boolean"+typeof numbool1+numbool1+"</h1>");
		document.write("<h1>string--boolean"+typeof numbool11+numbool11+"</h1>");
		//false被转换为数字0;
		var boolnum4=false;//false=》0;
		var numbool2=new Number(boolnum4);
		var numbool22=Number(boolnum4);
		document.write("<h1>string--boolean"+typeof numbool2+numbool2+"</h1>");
		document.write("<h1>string--boolean"+typeof numbool22+numbool22+"</h1>");
		//乘1【*1】
		var boolnum5=numbool1*1;
		document.write("<h1>string--boolean"+typeof boolnum5+boolnum5+"</h1>");
		
		var boolnum6=numbool2*1;
		document.write("<h1>string--boolean"+typeof boolnum6+boolnum6+"</h1>");
		
		//将日期转换为数字
		
		var date1=new Date();
		var numdate=new Number(date1);
		var numdate2=Number(date1);
		document.write("<h1>string--boolean"+typeof numdate+numdate+"</h1>");
		document.write("<h1>string--boolean"+typeof numdate2+numdate2+"</h1>");
	
	//注意:日期被转换为数字以后是从1970-1-1到当前日期的毫秒数
	//日期方法 getTime() 也有相同效果
	
	var numdate3=date1.getTime();
	document.write("<h1>string--boolean"+typeof numdate3+numdate3+"</h1>");
	
	//将数字转换为日期
	
	var numberdate1=1605844538320;
    var date11=new Date(numberdate1);//object
	var date111=Date(numberdate1);//string
	document.write("<h1>string--boolean"+typeof date11+date11+"</h1>");
	document.write("<h1>string--boolean"+typeof date111+date111+"</h1>");
	
	
	//如果数字是年份|月份|天数|时分秒的数字,那么我们可以通过
	//Date对象提供的setXXXX()方法
	var setdate= new Date();
      setdate.setFullYear(2020,11,20);
	document.write("<h1>"+setdate+"</h1>+");
	//将日期转换为字符串
	//全局方法  String()
	
	var date2=new Date();
	var datestring1=new String(date2);
	var datestring11=String(date2);
	document.write("<h1>string--boolean"+typeof datestring1+datestring1+"</h1>");
	document.write("<h1>string--boolean"+typeof datestring11+datestring11+"</h1>");
	
	//date方法  tostring()也有同样的效果;
	var date3=date2.toString();
	document.write("<h1>string--boolean"+typeof date3+date3+"</h1>");
	//
	//将字符串转换为日期;
	var stringdate="2020-11-20 17:16:40";
	var date1=new Date(stringdate);
	document.write("<h1>string--boolean"+typeof date1+date1+"</h1>");

//注意:字符串中包含的是符合日期时间格式的字符串数据	
</script>
	</head>
	<body>
	</body>
</html>

DOM对象

DOM--Document Object Model[文档对象模型]

当网页被加载时,浏览器会创建页面的文档对象模型。

HTML DOM 模型被构造为对象的树

Html文件
<html>
    <head>
       <title>My title</title>
    </head>
    <body>
       <a href=””>My link</a>
       <h1>My header</h1>
    </body>
</html>

2.DOM可以完成的功能

1.JavaScript 能够改变页面中的所有 HTML 元素

2.JavaScript 能够改变页面中的所有 HTML 属性

3.JavaScript 能够改变页面中的所有 CSS 样式

4.JavaScript 能够对页面中的所有事件做出反应

3. 查找 HTML 元素

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

3.1. getElementById(id属性值);通过 id 查找 HTML 元素

3.2. getElementsByTagName(标签名)通过标签名查找 HTML 元素

3.3. getElementsByClassName(class属性值)通过类名找到 HTML 元素

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML DOM对象</title>
		<script type="text/javascript">
			//getElementById(id属性值);通过 id 查找 HTML 元素
			  function testByID (){
				var p1=document.getElementById("p1");
				//p1--[object HTMLParagraphElement];  DOM对象
				p1.style.color='red';
				var p2=document.getElementById("p2");
				//p2--[object HTMLParagraphElement] DOM对象
				p2.style.fontSize='30px';
				var p3=document.getElementById("p3");
				p3.style.fontSize='40px';
				p3.style.color='blue';
			}
			//getElementsByTagName(标签名)通过标签名查找 HTML 元素
			function testByTagname(){
			var p=document.getElementsByTagName("p");
			//p---[object HTMLCollection] DOM对象的集合---数组
			//typeof p---object 数组也是对象所以typeof p值才会是
			//p[5]---[object HTMLParagraphElement]  DOM对象
			var size=10;
			for(var i=0;i<p.length;i++)
			{
				var fonts=size*i+size;
				p[i].style.fontSize=fonts+"px";
			}
			
			//当元素在html文件中只有一个的时候,
			//通过getElementsByTagName方法得到的结果依然是数组
			var h2=document.getElementsByTagName("h2");
			//alert(h2); [object HTMLCollection] DOM对象的集合---数组
			if(h2.length==1){
				h2[0].style.color='blue';
			}
			}
			
			
			function testByClassName(){
				var p1=document.getElementsByClassName("p1");
				//alert(p1); //[object HTMLCollection]
				for (var i=0;i<p1.length;i++){
					p1[i].style.color='red';
				}
				var h=document.getElementsByClassName("h");
				//alert(h); //[object HTMLCollection]
				for(var i=0;i<h.length;i++){
					h[i].style.color='green';
				}
				
				
						
				
			}
			
		</script>
	</head>
	<body>
		<p id="p1">p元素测试getElementById(id属性值)</p>
		<p id="p2">p元素测试getElementById(id属性值)</p>
		<p id="p3">p元素测试getElementById(id属性值)</p>
		<p id="p4">p元素测试getElementById(id属性值)</p>
		<input type="button" value="测试getElementById(id属性值)" onclick="testByID();">
		  
		<hr>
				<p>p元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
				<p>p元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
				<p>p元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
				<p>p元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
				<h2>h2元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</h2>		
				<input type="button" value="测试 getElementsByTagName(标签名)"onclick="testByTagname();">  
				<hr >
				        <p class="p1">p元素测试getElementsByClassName(class属性值)通过类名找到 HTML 元素</p>
						<p class="p1">p元素测试 getElementsByClassName(class属性值)通过类名找到 HTML 元素</p>
						<h2 class="h">h2元素测试 getElementsByClassName(class属性值)通过类名找到 HTML 元素</h2>
						<h2 class="h">h2元素测试 getElementsByClassName(class属性值)通过类名找到 HTML 元素</h2>
					<input type="button" name="" id="" value="测试 getElenentByClassName(class属性值)"onclick="testByClassName()" />
					
	
	
	</body>
</html>

4.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]

innerHTML 属性--改变页面中HTML 元素的文本内容

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
		<script type="text/javascript">
			function test1(){
				var text1=document.getElementById("text1");
				var textv=text1.value;
				var h=document.getElementsByTagName("h1")[0];
				h.innerHTML=textv;
			}
			
			function test2(){
				var text=document.getElementById("text1");
				var value=text.value;
				var h=document.getElementsByTagName("h1")[0];
				h.innerText=value;
				
			}
		</script>
 	</head>
 	<body>
		<h1>欢迎使用</h1>
			<input id="text1" type="text" name="" id="" value="" />
		<input onclick="test1()" type="button" name="" id="but1" value="innerHTML 属性" />
		<input onclick="test2()" type="button" name="" id="but2" value="innerText 属性" />
		
 		
 	</body>
 </html>

//注意:innerHTML中设置的字符串内容中有html标记,那么这个被包含的html标记会被解释运行

//注意:innerText中设置的字符串内容中有html标记,那么这个被包含的html标记会被作为字符串输出

5.JavaScript 能够改变页面中的所有 HTML 属性

属性在html和css中都有。

Html中的属性---是给浏览器解释运行html标记时通过附加信息。

 往往出现在html的开始标记中,如果有多个中间使用空格分离。

 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title></title>
		<script type="text/javascript">
			function test1(){
			 imgs=document.getElementsByTagName("img");
			imgs[0].src="imgs/avatar2.png";}
		</script>
 	</head>
 	<body>
		<img src="imgs/avatar.png" >
		<input type="button" name="" id="" value="控制" onclick="test1()" />
 		
 	</body>
 </html>

6.JavaScript 能够改变页面中的所有 CSS 样式

dom对象.style.具体的css属性名称=属性名称对应的属性值;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test1(){
				var imgs=document.getElementsByTagName("img")[0];
				var but=document.getElementsByName("bnt")[0];
				var butvalue=but.value;
				if(butvalue=="隐藏"){
					imgs.style.display="none";
					but.value="显示";
					
				}
				if(butvalue=="显示"){
					imgs.style.display="block";
					but.value="隐藏";
				}
				
				
			}
			
		</script>
		
		
	</head>
	<body>
		<img src="imgs/avatar.png" >
		<input onclick="test1()" type="button" name="bnt" id="" value="隐藏" />
	</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值