JS3-CSDN博客

本文链接：https://blog.csdn.net/u013573897/article/details/84539880

一、||运算符

如果第一个操作值经Boolean()转换后为false，则返回第二个操作值，否则返回第一个操作值（不是Boolean()转换后的值）

二、&&运算符

如果第一个操作数经Boolean()转换后为true，则返回第二个操作值，否则返回第一个值（不是Boolean()转换后的值）

三、event 作用（作用记录事件触发对象，事件类型，事件按键，又有的事件都会传递一个event对象

）

ie获得event和触发事件元素的方法（D:\TecSty\笔记\JS\testjs02day\testevent02.html）

<script type="text/javascript">
function showmsg(){
	var evt = window.event;
	var ele = evt.srcElement;
	alert(ele.tagName);
}
<div οnclick="showmsg();">test</div>

火狐获得event和出发事件元素的方法

function showmsg(event){
	var evt = event;
	var ele = evt.target//触发事件的元素对象
}
<div οnclick="showmsg(event);">test</div>

兼容方法

function showmsg(event){
	var evt = window.event||event;
	var ele = evt.target||evt.srcElement;//触发事件的元素对象
}
<div οnclick="showmsg(event);">test</div>

获取时间类型：Evt.type

获取按键值：1. Evt.keycode

event常用属性参见（D:\TecSty\笔记\JS\JS2的第九页）

三、js的3中对话框

1、alert 警告框

2、确认框——window.confirm

var t = window.confirm("你愿意嫁给我吗?");//返回值是true或者false
if(t){
	alert("我愿意！然后害羞！")
}else{
	alert("滚！！！")
}

3、询问框

var v = window.prompt("你几岁","13");//返回值是输入的内容

四、常见内置对象

Date、Math、String 常用方法见(D:\TecSty\笔记\JS\JS2 P16)

五、浏览器对象

1、结构图

2、window对象

1)window.open(URL,windowName,parameterList)：open方法创建一个新的浏览器窗口，并在新窗口中载入一个指定的URL地址

window.open("http://www.163.com", "newwindow", "height=600, width=400, left=300,top=300, toolbar =0,menubar=0, scrollbars=no, resizable=0, location=1, status =no");

2) window.Navigater

使用navigater的userAgent对象可以获得客户端浏览器的信息

3）window.localtion

使用location的href对象可以设置进行超链接

window.location.href="http://www.baidu.com"

4）window.history

使用history的go对象可以实现页面的前进和后退

		<a href="javascript:void(0);" οnclick="javascript:history.go(-1);">后退一个</a>
		<a href="javascript:void(0);" οnclick="javascript:history.go(1);">前进一个</a>

5）setTimeout和clearTimeout

setTimeout(code: String, func: Function,delay: String, args: Array) : Number

用途：Specifies a delay for calling a function or evaluating an expression.

string 指定调用的函数或者表达式

function指定调用的函数或者表达式

delay：指定延误的时间，以毫秒为单位

number：返回本次setTimeout的id好

clearTimeout 用于取消setTimeOut，参数是setTimeout的返回值

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<title>Untitled Document</title>
		<script type="text/javascript">
			var count = 6;
			function showmsg(a,b){
				var ele  = document.getElementById("divid");
				ele.innerHTML=(--count);
				if(count>0){
				test();
				}
			}
			var tid = 0;
			function test(){
				tid = window.setTimeout(function(){
					showmsg(123,345);
				},1000);//2个参数
			}
			function stoptest(){
				window.clearTimeout(tid);
			}
		</script>
	</head>
	<body>
		<input type="button" value="test" οnclick="test();">
		<input type="button" value="stoptest" οnclick="stoptest();">
		<div id="divid">6</div>
	</body>
</html>

6）setInterval 和clearTimeInterval

