獲取元素:
document.getElementById 通過(guò)id獲取一個(gè)元素
obj.getElementsByTagName 通過(guò)標(biāo)簽名獲取一組元素
obj.getElementsClassName 通過(guò)Class獲取一組元素，不兼容低版本瀏覽器
操作屬性：
. 只能操作已有的屬性跪者，更簡(jiǎn)單
[] 更靈活纸俭，點(diǎn)能做的观蓄，方括號(hào)都能做。方括號(hào)中放的是字符串把敞，還能放變量
判斷蘋(píng)果手機(jī)和安卓手機(jī)：
<script>
window.onload = function () {
alert("1");
var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手機(jī)
alert("安卓手機(jī)");
// window.location.href = "mobile/index.html";
} else if (u.indexOf('iPhone') > -1) {//蘋(píng)果手機(jī)
// window.location.href = "mobile/index.html";
alert("蘋(píng)果手機(jī)");
} else if (u.indexOf('Windows Phone') > -1) {//winphone手機(jī)
alert("winphone手機(jī)");
// window.location.href = "mobile/index.html";
}
}
</script>
操作樣式
.style 操作行間樣式
.className 操作class
變量:
如果變量聲明了，沒(méi)有賦值，那么 undefined;
如果聲明了變量相恃，沒(méi)有使用，那么報(bào)錯(cuò) is not defined;
函數(shù)：
兩個(gè)階段：
定義 告訴瀏覽器有這個(gè)函數(shù)笨觅，但是不會(huì)真正執(zhí)行拦耐。
調(diào)用 執(zhí)行函數(shù)
如果只有定義，沒(méi)有調(diào)用见剩，那么什么也不會(huì)發(fā)生;
如果只有調(diào)用杀糯，沒(méi)有定義，那么會(huì)報(bào)錯(cuò);
事件 用戶(hù)的操作
onclick 點(diǎn)擊事件
onmouseover 鼠標(biāo)移入
onmouseout 鼠標(biāo)移出
onmousedown 鼠標(biāo)按下
onmouseup 鼠標(biāo)抬起
onchange 狀態(tài)改變 select 99%加的都是onchange事件
onload 加載完成
onscroll 滾動(dòng)條滾動(dòng)事件
onresize 改變窗口大小事件
obj.onfocus 獲取焦點(diǎn)事件 （焦點(diǎn)事件用于text\文本輸入框被選中的時(shí)候）
obj.onblur 失去焦點(diǎn)事件
ondblclick 雙擊事件
onmousemove 鼠標(biāo)移動(dòng)事件
onpropertychange屬性改變
oncontextmenu 右鍵菜單
onsubmit 提交表單
onmousewheel 鼠標(biāo)滾輪事件
oninput 輸入事件 兼容高版本瀏覽器
obj.onpropertychange 兼容IE的
這兩個(gè)事件本身沒(méi)有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');
};
循環(huán):
while 當(dāng)次數(shù)不固定時(shí)使用while
for 當(dāng)次數(shù)固定時(shí)使用for
請(qǐng)寫(xiě)出流程控制語(yǔ)句苍苞？
if判斷 swith判斷
.....
獲取非行間樣式
obj.currentStyle.樣式名 ie系列
getComputedStyle(obj,false).樣式名 高級(jí)瀏覽器
獲取隨機(jī)數(shù)
Math.random() 0-1的隨機(jī)小數(shù)固翰，但是不包括1
n-m
parseInt(n+Math.random()*(m-n));
返回值 是函數(shù)的一部分
特性:
1.阻斷后面的程序執(zhí)行
2.如果寫(xiě)return，但是沒(méi)有值，會(huì)返回undefined
3.如果沒(méi)寫(xiě)return骂际，會(huì)返回undefined
return的作用：
封裝函數(shù)
阻斷程序
定時(shí)器:
setInterval(函數(shù),ms); 每隔一段時(shí)間就執(zhí)行一次疗琉，連續(xù)執(zhí)行
clearInterval(timer); 關(guān)閉定時(shí)器
setTimeout(函數(shù),ms); 過(guò)了一段時(shí)間就執(zhí)行一次列粪，只執(zhí)行一次
clearTimeout(timer); 關(guān)閉定時(shí)器
****開(kāi)定時(shí)器（一定要先清啦鸣，后開(kāi)）反镇。
日期對(duì)象
new Date()； 值不會(huì)自己改變种吸。什么時(shí)候new的，這個(gè)時(shí)間永遠(yuǎn)都是那個(gè)時(shí)候。
獲取
odate.getFullYear() 獲取年；
odate.getMonth() 獲取月，比現(xiàn)實(shí)月小1 odate.getMonte+1;
odate.getDate() 獲取天；
odate.getDay() 獲取星期,星期日是0理茎；
odate.getHours() 獲取小時(shí)式撼；
odate.getMinutes() 獲取分鐘美浦；
odate.getSeconds() 獲取秒流酬；
注：大寫(xiě)代表 年月日，小寫(xiě)代表 時(shí)分秒
倒計(jì)時(shí)
得到目標(biāo)時(shí)間
當(dāng)前時(shí)間
時(shí)間差=目前時(shí)間-當(dāng)前時(shí)間艰躺；
oDate.getTime(); 格林威治時(shí)間戳
格林威治時(shí)間：
1970.1.1 0點(diǎn)0分0秒0毫秒
如何得到目標(biāo)時(shí)間的時(shí)間戳页响；
把時(shí)間調(diào)到目標(biāo)時(shí)間；
設(shè)置
oDate.setFullYear(y,m,d); 設(shè)置年月日拘泞，設(shè)置日期的時(shí)候月份要減1；
oDate.setFullYear(y,m); 設(shè)置年月枕扫；
oDate.setFullYear(y); 設(shè)置年陪腌；
oDate.setHours(h,m,s,ms); 設(shè)置時(shí)分秒毫秒；
oDate.setHours(h,m,s); 設(shè)置時(shí)分秒烟瞧；
oDate.setHours(h,m); 設(shè)置時(shí)分诗鸭；
oDate.setHours(h); 設(shè)置時(shí)；
oDate.setMoth(m,d); 設(shè)置月日参滴；
oDate.setMoth(m); 設(shè)置月强岸；
oDate.setDate(d); 設(shè)置日；
oDate.setMinutes(m,s,ms); 設(shè)置分秒毫秒砾赔；
oDate.setMinutes(m,s); 設(shè)置分秒蝌箍；
oDate.setMinutes(m); 設(shè)置分青灼；
oDate.setSeconds(s,ms); 設(shè)置秒毫秒；
oDate.setSeconds(s); 設(shè)置秒妓盲；
星期不能設(shè)置杂拨；
日期對(duì)象在設(shè)置時(shí)，如果給比較變態(tài)的數(shù)字悯衬，自己會(huì)進(jìn)位找弹沽。
獲取目標(biāo)時(shí)間戳；
短信發(fā)送倒計(jì)時(shí)
表單元素屬性：
disabled 讓元素失效筋粗；
redadonly 只讀策橘，不能操作在JS中；
事件名絕對(duì)禁止大寫(xiě)娜亿。
命名規(guī)范：
駝峰命名法：除第一個(gè)單詞丽已，剩下的都要首字母大寫(xiě)。
匈牙利命名法
開(kāi)頭有前綴暇唾，第二個(gè)單詞開(kāi)始首字母大寫(xiě)促脉。
必須遵守的
o object 一個(gè)對(duì)象 obtn 一個(gè)按鈕
a array 一組對(duì)象 abtn 一組按鈕
可以遵守的
s string 一個(gè)字符串 sName 一個(gè)名字
i int 一個(gè)整字 iNum 一個(gè)整數(shù)
b boolean 一個(gè)布爾值 bOK 一個(gè)布爾值
不用管的
f float 一個(gè)小數(shù) fPrice 一個(gè)價(jià)格
v 一個(gè)變體變量
re RegEXp 一個(gè)正則
fn function 一個(gè)函數(shù) fnShow 一個(gè)函數(shù)
語(yǔ)言基礎(chǔ)：
代碼調(diào)試：
軟調(diào)試：借助工具。
瀏覽器自帶的：
chrome F12或者右鍵審查屬性策州；
firefox F12 插件firebug
IE F12
點(diǎn)擊-inter選項(xiàng)-高級(jí)-禁用腳本調(diào)試勾掉
IETester 安裝插件
硬調(diào)試：
alret();
document.title 標(biāo)題 數(shù)值變化的時(shí)候使用
document.body body
document.write() 寫(xiě)
console.log() 控制臺(tái)日志
數(shù)據(jù)類(lèi)型：
Number 數(shù)字
undefined 未定義
object 對(duì)象
String 字符串
boolean 布爾值
function 函數(shù)
undefined什么時(shí)候出現(xiàn)瘸味？
1.變量只聲明，帶沒(méi)有賦值够挂，就是undefined旁仿；
2.有參數(shù)，但是沒(méi)有傳值
3.訪(fǎng)問(wèn)一個(gè)孽糖，沒(méi)有的屬性
數(shù)據(jù)類(lèi)型轉(zhuǎn)換：
parseInt(); 轉(zhuǎn)整數(shù)
parseFloat(); 轉(zhuǎn)小數(shù)
Number(); 轉(zhuǎn)數(shù)字枯冈，更嚴(yán)格
NaN not a number
是Number類(lèi)型
NaN不等于任何東西，包括自己
檢測(cè)NaN用:isNaN() 如果是NaN就是true办悟，否則是false
eval 把字符串中的語(yǔ)句尘奏，解析成可執(zhí)行的語(yǔ)句
作用域：
局部 只能在聲明它的函數(shù)內(nèi)使用
全局 哪都能用
閉包 子函數(shù)可以使用父函數(shù)的東西
i的問(wèn)題:
1.循環(huán)中加事件，事件中使用i
自定義屬性病蛉，封閉空間
2.循環(huán)中加定時(shí)器炫加，定時(shí)器中使用i
封閉空間
封閉空間
(function(){
})();
(function(index){
})(i);
作用：
解決i的問(wèn)題
解決變量名沖突的問(wèn)題
必須要會(huì)的
*toDou *
*rnd *
*getStyle *
*setStyle *
*findInArr *
*sort *
*getByClass *
*json2url *
*url2json *
- 前面加0
function toDou(inum){
return inum<10?'0'+inum:inum;
}
隨機(jī)數(shù)
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]
}
}
*設(shè)置行間樣式
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]
}
}
- 從數(shù)組中查找是否用相同的
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);
換膚
選項(xiàng)卡
雙色球
倒計(jì)時(shí)
簡(jiǎn)易秒表
數(shù)字時(shí)鐘
圖片時(shí)鐘
簡(jiǎn)易游戲
拍賣(mài)倒計(jì)時(shí)
按鈕控制選項(xiàng)卡
自動(dòng)播放選項(xiàng)卡
聯(lián)動(dòng)全選
延遲選項(xiàng)卡
無(wú)限下拉延遲版
arguments 實(shí)參參數(shù)的數(shù)組俗孝； 當(dāng)參數(shù)的個(gè)數(shù)不固定時(shí)；
批量設(shè)置樣式
obj.style.cssText
不是好東西魄健，有瑕疵赋铝，有問(wèn)題；
會(huì)覆蓋行間樣式
不用沽瘦。
with(obj.style){
樣式名=樣式值革骨；
}
不是好東西农尖，因?yàn)闀?huì)干擾作用域；
不用苛蒲。
獲取瀏覽器的詳細(xì)信息：
window.navigator.userAgent
字符串常用方法：
str.charAt(); 在字符串中查找某一位置字符卤橄；
str.indexOf(); 從前往后找，查找在某一小字符串在大字符串中第一次出現(xiàn)的位置臂外。如果找到了返回位置窟扑，否則返回-1；
str.lastIndexOf(); 從后往前找漏健，查找在某一小字符串在大字符串中第一次出現(xiàn)的位置嚎货。如果找到了返回位置，否則返回-1蔫浆；
str.substring(開(kāi)始位置,結(jié)束位置); 截取字符串殖属，從開(kāi)始位置截取到結(jié)束位置，但不包括結(jié)束位置瓦盛；
str.substring(開(kāi)始位置); 截取 字符串洗显，從開(kāi)始位置截取到最后；
str.toLowerCase(); 把字符串變成小寫(xiě)原环；
str.toUpperCase(); 把字符串變成大寫(xiě)挠唆；
str.split(); 把一個(gè)字符串拆分成數(shù)組；
獲取字符串編碼：
str.charCodeAt(下標(biāo))嘱吗； 獲取某一位置的編碼
通過(guò)編碼得到字符：
string.fromCharCode(編碼)
關(guān)于字符串比較;
字母 按照字典序;
數(shù)字 按照字典序;
漢字 編碼順序玄组，亂來(lái)。
數(shù)組常用的方法：
關(guān)于后面的操作：
arr.push(); 在數(shù)組的后面添加一個(gè)
arr.pop(); 在數(shù)組的后面刪除一個(gè)谒麦，把刪掉的東西返回俄讹。
關(guān)于前面的操作：
arr.unshift(); 在數(shù)組的前面添加一個(gè)
arr.shift(); 在數(shù)組的前面刪除一個(gè)，把刪掉的東西返回绕德。
關(guān)于中間的操作：
arr.splice(); 刪除患膛、插入、替換
刪除
arr.splice(開(kāi)始位置耻蛇，length);
插入
arr.splice(開(kāi)始位置剩瓶，0，插入的內(nèi)容);
替換
arr.splice(開(kāi)始位置,length,替換的內(nèi)容);
arr.join(); 把數(shù)組變成字符串城丧；
arr.reverse(); 數(shù)組翻轉(zhuǎn)；
arr.concat(); 數(shù)組連接豌鹤；
arr.sort(); 數(shù)組的排序亡哄；
sort排列數(shù)字
arr.sort(function(n1,n2){
if(n1>n2){
return 1; 正數(shù)
}sele if(n1<n2){
return -1; 負(fù)數(shù)
}sele {
return 0;
}
});
arr.sort(function(n1,n2){
return n1-n2; 從小到大排序；
return n2-n1; 從大到小排序布疙；
});
Math常用方法：
Math.random(); 獲取0-1的隨機(jī)小數(shù)蚊惯，不包括1愿卸；
取整：
Math.ceil(); 向上取整
Math.floor(); 向下取整
Math.round(); 四舍五入
其他：
Math.abs(); 取正數(shù)
Math.sqrt(); 開(kāi)方
Math.pow(); 冪（n次方）
Math.max(); 求最大值
Math.min(); 求最小值
json 裝東西的
格式： 像把一堆變量打了一個(gè)包
json={名字：值，名字：值截型，名字：值.....};
名字和值成對(duì)出現(xiàn)的趴荸。
console.log（）; 從console.log查看json;
arr json
[1,2,3] [a:1,b:2,c:3]
有長(zhǎng)度 沒(méi)有長(zhǎng)度
[下標(biāo)] ['名字']（字符串） .名字
while/for for...in...
for...in循環(huán)：
for(var i in json){
//i代表的是 名字
//json[i] 值
}
不只json能用，數(shù)組也可以用宦焦；
數(shù)組不推薦使用for...in,for...in循環(huán)性能差;
例題：
var josn={name：小明发钝，job：前端工程師，age：18歲波闹，address：杭州酝豪，family：[
{name：小紅，age：26歲精堕，job:java工程師}
{name：小花孵淘，age:23歲，job:設(shè)計(jì)}
]}
標(biāo)準(zhǔn)寫(xiě)法：
var josn={'name'：'小明'歹篓，'job'：'前端工程師'瘫证，'age'：'18歲'，'address'：'杭州'庄撮，'family'：[
{'name'：'小紅'背捌，'ag'e：'26歲'，'job':'java工程師'}
{'name'：'小花'重窟，'age':'23歲'载萌，'jo'b:'設(shè)計(jì)'}
]}
select 下拉框
select 99%加的都是onchange事件
如何完美的添加一個(gè)新的選項(xiàng)：
創(chuàng)建一個(gè)新的選項(xiàng)
new Option(文本，value);
插入
oS.add();
當(dāng)前選中項(xiàng)的索引
oS.selectedIndex;
獲取到select中所有的選項(xiàng)
oS.options
option有屬性：
.value
.text 文本
刪除一個(gè)選項(xiàng)
oS.remove();
數(shù)組
new Array
var arr=[1,2,3]
var arr=new Array(1,2,3)
區(qū)別：沒(méi)有區(qū)別巡扇。
數(shù)組的length是可以修改的扭仁。
字符串的length不可以修改。
數(shù)組清空：
1.arr.length=0;
2.arr= [];
3.arr.splice(0,arr.length)
4.while
arr.pop||arr.shift
eval深入
eval 把字符串里面的語(yǔ)句厅翔，解析成可執(zhí)行的語(yǔ)句
eval 解析json的時(shí)候乖坠，json兩邊要加括號(hào)
eval 解析函數(shù)的時(shí)候，函數(shù)兩邊要加括號(hào)
數(shù)組排序刀闷，怎么排的
自己寫(xiě)排序：
算法：解決問(wèn)題的方法熊泵。
快排、冒泡甸昏、桶排顽分、推排、二叉樹(shù)施蜜。卒蘸。。
var arr[12,5,3,100,8,23,9,21]
如何找最小，交換位置
