JS基础学习笔记
2016-11-25 16:18
375 查看
说明：这篇文档是自己在暑期自学JS编程时做的文档笔记，现在上传上来方便以后查看
积少成多，全靠自觉
JS基础学习
直接输出document.write("");警告（消息对话框）
alert("");确认（消息对话框）
var mymessage = confirm(“这是确认框显示内容”);
if(mymessage == true){
document.write(“你点击了确认”);
}else{
document.write(“你点击了取消”);
}
提问（消息对话框）
prompt 弹出消息对话框，通常用户询问一些需要交互的消息。弹出消息对话框（包含一个确认按钮，取消按钮与一个文本输入框）
prompt(str1,str2);
参数说明：
str1:要先是在消息对话框中的文本，不可修改
str2:文本框中的内容，可以修改
返回值:
1.点击确定按钮，文本框中的内容将作为函数返回值
2.点击取消按钮，将返回null
<script type="text/javascript">
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("请输入你的成绩");
if(score >= 90){
document.write("优秀");
}else if(score >= 80 && score <90 ){
document.write("良好");
}else if("score >= 70 && score <80"){
document.wirte("中等");
}else if(score >= 60 &&score <70){
document.write("及格")
}
}
</script>打开新窗口（window.open）
window.open([URL], [窗口名称], [参数字符串])
<script type="text/javascript"> window.open('http:// www.imooc.com','_blank','width=300,height=200,menubar=n o,toolbar=no, status=no,scrollbars=yes')
</script>*关闭窗口（window.close）
var mywin=window.open('http:/www.imooc.com'); //将新打的窗口对象，存储在mywin中
mywin.close();js demo练习
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openWindow(){
// 新窗口打开时 弹出确认框，是否打开
var mymessage = confirm("是否打开");
if(mymessage == true){
var path = prompt("请输入想要打开的网址","http://www.imooc.com");
if(path="http://www.imooc.com"){
window.open("path",'_blank','width=400,height=500,menubar=null,toolbar=null');
}
}
// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
}
</script>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>通过ID获取元素
<body>
<P id="test">js_test</p>
</body>
<script type="text/javascript">
var mychar = document.getElementById("test");
document.write("结果："+mychar);
</script>结果:null或[object HTMLParagraphElement]
innerHTML 属性
Object.innerHTML1.Object是获取的元素对象，如通过document.getElmentById(“ID”)获取的元素。
2.注意书写innerHTML大小写区分
var mychar = document.getElementById("con") ;
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML = "New text!"; //修改P元素
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容改变HTML样式
Object.style.property = new style;Object是获取的元素对象。如通过document.getElementbyId(“id”)
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor="blue";
mychar.style.height="100px"
mychar.style.width="10p"
</script>显示和隐藏（display属性）
Object.style.display = valueObject是获取的元素对象。如通过document.getelmmentbyId(“id”)
value取值：
none：隐藏元素
block:显示元素
练习demo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display = "none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display = "block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>控制类名
Object.className = classname获取元素的class 属性
为网页内的某个元素指定一个css样式来更改该元素的外观
demo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px
4000
;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two"
}
</script>
</body>
</html>demo”改变颜色”、”改变宽高”、”隐藏内容”、”显示内容”、”取消设置
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick = "setColor()">
<input type="button" value="改变宽高" onclick = "setWid_Hei()">
<input type="button" value="隐藏内容" onclick = "setContent_none()">
<input type="button" value="显示内容" onclick = "setContent_block()">
<input type="button" value="取消设置" onclick = "setCancel()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
function setColor(){
var color = document.getElementById("txt");
color.style.color="#ffffff";
color.style.background="#000000";
}
//定义"改变宽高"的函数
function setWid_Hei(){
var wid_hei = document.getElementById("txt");
wid_hei.style.width="300px";
wid_hei.style.height="500px";
}
//定义"隐藏内容"的函数
function setContent_none(){
var content = document.getElementById("txt");
content.style.display="none";
}
//定义"显示内容"的函数
function setContent_block(){
var content = document.getElementById("txt");
content.style.display="block";
}
//定义"取消设置"的函数
function setCancel(){
var mychar = document.getElementById("txt");
var message = confirm("是否取消设置");
if(message ==true){
mychar.style.cssText="none";
}
}
</script>
</body>
</html>js数组
一维数组
<script type="text/javascript">
var myarr = new Array();
myarr[0] = 80;
myarr[1] = 60;
myarr[2] = 99;
document.write("第一个人的成绩是:"+myarr[0]);
document.write("第二个人的成绩是:"+myarr[1]);
document.write("第三个人的成绩是:"+myarr[2]);
</script>
var mynum=new Array(65,90,88,98); //数组赋值的第二种写法二维数组
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}JS事件
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。onclick: 鼠标点击事件
onmouseover:鼠标经过事件
onmouseout:鼠标移开事件
onchange:文本框内容改变事件
onselect:文本框内容被选中事件
onfocus:光标聚集
onblur:光标离开
onload:网页导入
onunload:关闭网页
鼠标单击事件( onclick ）
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。鼠标经过事件（onmouseover）
鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。鼠标移开事件（onmouseout）
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。光标聚焦事件（onfocus）
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。失焦事件( onblur）
onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序内容选中事件（onselect）
选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。文本框内容改变事件（onchange）
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。加载事件（onload）
事件会在页面加载完成后，立即发生，同时执行被调用的程序。加载页面时，触发onload事件，事件写在标签内。
此节的加载页面，可理解为打开一个新页面时。
卸载事件（onunload）
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。JS计算器demo
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
//获取第一个输入框的值
//获取第二个输入框的值
//获取选择框的值
//获取通过下拉框来选择的值来改变加减乘除的运算法则
//设置结果输入框的值
var txt1 = parseInt(document.getElementById("txt1").value);
var txt2 = parseInt(document.getElementById("txt2").value);
var select = document.getElementById("select").value;
var result;
switch(select){
case '+':
result = txt1 + txt2;
break;
case '-':
result = txt1 - txt2;
break;
case '*':
result = txt1 * txt2;
break;
case '/':
result = txt1 / txt2;
break;
}
document.getElementById("fruit").value=result;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()" /> <!--通过 = 按钮来调用创建的函数，得到结果-->
<input type='text' id='fruit' />
</body>
</html>JS对象
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。* 对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：
例如： var objectName =new Array();//使用new关键字定义对象 或者 var objectName =[];
访问对象属性的语法:
objectName.propertyName
如使用 Array 对象的 length 属性来获得数组的长度：
var myarray=new Array(6);//定义数组对象 var myl=myarray.length;//访问数组长度length属性
访问对象的语法:
objectName.methodName()
如使用string 对象的 toUpperCase() 方法来将文本转换为大写
var mystr="Hello world!";//创建一个字符串 var request=mystr.toUpperCase(); //使用字符串对象方法
Date日期对象
定义一个事件对象：var Udate = new Date();
使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)
自定义初始值：
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日Date对象中处理时间和日期的常用方法：
get/setDate()： 返回/设置日期
get/setFullYear()： 返回/设置年份，用4位数表示
get/setYear()： 返回/设置年份
get/setMonth()： 返回/设置月份
get/setHours()： 返回/设置小时，24小时制
get/setMinutes()： 返回/设置分钟数
get/setSeconds()： 返回/设置秒钟数
get/setTime()： 返回/设置时间（毫秒为单位）
WebView中 js的alert,confirm,windows.open不起作用原因
采用WebView实现安卓手机OA时，OA系统中有js的alert、confirm、window.open()不起作用。要点：重载WebChromeClient类；实现alert对应的onJsAlert，confirm对应的onJsConfirm，window.open对应的onCreateWindow；setSupportMultipleWindows支持弹出窗口；setWebViewClient支持在webview上打开连接。
使用webView.setWebChromeClient(new WebChromeClient())
当webView.setWebChromeClient(new WebChromeClient())后，默认已实现alert和confirm方法。但是提示窗口标题有带url，而且window.open没有反应。要自定义alert和confirm窗口和实现window.open需要重载WebChromeClient。
参考webviewtest案例
引入JS文件的写法
若母文件在根目录下，则应这样写：<script type="text/javascript" src="JS/login.js"></script> 这个时候下面的两种写法是不正确的： <script type="text/javascript" src="/JS/login.js"></script> <script type="text/javascript" src="../JS/login.js"></script>
若母文件在根目录下的一个叫login的文件夹下，则应这样写：
<script type="text/javascript" src="../JS/login.js"></script> 这个时候下面的两种写法是不正确的： <script type="text/javascript" src="/JS/login.js"></script> <script type="text/javascript" src="JS/login.js"></script> 同样对CSS文件的引用也是这样的。
返回星期
<script type="text/javascript">
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write("今天是：" + weekday[mydate.getDay()]);
</script>日期对象
<script type="text/javascript">
var mydate=new Date();
document.write("当前时间："+mydate+"<br>");
mydate.setTime( mydate.getTime() + 2* 60 * 60 * 1000);
document.write("推迟二小时时间：" + mydate);
</script>String字符串对象
定义一个字符串并赋值var mystr = "I love JavaScript";
访问字符串对象的属性
var mystr = "Hello world"; var myl = mystr.length;
访问字符串对象的方法
var mystr = "hello world"; var mynum = mtstr.toUpperCase();
toUpperCase():将字符串小写字母转换为大写
toLowerCase():将字符串大写字母转换为小写
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
stringObject.indexOf(substring, startpos)
* 参数说明
* substring:规定检索的字符串值
* startpos:可选的整数参数。规定在字符串中开始检索的位置。它的合法值取值时0~string.length-1。如果省略该参数，则将从字符串的首字符开始检索。
字符串分割split()
stringObject.split(separator,limit)
* 参数说明
* separator:从该参数指定的地方分割stringObject
* limit:分割的次数，如果设置该参数，返回的字串不会多于这个参数指定的数组，如果无此参数为不限制次数
注意：如果把空字符串(“”)用作separator,那么stringObject中的每个字符都会被分割
*例：使用制定符号分割字符串
var mystr = "www.baidu.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".",2)+"<br>";)提取字符串substring()
substring()方法用于提取字符串中介于两个指定下标之间的字符1546c
stringObject.substring(starPos,stopPos)
参数说明：
startPos:一个非负的整数，开始位置
stopPos:一个非负的整数，结束位置，如果省略该参数，返回的字串会一直到字符串对象的结尾
例子： mystr.substring(6,11);
提取自定数目的字符substr()
substr()方法从字符串中提取从startPos位置开始的指定数目的字符串语法 stringObject.substr(startPos,length);
参数说明：
startPos:要提取的字串的起始位置，必须是数值
length:提取字符串的长度。如果省略，返回从stringObject的开始位置startPos到stringObject的结尾的字符
Math对象
Math对象，提供对数据的数学计算。Math对象时一个固有的对象，无需创建它，直接把Math作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别
Math对象属性
E ：返回算数常量e,即自然对数的底数（约等于2.718）
LN2：返回2的自然对数（约等于0.693）
LN10：返回10的自然对数（约等于2.302）
LOG2E:返回以2为底的e的对数(约等于1.442)
LOG10E:返回以10为底的对数
PI:返回圆周率(约等于3.14159)
SQRT1_2:返回2的平方根的倒数(约等于0.707)
SQRT2:返回2的平方根
Math对象方法
abs(x): 返回数的绝对值
acos(x):返回数的反余弦值
asin(x):返回数的反正弦值
atan(x):返回数字的反正切值
atan2(y,x):返回由x轴到点(x,y)的角度（以弧度为单位）
ceil(x):对数进行上舍入
cos(x):返回数的余弦值
exp(x):返回e的指数
floor(x):对数进行下舍入
log(x):返回数的自然对数(底为e)
max(x,y):返回x和y中的最高值
min(x,y):返回x和y中的最低值
pow(x,y):返回x的y次幂
random():返回0~1的随机数
round(x):把数四舍五入为最接近的整数
sin(x):返回数的正弦值
sqrt(x):返回数的平方根
tan(x):返回角正切
toSource:返回该对象的源代码
valueOf():返回Math对象的原始值
四舍五入round()
Math.round(x):x必须是数字
返回与 x 最接近的整数。
随机数 random()
Math.random();
例子：
<script type="text/javascript"> document.write(Math.round((Math.random()*10))+"<br/>"); </script>
Array 数组对象
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的数组属性
length用法：<数组对象>.length；
返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
数组方法
concat():连接两个或更多的数组，并返回结果join():把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分割。
pop():删除并返回数组的最后一个元素
push():向数组的末尾添加一个或更多元素，并返回新的长度
reverse():颠倒数组中元素的顺序
shift():删除并返回数组的第一个元素
slice():从某个已有的数组返回选定的元素
sort():对数组的元素进行排序
splice():删除元素，并向数组添加新元素
toSource():返回该对象的源代码
toString():把数组转换为字符串，并返回结果
toLocaleString:把数组转换为本地数组，并返回结果
unshift():向数组的开头添加一个或更多元素，并返回新的长度
valueOf:返回数组对象的原始值
数组连接concat()
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
arrayObject.concat(array1,array2,...,arrayN)
demo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array对象 </title>
<script type="text/javascript">
var myarr1= new Array("010")
var myarr2= new Array("-","84697581");
var myarr3 = new Array();
document.write(myarr1.concat(1,2,"")+"<br/>");
var myarr4 = myarr3.concat(myarr1,myarr2)
document.write(myarr4+"<br/>");
document.write(myarr3.concat(myarr1,myarr2));
</script>
</head>
<body>
</body>
</html>指定分隔符连接数组元素join()
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arrayObject.join(分隔符)
separator:指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符
<script type="text/javascript">
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join());
</script>
<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join("."));
</script>颠倒数组元素顺序reverse()
reverse() 方法用于颠倒数组中元素的顺序。
arrayObject.reverse()
注意：该方法会改变原来的数组，而不会创建新的数组。
倒序输出
<script type="text/javascript"> var myarr = new Array(3) myarr[0] = "1" myarr[1] = "2" myarr[2] = "3" document.write(myarr + "<br />") document.write(myarr.reverse()) </script>
选定元素slice()
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)
1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
start:
正数，按照数组顺序选取。
负数，它规定从数组尾部开始算起的位置，-1代表倒数第一位
数组排序sort()
sort()方法使数组中的元素按照一定的顺序排列。
arrayObject.sort(方法函数)
注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。
例子、
<script type="text/javascript">
function sortNum(a,b) {
return b - a;
//升序：a - b 降序 b-a
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum));
</script>demo
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>
<script type="text/javascript">
//通过javascript的日期对象来得到当前的日期，并输出。
var myDate = new Date();
var weekDay = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var myYear = myDate.getFullYear()+"年";
var myMonth = mydate.getMonth()+1+"月";
var myDate = mydate.getDate()+"日";
var myWeek= weekDay[mydate.getDay()];
document.write(myYear+myMonth+myDate+myWeek+"<br/>");
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
//从数组中将成绩撮出来，然后求和取整，并输出。
var scores = scoreStr.split(";");
var sum =0;
for(var i=0;i<scores.length;i++){
var temp= scores[i].split(":")[1];
sum = sum +parseInt(temp);
}
document.write("班级的总分为：");
document.write(Math.round(sum/scores.length));
</script>
</head>
<body>
</body>
</html>windows对象
window对象是BOM的核心，window对象指当前的浏览器窗口。window对象方法
alert():显示带有一段消息和一个确认框的警告框prompt():显示可提示用户输入的对话框
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
open():打开一个新的浏览器窗口或查找一个已命名的窗口
close():关闭浏览器窗口
focus:把键盘焦点从顶层窗口移开。
moveBy():可相对窗口的当前坐标把它移动指定的像素
moveTo():把窗口的左上角移动到一个指定的坐标
resizeBy():可相对窗口的当前坐标把它移动指定
resizeTo():把窗口的大小调整到指定的宽度和高度
scrollBy:按照指定的像素值来滚动内容
scrollTo：把内容滚动到指定的坐标
setlnterval:每隔指定的时间执行代码
setTimeout:在指定的延迟时间之后来执行代码
clearlnterval:取消setinterval()的设置
clearTimeout():取消setTimeout()的设置
JavaScript计时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。计时器类型：
* 一次性计时器：仅在指定的延迟时间之后触发一次
* 间隔性触发计时器：每隔一定的
计时器方法：
* setTimeout():指定的延迟时间之后来执行代码
* clearTimeout():取消setTimeout()设置
* setlnterval():每隔指定的时间执行代码
* clearlnterval():取消setlnterval()设置
计时器setInterval()
在执行时,从载入页面后每隔指定的时间执行代码。
setInterval(代码，交互时间);
参数说明：
代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
setInterval计时器（demo）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
var attime;
function clock(){
var time=new Date();
var myHour = time.getHours();
var myMinutes = time.getMinutes();
var mySeconds = time.getSeconds();
attime="现在时间是"+myHour+":"+myMinutes+":"+mySeconds ;
document.getElementById("clock").value = attime;
}
var int=setInterval(clock, 100); //每隔100毫秒调用clock()函数
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>取消计时器clearInterval()
clearInterval(id_of_setInterval)
var i = setInterval("clock()",100);
<input type="button" value="Stop" onclick="clearInterval(i)"/>计时器setTimeout()
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。setTimeout(代码,延迟时间);
参数说明：
要调用的函数或要执行的代码串。
延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
demo（setTimeout计时器）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
//setTimeout("alert('Hello!')",3000);//打开网页3秒后，在弹出一个提示框
/*当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。*/
function start(){
var t = setTimeout("alert('Hello!')",5000);//打开网页3秒后，在弹出一个提示框
}
/*要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。
在下面的代码，当按钮被点击后，输入域便从0开始计数。*/
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="start" onclick="start()"/>
<input type="button" value="startCount" onclick="startCount()"/>
</form>
</body>
</html>ClearTimeout()
setTimeout()和clearTimeout()一起使用，停止计时器。clearTimeout(id_of_setTimeout)
demo:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
</head>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i)
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick="startCount()"/>
<input type="button" value="Stop" onclick="stopCount()" />
</form>
</body>
</html>History对象
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：
window.history.[属性|方法]
注意：
window可以省略。
History对象属性
length:返回
History对象方法
back():加载history列表中的前一个URL
forward():加载history列表中的下一个URL
go():加载history列表中的某个具体的页面
History-demo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
//window.history.back();
window.history.go(-1);
}
function GoForward() {
// window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:
<br />
<a href="#target1">第一个锚点</a>
<a name="target1"></a>
<br />
<a href="#target2">第二个锚点</a>
<a name="target2"></a>
<br /><br />
使用下面按钮，实现返回前或下一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack()" />
<input type="button" value="返回下一个页面" onclick="GoForward()" />
</form>
</body>
</html>Location对象
location用于获取或设置窗体的URL，并且可以用于解析URLwindow.location.[属性|方法]
demo：
<script type="text/javascript"> document.write(location.host+"<br/>"); document.write(location.hostname+"<br/>"); document.write(location.href+"<br/>"); document.write(location.pathname+"<br/>"); document.write(location.protocol+"<br/>"); </script>
location对象属性：
* hash:设置或返回从井号（#）开始的URL（锚）
* host:设置或返回主机名和当前URL的端口号
* hostname:设置或返回当前URL的主机名
* href:设置或返回完整的URL
* pathname:设置或返回当前URL的路径部分
* port:设置或返回当前URL的端口号
* protocol:设置或返回当前URL的协议
* search:设置或返回从问号（？）开始的URL（查询部分）
location对象方法
* assign():加载新的文档
* reload():重新加载当前文档
* replace():用新的文档替换当前文档
Navigator对象
Navigator对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本对象属性：
appCodeName:浏览器代码名的字符串表示
appName:返回浏览器的名称
appVersion:返回浏览器平台和版本信息
platform:返回运行浏览器的操作系统平台
userAgent:返回由客户机发送服务器的user-agent头部的值
Navigator-demo
<script type="text/javascript">
var appcodename = navigator.appCodeName;
var appname = navigator.appName;
var appversion = navigator.appVersion;
var platform = navigator.platform;
var useragent = navigator.userAgent;
document.write("浏览器代码名的字符串:"+appcodename+"<br/>");
document.write("浏览器的名称:"+appname+"<br/><br/>");
document.write("浏览器平台和版本信息:"+appversion+"<br/><br/>");
document.write("运行浏览器的操作系统平台:"+platform+"<br/><br/>");
document.write("客户机发送服务器的user-agent头部的值:"+useragent+"<br/>");
</script>screen对象
screen对象用于获取用户的屏幕信息window.screen.属性
对象属性：
availHeight:窗口可以使用的屏幕高度，单位像素
acailWidth:窗口可以使用的屏幕宽度，单位像素
colorDepth:用户浏览器表示的颜色位数，通常为32位（每像素的位数）
pixekDepth：用户浏览器表示的颜色位数，通常为32位（每像素的位数）（IE不支持此属性）
height:屏幕的高度，单位像素
width:屏幕的宽度，单位像素
demo：
//屏幕的高和宽度
<script type="text/javascript">
var width = screen.width;
var height = screen.height;
document.write( "屏幕宽度："+width+"<br/>");
document.write( "屏幕高度："+height);
</script>
//屏幕可用高和宽度
<script type="text/javascript">
var availwidth = screen.availWidth;
var availheight = screen.availHeight;
document.write("可用宽度：" +availwidth+"<br/>");
document.write("可用高度：" +availheight);
</script>demo(制作一个跳转提示页面：)
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
<script type="text/javascript">
var num = 5;
function timeout(){
num--;
var second = document.getElementById("second");
second.innerHTML = num;
if(num == 0){
window.location.href="http://www.baidu.com";
}
//setTimeout(timeout,1000); 方法一:两个位置
}
//setTimeout(timeout,1000);
setInterval("timeout()",1000); //方法二
</script>
</head>
<body>
<!--先编写好网页布局-->
<h2>操作成功</h2>
<span id="second">5</span>
<span>秒后回到主页
<a href="http://www.baidu.com">返回</a>
</span>
</body>
</html>DOM
document.getElementById(“”);
* 通过元素的 id 属性查询元素
document.getElementｓByName(name);
* 通过元素的 name 属性查询元素
注意:
因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
getElementsByTagName()
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。* 在html中获取key的节点
demo
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
</head>
<body>
<form name="Input">
<table align="center" width="500px" height="50%" border="1">
<tr>
<td align="center" width="100px">
学号:
</td>
<td align="center" width="300px">
<input type="text" id=userid name="user" onblur="validate();">
<div id=usermsg></div>
</td>
</tr>
<tr>
<td align="center" width="100px">
姓名:
</td>
<td align="center">
<input type="text" name="name">
</td>
</tr>
<tr>
<td align="center" width="%45">
性别:
</td>
<td align="center">
<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女
</td>
</tr>
<tr>
<td align="center" width="30%">
年龄:
</td>
<td align="center" width="300px">
<input type="text" name="age">
</td>
</tr>
<tr>
<td align="center" width="100px">
地址:
</td>
<td align="center" width="300px">
<input type="text" name="addr">
</td>
</tr>
</table>
</form>
<h1 id="myHead" onclick="getValue()">
看看三种获取节点的方法?
</h1>
<p>
点击标题弹出它的值。
</p>
<input type="button" onclick="getElements()"
value="看看name为sex的节点有几个?" />
<Br>
<input type="button" onclick="getTagElements()"
value="看看标签名为input的节点有几个?" />
<script type="text/javascript">
function getValue()
{
var myH = document.getElementById("myHead");
alert(myH.innerHTML);
}
function getElements()
{
var myS = document.getElementsByName("sex");
alert(myS.length);
}
function getTagElements()
{
var myI = document.getElementsByTagName("input");
alert(myI.length);
}
</script>
</body>
</html>getElementById():通过指定id获得元素 一个
getElementsByName():通过元素名称name属性获得元素 一组
getElementsByTagName():通过标签名称获得元素 一组
demo：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
// 任务1
for(var i = 0; i<hobby.length;i++){
if(hobby[i].type == "checkbox"){
hobby[i].checked = true;
}
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
// 任务2
for(var i = 0; i<hobby.length; i++){
if(hobby[i].type == "checkbox"){
hobby[i].checked = false;
}
}
}
function checkone(){
var j = document.getElementById("wb").value;
var hobby = document.getElementsByName("hobby");
var number = j-1;
//取消之前选中的状态
for(i=0;i<hobby.length;i++){
hobby[i].checked=false;
}
if(!isNaN(j)&&parseInt(j)<7&&parseInt(j)>0){
hobby[number].checked = true;
}
// 任务3
}
</script>
</body>
</html>getAttribute()方法
通过元素节点的属性名称获取属性的值。 elementNode.getAttribute(name)
elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字
demo：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li >CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li"); //声明一个变量获得所有<li>标签
for (var i=0; i< con.length;i++){ //for循环 声明变量i数量 i的数量小于<li>标签的总数 循环+1
var text = con[i].getAttribute("title"); //获得到的数量为I递增的所有<title>标签的值
if(text!=null){ //如果这个值不是空的话
document.write(text+"<br>"); //那么就会打出来啦
}
}
</script>
</body>
</html>setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。elementNode.setAttribute(name,value)
说明：
name: 要设置的属性名。
value: 要设置的属性值。
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
节点属性
在文档对象模型（DOM）中，每个节点都是一个对象，DOM节点有三个重要的属性:1. nodeName:节点的名称
2. nodeValue:节点的值
3. nodeType:节点的类型
节点属性:
Attributes 存储节点的属性列表(只读)
childNodes 存储节点的子节点列表(只读)
dataType 返回此节点的数据类型
Definition 以DTD或XML模式给出的节点的定义(只读)
Doctype 指定文档类型节点(只读)
documentElement 返回文档的根元素(可读写)
firstChild 返回当前节点的第一个子节点(只读)
Implementation 返回XMLDOMImplementation对象
lastChild 返回当前节点最后一个子节点(只读)
nextSibling 返回当前节点的下一个兄弟节点(只读)
nodeName 返回节点的名字(只读)
nodeType 返回节点的类型(只读)
nodeTypedValue 存储节点值(可读写)
nodeValue 返回节点的文本(可读写)
ownerDocument 返回包含此节点的根文档(只读)
parentNode 返回父节点(只读)
Parsed 返回此节点及其子节点是否已经被解析(只读)
Prefix 返回名称空间前缀(只读)
preserveWhiteSpace 指定是否保留空白(可读写)
previousSibling 返回此节点的前一个兄弟节点(只读)
Text 返回此节点及其后代的文本内容(可读写)
url 返回最近载入的XML文档的URL(只读)
Xml 返回节点及其后代的XML表示(只读)
nextSibling 返回相领的节点
节点方法:
方法：
appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
cloneNode 返回当前节点的拷贝
createAttribute 创建新的属性
createCDATASection 创建包括给定数据的CDATA段
createComment 创建一个注释节点
createDocumentFragment 创建DocumentFragment对象
createElement 创建一个元素节点
createEntityReference 创建EntityReference对象
createNode 创建给定类型,名字和命名空间的节点
createPorcessingInstruction 创建操作指令节点
createTextNode 创建包括给定数据的文本节点
getElementsByTagName 返回指定名字的元素集合
hasChildNodes 返回当前节点是否有子节点
insertBefore 在指定节点前插入子节点
Load 导入指定位置的XML文档
loadXML 导入指定字符串的XML文档
removeChild 从子结点列表中删除指定的子节点
replaceChild 从子节点列表中替换指定的子节点
Save 把XML文件存到指定节点
selectNodes 对节点进行指定的匹配,并返回匹配节点列表
selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
transformNode 使用指定的样式表对节点及其后代进行转换
transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看做是一个数组，也具有length属性。elementNode.childNodes
访问子节点的第一和最后项
firstChild属性返回childNode数组的第一个子节点。如果选定的节点没有子节点，则该属性返回NULLnode.firstChild
lastChild属性返回childNodes数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回NULL
node.lastChild
访问父节点parentNode
elementNode.parentNode
访问兄弟节点
nextSibling属性可返回某个节点之后紧跟的节点（处于同一树层级中）nodeObject.nextSibling
previousSibling属性可返回某个节点之前紧跟的节点（处于同一树层级）
nodeObject.previouSibling
注意：两个属性获取的是节点。
demo：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
function get_previousSibling(n){
var x = n.previousSibling;
while(x && x.nodeType != 1){
x = x.previousSibling;
}
return x;
}
var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);
var y=get_nextSibling(x);
if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML);
}else{
document.write("<br>已经是最后一个节点");
}
document.write("<br/>")
var x2 = document.getElementsByTagName("li")[1];
document.write(x2.nodeName);
document.write(" = ");
document.write(x.innerHTML);
var y2 = get_previousSibling(x2);
if(y2 != null){
document.write("<br />nextsibling: ");
document.write(y2.nodeName);
document.write(" = ");
document.write(y2.innerHTML);
}
else{
document.write("<br>已经是最后一个节点");
}
</script>
</body>
</html>插入节点appendChild()
语法：appendChild(newnode)
参数：
newnode:指定追加的节点
demo：
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "test";
otest.appendChild(newnode);
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 快速学习 js 笔记一 dom 基础学习
- JavaScript学习笔记之一JS语言基础
- js面向对象学习笔记之七（函数 与 基础控制结构)
- node.js 基础学习笔记3 -http
- 【前端学习笔记】JS基础
- js基础知识相关学习笔记记录
- handlebars.js基础学习笔记
- 智能社JavaScript学习笔记——JS运动基础
- js基础学习笔记（六）
- 【前端学习笔记】JS学习基础
- D3.js学习笔记（六）——SVG基础图形和D3.js
- js基础学习笔记（五）
- JavaScript高级程序设计（第3版）学习笔记2 js基础语法
- js基础学习笔记（二）
- JS基础学习笔记（一）
- JS 学习笔记--JS中的事件对象基础
- js基础学习笔记（四）
- JavaScript学习笔记（一）——JS基础知识介绍
- node.js 基础学习笔记1
- 精通JavaScript开发课时20（JS事件基础）学习笔记