每天一句：諸葛亮從來不問劉備鲜漩，為什么我們的箭那么少源譬？關(guān)羽從來不問劉備為什么我們的士兵那么少？張飛從來不問劉備孕似，兵臨城下我該怎么辦踩娘？有了草船借箭、有了過五關(guān)斬六將喉祭、有了據(jù)水?dāng)鄻驀槻鼙缛羧f事具備养渴，你的價值何在？
變量命名：
s: 表示字符串泛烙。例如: sName, sHtml;
n: 表示數(shù)字理卑。例如: nPage, nTotal;
b: 表示邏輯。例如: bChecked, sShow;
a: 表示數(shù)組蔽氨。例如: aList, aGroup;
r: 表示正則表達(dá)式藐唠。例如: rDomain, rEmail;
f: 表示函數(shù)。例如: fInit, fGetHtml;
o: 表示以上未涉及到的其他對象鹉究。例如: oBt, oDate;
g: 表示全局變量宇立。例如: gUserName, gLogin;
一、節(jié)點屬性
// 備注: data-name(自定義屬性)Ｗ耘狻Ｂ栲凇！绍妨！
<div id="box" title="DOM" data-index="0" data-isShow="true">
<h2>JS第十一天</h2>
節(jié)點屬性操作
</div>
- getAttribute(): 獲取節(jié)點屬性
// 獲取屬性節(jié)點值1
var att = oBox.attributes;
alert(att['id'].nodeValue); // box
// 獲取屬性節(jié)點值2
alert(oBox.getAttribute('data-index')); // 0
- setAttribute(): 設(shè)置節(jié)點屬性
// 設(shè)置屬性節(jié)點值
oBox.setAttribute('data-index', 100);
- removeAttribute(): 刪除節(jié)點屬性
oBox.removeAttribute('title');
案例: 表格操作(自動生成表格润脸、隔行變色)
案例: 表格的動態(tài)操作(添加行、刪除行)
二他去、表單操作
在表單中津函，表單控件可以通過控件name屬性獲取到；另外在表單中事件的觸發(fā)是通過onChange來觸發(fā)孤页；
onchange事件:
text類型: 當(dāng)失去焦點時尔苦，如果內(nèi)容改變就會觸發(fā)；
radio/chekbox: 非IE下點擊時行施，只要值改變就會觸發(fā)允坚；IE下，失去焦點時蛾号，如果值改變才會觸發(fā)稠项；
// text類型
oForm.text1.onchange = function(){
alert(this.value);
}
// 注意: radio類型是一個數(shù)組
oForm.sex[0].onchange = function(){
alert('男');
}
oForm.sex[1].onchange = function(){
alert('女');
}
// radio/checkbox判斷當(dāng)前屬性是否被選中
oForm.dir[0].checked
三、BOM
BOM(Browser Object Model)瀏覽器對象模型鲜结，它提供了很多對象展运，用于訪問瀏覽器的功能活逆。但BOM缺少規(guī)范，每個瀏覽器提供商又按照自己想法去擴展它拗胜，那么瀏覽器共有對象就成了事實的標(biāo)準(zhǔn)蔗候。所以BOM本身是沒有標(biāo)準(zhǔn)的或還沒有那個組織去它。
- open(頁面地址url,打開方式): 打開一個新的窗口
頁面地址url為空埂软，則默認(rèn)打開一個空白頁面;
打開方式為空锈遥，默認(rèn)為新窗口方式打開；
返回值: 返回新打開窗口的window對象
window.open('', '_blank'); // 新的空白頁面
window.open('http://www.baidu.com', '_self'); // 當(dāng)前頁面打開百度
- close(): 關(guān)閉窗口
如果關(guān)閉本窗口:
a勘畔、火狐: 默認(rèn)無法關(guān)閉;
b所灸、谷歌: 默認(rèn)直接關(guān)閉;
c、IE: 詢問用戶;
如果關(guān)閉非本窗口的炫七，都是允許的;
oW.close(); // 關(guān)閉oW窗口
window.close(); // 關(guān)閉window窗口
- window.navigator.userAgent: 瀏覽器信息
if(window.navigator.userAgent.indexOf('MSIE') != -1){
alert('我是IE');
} else {
alert('我不是IE');
}
- window.location: 瀏覽器地址信息
window.location.search // url中'?'后面的內(nèi)容
window.location.hash // url中'#'后面的內(nèi)容
四爬立、窗口尺寸大小
- onresize: 當(dāng)窗口大小發(fā)生改變時觸發(fā)
window.onresize = function(){
document.title = i++;
}
- onscroll: 當(dāng)滾動條滾動時觸發(fā)
window.onscroll = function(){
document.title = i++;
}
- 可視區(qū)域的尺寸
document.documentElement.clientWidth;
document.documentElement.clientHeight;
