您的位置:首页 > Web前端 > JavaScript

JavaScript知识归纳(1)

2016-02-29 12:09 543 查看

Browser对象

一、Navigator:

Navigator对象包含有关浏览器的信息。

二、Window:

Window对象表示浏览器中打开的窗口。



window对象常用方法:

alert('信息'):消息框

prompt('提示信息',默认值):标准输入框

confirm():确认框

open():打开一个新窗口

close():关闭窗口

Form表单对象:

访问表单的方式:

document.forms

document.表单名字

Form表单属性:



form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="zhang" />
<input type="button" name="ok" value="保存1" onclick="a()"/>
</form>

<form name="form2" action="test1.html" method="get">
<input type="text" name="username" value="zhang2" />
<input type="button" name="ok2" value="保存2"/>
</form>

<input type="text" id="user" value="123">
</body>

<script language="JavaScript">
/**
//显示文本框里面的值
window.alert(window.document.getElementById("user").value);
//通过表单元素的id获取该元素对象
var user = window.document.getElementById("user");
for(var i = 0;i < 3;i ++){//循环遍历3次,通过消息框显示
window.alert(user);
}
*/

//---------------------访问表单的方式----------------------------------

//	document.forms

//	document.表单的名称
//	使用两种方式输出表单的action值(使用表单的名称,使用表单数组forms)
//第一种(使用表单数组forms)
//	window.alert(window.document.forms[0].action);
//第二种(使用表单的名称)
//	window.alert(window.document.form1.action);

//	alert(document.forms[1].action);
//	alert(document.form2.action);

//-------------练习:使用访问表单的方式,获取表单1中的method的值--------------------------------------------------------
alert(document.forms[0].method);
alert(document.form1.method);

</script>
</html>


JavaScript定义函数的几种方式:

参考链接:http://blog.sina.com.cn/s/blog_86e34ca8010139gj.html

functionMethod.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="zhang" />
<input type="button" name="ok" id="ok" value="保存1" />
</form>
</body>
<script language="JavaScript">
//JavaScript定义函数的三种方式
//方式一:正常方法
function print(msg){
alert("msg");
}

//方式二:构造函数方式定义JavaScript函数
var add = new Function("a","b","return a+b");
//调用上面使用构造函数方式定义JavaScript函数
alert(add(7,8));

//方式三:使用函数直接量的方式定义函数
var sum = function(a,b){
return a+b;
}
//调用使用函数直接量定义的函数
alert(sum(5,6));

//应用
document.getElementById("ok").onclick = function(){
alert("ok");
}

</script>
</html>
form2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
<form name="form1" action="" method="post">
<input type="text" name="username" value="zhang" />
<input type="button" name="ok" value="打印患者信息"   onclick="personprint()" />
<input type="button" name="ok" value="查询患者信息"  onclick="selectPerson()"/>
</form>
</body>

<script language="JavaScript">
//通过javascript方式访问printPerson.html和selectPerson.html两个页面
//打印患者信息
function personprint(){
//第一种
/**
* 定义和用法:
* href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL。
* 因此,我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容。
* 语法:
* location.href=URL
*/
//		location.href="printPerson.html";

//第二种
//获取表单对象
//		var form1 = document.form1;
//设置表单中action的值
//		form1.action="printPerson.html";
//提交表单
//		form1.submit();

}
//查询患者信息
function selectPerson(){
document.form1.action="selectPerson.html";
document.form1.submit();
}

</script>
</html>

DOM:

DOM :DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。

D:文档 – html 文档 或 xml 文档
O:对象 – document 对象的属性和方法
M:模型

DOM 是针对xml(html)的基于树的API。DOM树:节点(node)的层次。DOM 把一个文档 DOM定义了Node的接口以及许多种节点类型来表示XML表示为一棵家谱树(父,子,兄弟)节点的多个方面。

DOM的结构:



DOM结构分析:





节点

由结构图中我们可以看到,整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文本节点。
标签的属性是属性节点。
一切都是节点……

节点树

节点树的概念从图中一目了然,最上面的就是“树根”了。节点之间有父子关系,祖先与子孙关系,兄妹关系。这些关系从图中也很好看出来,直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……



查找元素节点:

Document对象方法:

getElementById() 返回对拥有指定 id 的第一个对象的引用。

寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null.

var oElement = document.getElementById ( sID )

该方法只能用于 document 对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="传智播客5周年_1" id="tid" onchange=""><input type="button" name="ok" value="保存1"/>
</form>
</body>
<script language="JavaScript">
//输出 <input type="text" name="username" value="传智播客5周年_1"  id="tid" >标签value属性的值
alert(document.getElementById("tid").value)
//输出 <input type="text" name="username" value="传智播客5周年_1"  id="tid" >标签type属性的值
alert(document.getElementById("tid").type)
</script>
</html>


