javascript+dom

JS中的全局函数

全局函数：JS中提供部分的函数，不需要任何对象，可以直接通过函数名在代码使用。

URL：统一资源定位符
浏览器地址栏中输入的信息
http：//www.itheima.com:80/index.jsp?name=zhangsan&password=123

URI：统一资源标识符
URI表示的资源数据不具体 index.jsp 称为一个URI

BOM对象介绍

BOM：browser object model 浏览器对象模型，把当前的浏览器看成一个对象。
通过浏览器对象可以获取和浏览器相关的所有信息。
1.window对象：

是javascript层级中的顶层对象
Window对象有浏览器在加载到body或者frameset标签的时候由JS引擎自动创建。我们在JS代码中可以直接使用，使用window。

window对象中的属于：

专门获取window中包含的其他对象：
document 获取浏览器加载的html文件对象
history 获取浏览器中的历史记录对象
location 浏览器的地址栏对象
navigator 浏览器对象
screen 浏览器窗口在显示器屏幕上的相关对象

		setInterval("函数名",毫秒值)    			
		在指定的毫秒值之后重复执行当前指定的这个函数
		clearInterval()
			清除重复执行的动作
		
		setTimeout("函数名",毫秒值)
			在制定的毫秒值后只执行一次某个函数
		clearTimeout()
			清除指定的执行动作
			
		open() 打开一个新窗口
		close() 关闭打开的新窗口

2.history对象：

它是javascript对象，不是html dom对象
History对象是有javascript runtime engine 自动创建，由一系列的URL组成的，这些URL是浏览器口内已访问的URL。
唯一保持使用的功能只有back(),forward()和go()方法。

3.Location对象：

包含当前URL的信息

4.navigator对象：

可以访问系统，浏览器的信息。

DOM对象

DOM：Document Object Model 文档对象模型。
文档：html文件。但是后期也可能是xml文档
当浏览器把一个html文件加载到内存中，这时就会在内存中得到一个关于当前这个html文件的对象，这个对象就是DOM对象。

DOM对象的标准：由W3C指定，它规定如何通过JS技术来解析当前加载的这个html文件中的所有标签，以及标签中的属性，还有标签中封装的文本数据。

当我们去解析一个html文件的时候，解析到的标签称为标签对象（元素节点）、标签上的属性称为属性对象（属性节点）、标签中的文本称为文本对象（文本节点）。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
对 HTML DOM 事件对出反应
如何添加或删除 HTML 元素

DOM获取元素(标签)节点:

		getElementById():	
            是根据页面上的标签的id属性值。获取当前某个标签对象
			当获取到一个html页面中的标签对象之后，当前这个标签对象的具体操作需要查阅DHTML文档

		getElementsByName() :
			根据页面上标签上的name属性的值，获取当前页面上的标签对象
			由于标签的name属性的值可能重复，因此获取到的一个数组
		
		getElementsByTagName():
			根据标签的名称获取标签对象，由于页面上会出现同名的标签，因此获取到一定也是一个数组

改变 HTML 输出流:
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

改变 HTML 内容:

ent.getElementById(id).innerHTML=new HTML

改变 HTML 属性:

document.getElementById(id).attribute=new value

改变 HTML 样式:

document.getElementById(id).style.property=new style

**HTML DOM 事件 **

onclick=JavaScript

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

JS中的事件

给页面上的标签绑定事件对应的函数的2种方式：
1、直接在页面上的标签上书写事件名称，然后给名称的属性值绑定JS函数名
2、在页面加载完成之后，通过js和dom技术获取到这个标签对象，然后动态给这个标签绑定事件

<script type="text/javascript">
	//直接在页面上的标签上绑定事件
	function _click(){
		var input = document.getElementById("username");
		if( input.value == "请输入用户名"){
			input.value="";
		}
	}
	//动态的给页面上的标签绑定事件
	//必须在页面架子完成之后绑定事件
	/*
		JS中的正则对象：
			JS中创建正则对象可以直接new，还可以使用/正则表达式/
			var reg = new RegExp("正则表达式");
			var reg2 = /正则表达式/;
			
	*/
	window.onload = function(){
		document.getElementById("username").onblur = function(){
			//在事件中可以使用this关键字，this表示的是当前发生事件的哪个标签对象
			var value = this.value;
			var reg = new RegExp("^\\w{6,12}$");
			if( reg.test(value) ){
				document.getElementById("nameSpan").innerHTML = "用户名正确".fontcolor("green");
			}else{
				document.getElementById("nameSpan").innerHTML = "用户错误".fontcolor("red");
			}
		}	
	}
