javascript学习需要注意的地方

最新推荐文章于 2024-04-29 15:27:03 发布

飞翔_企鹅

最新推荐文章于 2024-04-29 15:27:03 发布

阅读量939

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/flyforqie/article/details/10212527

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.function内的变量一定要加var,否则是全局变量。

	function f1(){
		a = 1;
		alert(a);
	}
	function f2(){
		alert(a);//先执行f1()在执行f2()则可以显示a的值，因为此时变量a是全局变量。
	}

2.在javascript中非0即真,但是null、“”、undefiend、NAN都是false

	function f3(){
		alert(!!1)//true
		alert(!!0)//false
		alert(!!parseInt("q2"));//NAN同样是false
		var s ;
		alert(s);//undefiend也是false
		var obj = document.getElementById('a1');
		alert(!!obj);//null也是false
		alert(!!'');//''也是false
	}

3.使用parseInt转换必须是数字开头

	function f4(){
		var px1 = '12px';
		alert(parseInt(px1));//parseInt可以去掉字符px，保留数字12，使用parseInt转换必须是数字开头
		alert(typeof(px1));//typeof可以获取变量类型
		var a1 = ['1',2,3];
		alert(typeof(a1));//这里得到的是object而不是array
		alert(a1 instanceof Array);//可以判断是否Array
	}

4.使用xx对象['属性']可以获得属性值,for ...in 可以遍历对象属性

function Person(name,age){//简单对象创建
		this.name = name;
		this.age = age;
		this.say = function(){//类内部方法创建
			alert(this.age+","+this.name);
		}
	}
	var p1 = new Person('zh',21);
/*	alert(p1.name+","+p1.age);//对象点属性可以调用
	alert(p1['name']+","+p1['age']);//对象['属性名']同样也可以
	p1.say();//对象方法调用 */

	for(var p in p1){//for in 可以遍历对象属性
		alert(p1[p]);
	}
	
	var f  = function(){ //此时function是个方法
		alert('function');
		return 100;//对于方法而言,return就有返回值
	}
/*	f(); //方法调用
	var p = f; //将p指向方法f
	p(); 
	var z = f();//将f返回的结果赋值给z,z为100
	alert(z);
	alert(p);//p指向了整个方法f */

5.Date.getMonth()月份从0开始，所以要+1

		var date = new Date();//date.getMonth()月份从0开始，所以要+1
		document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日");
		document.write(date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒");

		var str1 = "hello";
		var str2 = str1.concat(",","world","!!");//concat()用于字符连接
/*		alert(str2);
		alert(str2.slice(0,5));//从0开始截取到5，但不包括5-->hello
		alert(str2.substr(2,5));//从2开始到5结束-->llo,w
		alert(str2.substring(1,4));//截取下标为1到4的字符，不包括4-->ell */
		
		var as = new Array();
		as.push(1);
		as.push('2');
		as.push(3);
		as.push('4');
		var st = as.join('--');//join()将元素用'--'连接成字符串
		alert(st);
		alert(typeof(st));

6.使用with可以指定默认对象，CSS中的带有‘-’的样式转变成属性时应该去掉中间的'-'变为驼峰标识

	<script type="text/javascript">
		function f1(){
			var obj = document.getElementById("fo");
			obj.style.color = "red";
			obj.style.fontSize = "25px";//CSS中font-size转变成属性时应为fontSize，去掉中间的'-'变为驼峰标识
		}

		with(document){//with指定默认对象。 
			write("此时document为默认对象")
			write("</br>");
		}
	</script>
 </head>

 <body>
		<font id="fo">文字</font>
		<button onClick="f1()">按钮</button>
 </body>

7.使用window.open()创建子窗口时，当name一样则会在同一个子窗口内打开

<script type="text/javascript">
	  window.onload = function(){
		var obj_1 = document.getElementById("a1");
		var obj_2 = document.getElementById("a2");
			obj_1.onclick = function(){
				window.open('Http://www.baidu.com/','sname',channelmode=1,menubar=0);//window.open(URL,name,features,replace)
			}
			obj_2.onclick = function(){
				window.open('Http://www.so.com/','sname',channelmode=1,menubar=0);//当name一样时会在同一个子窗口内打开
			}
	  }
	</script>
 </head>

 <body>
	<a href="#" id="a1">baidu</a>
	<a href="#" id="a2">360<a>
 </body>

8.元素节点只能通过innerHTML获取文本内容，只有文本节点才能使用nodeValue获取文本值

  <script type="text/javascript">
	window.onload = function(){
		var b1 = document.getElementById('b1');
		var b2 = document.getElementById('b2');
		var b3 = document.getElementById('b3');
		var b3 = document.getElementById('b4');
		b1.onclick = function(){
			var con = document.getElementById('content');
			alert(con.nodeType);//nodeType获取节点类型,1为元素节点
			alert(con.innerHTML);//元素节点只能通过innerHTML获取文本内容
		}
		b2.onclick = function(){
			var names = document.getElementsByName('uname');//getElementsByName一般用于表单值获取
			alert(names[0].value);
		}
		b3.onclick = function(){
			var tags = document.getElementsByTagName('input');
			for(var i=0;i<tags.length;i++) {
				alert(tags[i].value);
			}
		}
		b4.onclick = function(){
			var hs = document.getElementsByTagName('h1');
			var textNode = hs[1].firstChild;
			alert(textNode.nodeType);//nodeType获取节点类型，3为文本节点
			alert("-"+textNode.nodeValue+"-");//只有文本节点才能使用nodeValue获取文本值,在IE和chrome中nodeValue存在差异性
		}
	}
  </script>
<body>
	<div id="content">
		<h1>
			h1xxx
			<span>sp11</span>			
		</h1>
		<h3>h3xxx
			<input type="text" name="uname" value="namesssss" class="un"></input>
			<input type="text" name="psw" value="pwdsssss"></input>
		</h3>
		<h1>
			h2xxx
			<span>sp22xx</span>			
		</h1>
	</div>
	<input type="button" value="获取ID值" id="b1"></input>
	<input type="button" value="获取所有Name值" id="b2"></input>
	<input type="button" value="获取所有Tag值" id="b3"></input>
	<input type="button" value="获取文本节点值" id="b4"></input>
 </body>

9.event需考虑浏览器兼容性

  <script type="text/javascript">
		window.onload = function(){
			var b1 = document.getElementById('b1');
			b1.onclick = function(event){
				var event = event||window.event;//兼容IE和chrome
				alert(event.type);
				alert(this.firstChild.nodeValue);
			}
		}
  </script>
 <body>
		<button id="b1">click一下</button>
 </body>