getElementsByName() 返回带有指定名称的对象集合。

寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="传智播客5周年_1"  id="tid_1"  ><br>
<input type="text" name="tname" value="传智播客5周年_2"  id="tid_2"  ><br>
<input type="text" name="tname" value="传智播客5周年_3"  id="tid_3"  ><br>
<input type="button" name="ok" value="保存1" />
</form>
</body>

<script language="JavaScript">
//通过元素的name属性获取所有元素的引用  name="tname"
var tnames = document.getElementsByName("tname");
//测试该数据的长度
alert(tnames.length);
//遍历元素,输出所有value属性的值
for(var i = 0;i<tnames.length;i++){
var tname = tnames[i];
alert(tname.value);
}
//为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
for(var i = 0;i<tnames.length;i++){
var tname = tnames[i];
//onchange 事件会在域的内容改变时发生。 Event对象
tname.onchange = function(){
alert(this.value);
}
}
</script>
</html>
getElementsByTagName() 返回带有指定标签名的对象集合。

寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士" selected="selected">硕士^^^^^</option>
<option value="本科">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job">
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
</body>
<script language="JavaScript">
/**
*    <input type="text" name="tname" value="传智播客5周年_1"  id="tid_1"  ><br>
<input type="text" name="tname" value="传智播客5周年_2"  id="tid_2"  ><br>
<input type="text" name="tname" value="传智播客5周年_3"  id="tid_3"  ><br>
<input type="button" name="ok" value="保存1"/>
*/
//////////////////////////////////////////////////////////////////////////////////////////////
//获取所有的input元素,返回值是数组
var inputArr = document.getElementsByTagName("input");
//测试长度
alert(inputArr.length);
//遍历value的值
for (var i = 0; i < inputArr.length; i++) {
var inputValue = inputArr[i].value;
alert(inputValue);
}
///////////////////////////////////////////////////////////////////////////////////////////////
//输出type="text"中 value属性的值 不包含按钮(button)
for (var i = 0; i < inputArr.length; i++) {
var input = inputArr[i];
if ("text" == input.type) {
alert(input.value);
}
}

///////////////////////////////////////////////////////////////////////////////////////////////
/**
* <select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士" selected="selected">硕士^^^^^</option>
<option value="本科"  >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
*/
//输出所有下拉选 id="edu"中option标签中 value属性的值
var selectEdu = document.getElementById("edu");
var optionArr = selectEdu.getElementsByTagName("option");
for (var i = 0; i < optionArr.length; i++) {
var option = optionArr[i];
alert(option.value);
}

//////////////////////////////////////////////////////////////////////////////////////////////
/**
* <select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士" selected="selected">硕士^^^^^</option>
<option value="本科"  >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
* <select name="job" id="job" >
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
*/
//输出所有下拉选select的option标签中value的值
var optionArrs = document.getElementsByTagName("option");
for (var i = 0; i < optionArrs.length; i++) {
alert(optionArrs[i].value);
}

////////////////////////////////////////////////////////////////////////////////////////////
//输出选中的值
var edu = document.getElementById("edu");
var job = document.getElementById("job");
alert(edu.value);
alert(job.value);
</script>
</html>


查找是否存在子节点:

hasChildNodes()

该方法用来检查一个元素是否有子节点,返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

***文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job">
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
</body>
<script language="JavaScript">
////////////////////////////////////////////////////////////////////////////////////////////
/**
* <select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
*/
//查看id="edu"的节点是否含有子节点
alert(document.getElementById("edu").hasChildNodes());//true
//查看id="tid_1"的节点是否含有子节点
/**
* <input type="text" name="tname" value="传智播客5周年_1"  id="tid_1"  ><br>
*/
alert(document.getElementById("tid_1").hasChildNodes());//false
</script>
</html>

DOM属性:

nodeName:

文档里的每个节点都有以下属性。

nodeName:一个字符串,其内容是给定节点的名字。

var name = node.nodeName;

* 如果节点是元素节点,nodeName返回这个元素的名称

* 如果是属性节点,nodeName返回这个属性的名称

* 如果是文本节点,nodeName返回一个内容为#text 的字符串

注:nodeName 是一个只读属性

nodeType:

nodeType:返回一个整数,这个数值代表着给定节点的类型。

nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:

Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点

nodeType 是个只读属性

nodeValue:

nodeValue:返回给定节点的当前值(字符串)