</script>

dom中的创建和添加方法

	function demo(){
		//获取页面上的div标签对象
		var div = document.getElementById("div");
		//div.innerHTML = "添加数据";
		//使用dom技术动态先在内存中创建出一个文本对象
		var text = document.createTextNode("数据");
		
		//把文本标签对象条件到div中
		div.appendChild(text);
	}
	function demo2(){
		var div = document.getElementById("div");
		//div.innerHTML = "<a href='http://www.itheima.com'>黑马</a>";
		//创建a标签对象
		var a = document.createElement("a");//<a></a>
		a.innerHTML = "黑马"; //<a>黑马</a> 
		//给a标签上添加属性
		a.setAttribute("href","http://www.itheima.com");
		//<a href='http://www.itheima.com'>黑马</a> 
		div.appendChild(a);
	}

dom中的删除、克隆、替换方法

//删除页面上的id为two 的 div
	function demo(){
		var two = document.getElementById("two");
		//删除的时候必须获取当前标签的父标签，才能删除自己
		var body = two.parentNode;
		//删除当前div标签对象
		//获取 id为 one的div 使用兄弟标签获取
		var one = two.previousSibling;
		body.removeChild(one);
	}
	//替换
	function demo2(){
		//使用id为one的div替换id为two的div
		var two = document.getElementById("two");
		var one = document.getElementById("one");
		//获取父标签
		var body = two.parentNode;
		body.replaceChild(one, two);
	}
	//克隆替换
	function demo3(){
		//使用id为one的div替换id为two的div
		var two = document.getElementById("two");
		var one = document.getElementById("one");
		//获取父标签
		var body = two.parentNode;
		//克隆出id为one的div标签
		var cloneOne = one.cloneNode(true);
		body.replaceChild(cloneOne, two);
	}

JSON格式数据

JSON格式的数据表现形式：
第一种格式：
{
key:value,
key:value,
key:value
}
JSON格式中的数据的key必须是字符串。value值可以是任意类型的数据

第二种格式：
[
{ key:value , key:value }，
{ key:value , key:value }，
{ key:value , key:value }
]
/*
json的第一种格式：
var json = {key:value,key:value}
可以根据指定的json对象，调用它的key，得到对应的value
调用的方式：
格式1：对象.key 获取到key对应的value
格式2：对象["key"] 获取到key对应的value

			如果要遍历json个数的所有数据，需要使用循环for in循环
	====================================================
	Java中的foreach 遍历容器：
		for( 容器中的数据类型  变量名 ： 容器名 ){
			变量空间中保持的是容器中的某个元素数据
		}	
	====================================================
	JS中的for in格式
		for( var 变量  in 数组|对象|json ){
			如果是数组的话，变量是数组的下标
			如果是json个数数据，变量是key值
			如果是对象，变量是对象中的某个属性或者方法名
		}    	
	
		var arr = [4,2,7,9,0,11];
    	for( var i in arr){
    		alert(arr[i]);
    	}
	*/
	var json = {
				"name":"林青霞",
				"age":26,
				"address":"东莞",
				"sex":"不详",
				"student":{
							"name":"风清扬",
		    				"age":32,
		    				"address":"西安",
						  }
				};
    //for in循环是用来遍历对象或json的
	for( var j in json ){
		document.write(j +":"+json[j]+"<br/>");
		for( var i in json[j] ){
			document.write(i +":"+json[j][i]+"<br/>");
		}
	}
	
	
	var json2 = [
					{"name":"黑马",
					"age":"5"}
				];
	alert(json2[0].name);

注意：var j ; json.j；//这格式是错误的，j是变量，不能这样使用json.j访问该json的属性值。

posted @ 2015-08-25 22:13 beyondbycyx 阅读(242) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部