每天一句：诸葛亮从来不问刘备，为什么我们的箭那么少？关羽从来不问刘备为什么我们的士兵那么少？张飞从来不问刘备，兵临城下我该怎么办？有了草船借箭、有了过五关斩六将、有了据水断桥吓曹兵——如若万事具备，你的价值何在？
变量命名：
s: 表示字符串。例如: sName, sHtml;
n: 表示数字。例如: nPage, nTotal;
b: 表示逻辑。例如: bChecked, sShow;
a: 表示数组。例如: aList, aGroup;
r: 表示正则表达式。例如: rDomain, rEmail;
f: 表示函数。例如: fInit, fGetHtml;
o: 表示以上未涉及到的其他对象。例如: oBt, oDate;
g: 表示全局变量。例如: gUserName, gLogin;
一、节点属性
// 备注: data-name(自定义属性)！！！！
<div id="box" title="DOM" data-index="0" data-isShow="true">
<h2>JS第十一天</h2>
节点属性操作
</div>
- getAttribute(): 获取节点属性
// 获取属性节点值1
var att = oBox.attributes;
alert(att['id'].nodeValue); // box
// 获取属性节点值2
alert(oBox.getAttribute('data-index')); // 0
- setAttribute(): 设置节点属性
// 设置属性节点值
oBox.setAttribute('data-index', 100);
- removeAttribute(): 删除节点属性
oBox.removeAttribute('title');
案例: 表格操作(自动生成表格、隔行变色)
案例: 表格的动态操作(添加行、删除行)
二、表单操作
在表单中，表单控件可以通过控件name属性获取到；另外在表单中事件的触发是通过onChange来触发；
onchange事件:
text类型: 当失去焦点时，如果内容改变就会触发；
radio/chekbox: 非IE下点击时，只要值改变就会触发；IE下，失去焦点时，如果值改变才会触发；
// text类型
oForm.text1.onchange = function(){
alert(this.value);
}
// 注意: radio类型是一个数组
oForm.sex[0].onchange = function(){
alert('男');
}
oForm.sex[1].onchange = function(){
alert('女');
}
// radio/checkbox判断当前属性是否被选中
oForm.dir[0].checked
三、BOM
BOM(Browser Object Model)浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。但BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以BOM本身是没有标准的或还没有那个组织去它。
- open(页面地址url,打开方式): 打开一个新的窗口
页面地址url为空，则默认打开一个空白页面;
打开方式为空，默认为新窗口方式打开；
返回值: 返回新打开窗口的window对象
window.open('', '_blank'); // 新的空白页面
window.open('http://www.baidu.com', '_self'); // 当前页面打开百度
- close(): 关闭窗口
如果关闭本窗口:
a、火狐: 默认无法关闭;
b、谷歌: 默认直接关闭;
c、IE: 询问用户;
如果关闭非本窗口的，都是允许的;
oW.close(); // 关闭oW窗口
window.close(); // 关闭window窗口
- window.navigator.userAgent: 浏览器信息
if(window.navigator.userAgent.indexOf('MSIE') != -1){
alert('我是IE');
} else {
alert('我不是IE');
}
- window.location: 浏览器地址信息
window.location.search // url中'?'后面的内容
window.location.hash // url中'#'后面的内容
四、窗口尺寸大小
- onresize: 当窗口大小发生改变时触发
window.onresize = function(){
document.title = i++;
}
- onscroll: 当滚动条滚动时触发
window.onscroll = function(){
document.title = i++;
}
- 可视区域的尺寸
document.documentElement.clientWidth;
document.documentElement.clientHeight;
