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.htmlfunctionMethod.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>
相关文章推荐
- JSP_003_jsp原理
- JS实现Html File控件赋值 【转】
- js折叠面板
- JSP_002_jsp和Servlet分工合作
- JavaScript 模块模式
- JavaScript实现点击按钮字体放大、缩小
- Javascript计算两个GPS坐标的距离
- PhantomJS:基于WebKit、开源的服务器端JavaScript API
- 解决纯js文件国际化的问题
- 多附件上传之动态添加input标签
- 理解js回收机制通俗易懂版
- js面向对象基础
- 基于Javascript实现返回顶部按钮
- bzoj 1015: [JSOI2008]星球大战starwar
- JavaScript实现斗地主游戏的思路
- javascript事件响应
- bzoj 1013: [JSOI2008]球形空间产生器sphere
- js/javascript call详解
- Js实现Map对象,set对象
- JSP_001_jsp入门