用法与上面相同，作用是隔一段时间调用函数

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<input type="button" value="开始" οnclick="begin()">
		<div id="xianshi">6</div>
	</body>
	<script type="text/javascript">
		var count = 6;
		function showtime()
		{
			var ele = document.getElementById("xianshi");
			count = count-1;
			ele.innerHTML=(count);
		}

			function showmsg(a,b){
				var ele  = document.getElementById("xianshi");
				ele.innerHTML=(--count);
				if(count==0){
			 		window.clearInterval(gid);
				}
				
			}
		function begin()
		{
			window.setInterval(showtime,1000);
		}
	</script>
</html>

六、dom模型

1.介绍

DOM模型的全称是：Document Object Model, 即：文档对象模型。它定义了操作文档对象的接口。} WEB页面的HTML文档，document就是根节点，其它的子对象就是子结点。

在ajax中，DOM模型其实是最核心的结构，是所有ajax开发的基础架构．如果没有DOM模型，就没有办法在客户端改变页面的内容，所有的局部刷新，异步请求也就无从实现。熟练掌握DOM模型的相关技术，才算真正掌握了ajax开发精髓。

2.浏览器加载dom的过程

（1）下载源代码

（2）通过页面源代码加载相关内容到内存，也就是根据HTML源码在内存中构建相关DOM对象。

（3）根据DOM对象的相关属性，来进行显示。

3、节点的概念

在DOM模型中，整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容。

dom中节点分为3类：元素结点、文本结点和属性结点。– 文本节点和属性结点都看作元素结点的子结点

我们一般所说的结点指的就是元素结点。

4、获取节点方式

1）document.getElementById()引用指定id的结点，如果有相同的id则返回第一个

2）document.getElementsByTagName(“a”) ◦ 将所有<a>元素结点放到一个数组中返回。

3）document.getElementsByName(“abc”)，将所有name属性为”abc”的元素结点放到一个数组中返回。

4）引用子结点（使用childNodes）

每个结点都有一个childNodes集合属性，类型是数组对象，表示该结点的所有子结点的集合。这些子结点按照它在文档中出现的顺序排列，因此可以通过索引来依次访问各个子结点。

ps：这里要注意火狐与ie的区别，火狐会将换行当做文件子节点，而ie则会忽略换行

5）使用firstChild, lastChild 来获取子节点

6）使用parentNode获取父节点

7）使用nextSibling获取下一个兄弟节点，使用previousSibling获取前一个兄弟节点

5、节点属性

nodeName属性：元素结点返回结点类型(即，标记名称)，属性结点返回是姓名字，文本节点返回"#text".

nodeType属性：元素节点返回1，属性节点返回2，文本节点返回3

nodeValue属性：元素节点返回null, 属性节点返回属性值, 文本结点返回文本值。

6、处理属性节点

元素结点.属性名称（可以读写属性值）

使用setAttritbute(), getAttribute()添加和设置属性

7、处理文本节点

要获取一个结点内的文本，一般使用innerHTML属性

function testInnerHTML(){
                var dd = document.getElementById("div3");
                dd.innerHTML = "<b>奥运会马上要开了！<b><h1>什么时候啊？</h1><h2>是8.8号</h2>";
}

8、改变文档层次结构

（1）document.createElement方法创建元素结点。

var divElement = document.createElement(“div")

（2）使用appendChild方法添加结点，将节点添加到最后面

parentNode.appendChild(childElement);

（3）使用insertBefore方法插入子结点

parentNode.insertBefore(newNode, beforeNode)

（4）使用replaceChild方法取代子结点

parentNode.replaceChild(newNode, oldNode)//oldNode必须是已经存在的，不然会发生异常。

（5）使用removeChild方法删除子结点

parentNode.removeChild(childNode);

(6)克隆一个节点cloneNode();传参数true是深度克隆，false是浅度克隆

下拉列表和表格不能用这样的DOM方法，而要用DHTML接口中的方法。

9、js操作css

ele.style.css属性=值（即可）