1.js借鑒了c及c語言,
2.區(qū)分大小寫,? ??結尾 ';' 需加上,雖不是必須的,但在壓縮會報錯,增進性能
3.變量命名
? ?(采用駝峰命名,userName)? 開頭(字母? $? _) 中間部分(字母,數字? $? _)
4.注釋
//? 單行注釋
/*
* 多行注釋
*
*/
5.嚴格模式
function(){
? ? "user strict"? ? // 告訴js引擎切換到嚴格模式
? ? // 函數體
}
6.js變量? (是松散類型的,可以保存任何類型的數據)
使用typeof 可識別數據類型? ? ?typeof '123'? // string
基本數據類型值
基本數據類型
undefined? ? ? ? // 未申明定義? ? 派生自null
null? ? ? ? ? ? ? ? ? ?// 未定義的對象? 表示空對象指針,用來初始空對象
string? ? ? ? ? ? ? ?// 字符串? ? 轉字符串??'123'.toString() [正常使用這個,性能考慮]? ?123+''?常用方法鏈接
number? ? ? ? ? ? // 數字? ?NaN? ?非數值但為number類型? ? 1+'ab' = NaN?判斷是否為數字?isNan(123)?// false?
字面量格式:八進制? 070? // 56? ? 十進制? ? 十六進制
浮點數和整數? ?0.3? ? ? 3e-2 / 0.03? ? ? ?3e5 / 300000? ? 3*10*5
數值范圍? ? 5e-324? ? ? 1.79769313482623157e+308? ? ? ?
?常使用 轉換? ? ?parseInt('123')? ? ? (不常用 :Number() 可轉換任何類型數據? ?parseFloat() 浮點數轉換)boolean? ? ? ? ? ?// 布爾? ? true/false? 邏輯判斷時? ?1 '123'? 為true ,? ?0? ''? undefined? null? 為false
復雜數據類型
object
引用數據類型值 (對象? 數組? 函數)
A 對象
let obj = {name:'張三', age:18,01:21};
let name = obj.name; // 張三
let ages = 'age'
let age? = obj[ages];? // 18? 如果為變量 則使用 [變量]
let a01 = obj[01]; //21. obj.21 會報錯,對象中可用數字作為屬性,取值[]
正常情況 使用 '.屬性'(建議使用),如果需要使用變量 則使用? ['屬性']
obj.age = 20; // 重新賦值age
if(typeof obj.age){} // typeof 用來判斷是否存某個屬性
B 數組? ?方法鏈接
let arry = ['張三',123,true,{age:10},undefined]; // 數組下標是從0開始
let name = arry[0]; ????// 獲取數組值,通過[]張三
arry[3] = {age:200};????// 數組重新賦值之后? ['張三',123,true,{age:200},undefined]
數組常用方法??
C 函數
function demoWay(a,b){
? ? ? ? //? demoWay 實參
? ? ? ? // arguments? 實數
????????console.log('這里是進行打印');
}
命名函數? ?var a = function b (){}
匿名函數(一般常用)? var a = function(){}
8.獲取元素的常用方法
document.getElementsById('wrap');? ? // <div id='wrap'></div>
getElementsByClassName('info');????// 不兼容ie8以下? <div class='info'></div>
?getElementsByTagName('p');? ? ? ? // <p></p>
getElementsByName('main');? ? ? ? // <div name='main'></div>
9. 操作各種樣式
內部樣式
<style id='sty'></style>
let osty = document.getElementsById('sty');
osty.innerHTML = "#wrap{height:200px; width:200px; background:red}";// style也屬于html標簽(很少使用)
行內樣式
<style>
? ? #wrap.main{background:yellow; font-weight:600};
</style>
<div id = 'wrap' myname='alia'></div>
let owrap = document.getElementsById('wrap');
改變屬性值 owrap.屬性值(應為合法的屬性才有效,例 title? id? ? className? ?與保留值class類似)?
owrap.id = 'one-wrap'; // 改變了id值, 對象是不變的,owrap 還有效
改變自定義標簽屬性值
setAttribute('myname','alia2'); // 單個? ?setAttribute({'name1':'n1','name2':'n2'});
getAttribute('myname');? ?removeAttribute('myname');
改變樣式
owrap.style.height='100px'; // 單個行內樣式;
owrap.style.cssText += "height:200px; color:blue"; // += 樣式不會被覆蓋
owrap.className = 'main'; // 通常寫好樣式,改變calss名稱進行改變樣式,樣式不會出現(xiàn)不兼容問題
10 獲取標簽值,改變標簽值
owrap.innerHTML = '<strong>這里是內容</strong><i>附加內容</i> \t哈哈哈';
// 可識別標簽??這里是內容?哈哈哈??? \ 作為轉義符(一般用于特殊符號)?
owrap.innerText = '<strong>這里是內容</strong><i>附加內容</i> \t哈哈哈';
//???<strong>這里是內容</strong>? 不能識別標簽
<input value='我是好人' class='user-name' />
document.getElementsByClassName('user-name').value('我不是好人'); // 賦值? ?取值直接value()
11 運算符與拼接? +? -? ?*? ?/? %
10/3? ? // 3.13333
10%3? // 1? ?% 模 相當于余數
隱式類型轉換?
1+2+'8'; // 38
1+2+'8'+1+2 // 3812? ?字符串后有數字 會先把數組轉為字符串進行累加
1+true? // 2? ? ? 與布爾類型累加,會先轉數字類型再進行累加, true 1? false 0
-? *? ?/? %? ?會把字符串先 Number() 轉之后再進行運算
'20'-'5' = 15;
'20p' - '5' = NaN;
11 自增 自減
a++? ? 先執(zhí)行后自加? ?++a 先自加再執(zhí)行? ?let a = 10; let b = a++; // b: 10? let b = ++a; // b: 11
a--? ? 先執(zhí)行后自減? ?--a 先自減再執(zhí)行???let a = 10; let b = a--; // b: 10? let b = --a; // b: 9
12 運算符
if ( true && false)? ? ? //? false, 只要有一個假為假
if(true || false)? ? ?//? ? true 只要有一個真為真
if( ! true)? ? ? ? ? ? ? ? // false 取反
let a = 1 && 0 &&? 2? // 0? ?一直向后取值,當遇到假停止,并取當前值,如若沒有假值則取最后一位
let a = 1 || 0 || 2 // 1??一直向后取值,當遇到真停止,并取當前值,如若沒有真值則取最后一位
let a = !0? ? // true? ? 去數據相對應的布爾值? (相對應的false值:? ?undefind? null? ?0? ''? Nan? ?false?)

13 運算符優(yōu)先
.? []? ?()? ? ? ? ? ? // 一般用于取值 數組對象
++? --? ?!? ?typeOf()
*? ?/? ?%
+? -??
>=? ?<=? ?>? ? <
&&
||?
,? ? ? ? ? ? // let a = (1,2,3,4);? 結果為4? ?‘,’取最后一位,
例子:
let b = 4
let? ?a =? 10 ||? 8 && (b=5); // a10, b 4? ? 先進行計算 && ,取false,無false值,取b=5,? ?10|| (b=5), || 取 true值,10,不進行執(zhí)行b=5;
let c = !b + 5;? // 5? ?!b = false -> false+5 ->? 0+5 = 5;
let d3 = (2,10 && 0 || 8 && !5); // false? ?->(2, 0 || !5) ->(2,!5) -> (2,false) -> false
12 es 6? 拼接? 反義符
let a = 'zhang';
'<p>
? ? <a>點擊${name}</a>
</p>

7.判斷
var age = 19;
// 三元運算(三目運算)
age>18 ? (a='成年人',b='18歲以上') : (a='未成年人',b='18歲以下');?