JS学习笔记(一)
- document.getElementById 获取元素的方法一
语法：oElement = document .getElementById ( sID )
参数：sID――必选项。字符串 (String) 。
返回值：oElemen――对象 (Element) 。
说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。 如果无符合条件的对象，则返回 null 。
注意： document.getElementById(” “) 得到的是一个对象，用 alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才是具体的值！是第一个JS兼容性问题 document 对象属性
document.title //设置文档标题等价于HTML的标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.fileSize //文件大小，只读属性
document.cookie //设置和读出cookie对象方法
document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象link标签
作用1：定义文档与外部资源的关系
作用2：链接样式表
链接外部样式表实例：JS动态修改CSS样式
getElementById获取的对象obj，通过”.“ 修改样式（第一种操作属性的方法，第二种是[‘属性/字符串’], 或者[参数])，HTML里怎么写，JS里怎么写。但是有一个例外：className
也就是，div里id类名为class，函数里应该写obj.className=”“;另一个实例：用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：
第一步：在连接样式表的元素里定义一个id,例如
我定义的id是css。第二步：写一个js函数，代码如下：
<script type="text/javascript"> function change(a){ var css=document.getElementById("css"); if (a==1) css.setAttribute("href","1.css"); if (a==2) css.setAttribute("href","2.css"); } </script> 这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者
可以选择一个字体较大的样式表。这里需要注意的两点是：
在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
5.函数传参：定不下来的时候
实例（一个参数)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参</title>
<style> #div1 {width:200px; height:200px;background:#a8eec6;} </style>
<script> function changeColor(color){ var oDiv=document.getElementById('div1'); oDiv.style.background=color; } </script>
</head>
<body>
<input type="button" value="tored" onclick="changeColor('red')"/>
<input type="button" value="toblue" onclick="changeColor('blue')"/>
<input type="button" value="togreen" onclick="changeColor('green')"/>
<div id="div1">
文本区域
</div>
</body>
</html>两个参数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参</title>
<style> #div1 {width:200px; height:200px;background:#a8eec6;} </style>
<script> function setStyle(name,value) { var oDiv = document.getElementById('div1'); /oDiv.style.name="value";不能这么写，计算机不识别/ oDiv.style[name] = value; } </script>
</head>
<body>
<input type="button" value="toWidth" onclick="setStyle('width','400px')"/>
<input type="button" value="toHeight" onclick="setStyle('height','400px')"/>
<input type="button" value="toGreen" onclick="setStyle('background','green')"/>
<div id="div1">
文本区域
</div>
</body>
</html>6.关于样式优先级：
行间样式style>id#>class.>html标签
CSS样式可以有很多种选择器形式，它们的权重可以用四位数字 X X X X 来表示。
首先，HTML元素的内联样式权重最高，可以用 1 0 0 0 来表示；
其次，ID选择器的样式权重次之，可以用 0 1 0 0 来表示；
第三，类选择器、属性选择器、伪类选择器，可以用 0 0 1 0 来表示；
第四，HTML元素选择器、伪元素选择器权重最低，可以用 0 0 0 1 来表示；
第五，通配符选择器，权重完全为0，对权重无贡献，可以用 0 0 0 0 来表示。
7.function（）行为样式结构相分离
Web标准由一系列标准组合而成，其核心理念就是将网页的结构、样式和行为分离开来，所以它可以分为三大部分：结构标准、样式标准和行为标准。
结构标准包括XML标准、XHTML标准、HTML标准；样式标准主要是指CSS标准；行为标准主要包括DOM标准和ECMAScript标准。
一个符合标准的网页，标签中的标签名应该全部都是小写的，属性要加上引号，样式和行为不再夹杂在标签中，而应该分别单独存放在样式文件
和脚本文件中。理想状态下，网页源代码由三部分组成：.html文件、.css文件和.js文件。标签中混有样式和行为的写法是不推荐的。
常用到一个函数：window.onload是页面加载完成的时候才发生
a.在JS语句调用 ：
<script type="text/javascript"> function func(){……} window.onload=func; </script> b.同时调用多个函数 直接写到html的body标签里面,如：
<html>
<body onload="func1();func2();func3();">
</body>
</html> c.js调用多个函数,以下这种调用方式可以用于不太复杂的JS程序中，如果程序函数很多，逻辑比较复杂，可以考虑用第四种方式。
<script type="text/javascript"> function func1(){……} function func2(){……} function func3(){……} window.onload=function(){ func1(); func2(); func3(); } </script> d.JS自定义函数式多次调用
<script type="text/javascript"> function func1(){……} function func2(){……} function func3(){……} function addLoadEvent(func){ var oldonload=window.onload; if(typeof window.onload!="function"){ window.onload=func; } else{ window.onload=function(){ oldonload(); func();} } } addLoadEvent(func1); addLoadEvent(func2); addLoadEvent(func3); </script> 8.getElementsByTagName
<script> window.onload=function(){ var aDiv=document.getElementsByTagName('div'); aDiv[0].style.background='red'; } </script>9.循环
一般包括四部分：初始化，条件，语句，自增
for循环： for（var i=0，i<5,i++）{语句}
实例：
<head>
<meta charset="UTF-8">
<title></title>
<style> div {width:200px;height:200px;float:left; border: 1px solid black;margin:10px;} </style>
<script> window.onload=function(){ var aDiv=document.getElementsByTagName('div'); for (var i=0;i<aDiv.length;i++){ aDiv[i].style.background='red'; } } </script>
</head>
<body>
<div>a </div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>10.this
表示当前选中的对象，如选项卡小程序
<script> window.onload= function(){ var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsByTagName('input'); var aDiv=oDiv.getElementsByTagName('div'); for (var i=0;i<aBtn.length;i++) { aBtn[i].index=i; aBtn[i].onclick=function() { //先让所有的按钮变为常态 for(var j=0;j<aBtn.length;j++) { aBtn[j].className=''; aDiv[j].style.display='none'; } //再让按钮选中，并显示对应DIV this.className='active'; aDiv[this.index].style.display='block'; } } } </script>11.innerHTML
用来设置或获取位于对象起始和结束标签内的HTML。可以是文字，也可以是html代码
<script> window.onload=function(){ var oTxt=document.getElementById('txt1'); var oBtn1=document.getElementById('btn1'); var oDiv=document.getElementById('div1'); oBtn1.onclick=function(){ oDiv.innerHTML=oTxt.value; } } </script>