如果给定节点是一个属性节点,返回值是这个属性的值。
如果给定节点是一个文本节点,返回值是这个文本节点的内容。
如果给定节点是一个元素节点,返回值是 null
nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,但可以为文本节点的 nodeValue 属性设置一个值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>

<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="传智播客5周年_1"  id="tid_1"  ><br>
<input type="text" name="tname" value="传智播客5周年_2"  id="tid_2"  ><br>
<input type="text" name="tname" value="传智播客5周年_3"  id="tid_3"  ><br>
<input type="button" name="ok" value="保存1"/>
</form>

<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>

<select name="job" id="job" >
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>

<p id="pid" name="8888">
明天上课
</p>

</body>

<script language="JavaScript">
////////////////////////////////////////////////////////////////////////////////////////////
/**<input type="text" name="tname" value="传智播客5周年_1"  id="tid_1"  ><br>*/
//元素节点  id="tid_1"  输出nodeName nodeType nodeValue
var input = document.getElementById("tid_1");
alert(input.nodeName);//INPUT
alert(input.nodeType);//1
alert(input.nodeValue);//null
///////////////////////////////////////////////////////////////////////////////////////////
//文本节点 id="pid"  输出nodeName nodeType nodeValue
/** <p id="pid" name="8888">
明天上课
</p>*/
var pid = document.getElementById("pid");
var first = pid.firstChild;
alert(first.nodeName);// #text
alert(first.nodeType);// 3
alert(first.nodeValue);// 明天上课

/////////////////////////////////////////////////////////////////////////////////////////
//属性节点  id="pid"   输出nodeName nodeType nodeValue
var pid = document.getElementById("pid");
var pidAttr = pid.getAttributeNode("id");
alert(pidAttr.nodeName);//id
alert(pidAttr.nodeType);//2
alert(pidAttr.nodeValue);//pid
//为什么说nodeValue是读写属性呢?
var pid = document.getElementById("pid");
alert(pid.firstChild.nodeValue);//明天上课
</script>
</html>

练习1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form><h1 id="h1">明天休息</h1>
</body>
<script language="JavaScript">
////////////////////////////////////////////////////////////////////////////////////////////
/*
* 文本节点  属性节点  元素节点
*/
/*
* 打印 ”明天休息”  (利用两种方法)
提示:使用(firstChild lastChild childNodes)
*/
/**
* <h1 id="h1">
明天休息
</h1>
*/
//方法一 利用firstchild  输出明天休息
var h1 = document.getElementById("h1");
alert(h1.firstChild.nodeValue);
alert(h1.lastChild.nodeValue);
//方法二childNodes表示父元素下的所有的子元素(数组)
var h1 = document.getElementById("h1");
var nodeList = h1.childNodes;
for (var i = 0; i < nodeList.length; i++) {
var node = nodeList[i];
alert(node.nodeValue);
}

alert(h1.childNodes[0].nodeValue);
</script>
</html>


练习2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job">
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
<ul>
<li id="bj" value="beijing">
北京
<p>
海淀
</p>
奥运
</li>
<li id="sh" value="shanghai">
上海
</li>
</ul>
</body>
<script language="JavaScript">
//打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue)
var bj = document.getElementById("bj");
var childNodes = bj.childNodes;
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
alert("nodeName:"+childNode.nodeName+",nodeType:"+childNode.nodeType+",nodeValue:"+childNode.nodeValue);
}
//第一个子节点
var firstNode = bj.firstChild;
alert("nodeName:" + firstNode.nodeName + ",nodeType:" + firstNode.nodeType + ",nodeValue:" + firstNode.nodeValue);
//	//第二个子节点
var secondNode = bj.childNodes[1];
alert("nodeName:" + secondNode.nodeName + ",nodeType:" + secondNode.nodeType + ",nodeValue:" + secondNode.nodeValue);
//	//最后一个子节点
var lastNode = bj.lastChild;
alert("nodeName:" + lastNode.nodeName + ",nodeType:" + lastNode.nodeType + ",nodeValue:" + lastNode.nodeValue);
//同时打印文本值  北京 海淀  奥运
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
alert("nodeValue:" + childNode.nodeValue);
}
</script>
</html>
练习3:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
</body>
<script language="JavaScript">
//获取select元素的引用
//输出所有select元素下的所有option元素中对应的文本内容
//例如:<option value="中专">中专^^</option>  输出--->中专^^
var edu = document.getElementById("edu");
var eduOptions = edu.getElementsByTagName("option");
for (var i = 0; i < eduOptions.length; i++) {
var eduOption = eduOptions[i];
//方法一:
alert(eduOption.firstChild.nodeValue);
//方法二:
alert(eduOption.text);
//方法三:
alert(eduOption.innerHTML);
}
</script>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: