1. 程式人生 > >JS自學大全

JS自學大全

輪播 creat 原型 als 全局變量 string類 不存在 添加 finally

JS是從上往下執行的

console.log();輸出語句
console.warn();錯誤提示語句 黃色三角形感嘆號
console.error();錯誤提示 紅色圓X
alert();彈窗
document.write();文件打印輸出 比如網頁有時間倒計時 下一秒需打印
document.getElmentById();指定某個id對其進行更改樣式 JS裏要用ID時用這個語句
decument.getElementsByTagNanme();返回一個數組對象
decument.getElementsByClassName();返回一個數組對象

decument.getElementsByClassName();是新出的方法它和decument.getElementsTagName();有什麽區別呢?
-------

JS裏無- 比如background-color JS裏是backgroundColor
變量名可以是漢字但是IE瀏覽器不支持
JS裏除了嵌套 "" ‘‘雙引號和單引號無區別

JS裏的全局變量就是
var num=10;
function fn(){

num =20;這個是全部變量
}
var a=b=c=9; bc屬於全局變量
在外部就是全局變量都能用
比如在函數裏 沒有定義var也是全局變量
局部變量就是在函數內部聲明了變量

事件三要素:語法格式
事件源.事件=function(){ 事件處理函數 }

事件三要素 鼠標事件總匯

一般事件 事件 瀏覽器支持 描述
onclick IE3|N2|O3 鼠標點擊事件,多用在某個對象控制的範圍內的鼠標點擊
ondblclick IE4|N4|O 鼠標雙擊事件
onmousedown IE4|N4|O 鼠標上的按鈕被按下了
onmouseup IE4|N4|O 鼠標按下後,松開時激發的事件
onmouseover IE3|N2|O3 當鼠標移動到某對象範圍的上方時觸發的事件
onmousemove IE4|N4|O 鼠標移動時觸發的事件
onmouseout IE4|N3|O3 當鼠標離開某對象範圍時觸發的事件
onkeypress IE4|N4|O 當鍵盤上的某個鍵被按下並且釋放時觸發的事件.[註意:頁面內必須有被聚焦的對象]
onkeydown IE4|N4|O 當鍵盤上某個按鍵被按下時觸發的事件[註意:頁面內必須有被聚焦的對象]
onkeyup IE4|N4|O 當鍵盤上某個按鍵被按放開時觸發的事件[註意:頁面內必須有被聚焦的對象]


隱藏盒子:
display:none;隱藏 占了位置
visibility:hidden;隱藏占位置
overflow:hidden;隱藏 超出的位置
比如:事件源.style.display:none;

入口函數:放在script標簽上部就是body裏下面 比如輪播圖放在裏面因為頁面先加載結構再加載樣式 一般頁面加載中結構和鏈接可以點 輪播圖加載完後點擊才會動
window.onload=function(){
這裏放JS
}


JS裏 typeof檢測數據類型
var txt="啊";
console.log(typeof txt); string

轉字符型:String();
var num=10;
console.log(String(num));

數據類型轉boolean
1.!!
2.Boolean();

"0"+1=01 字符型加整數型的規律

020 0開頭為八進制 0乘於8乘於的0次方 2乘於8的一次方 所以020為16
0x開頭為16進制

轉換數值:
1.Number();
2.- * /
var a="20";
var b=a-10;
console.log(b);

parseInt(值,進制);
console.log(parseInt(10,2));//10的二進制 4 10*2的0次方 1*2的1次方
console.log(paeseInt(10.11))//取整為10
console.log(parseInt("20"));//20

<script type="text/javascript">
parseFloat() 函數可解析一個字符串,並返回一個浮點數
document.write(parseFloat("10"))
document.write(parseFloat("10.00"))
document.write(parseFloat("10.33"))
document.write(parseFloat("34 45 66"))
document.write(parseFloat(" 60 "))
document.write(parseFloat("40 years"))
document.write(parseFloat("He was 40"))


JS特點 變量提升:如果在函數內部,聲明函數,會把該聲明提升帶函數頂端,只提升變量,不賦值。
function fun(){
console.log(num);
var num=10;
}
等同於:
funion fun(){
var num;
console.log(num);
Num=20;
}

function fn(a,b);
console.log(fn.length);形參數量 就是ab
console.log(arguments.length);實參數量 就是調用的數量

空類型:
null:變量不可能是null 需要手動設置 要解除對象的占用或引用時
undefined:定義之後未賦值 如var obj;console.log(obj);

全等===
等於==
區別:全等比較值和類型 等於比較值

in關鍵字最常用的是for in
var obj={
name:"我我我",
age:18
};
for(var k in obj){
console.log(typeof k);
}//輸出為String類型
for in判斷變量的對象的鍵

in方法2:
判斷屬性是否存在於對象
var obj={
name:"我我我",
age:18
};
var a="name" in obj;//name什麽類型就怎麽學比如String的要加雙引號或者單引號
console.log(a);
註意:當in關鍵字操作數組時判斷的是索引是否存在
所以var arr=[1,2,3,4];
console.log("0" in arr);輸出的也是true
索引就是數組從0角標(自我理解)就是 1234 對應的索引是0123

數組也有固定的辦法找到指定的數的 如果沒有返回-1
var arr=[1,2,3,4];
console.log(arr.indexOf(3));返回2

創建一個時間對象
var a=new Date();//Date類型是專門用於將時間格式轉為字符串的方法 有各種小方法可以看JS那麽紅皮書或者在我博客園將那些小方法整理
console.log(a);//輸出的是時間 不是純數字有英文告訴北京時間

