獲取元素:
document.getElementById 通過id獲取一個元素
obj.getElementsByTagName 通過標簽名獲取一組元素
obj.getElementsClassName 通過Class獲取一組元素，不兼容低版本瀏覽器
操作屬性：
. 只能操作已有的屬性，更簡單
[] 更靈活，點能做的，方括號都能做。方括號中放的是字符串，還能放變量
判斷蘋果手機和安卓手機：
<script>
window.onload = function () {
alert("1");
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手機
alert("安卓手機");
// window.location.href = "mobile/index.html";
} else if (u.indexOf('iPhone') > -1) {//蘋果手機
// window.location.href = "mobile/index.html";
alert("蘋果手機");
} else if (u.indexOf('Windows Phone') > -1) {//winphone手機
alert("winphone手機");
// window.location.href = "mobile/index.html";
}
}
</script>
操作樣式
.style 操作行間樣式
.className 操作class
變量:
如果變量聲明了，沒有賦值，那么 undefined;
如果聲明了變量，沒有使用，那么報錯 is not defined;
函數：
兩個階段：
定義 告訴瀏覽器有這個函數，但是不會真正執行。
調用 執行函數
如果只有定義，沒有調用，那么什么也不會發生;
如果只有調用，沒有定義，那么會報錯;
事件 用戶的操作
onclick 點擊事件
onmouseover 鼠標移入
onmouseout 鼠標移出
onmousedown 鼠標按下
onmouseup 鼠標抬起
onchange 狀態改變 select 99%加的都是onchange事件
onload 加載完成
onscroll 滾動條滾動事件
onresize 改變窗口大小事件
obj.onfocus 獲取焦點事件 （焦點事件用于text\文本輸入框被選中的時候）
obj.onblur 失去焦點事件
ondblclick 雙擊事件
onmousemove 鼠標移動事件
onpropertychange屬性改變
oncontextmenu 右鍵菜單
onsubmit 提交表單
onmousewheel 鼠標滾輪事件
oninput 輸入事件 兼容高版本瀏覽器
obj.onpropertychange 兼容IE的
這兩個事件本身沒有over和out的bug
onmouseenter 代替移入
onmouseleave 代替移出
解決onmouseover的bug
oDiv.onmouseover=function(ev){
var oEvent = ev||event;
var oFrom = oEvent.fromElement||oEvent.relatedTarget;
if(oDiv.contains(oFrom)){
return;
}
alert('移入le');
};
循環:
while 當次數不固定時使用while
for 當次數固定時使用for
請寫出流程控制語句？
if判斷 swith判斷
.....
獲取非行間樣式
obj.currentStyle.樣式名 ie系列
getComputedStyle(obj,false).樣式名 高級瀏覽器
獲取隨機數
Math.random() 0-1的隨機小數，但是不包括1
n-m
parseInt(n+Math.random()*(m-n));
返回值 是函數的一部分
特性:
1.阻斷后面的程序執行
2.如果寫return，但是沒有值，會返回undefined
3.如果沒寫return，會返回undefined
return的作用：
封裝函數
阻斷程序
定時器:
setInterval(函數,ms); 每隔一段時間就執行一次，連續執行
clearInterval(timer); 關閉定時器
setTimeout(函數,ms); 過了一段時間就執行一次，只執行一次
clearTimeout(timer); 關閉定時器
****開定時器（一定要先清，后開）。
日期對象
new Date()； 值不會自己改變。什么時候new的，這個時間永遠都是那個時候。
獲取
odate.getFullYear() 獲取年；
odate.getMonth() 獲取月，比現實月小1 odate.getMonte+1;
odate.getDate() 獲取天；
odate.getDay() 獲取星期,星期日是0；
odate.getHours() 獲取小時；
odate.getMinutes() 獲取分鐘；
odate.getSeconds() 獲取秒；
注：大寫代表 年月日，小寫代表 時分秒
倒計時
得到目標時間
當前時間
時間差=目前時間-當前時間；
oDate.getTime(); 格林威治時間戳
格林威治時間：
1970.1.1 0點0分0秒0毫秒
如何得到目標時間的時間戳；
把時間調到目標時間；
設置
oDate.setFullYear(y,m,d); 設置年月日，設置日期的時候月份要減1；
oDate.setFullYear(y,m); 設置年月；
oDate.setFullYear(y); 設置年；
oDate.setHours(h,m,s,ms); 設置時分秒毫秒；
oDate.setHours(h,m,s); 設置時分秒；
oDate.setHours(h,m); 設置時分；
oDate.setHours(h); 設置時；
oDate.setMoth(m,d); 設置月日；
oDate.setMoth(m); 設置月；
oDate.setDate(d); 設置日；
oDate.setMinutes(m,s,ms); 設置分秒毫秒；
oDate.setMinutes(m,s); 設置分秒；
oDate.setMinutes(m); 設置分；
oDate.setSeconds(s,ms); 設置秒毫秒；
oDate.setSeconds(s); 設置秒；
星期不能設置；
日期對象在設置時，如果給比較變態的數字，自己會進位找。
獲取目標時間戳；
短信發送倒計時
表單元素屬性：
disabled 讓元素失效；
redadonly 只讀，不能操作在JS中；
事件名絕對禁止大寫。
命名規范：
駝峰命名法：除第一個單詞，剩下的都要首字母大寫。
匈牙利命名法
開頭有前綴，第二個單詞開始首字母大寫。
必須遵守的
o object 一個對象 obtn 一個按鈕
a array 一組對象 abtn 一組按鈕
可以遵守的
s string 一個字符串 sName 一個名字
i int 一個整字 iNum 一個整數
b boolean 一個布爾值 bOK 一個布爾值
不用管的
f float 一個小數 fPrice 一個價格
v 一個變體變量
re RegEXp 一個正則
fn function 一個函數 fnShow 一個函數
語言基礎：
代碼調試：
軟調試：借助工具。
瀏覽器自帶的：
chrome F12或者右鍵審查屬性；
firefox F12 插件firebug
IE F12
點擊-inter選項-高級-禁用腳本調試勾掉
IETester 安裝插件
硬調試：
alret();
document.title 標題 數值變化的時候使用
document.body body
document.write() 寫
console.log() 控制臺日志
數據類型：
Number 數字
undefined 未定義
object 對象
String 字符串
boolean 布爾值
function 函數
undefined什么時候出現？
1.變量只聲明，帶沒有賦值，就是undefined；
2.有參數，但是沒有傳值
3.訪問一個，沒有的屬性
數據類型轉換：
parseInt(); 轉整數
parseFloat(); 轉小數
Number(); 轉數字，更嚴格
NaN not a number
是Number類型
NaN不等于任何東西，包括自己
檢測NaN用:isNaN() 如果是NaN就是true，否則是false
eval 把字符串中的語句，解析成可執行的語句
作用域：
局部 只能在聲明它的函數內使用
全局 哪都能用
閉包 子函數可以使用父函數的東西
i的問題:
1.循環中加事件，事件中使用i
自定義屬性，封閉空間
2.循環中加定時器，定時器中使用i
封閉空間
封閉空間
(function(){
})();
(function(index){
})(i);
作用：
解決i的問題
解決變量名沖突的問題
必須要會的
*toDou *
*rnd *
*getStyle *
*setStyle *
*findInArr *
*sort *
*getByClass *
*json2url *
*url2json *
- 前面加0
function toDou(inum){
return inum<10?'0'+inum:inum;
}
隨機數
function rnd(n,m){
return parseInt(n+Math.random()(m-n));
}
*獲取行間樣式
function getStyle(obj,sName){
if(obj.currentStyle){
return obj.currentStyle[sName]
}else{
return getComputedStyle(obj,false)[sName]
}
}
*設置行間樣式
function setStyle(){
if(arguments.length==2){
for(var name in arguments[1]){
arguments[0].style[name]=arguments[1][name]
}
}else{
arguments[0].style[arguments[1]]=arguments[2]
}
}
- 從數組中查找是否用相同的
function findInArr(arr,num){
for(var i=0;i<arr.length;i++){
if(arr[i]==num){
return true;
}
}
return false;
}
*sort排序
arr.sort(function(n1,n2){
return n1-n2; 從小到大排序；
return n2-n1; 從大到小排序；
})
getByClass
function findInArr(arr,item){
for(var i=0;i<arr.length;i++){
if(arr[i]==item){
return true;
}
}
return false;
}
function getByClass(obj,sClass){
if(obj.getElementsByClassName){
return obj.getElementsByClassName(sClass);
}else{
var aResult = [];
var aEle = obj.getElementsByTagName('');
for(var i=0;i<aEle.length;i++){
var aClass = aEle[i].className.split(' ');
if(findInArr(aClass,sClass)){
aResult.push(aEle[i]);
}
}
return aResult;
}
}
*josn2url
var json={'a':'1','b':'2','c':'3'}
var arr=[];
for (var i in json) {
arr.push(i+'='+json[i]);
}
document.write(arr.join('&'));
*url2josn
var url='a=1&b=2&c=3';
var arr=url.split('&');
var json={};
for (var i=0;i<arr.length;i++) {
var arr2=arr[i].split('=');
json[arr2[0]]=arr2[1];
}
console.log(json);
換膚
選項卡
雙色球
倒計時
簡易秒表
數字時鐘
圖片時鐘
簡易游戲
拍賣倒計時
按鈕控制選項卡
自動播放選項卡
聯動全選
延遲選項卡
無限下拉延遲版
arguments 實參參數的數組； 當參數的個數不固定時；
批量設置樣式
obj.style.cssText
不是好東西，有瑕疵，有問題；
會覆蓋行間樣式
不用。
with(obj.style){
樣式名=樣式值；
}
不是好東西，因為會干擾作用域；
不用。
獲取瀏覽器的詳細信息：
window.navigator.userAgent
字符串常用方法：
str.charAt(); 在字符串中查找某一位置字符；
str.indexOf(); 從前往后找，查找在某一小字符串在大字符串中第一次出現的位置。如果找到了返回位置，否則返回-1；
str.lastIndexOf(); 從后往前找，查找在某一小字符串在大字符串中第一次出現的位置。如果找到了返回位置，否則返回-1；
str.substring(開始位置,結束位置); 截取字符串，從開始位置截取到結束位置，但不包括結束位置；
str.substring(開始位置); 截取 字符串，從開始位置截取到最后；
str.toLowerCase(); 把字符串變成小寫；
str.toUpperCase(); 把字符串變成大寫；
str.split(); 把一個字符串拆分成數組；
獲取字符串編碼：
str.charCodeAt(下標)； 獲取某一位置的編碼
通過編碼得到字符：
string.fromCharCode(編碼)
關于字符串比較;
字母 按照字典序;
數字 按照字典序;
漢字 編碼順序，亂來。
數組常用的方法：
關于后面的操作：
arr.push(); 在數組的后面添加一個
arr.pop(); 在數組的后面刪除一個，把刪掉的東西返回。
關于前面的操作：
arr.unshift(); 在數組的前面添加一個
arr.shift(); 在數組的前面刪除一個，把刪掉的東西返回。
關于中間的操作：
arr.splice(); 刪除、插入、替換
刪除
arr.splice(開始位置，length);
插入
arr.splice(開始位置，0，插入的內容);
替換
arr.splice(開始位置,length,替換的內容);
arr.join(); 把數組變成字符串；
arr.reverse(); 數組翻轉；
arr.concat(); 數組連接；
arr.sort(); 數組的排序；
sort排列數字
arr.sort(function(n1,n2){
if(n1>n2){
return 1; 正數
}sele if(n1<n2){
return -1; 負數
}sele {
return 0;
}
});
arr.sort(function(n1,n2){
return n1-n2; 從小到大排序；
return n2-n1; 從大到小排序；
});
Math常用方法：
Math.random(); 獲取0-1的隨機小數，不包括1；
取整：
Math.ceil(); 向上取整
Math.floor(); 向下取整
Math.round(); 四舍五入
其他：
Math.abs(); 取正數
Math.sqrt(); 開方
Math.pow(); 冪（n次方）
Math.max(); 求最大值
Math.min(); 求最小值
json 裝東西的
格式： 像把一堆變量打了一個包
json={名字：值，名字：值，名字：值.....};
名字和值成對出現的。
console.log（）; 從console.log查看json;
arr json
[1,2,3] [a:1,b:2,c:3]
有長度 沒有長度
[下標] ['名字']（字符串） .名字
while/for for...in...
for...in循環：
for(var i in json){
//i代表的是 名字
//json[i] 值
}
不只json能用，數組也可以用；
數組不推薦使用for...in,for...in循環性能差;
例題：
var josn={name：小明，job：前端工程師，age：18歲，address：杭州，family：[
{name：小紅，age：26歲，job:java工程師}
{name：小花，age:23歲，job:設計}
]}
標準寫法：
var josn={'name'：'小明'，'job'：'前端工程師'，'age'：'18歲'，'address'：'杭州'，'family'：[
{'name'：'小紅'，'ag'e：'26歲'，'job':'java工程師'}
{'name'：'小花'，'age':'23歲'，'jo'b:'設計'}
]}
select 下拉框
select 99%加的都是onchange事件
如何完美的添加一個新的選項：
創建一個新的選項
new Option(文本，value);
插入
oS.add();
當前選中項的索引
oS.selectedIndex;
獲取到select中所有的選項
oS.options
option有屬性：
.value
.text 文本
刪除一個選項
oS.remove();
數組
new Array
var arr=[1,2,3]
var arr=new Array(1,2,3)
區別：沒有區別。
數組的length是可以修改的。
字符串的length不可以修改。
數組清空：
1.arr.length=0;
2.arr= [];
3.arr.splice(0,arr.length)
4.while
arr.pop||arr.shift
eval深入
eval 把字符串里面的語句，解析成可執行的語句
eval 解析json的時候，json兩邊要加括號
eval 解析函數的時候，函數兩邊要加括號
數組排序，怎么排的
自己寫排序：
算法：解決問題的方法。
快排、冒泡、桶排、推排、二叉樹。。。
var arr[12,5,3,100,8,23,9,21]
如何找最小，交換位置
