JavaScript
? ? ? ? ? - JavaScript兼容于ECMA標(biāo)準(zhǔn)，因此也稱為ECMAScript。
調(diào)試命令
?????alert('hello world');
????console.log('文字信息');
????console.warn('警告信息');
????console.error('錯誤信息');
?????document.write('hello world');
*? js中嚴(yán)格區(qū)分大小寫?
變量的命名規(guī)則
????1.變量中可以含有a-Z 0-9 _ $ , 但是不能以數(shù)字開頭
????2.不能使用JS中的關(guān)鍵字和保留字
????3.盡量遵從駝峰命名規(guī)則
JavaScript的數(shù)據(jù)類型 (六種
????基本數(shù)據(jù)類型
????????String
????????Number
????????Boolean
????????Null
????????Undefined
????復(fù)雜數(shù)據(jù)類型
????????????????????????/? Date
????????Object? -? Array
????????????????????????\? function? ...
NaN:表示不是數(shù)字值的特殊值，可以理解為Number的一種特殊類型，只有當(dāng)在js運算中發(fā)生數(shù)據(jù)類型轉(zhuǎn)換時提示，isNaN()方法是特有的對數(shù)據(jù)進(jìn)行判斷的 ，如果是數(shù)字返回false，不是數(shù)字返回true。
null空對象類型, 表示'沒有對象',即該處不應(yīng)該有值
undefined表示缺少值,就是此處應(yīng)該有一個值,但是沒有定義,?例如 var =a;
數(shù)據(jù)類型轉(zhuǎn)換
????將其他的數(shù)據(jù)類型轉(zhuǎn)換為string
????????方法1:
????????調(diào)用被轉(zhuǎn)換數(shù)據(jù)類型的toString()方法? 也就是?.toString()
????????該方法不會影響原變量,它會將轉(zhuǎn)換的結(jié)果返回f
????????注意:null和undefined沒有toString()方法
????????方法2:
????????調(diào)用String()函數(shù),并將被轉(zhuǎn)換的數(shù)據(jù)作為參數(shù)傳遞給函數(shù)
????將其他的數(shù)據(jù)類型轉(zhuǎn)換為number
????????方法1:
????????調(diào)用Number()函數(shù)
????????被轉(zhuǎn)換的內(nèi)容可以轉(zhuǎn)換成數(shù)字,那么就直接返回這個內(nèi)容對應(yīng)的數(shù)字
????????如果被轉(zhuǎn)換內(nèi)容中有非數(shù)字, 那么返回NaN
????????如果內(nèi)容為空或者null或者false,則轉(zhuǎn)換成0
????????undefined轉(zhuǎn)換成NaN
????????方法2:
????????parseInt( )將內(nèi)容轉(zhuǎn)成Number
????????如果被轉(zhuǎn)換內(nèi)容中出現(xiàn)小數(shù),那么轉(zhuǎn)換的時候會轉(zhuǎn)換去掉小數(shù)
????????如果第一個字符是數(shù)字,則繼續(xù)解析,直至字符串解析完畢或者遇到一個非數(shù)字字符為止
????????方法3:
????????parseFloat( )將內(nèi)容轉(zhuǎn)成Number
????????與parseInt一樣,唯一的區(qū)別就是可以保留小數(shù)
????????注意:如果對非string使用parseInt( )和parseFloat( ),會先將其轉(zhuǎn)換為string再操作
????將其他的數(shù)據(jù)類型轉(zhuǎn)換為boolean
????????方法1:
????????調(diào)用Boolean()函數(shù)
????????除了0、NaN其他都是true
????????除了空串其他都是true
????????null和undefined都是false
運算符
????+(加號)
????對非Number類型的值進(jìn)行運算時,會將這些值轉(zhuǎn)換為Number然后再運算
????任何值和NaN運算都得NaN
????任何值和字符串做加法運算,都會先轉(zhuǎn)換為字符串,然后再和字符串做拼串(任何數(shù)據(jù)類型 + 字符串都得字符)
? ? 數(shù)字和undefined運算得NaN
????隱式轉(zhuǎn)換
????????任意的數(shù)據(jù)類型加上空串( 任意數(shù)據(jù)類型 + ''),即可將其轉(zhuǎn)換為String類型
????????????a.如果加號兩邊都是字符串,那么加號的作用是連接
????????????b.如果加號兩邊都是數(shù)值,那么加號的作用是相加
????????????c.如果加號一邊是字符串,那么加號的作用是連接
????-(減號)? *(乘) /(除)
????????任何值做減/乘/除運算時,都會自動轉(zhuǎn)換為Number
????????可以通過為一個值-0? *1? /1 來將其轉(zhuǎn)換為Number
????????????????????例:
????????????????????var str = '123';
????????????????????var num = str - 0;
????????????????????// var num = str * 1;
????????????????????// var num = str / 1;
????????????????????console.log(num ,typeof? num);
????%(取余&取模)
????????兩數(shù)相除取余數(shù)
????()括號
????????改變運算順序的先后順序
????一元運算符
????????+ 正號
????????????不會對數(shù)字產(chǎn)生影響
????????????隱式類型轉(zhuǎn)換:可以對其他數(shù)據(jù)類型使用正號(+),來將其轉(zhuǎn)換為Number
????????- 負(fù)號
????????????可以對數(shù)字進(jìn)行符號的取反
????自增和自減
????????自增
????????????- 通過自增可以讓變量在自身的基礎(chǔ)上增加1
????????????- 對變量自增以后,原變量的值會立即自增1
????????????a++ 的值等于原變量的值(自增前的值)
????????????++a 的值等于新值(自增后的值)
????自減
????????????- 通過自減可以讓變量在自身的基礎(chǔ)上減1
????????????- 無論是a--還是--a,都會立即使原變量的值自減1
????????????a-- 的值等于原變量的值(自減前的值)
????????????--a 的值等于新值(自減后的值)
邏輯運算符 &&(與)? ||(或)? !(非)
????&&(與)
????有假則為假,全真才為真
????||(或)
????有真則為真,全假才為假
????!(非)
????可以用來對一個值進(jìn)行非運算(true變false,false變true)
????如果對非布爾值進(jìn)行運算,先將非布爾值變成布爾值,再運算
????可以為一個任意數(shù)據(jù)類型取反兩次,將其轉(zhuǎn)換為布爾值
?*?undefined ,?null , NaN , " " , 0 ,?false?以上幾個值轉(zhuǎn)換為布爾值都是false
&& ||? ?非布爾值的情況下
????對于非布爾值進(jìn)行與或運算時,會先將其轉(zhuǎn)換為布爾值,然后再運算,并且返回原值
????????&&(與)運算:
? ??????????????如果兩個值都為true,則返回后邊的
????????????????如果兩個值中有false,則返回靠前的false
????????????????如果第一個值為true,則必然返回第二個值
????????????????如果第一個值為false,則直接返回第一個值
????????||(或)運算:
? ??????????????如果第一個值為true,則必然返回第一個值
????????????????如果第一個值為false,則直接返回第二個值
賦值運算符
????=
????可以將符號右邊的值賦給左邊的變量
????+=
????a += 5? 就是? a = a + 5;? (a等于a加上5再賦給自身)
關(guān)系運算符 >(大于)? <(小于)
????通過關(guān)系運算符可以比較兩個值之間的大小關(guān)系,如果關(guān)系成立則返回true,不成立則返回false
????非數(shù)值的情況
????????對于非數(shù)值進(jìn)比較,先將其轉(zhuǎn)換為數(shù)值再進(jìn)行比較
????????任何值和NaN做任何比較都是false
????????如果符號兩側(cè)的值都是字符串,不會將其轉(zhuǎn)換成數(shù)字,而會分別比較字符串的Unicode編碼
????????輸出Unicode編碼 console.log('\u1c00')
相等運算符
????== 用兩個等于號來做相等運算
????????==? (兩個等于號比對值)兩邊值類型不同的時候，要先進(jìn)行類型轉(zhuǎn)換，再比較。
????????* 由于undefined衍生自null,所以undefined == null 的時候會返回true
????????* NaN不和任何值相等,包括他本身
????????* 通過isNaN()函數(shù)來判斷一個值是否是NaN
????????*
????===(全等) 判斷兩個值是否全等,不會做類型轉(zhuǎn)換,如果兩個值類型不能,直接返回false
三元運算符
????條件表達(dá)式?語句1:語句2;
????執(zhí)行流程:
????????條件運算符在執(zhí)行時,首先對條件表達(dá)式進(jìn)行求值,
????????如果該值為true,則執(zhí)行語句1,并返回執(zhí)行結(jié)果
????????如果該值為false,則執(zhí)行語句2,并返回執(zhí)行結(jié)果
????????????????????例:
????????????????????var a = 10;
????????????????????var b = 20;
????????????????????a > b ? console.log('a大'):console.log('b大')
?for循環(huán)
for(var i = 0;i < 10; i++){
????console.log(i)
}
????for(①初始化表達(dá)式;②條件表達(dá)式;④更新表達(dá)式){
???????????③執(zhí)行語句...
????}
流程:
????①執(zhí)行初始化表達(dá)式,初始化變量(只會執(zhí)行一次)
????②執(zhí)行條件表達(dá)式,判斷是否執(zhí)行循環(huán)
????如果為true,則執(zhí)行循環(huán)③
????如果為false,終止循環(huán)
????④執(zhí)行更新表達(dá)式,更新表達(dá)式執(zhí)行完畢繼續(xù)重復(fù)②
練習(xí):打印1至100的和
var sum = 0;
for(var i =0;i <= 100;i++){
????????// console.log(i);
????????sum = sum+i;
}
console.log(sum);
練習(xí):打印1至100以內(nèi)奇數(shù)的和
var sum = 0;
for(var i =0;i <= 100;i++){
????????if(i % 2 != 0){
????????????????sum = sum + i;
????????}
}
console.log(sum);
需求,在頁面中輸出如下的圖形
????外循環(huán)控制高度
????for (var i =0; i <5; i++) {
? /*??內(nèi)循環(huán)控制寬度? */
? ??正三角
? ?for(var j = 0;j < i+1; j++){
? ? ????document.write('*? ')
? ?}
? ?倒三角
? ? for(var j =0;j <5-i; j++){
????????document.write('* ')
????}
????document.write('<br>')
}
打印99乘法表
for (var i =1; i <=9; i++) {
????????for(var j =1;j <= i; j++){
????????????????document.write("<span>"+j +'*' +i +'=' + i*j +"</span>")
????????}
document.write('<br>')
}
switch? case?語句
????var n = window.prompt('input');
????????switch (n) {
????????????case '春天':
? ? ? ????????? console.log('春意盎然');
????????????????break;
????????????case '夏天':
? ? ? ????????? console.log('夏日炎炎');
????????????????break;
????????????case '秋天':
? ? ? ????????? console.log('收獲的季節(jié)');
????????????????break;
????????????case '冬天':
? ? ? ????????? console.log('凍死你個龜孫');
????????????????break;
}
break和continue
? ?*不能在if語句中使用break和continue
????????break關(guān)鍵字可以用來退出switch或循環(huán)語句
????????break關(guān)鍵字會立即終止離他最近的循環(huán)語句
????????continue關(guān)鍵字可以用來跳出當(dāng)次循環(huán)(終止本次循環(huán),進(jìn)行下次循環(huán))
????????continue關(guān)鍵字會立即終止離他最近的循環(huán)語句
? ? ? ? *使用return會結(jié)束整個函數(shù)
對象
?- 只要不是string、number、boolean、null、undefined,其他都是對象
????????基本數(shù)據(jù)類型都是單一的值"hello" 123 true, 值和值之間沒有任何的聯(lián)系
對象的分類
1.內(nèi)建對象
????-由ES標(biāo)準(zhǔn)中定義的對象,在任何的ES的實現(xiàn)中都可以使用
????比如:Math String Number Boolean Function Object ...
2.宿主對象
????-由JS的運行環(huán)境提供的對象,目前來講主要指由瀏覽器提供的對象
????比如:BOM DOM
3.自定義對象
????-由開發(fā)人員自己創(chuàng)建的對象
????創(chuàng)建對象
????var?obj = {};
? ? * 在對象中保存的值稱為屬性
????* 向?qū)ο筇砑訉傩?/p>
????* 語法:
????????????* 對象 . 屬性名 = 屬性值;*/
向obj中添加一個name gender age
????????obj.name ='八戒';
????????obj.gender ='男';
????????obj.age =18;
* 讀取對象中的屬性
* 語法:
*? 對象 . 屬性名
*
*? 如果讀取對象中沒有的屬性,不會報錯,而是會返回undefined?
????????console.log(obj.name);
????????console.log(obj.gender);
????????console.log(obj.age);
* 修改對象的屬性
* 語法:
*? ? 對象 . 屬性名 = 新值*/
????????obj.name ='tom';
????????console.log(obj.name);
* 刪除對象的屬性
* 語法:
*? ? delete? 對象 . 屬性名*/
????????delete? obj.age;
????????console.log(obj ,?obj.age);
屬性名和屬性值
* 屬性名:
*? - 對象的屬性名不強(qiáng)制要求遵守標(biāo)識符的規(guī)范,但盡量按照標(biāo)識符的規(guī)范
*
* 屬性值
*? ? - JS對象的屬性值,可以是任意的數(shù)據(jù)類型
如果需要使用特殊的屬性名,不能采用?.?的方式來操作
需要使用另一種方式
語法:
? ? ? ? ?對象['屬性名] = 屬性值;
? ? ? ? ?obj['123'] = 789;
? ? ? ? ? console.log(obj['123']);
讀取的時候也要使用這種方式
?in運算符
*? ? - 通過in運算符可以檢查一個對象中是否含有指定的屬性
*? ? ? 如果有就返回true 沒有就返回false
* 語法:
*? ? ? "屬性名" in 對象*/
????????console.log('name' in obj);
基本數(shù)據(jù)類型和引用數(shù)據(jù)類型
基本數(shù)據(jù)類型
????JS中的變量都是保存到棧內(nèi)存中的
????基本數(shù)據(jù)類型的值,直接在棧內(nèi)存中存儲
????值與值之間是獨立存在的,修改一個變量不會影響其他的變量
? ? ? 例:? ? ?var a = 10;
? ? ? ? ? ? ? ? ? var b = a;
? ? ? ? ? ? ? ? ? a++;
? ? ? ? ? ? ? ? ? console.log(b);
* 因為a的值和b的值是獨立存在的,所以a++之后并不會影響b的值
引用數(shù)據(jù)類型
對象是保存到堆內(nèi)存中的,每創(chuàng)建一個新的對象,就會在堆內(nèi)存中開辟出一個新的空間,而變量保存的是 對象的內(nèi)存地址(即對象的引用),如果兩個變量保存的是同一個對象的引用,當(dāng)其中一個變量修改屬性時,另一個也會收到影響(因為不是獨立的)
? ? ? 例:? ? ?var obj = new Object();
????????????????obj.name = '孫悟空';
????????????????var obj2 = obj;
????????????????console.log(obj2.name);? //孫悟空
????????????????obj.name = '豬八戒';
????????????????console.log(obj2.name);? //豬八戒
* 當(dāng)我們比較兩個基本數(shù)據(jù)類型時,就是比較值
* 當(dāng)比較兩個引用數(shù)據(jù)類型時,比較的是對象的內(nèi)存地址
* 如果兩個對象是一模一樣的,但是地址不同,就會返回false
?* 棧區(qū)(速度快 性能高 存儲量比較小)
?* 堆區(qū)(空間大 訪問速度慢 性能比較低)
函數(shù)
????- 函數(shù)中可以封裝一些功能(代碼),在需要的時候可以執(zhí)行這些功能(代碼)
????- 函數(shù)中可以保存一些代碼,在需要的時候調(diào)用
????????函數(shù)聲明
????????????格式:
????????????????????function 函數(shù)名 ([形參1,形參2...形參N]){
????????????????????????????????語句...
????????????????????}
????????????function test(num1,num2) {
????????????????????????console.log(num1 + num2);
????????????}
????????????test(1,3);
*?當(dāng)實參個數(shù)多與形參時,多出來的實參不被使用
*?當(dāng)實參的數(shù)量少于形參時,則沒有對應(yīng)實參的形參,形參將是undefined
** 函數(shù)的執(zhí)行結(jié)果可以通過return返回出來,但是需要有個變量來接收
注意：在函數(shù)中,return后的語句都不會執(zhí)行
? ? ? ? ? ? 如果return語句后面不跟任何值,就相當(dāng)于返回一個undefined
????? 函數(shù)表達(dá)式
????????????var fun3 =function () {
????????????????????????console.log(3);
????????????};
????????????fun3();
????fun3();
????????????- 調(diào)用函數(shù)
????????????- 相當(dāng)于使用的是函數(shù)的返回值
????fun3
????????????- 函數(shù)對象
? ? ? ? ? ? - 相當(dāng)于直接使用函數(shù)對象
立即執(zhí)行函數(shù)
????函數(shù)定義完立即被調(diào)用,這種函數(shù)就是立即執(zhí)行函數(shù)
????立即執(zhí)行函數(shù)只會執(zhí)行一次
????????(function () {
????????????????console.log(1);
????????})();
枚舉對象中的屬性
??語法:????for(var 變量 in 對象){
????????????????}
????for...in語句 對象中有幾個屬性,循環(huán)體就會執(zhí)行幾次
????每次執(zhí)行時,會將對象中的一個屬性的名字賦值給變量
????var obj = {
????????????name:'wlf',
? ????????? age:18,
? ????? ????add:'pek',
? ????????? gender:'男'
????};
????for(var n in obj){
????????????console.log(obj[n]);
????}
作用域
????- 指一個變量的作用范圍
?????????js中有兩種作用域
????????????????1.全局作用域
????????????????- 直接寫在script標(biāo)簽中的都是全局作用域
????????????????- 全局作用域在頁面打開時創(chuàng)建,在頁面關(guān)閉時銷毀
????????????????- 在全局作用域中,有一個全局對象window,可以直接使用
????????????????- 在全局作用域中:
????????????????????創(chuàng)建的變量都會作為window對象的屬性保存
????????????????????創(chuàng)建的函數(shù)都會作為window對象的方法保存
????????????????- 全局作用域中的變量都是全局變量,在頁面的任意的部分都可以訪問的到
????*變量的聲明提前
????? ? ?- 使用var關(guān)鍵字聲明的變量,會在所有的代碼執(zhí)行之前被聲明(但不會賦值)
????*函數(shù)的聲明提前
? ????? ?- 使用函數(shù)聲明形式創(chuàng)建的函數(shù)function函數(shù),它會在所有的代碼執(zhí)行之前就被創(chuàng)建
????? ? ?- 使用函數(shù)表達(dá)式創(chuàng)建的函數(shù),不會被聲明提前,所以不能在聲明前調(diào)用
????????????????2.函數(shù)作用域
????????????????- 調(diào)用函數(shù)時創(chuàng)建函數(shù)作用域,函數(shù)執(zhí)行完函數(shù)作用域銷毀
????????????????- 每調(diào)用一函數(shù)就會創(chuàng)建一個新的函數(shù)作用域,他們之間是相互獨立的
????????????????- 函數(shù)作用域中可以訪問到全局作用域的變量,而全局作用域中無法訪問函數(shù)作用域的變量
????*在函數(shù)中不適用var聲明的變量都會成為全局變量
????* 定義形參就相當(dāng)于在函數(shù)作用域中聲明了變量
數(shù)組對象方法
push()? 向數(shù)組末位添加新元素,該方法會將數(shù)組新的長度作為返回值返回
unshift()? 向數(shù)組首位添加新元素,該方法會將數(shù)組新的長度作為返回值返回
pop()? 該方法可以刪除數(shù)組的最后一個元素,并將被刪除的元素作為返回值返回
shift()? 該方法可以刪除數(shù)組的第一個元素,并將被刪除的元素作為返回值返回
reverse()? 顛倒(翻轉(zhuǎn))數(shù)組中元素的順序
join()? 把所有元素放入字符串,并用指定分隔符進(jìn)行分隔,如果不指定,默認(rèn)是逗號(,)
? ? ? ? ? 并且會把object的類型轉(zhuǎn)換成string
concat() 連接兩個或更多的數(shù)組，并返回結(jié)果
slice() 選取數(shù)組的的一部分，并返回一個新數(shù)組
????????????參數(shù):1從哪個角標(biāo)開始截取,2到哪個角標(biāo)結(jié)束(不包含這個角標(biāo)的元素)
????????????返回值:開始截取的元素和結(jié)束截取的元素的前一個元素
????????????注意點:第二個參數(shù)可選,如果不寫,默認(rèn)截取到元素最后
splice() 從數(shù)組中刪除元素,并返回被刪除的結(jié)果
????????????參數(shù):1開始刪除元素的角標(biāo),2要刪除幾個元素,3把元素刪除之后要替換的元素
sort() 對數(shù)組的元素進(jìn)行排序
forEach()
????????- 需要一個函數(shù)作為參數(shù)
????????- 用forEach遍歷時,數(shù)組中有幾個元素,函數(shù)就會執(zhí)行幾次。每次執(zhí)行時,瀏覽器會將遍歷到的元素以實參的形式傳遞進(jìn)來,我們可以來定義形參來讀取這些內(nèi)容
????????函數(shù)的形參1:當(dāng)前遍歷的元素
????????函數(shù)的形參2:當(dāng)前遍歷元素的索引(可選)
? ? ? ? 函數(shù)的形參3:當(dāng)前遍歷的數(shù)組(可選)
數(shù)組去重
var arr = [1,2,2,2,45,45,7,6,99,99,99,2]
????????for(var i = 0;i<arr.length;i++){
????????????????for(var j = i+1;j<arr.length;j++){
????????????????????????if(arr[i] == arr[j]){
????????????????????????????????arr.splice(j,1) j--;
????????????????????????}
????????????????}
????????}
console.log(arr);
可以去掉字符串 ,?數(shù)組
????????// var arr = ['你好','hello','你好','我','他','的','的','的的'];
????????// var arr = ['1','2','1','3','4','1','2','4'];
? ? ????var arr = [1,1,2,2,3,3,4,123,345,567,7,4,23,5,657,567];
????????//定義一個新的數(shù)組
????????var s = [];? ? ? ??
? ? ????//遍歷數(shù)組
? ????? for(var i = 0;i<arr.length;i++){
????????????????//判斷在s數(shù)組中是否存在，不存在則push到s數(shù)組中
? ? ? ????????? if(s.indexOf(arr[i])== -1){
????????????????????????s.push(arr[i]);
????????????????}
????????}
????????console.log(s);
創(chuàng)建日期對象
var date=new Date();
date.getFullYear();用data調(diào)用獲取時間的方法
????????1.getFullYear() 從Date 對象以四位數(shù)返回年份
????????2.getMonth() 從Date 對象對象返回月份,取值范圍(0~11)
????????3.getDate() 從Date 對象返回一個月中的某一天,取值范圍(1~31)
????????4.getDay() 從Date 對象返回一周中的某一天,取值范圍(0~6)
????????// 星期幾? ? ? 0.周末? 1.周一? 2.周二
????????5.getHours() 返回Date 對象的小時,取值范圍是(0~23)
????????6.getMinutes() 返回Date 對象的分鐘,取值范圍是(0~59)
????????7.getSeconds() 返回Date 對象的秒數(shù),取值范圍是(0~59)
????????8.getTime() 返回從1970年1月1日至今的毫秒數(shù)? 稱為:時間戳
????????9.valueOf() 返回Date 對象的原始值 時間戳
string對象方法
????????在底層,字符串是以字符串?dāng)?shù)組的形式保存的
length 獲取字符串的長度
charAt() 返回對應(yīng)的索引的元素
charCodeAt() 返回指定字符串的Unicode編碼
concat() 用來鏈接兩個或多個字符串
indexOf() 找到指定內(nèi)容的索引(默認(rèn)從前往后查找。如果沒有找到指定內(nèi)容,則返回-1)
slice() 選取數(shù)組的的一部分，并返回一個新數(shù)組
? ? ? ? ? ?參數(shù):1從哪個角標(biāo)開始截取,2到哪個角標(biāo)結(jié)束(不包含這個角標(biāo)的元素)
? ? ? ? ? ?返回值:開始截取的元素和結(jié)束截取的元素的前一個元素
? ? ? ? ? ?注意點:第二個參數(shù)可選,如果不寫,默認(rèn)截取到元素最后
substring() 同slice()
? ? ? ? ? ?不同的是參數(shù)不可以傳遞負(fù)值
split() 把字符串分割成字符串?dāng)?shù)組
? ? ? ? ? 參數(shù)是字符串里面的任意一個元素,傳入?yún)?shù)之后,把元素之前的部分和之后的部分分成兩個字符串,形成一個字符串?dāng)?shù)組
? ? ? ? ? 如果參數(shù)傳一個空串,會將每個字符都拆分為數(shù)組中的一個元素
toLocaleUpperCase() 將字符串轉(zhuǎn)化為大寫并返回
正則表達(dá)式
????????語法:
????????var 變量 = new RegExp('正則表達(dá)式','匹配模式');
????????常用字面量來創(chuàng)建
????????var 變量 = /正則表達(dá)式/匹配模式;
????????????????參數(shù)2:
????????????????????????i : 忽略大小寫
? ? ? ????????????????? g : 全局匹配模式
手機(jī)號：<input type="text" id="pho" onblur="isPhone(this.value);"/>
郵箱：? ? <input type="text"? onblur="isEmail(this.value);"/>
//驗證手機(jī)號是否合法
????function isPhone(phone){
????????????var pho = document.getElementById('pho');
? ????????? var reg =/^[1][3,5,8][0-9]{9}$/;
? ????????? var? falg = phone.search(reg);
? ????????????????? if(phone ==''){
????????????????????????????console.log('手機(jī)號不能空');
? ? ? ????????????????????? pho.style.border='1px solid red'
? ????????????????? }else {
????????????????????????????// console.log('不是空的,進(jìn)入');
? ? ? ????????????????????? if (falg == -1){
????????????????????????????????????????console.log("手機(jī)號不正確");
? ? ? ? ? ????????????????????????????? pho.style.border='1px solid yellow'
? ? ? ? ? ????????????????????????????? this.focus();
? ? ? ????????????????????? }else {
????????????????????????????????????????console.log('登錄手機(jī)號成功');
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? pho.style.border='1px solid green'
? ? ? ????????????????????? }
????????????????}
}
//驗證郵箱是否合法
/* ==================================================================
任意字母下劃線? ? .任意字母下劃線? ?@? ?任意字母數(shù)字? ? .任意字母(2-5位)? ? .任意字母(2-5位)
? ? ? ? ? ?\w{3,}? ? ? ? ? ? (\.\w+)*? ? ? ? ? ? ? ? @? ? ? ?[A-z0-9]+? ? ? ? ? ? ? (\.[A-z]{2,5}){1,2}
===================================================================*/
????function isEmail(email){
????????????var reg =/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
????????????var? falg = email.search(reg);
? ?????????????????? if(email ==''){
????????????????????????????console.log('郵箱不能為空')
????????????????????}else {
????????????????????????????if (falg == -1){
????????????????????????????????????console.log("郵箱不正確");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.focus();
? ? ????????????????????????? }else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log('登錄郵箱成功');
? ? ? ???????????????????????? }
????????????????????}
?????}
//去掉首尾空格
var str ='? xx xxx x? ';
var str = str.replace(/^\s*|\s*$/g,'');
console.log('|'+str+'|');
DOM
????????- document object model 文檔對象模型
????????- document(文檔)
????????文檔表示的就是整個html網(wǎng)頁文檔
????????- object(對象)
????????對象表示將網(wǎng)頁中的每一個部分都轉(zhuǎn)換為一個對象
????????- model(模型)
???????使用模型來表示對象之間的關(guān)系,這樣方便我們獲取對象
[dom操作方法]
????getElementById()
????????????通過id屬性獲取一個元素節(jié)點對象
????getElementsByClassName()
????????????通過類名獲取一組元素節(jié)點對象
????getElementsByTagName()
????????????參數(shù):是標(biāo)簽的名稱
????????????通過標(biāo)簽名獲取一組元素節(jié)點對象
????childNodes
????????表示當(dāng)前節(jié)點的所有子節(jié)點
????????注意:根據(jù)DOM標(biāo)準(zhǔn),標(biāo)簽間的換行也會當(dāng)成文本節(jié)點
????????而在ie8以下 則不會
????children
????????獲取當(dāng)前元素的所有子元素(標(biāo)簽)
????firstChild
????????表示當(dāng)前節(jié)點的第一個子節(jié)點(包括空白文本節(jié)點)
????lastChild
????????表示當(dāng)前節(jié)點的最后一個子節(jié)點
????parentNode
????????獲取當(dāng)前節(jié)點的父節(jié)點
????querySelector() / querySelectorAll()
????????可以根據(jù)css選擇器查詢元素節(jié)點
????????獲取兄弟標(biāo)簽
????nextElementSibling? ? =>ie9以下不兼容
????????nextSibling? ? =>ie9以下兼容
????????兼容寫法nextElementSibling || nextSibling;
????appendChild()
????????向一個父節(jié)點中添加一個新的子節(jié)點。永遠(yuǎn)添加到后面
????????語法:父元素.appendChild(子節(jié)點)
????createElement()
????????創(chuàng)建元素節(jié)點(創(chuàng)建標(biāo)簽)
????????參數(shù):要創(chuàng)建的標(biāo)簽名稱
? ??createTextNode()
? ? ? ? 創(chuàng)建文本節(jié)點
????removeChild()
????????刪除指定標(biāo)簽
????replaceChild()
????????替換子節(jié)點
????????參數(shù):1新的節(jié)點,2被替換的節(jié)點
????cloneNode()
????????克隆/復(fù)制節(jié)點
????????參數(shù):為true的時候會克隆該元素和里面的子元素,為false的時候只會克隆該元素
????setAttribute()
????????可以給標(biāo)簽設(shè)置屬性
????????參數(shù)1:屬性的名稱,參數(shù)2:屬性的值
JS獲取元素的樣式
????1.currentStyle
????????只有IE支持,所以不推薦使用
????2.getComputedStyle()
????????這個方法是window的方法,可以直接使用
????????需要兩個參數(shù)
????????1.要獲取樣式的元素
????????2.可以傳遞一個為元素,一般都傳null
????????返回值:一個對象
????????該方法不支持IE8及以下
????????????????寫一個兼容的方法
????????????????????????//obj 要獲取樣式的元素
????????????????????????//name 要獲取的樣式名
????????????function getStyle(obj,name){
????????????????????if(window.getComputedStyle){
????????????????????????????return getComputedStyle(obj,null)[name];
????????????????????}else {
????????????????????????????return obj.currentStyle[name];
????????????????????}
????????????}
????????????注意點:通過currentStyle和getComputedStyle()獲取到的樣式只能讀取,不能修改。
getBoundingClientRect()
? ? ? ? -獲取元素幾乎所有信息
clientWidth
clientHeight
????????-可以獲取元素的寬度和高度
????????-獲取的值包括 content + padding
offsetWidth
offsetHeight
????????-獲取元素的寬度和高度
????????-獲取的值包括 content + padding + border
offsetLeft
offsetTop
????????-距離第一個有定位的祖先元素左邊和上邊的距離
????????注意:祖先元素必須要有定位,如果沒有,則最終以body為準(zhǔn).
offsetParent
????????-找到最近的帶有定位的祖先元素,如果祖先元素沒有定位,默認(rèn)是body
scrollWidth
scrollHeight
????????-可以獲取元素整個滾動區(qū)域的寬度和高度
scrollTop
scrollLeft
????????-獲取的是滾動條已經(jīng)滾動過的距離
scrollHeight - scrollTop == clientHeight ,說明滾動條已經(jīng)到底。[下圖實例]
event事件對象
? ??事件句柄:
????onmousemove
????????????- 鼠標(biāo)在元素中移動時被觸發(fā)
????onmousedown
????????????- 鼠標(biāo)按下事件
????onmousemove
????????????- 鼠標(biāo)拖拽移動事件
????onmouseup
????????????- 鼠標(biāo)抬起事件
????onmousewheel
????????????- 鼠標(biāo)滾輪滾動事件,會在滾輪滾動時觸發(fā)(火狐不支持該屬性)
? ? ? ? ? ? ? 用event.wheelDelta來獲取滾動方向
????DOMMouseScroll
? ? ? ? ? ? - 鼠標(biāo)滾輪滾動事件(只支持火狐)
? ? ? ? ? ? ? 用event.detail獲取滾動方向
? ??鼠標(biāo) / 鍵盤屬性
????event = event || window.event;? (兼容寫法:前面是標(biāo)準(zhǔn)瀏覽器,后面是ie6,7,8)
????????clientX
????????clientY
????????????- 獲取鼠標(biāo)指針在可見窗口的水平和垂直坐標(biāo)
????????pageX
????????pageY
????????????- 代表鼠標(biāo)在當(dāng)前文檔區(qū)域(整個網(wǎng)頁,包括滾動條下面)的坐標(biāo)
? ? ? ? ? ? ?注意:在ie8中不支持
事件冒泡(Bubble)
????????- 當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。
? ? ? ? -?比如
阻止冒泡
????????- 阻止事件(主要是事件冒泡,因為IE不支持時間捕獲)
* w3c的方法是event.stopPropagation()，IE則是使用event.cancelBubble = true
jquery用stopPropagation(),而js中直接用cancelBubble
事件委托(事件代理)
????????- 事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件
????????比如:ul下有1000個li,要給每一個li添加點擊事件,我們不需要去遍歷li,只需要給ul添加點擊事件就可以。
默認(rèn)行為
????????- 就是指本身就有一些特性,比如點擊a標(biāo)簽?zāi)J(rèn)就會跳轉(zhuǎn)
取消默認(rèn)事件
function preventDefault(event) {
????????if (event.preventDefault) {
????????????????event.preventDefault();
????????} else {
????????????????event.returnValue = false;
????????}
}
給對象綁定事件
????1:onclick
? ? ? ?btn.onclick = function(){};
? ? ? ?- 不能綁定多個,后面的會覆蓋掉前面的。
????2.addEventListener()
? ? ? ?btn.addEventListener('click',function(){},false)
? ? ? - 參數(shù)
????????????????1)事件的字符串,不用寫on
????????????????2)回調(diào)函數(shù),當(dāng)事件觸發(fā)時,該函數(shù)被調(diào)用
????????????????3)是否在捕獲階段觸發(fā)事件,需要一個布爾值,一般傳false,如果在事件捕獲階段就觸發(fā)事件,可以把第三個參數(shù)寫成true。
????????????????* 如果說事件冒泡是從a到li到ul到div,那么事件捕獲就是div到ul到li到a;
? ? ? ?- 可以同時為一個元素的相同事件綁定多個響應(yīng)函數(shù)。
? ? ? ? - 這個方法中的this是綁定事件的對象
????3.attachEvent()
? ? ? ?btn.attachEvent('onclick',function(){})
????????* IE8支持
????- 參數(shù)
????????????1)事件的字符串,需寫on
????????????2)回調(diào)函數(shù),當(dāng)事件觸發(fā)時,該函數(shù)被調(diào)用
????- 可以同時為一個元素的相同事件綁定多個響應(yīng)函數(shù),但是執(zhí)行順序是后綁定先執(zhí)行。
? ? - 這個方法中的this是window