對象的動態是指:在對象創建出來後為對象添加新的屬性或者方法
var obj={
name:"劉德華",
age:50
};
obj.gender="male";
obj.sayHello=function(){
console.log("我想死你了");
}
obj.sayHello();
obj.sayHello=function(){方法}
obj.XXX=XXX ---
----1.如果XXX存在就是修改
----2.如果XXX不存在就是添加屬性
獲取對象的屬性值:對象名[屬性名]


隱式轉換:轉字符串類型
比如obj[0]=function(){console.log("我添加成功了")}
[]裏的值會被轉換成字符串

delete運算
delete關鍵字可以刪除對象屬性還有未使用var的變量

delete.變量名或者對象屬性
如果刪除的對象不存在返回true 刪除是否成功false/true 如果刪除的屬性在原型中返回true


表達式1||表達式2
如果1是真返回1
如果1是假返回2
只有真真為真其他都為假

表達式1&&表達式2
如果表達式1為假,直接返回表達式1的值
如果表達式1為真,判斷2是否是真,如果真返回表達式2如果假
只有假假都是假其他都是真

函數聲明:
function a(){
//函數體
}
函數表達式:
var a=function b(){//b為函數名
函數名可以不寫 但是寫了只在函數內調用
}

創建新的函數:
var a=new function(){

}

DOM操作:增刪改查
增:1.decument.createElment
2.oppendChild
刪:1.removeChild

改:1.style
2.id
3.className
4.innerHTML
查:
1.getElementById
2.getElementsByTogName
3.getElementsByClassName

異常捕獲語句:特征-一旦出現異常後面的代碼就不會執行 想要執行就要進行異常處理
try catch finally

try{ 可能出現異常的代碼,
throw"你的代碼有毛病";//收到拋出異常信息
errMsg:"這裏寫錯誤信息";
errCode:-1;//這裏寫錯誤代碼的返回值
}
catch X(參數){ 出現異常後的處理代碼 }
X(){}
finally{不管出不出現錯誤都會執行
node.js裏釋放資源
}

語法異常無法捕獲比如a++++++++;

面向對象自己的理解就是:解決問題時所需要的針對性性對象,比如洗衣服 找個女朋友洗 洗衣機洗

什麽是對象?萬物皆對象
什麽是對象特征?用來描述對象的相關信息比如一個人的name age
什麽是對象的行為?描述對象的行為比如一個人的行走吃喝

在JS種什麽是對象?鍵值對的組合就是對象

如上例子的現實生活的特征就是JS裏的屬性
行為就是方法

prompt();//出現談話框裏面有可以輸入的輸入框
alert();//就談話框不能點取消 取消掉它
confirm();//出現談話框 可以取消掉它

true:除0數字 “something” Object(任何對象) 為true
false:0 "" undefined null為false
if判斷時會把()內的值強行轉換成boolean類型

var a="hello\"aaa\"";打印輸出hello "aaa"
轉成字符串類型:
變量+"" 變量+"任何一個字符串" toString

以下都可以轉字符串:
var num=1111;
var bool=true;
console.log(typeof(String(boolean)));
console.log(typeof(num.toString));

Number轉換:
var a=Number("222");
var b=Number(18.33);

boolean轉換:
var a=boolean("222");
var b=boolean(18.33);

parseInt(變量);取整
var a=aaa3.14ss;取出來是3.14
parseFloat(變量);取浮點

for循環裏 外循環控制行內循環控制列

break立刻停止本次循環 不在執行
continue跳出本次循環 進入下一個循環

值是固定的用while 語句
對具體值進行判斷用switch case
其他用if if else if else else ....
do while 至少執行一次

var arr=[1,2,3];
console.log(arr[1]);
//給索引賦值
arr=["張飛"];
arr=["張飛1"];

function 函數名(){
載體;return;
return後面的值就是返回值
}

如果函數名相同 後面的函數會覆蓋前面的函數

函數就是遞歸 就是自己調用自己
fn();
function fn(){
alert(111);
fn()
}
遞歸註意:遞歸必要要有跳出條件 不然是死循環
var i=1;
fn();
function fn(){
alert(111);
i++;
if(i>10){
return;
}
fn();
}

用遞歸寫1-100的和
alert(a(100));
function a(n){
if(n<1){
return 0;
}
return n+a(n-1);
}

回調函數:將函數作為參數一樣調用和使用 數調用其他函數叫回調函數
fn(test);
function fn(demo){
demo();
}
function test(){
console.log("我是被測試的函數");
}
什麽時候用回調函數:
一般是定義一個規則來使用的 規則的傳遞只能用函數或回調函數來實現

console.log(fn(10,5,test1));
function fn(num1,num2,demo){
reurm demo(num1,num2);
}
function test1(a,b){
returm a+b;
}
function test1(a,b){
returm a-b;
}

對象的字面量:
var aaaa={ 東西 };

創建一個div並且設置一個樣式 然後加到body標簽中

Json的使用:
JS裏的特點描述JS的數據 用來存東西
var json={
a:12,b:5,c=3
}
alert(json.a);//也可以寫成alert(json[‘a‘]);JS裏[]可以代替一切 .
json的角標不是數字是字母

json沒有length的方法 沒有長度那麽循壞怎麽用
用for in
for(var i in json){
alert(‘第’+i+‘個東西:‘+json[i]);
}
也可以像變量一樣操作

兼容普遍用if else來處理
行間樣式就是CSS代碼寫在HTML標簽中 style只能操作行間樣式
currentStyle獲取非行間樣式 只兼容IE
那麽用if else
其他瀏覽器兼容用getComputedStyle

JS自學大全