JavaScript基础笔记_17-07-12

创建 JavaScript 对象

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。

function test(){
	 person = new Object;
	 person.firstname = "Marry";
	 person.lastname = "myworld"
	 person.password = "123456";
	 person.age = 18;
	 
	 document.write(person.firstname + "是" +person.age+"岁"+"
");
	 document.write("用户名"+person.lastname+"密码"+person.password);
	}

运行效果

for循环与whlie循环是很相似的

function testB(){
    cars=["aa","bb","cc","dd"];
    var i=0;
    for (;cars[i];){
        document.write(cars[i] + "
");
        i++;
        }
}

	function testB(){
		cars = ["aa","bb","cc","dd"];
		var i =0;
		while(cars[i]){
			document.write(cars[i]+"
");
			i++
		}	
	}

两个循环运行效果相似

获取HTML中的标签和属性

function testC(){
		
		var inputs =document.getElementsByTagName("input");
		alert(inputs.length);
		for(var i=0;i
   
   

载入网页时的弹出框

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

empty

运行效果

 

html>

<script>
	
	
	function testE(){
		var sheng = document.getElementById("sheng");
		alert(sheng.options[sheng.selectedIndex].text);
	}

</script>



	

运行效果

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<script>
	
	
	function mDown(obj){
		obj.src="image/shixiang.jpg";
		
	}

	function mUp(obj){
		obj.src="image/kuangsan.jpg";
	}

</script>



	

原样

点击鼠标时↓

松开鼠标后↓

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<script>
	
	function testF(){
	var para=document.createElement("p");
	var node=document.createTextNode("这是新段落。");
	para.appendChild(node);

	var element=document.getElementById("div1");
	element.appendChild(para);
	}
</script>




	
     	
     
     

     	
      
      
第一段话
     	
      
      
第二段话
     	
     
     

运行效果

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

<script>

	function testG(){
	var a = document.getElementById("div1");
	var b = document.getElementById("p1");
	a.removeChild(b);
	}

</script>




	
     	
     
     

     	
      
      
第一段话
     	
      
      
第二段话
     	
     
     

运行效果