js入門知識點

* 基礎(chǔ)知識

* js的輸出方式

* js的組成

* js的命名規(guī)范

* 數(shù)據(jù)類型

* number數(shù)據(jù)類型

* 布爾數(shù)據(jù)類型 boolean

* 數(shù)據(jù)類型之間的比較規(guī)則

* 檢測數(shù)據(jù)類型

* 判斷

* arguments

* 對象

* for循環(huán)

* 數(shù)組的方法

* 實例創(chuàng)建數(shù)組

* 字符串的方法

* DOM獲取元素

* 動態(tài)創(chuàng)建元素

* 元素節(jié)點

* 自定義屬性的操作

* Math函數(shù)

基礎(chǔ)知識

ctrl +f 搜索

js的輸出方式

js的輸出方式:

1:alert('珠峰培訓(xùn)'); 彈出框 ?彈出一個層

alert(confirm('')) --彈出框 ?加一個確定或者取消 加上alert有返回值 ?true false

2:

1)console.log('fandonglai') ;控制臺輸出 ?主要用于調(diào)試js代碼

2)console.error('報錯'); ?報錯

3)console.warn('警告') ; ?警告

4)console.info ('信息');!

5)console.dir('');輸出對象詳細的信息

6)console.table('');以表格的形式輸出 兩層以上的嵌套的時候才會輸出

7)console.clear('') ;清空控制臺

js的組成

js的組成:

1)ECMAScript(5) ?js的幫助文檔api 核心 規(guī)定了js的引入方式、命名規(guī)范、變量、數(shù)據(jù)類型、語法、操作語句

2)DOM ?document object model ?文檔對象模型

3)BOM ?browser object model ? 瀏覽器對象模型

js的命名規(guī)范

js的命名規(guī)范

1)區(qū)分大小寫

document ?documenT

2)遵循駝峰命名法

第一個單詞首字母小寫,從第二個單詞開始首字母大寫

personInfo

studentManageSystem

3)匈牙利命名法

oDiv ?aStu

4)由數(shù)字、字母、下劃線、$組成,不能以數(shù)字作為開頭

div1 ?box1 ?stu ?$stu

5) 不能使用關(guān)鍵字和保留字

關(guān)鍵字:在js中有特殊意義的

var

保留字:未來可能作為關(guān)鍵字的

數(shù)據(jù)類型

數(shù)據(jù)類型

1)基本數(shù)據(jù)類型

number(數(shù)字)、string(字符串)、boolean(布爾)、null(空)、undefined(未定義)

2)引用數(shù)據(jù)類型

1.object(對象數(shù)據(jù)類型 ):object 對象 Array數(shù)組 RegExp正則

2.function(函數(shù)數(shù)據(jù)類型)

基本數(shù)據(jù)類型和引用數(shù)據(jù)類型區(qū)別:

1)基本數(shù)據(jù)類型:值

2)引用數(shù)據(jù)類型:空間地址

number數(shù)據(jù)類型

number數(shù)字數(shù)據(jù)類型

包括:正數(shù)、負數(shù)、小數(shù)、0、NaN

1 -1 1.2 -1.2 0 NaN

NaN:not a number ? 不是一個數(shù)

NaN==NaN ?//false

isNaN(NaN) ?//true

1.isNaN(檢測的內(nèi)容) ? 作用 :`判斷`一個內(nèi)容是不是有效數(shù)字,如果不是有效數(shù)字返回true,

如果是一個有效數(shù)字返回false

2.Number(要轉(zhuǎn)換的內(nèi)容) ?強制轉(zhuǎn)換,必須全部都為數(shù)字才可以轉(zhuǎn)換,否則返回NaN

Number(null) ?0

Number('') ? ?0

Number(false) 0

Number(true) ?1

3.parseInt() ? 非強制轉(zhuǎn)換 從左到右依次查找,是數(shù)字繼續(xù)查找,只要遇到一個字符不是有效數(shù)字,就停止查找,直接返回之前找到的數(shù)字

4.parseFloat() ? 非強制轉(zhuǎn)換 和parseInt一樣,但是可以多識別一個點.

``轉(zhuǎn)換不成功 返回NaN``

布爾數(shù)據(jù)類型 boolean

布爾 boolean

包括:只有兩個值 true false

方法:

1.! 一個嘆號,取反:先轉(zhuǎn)為布爾類型(Boolean())然后再取反

將任意的值轉(zhuǎn)為布爾類型,只有0、NaN、''、null、undefined這五個值為false 其余都為true

2.!! ?取反再取反,相當于直接轉(zhuǎn)為布爾類型Boolean()

3.Boolean() ?等價于!!

以上三個方法的返回值(結(jié)果)為true或者false

數(shù)據(jù)類型之間的比較規(guī)則

數(shù)據(jù)類型之間的比較規(guī)則

= ?賦值

== 比較

相同的數(shù)據(jù)類型直接比較

1.對象==對象 ?false

不同數(shù)據(jù)類型之間的比較:

2.對象==字符串 ?對象先轉(zhuǎn)為字符串(.toString()) 然后再比較

3.對象==數(shù)字 ?對象先轉(zhuǎn)為字符串(.toString())再轉(zhuǎn)為數(shù)字(Number())

4.對象==布爾 ?對象先轉(zhuǎn)為字符串再轉(zhuǎn)為數(shù)字,布爾直接轉(zhuǎn)為數(shù)字

5.布爾==字符串 布爾轉(zhuǎn)數(shù)字 字符串轉(zhuǎn)數(shù)字

6.布爾==數(shù)字 ? 布爾轉(zhuǎn)數(shù)字

7.數(shù)字==字符串 ?字符串轉(zhuǎn)數(shù)字

8.null==undefined ?true

9.null或者undefined和其它任何類型比較都返回false

![]==false 先取反再比較

檢測數(shù)據(jù)類型

1、typeof null ? "object"

typeof的返回值:字符串類型 ?"number"、"string"、"boolean"、"undefined"、"object"、"function"

2、instanceof 當前這個對象,是否屬于某個類

問題;當前這個類,只要在這個對象原型鏈上,永遠都是true

var ary = [1,2,3]

ary instanceof Array ? //true

3、constructor;作用;打印出當前在這個對象所屬的類

問題;當我們給類.prototype自己復(fù)制的時候,constructor會出問題;

ary.constructor ? 返回的是函數(shù) ?函數(shù)的名字就是他的類型

4、Object.prototype.toString.call()

基類上的tostring;作用可以打印出當前實例this,所屬累的詳細信息;

所以我們想要檢測誰,就讓this通過call變成誰

判斷

判斷

1、if、else if、else

2、三元運算符 三目運算符:主要應(yīng)用于簡單的if else的判斷

3、switch case:不同值情況的判斷

1: ? ? if(條件1){

條件1成立(為真)執(zhí)行的代碼

}else if(條件2){

條件2成立(為真)執(zhí)行的代碼

}else if(條件3){

條件3成立(為真)執(zhí)行的代碼

}...

else{

以上條件都不成立執(zhí)行的代碼

}

只有0 NaN '' null undefined 5個值為false 其余都為true

if條件中可以有以下符號:

&& ?并且 兩邊的小條件都為真,整體即為真

|| ?或者 只要有一個真 整體即為真 第一個為假操作第二個

> >= < <= == ===

只有一個值:直接判斷真假

+ - *(乘) ?/(除)

! ?!!

2:三元運算符

應(yīng)用于if else判斷 或者只有一個if

格式:

條件?條件成立執(zhí)行的代碼:條件不成立執(zhí)行的代碼

3:switch case:不同值情況的判斷 每一個case是三個

switch (變量){

case 值1:

變量與值1比較 成立執(zhí)行的代碼

break;

case 值2:

變量與值2比較 成立執(zhí)行的代碼

break;

....

default:

以上條件都不成立執(zhí)行的代碼

}

var ?a = 3

switch (a){

case 1:

alert(1);

break;

case 2:

alert(2);

break;

case 3:

alert(3);

break;

default:

alert(5);

}

arguments

函數(shù)中,存儲參數(shù)的一個集合

函數(shù)天生自帶的一個屬性:內(nèi)置屬性 arguments

1:非嚴格模式: ?arguments 和形參存在映射關(guān)系:一個改了另外一個也跟著改

'use strict'嚴格模式下: arguments和形參之間沒有映射關(guān)系;

2:嚴格模式下不可以使用arguments.callee ?arguments.callee.caller

arguments.callee:當前函數(shù)本身,這里代表的是當前的函數(shù)

arguments.callee.caller :當前方法是在哪一個函數(shù)中執(zhí)行的,我們可以通過這個方法獲取到,如果是在window下執(zhí)行的,caller值是null

----------

對象

對象

對象數(shù)據(jù)類型創(chuàng)建的三步:

1)開辟一個空間地址 堆內(nèi)存

2)把對象中的屬性名和屬性值 存儲到空間中

3)空間地址賦值給對象名

指向同一個空間地址時:對象1==對象2 ?true

1.增加一組屬性

obj.name = 'zfpx'

2.獲取屬性名對應(yīng)的屬性值 ?'zfpx'

obj.name

3.修改屬性名對應(yīng)的屬性值 ?'zf'

obj.name = 'zf'

4.刪除屬性

1.假刪除 ?obj.name = null

2.直接刪除 delete obj.name

obj.name

obj['name']

如果屬性名為數(shù)字 只能用obj[1]

for循環(huán)

for循環(huán)

每一輪循環(huán)都要執(zhí)行四步:

1)初始值

2)判斷是否滿足循環(huán)執(zhí)行的條件

3)執(zhí)行循環(huán)體中的內(nèi)容

4)累加

(1) for in對象中的屬性名和屬性值

var obj = {

name:'zf',

age:8,

add:'北京',

1:2016,

6:6666

}

for(var a in obj){

console.log(obj[a]) ? ?obj[]的形式

}

順序:先輸出屬性名為數(shù)字的(從小到大),再按照書寫順序輸出

var ary = [100,200,300,400];

for(var key in ary){

console.log(key); 數(shù)組的索引 都是從0開始一串數(shù)字 索引的作用:用來表示每一項的位置

}

(2)while

var i=0; ? while(i<5){ ? ? ?console.log(i); ? i++; ? ?}

19、在循環(huán)體中有兩個關(guān)鍵字:break continue

break 跳出整個循環(huán),整個循環(huán)結(jié)束

continue 本輪循環(huán) 循環(huán)體后面的代碼不再執(zhí)行,會繼續(xù)執(zhí)行累加,繼續(xù)下一輪循環(huán)

20、 i++ 在i原有的基礎(chǔ)上加1

i+=1 ?i=i+1

i+=5 ?在i原有的基礎(chǔ)上加5

i++ 先運算乘除加法 ?在累加

++i 先自己加1在去運算

var a=0;

console.log(a+++1);1 a++先運算 ?不累加 得到的結(jié)果是1 (a+1)=1

console.log(a);1 ? ? 運算完以后,在進行累加;這時候a=0;累加1=1

var b=0;

var b=a+++1;

b=a+1;

a++;

數(shù)組的方法

數(shù)組

1)方法的作用

2)方法的參數(shù)

3)方法的返回值

4)原數(shù)組是否改變

24;數(shù)組方法

1)增加、刪除、替換 ?`原數(shù)組改變`

1.push(要增加的內(nèi)容) 末尾增加一項

返回:新增后數(shù)組的長度

原數(shù)組:改變

2.pop() ?刪除最后一項

返回值:被刪除的那一項

原數(shù)組:改變

3.unshift(要增加的內(nèi)容) ?在數(shù)組開頭增加一項

返回值:增加后數(shù)組的長度

原數(shù)組:改變

4.shift() 刪除第一項

返回值:被刪除的內(nèi)容

原數(shù)組:改變

5.splice() ?刪除 替換 增加

splice(n,m) ?從索引n開始 刪除m個

splice(n) ? ?從索引n開始 刪除到最后

splice() ? ?返回[] 原數(shù)組不變

splice(n,m,x) ?替換 從索引n開始刪除m個 用x替換被刪除的內(nèi)容

splice(n,0,x) ?增加 在索引n的前面增加一項

splice(0) ?克隆

1.刪除數(shù)組最后一項

1.pop()

2.ary.length--;

3.ary.length-=1;

4.ary.length = ary.length-1;

5.ary.splice(ary.length-1,1)

數(shù)組中最后一項的索引:ary.length-1

2;在數(shù)組末尾增加一項

push

ary[ary.lenght]=100;

splice(ary.lenght,0,要增加的內(nèi)容)

3.克隆

splice(0) slice(0)/slice() ary.concat()

4.獲取數(shù)組中[第n項,第m項],原數(shù)組不變

第n項的索引:n-1

第m項的索引:m-1

slice(n-1,m)

26;數(shù)組截取和拼接 ?原數(shù)組不變

1.slice(n,m) ?從索引n開始截取到索引為m處,不包括m ?包前不包后

返回:提取的內(nèi)容

原數(shù)組:不變

slice(n) ?從索引n開始 截取到最后

slice(0) ?克隆

slice() ? 克隆

2.concat() ?拼接數(shù)組

返回:拼接后的新數(shù)組

原數(shù)組:不變

ary.concat(ary2) ?新數(shù)組的順序:書寫的順序

克隆: ?ary.concat()、 splice(0)、slice(0)、 slice()

27;數(shù)組轉(zhuǎn)為字符串的方法 原數(shù)組不變

1;.toString() 轉(zhuǎn)為字符串

返回一個新字符串【】-->‘’

原數(shù)組;不變

2;join('分隔符') 根據(jù)分隔符將數(shù)組的每一項鏈接,—— + 把,改成分隔符了

返回;新字符串

原數(shù)組;沒改變

eval 將字符串轉(zhuǎn)為js代碼執(zhí)行

eval('3+4+5')

返回的是12

28數(shù)組的排序跟倒序

排序和倒序 原數(shù)組改變

1;sort(排序) 只能進行9以內(nèi)的排序

返回的是一個排好序的新數(shù)組

原數(shù)組改變

ary.sort(function(a,b)){

return a-b;從小到大排序

}

ary.sort(function(a,b)){

return b-a;從大到小排序

}

2;倒序

reverse()

將數(shù)組反轉(zhuǎn)

返回值;新數(shù)組

原數(shù)組;改變

29;原數(shù)組不變

常用但不兼容,ie6-ie8

1)indexOf(內(nèi)容) 根據(jù)內(nèi)容找到在數(shù)組中第一次出現(xiàn)的索引 索引的位置

找不到的話,返回-1

返回值;索引(的位置)

應(yīng)用:判斷數(shù)組中是否存在這個內(nèi)容

2)lastIndexOf(內(nèi)容)根據(jù)內(nèi)容找到在數(shù)組中最后第一次出現(xiàn)的索引 索引的位置 找不到的話,返回-1

返回值;索引(的位置)

3)map()遍歷數(shù)組中的每一項

有返回值

ary.map(function(a,b,c)){

a;每一項的內(nèi)容

b;每一項的索引

c;原數(shù)組

}循環(huán)數(shù)組中的每一項

4)forEach()

沒有返回值

區(qū)別:map有返回值 ?forEach沒有返回值

實例創(chuàng)建數(shù)組

實例創(chuàng)建數(shù)組

var ary=new Array(12);12是設(shè)定數(shù)組的長度

var ary=new Array('12','12') ?[12,12]

var ary=new Array(12,23) 這樣數(shù)組有兩項,分別是12 和13

字符串的方法

字符串

1.通過下標找字符

2.通過字符找下標

charAt(索引) 通過下標找對應(yīng)字符

charCodeAt(索引) 通過下標找對應(yīng)字符的 Unicode 編碼

indexOf():從前往后找; 找到的時候,返回對應(yīng)的索引,找不到,返 回-1;

lastIndexOf():從后往前找; 找到的時候,返回對應(yīng)的索引,找不到, 返回-1;

3.字符串的截取

substr(n,m) 從索引n開始,截取m個;

substring(n,m) 從索引年開始,截取到索引m,包前不包后;

slice(n,m) slice功能跟substring一樣,但是slice支持負值;

4.字符串的轉(zhuǎn)大小寫 toLowerCase()

字符串轉(zhuǎn)小寫 toUpperCase() 字符串轉(zhuǎn)大寫

5.可以跟正則配合的字符串方法:

1)split('分隔符') 根據(jù) 分隔符 將字符串轉(zhuǎn)數(shù)組

2)replace(舊,新) 字符串替換

3)match() 捕獲:找到要找的字符,返回數(shù)組[內(nèi)容,索引,原字符串], 找不到返回null

4)search() 查找字符:找到的時候,返回對應(yīng)內(nèi)容的索引,找不到返 回-1;

DOM獲取元素

1;如果id值重復(fù)了,只能獲取第一個

可以直接通過id的名字進行操作,不推薦使用

在ie6還有ie7中,不區(qū)分id值的大小寫

document.getElementById('box');

2;通過標簽名獲取---一組元

類數(shù)組 ;索引 lenght

document.getElementsByTagName('li')

li.length 想要操作第一個li1 ?li1[0]

3;通過類名獲取---一組元素

var li1 =document.getElementsByClassName('li1')

想要操作第一個li1 ?li1[0] 類數(shù)組中索引為0的一項

不能對類數(shù)組進行操作,而是直接對這個類數(shù)組種的某一個元素進行操作

4;通過name獲取的方法 一般用于表單元素(表單元素)ie下只對表單元素起作用

var input=document.getElementsByName('sex');

也有對應(yīng)的索引還有長度 lenght

5;獲取body

document.body

獲取html

document.documentElement

6;獲取可視窗口的寬度

document.documentElement.clientWidth||document.body.clientWidth;

獲取可是窗口的告訴

document.documentElement.clientHeight||document.body.clientHeight;

7;不兼容 ?主要在移動端使用 他和css選擇器是一樣的

獲取一個元素 支持所有的選擇器

document.querySelector('#box')

獲取的是一組元素

document.querySelectorAll('li')

動態(tài)創(chuàng)建元素

動態(tài)創(chuàng)建元素

1.document.createElement('標簽名')

克隆

元素.cloneNode(true)

2.父容器.appendChild(oDiv) ? 在末尾的位置

把創(chuàng)建的標簽,放在頁面中

父容器.insertBefore(新,老) ?添加到老元素之前

3.父容器.removeChild(刪除的元素) ?刪除

父容器.replaceChild(新,舊) ?用新的替換舊的

元素節(jié)點

//節(jié)點;nodes ? ? ? ? ? ? ? nodeType(節(jié)點的類型) ? ? ? nodeName ? ? ? ? ? nodeValue

//元素節(jié)點(標簽) ? ? ? ? ? ? ? 1 ? ? ? ? ? ?大寫的標簽名 ? ? ? ? ? null

//文本節(jié)點(文字 空格 回車) ? ? 3 ? ? ? ? ? ? ?#text ? ? ? ? ? ? 文本的內(nèi)容

//注釋節(jié)點(注釋—) ? ? ? ? ? ? 8 ? ? ? ? ? ? ?#comment ? ? ? ? ? 注釋的內(nèi)容

//document ? ? ? ? ? ? ? ? ? ?9 ? ? ? ? ? ? ? #document ? ? ? ? ? null

childNodes ?獲取所有的子節(jié)點

children ? 獲取所有的子元素節(jié)點 ?【不兼容ie8】(不寫注釋的情況下,可以直接用)

parentNode ?父節(jié)點

previousSibling ?獲取上一個哥哥節(jié)點

xtSibling ?下一個弟弟節(jié)點

firstChild ?第一個子節(jié)點

lastChild ?最后一個子節(jié)點

childNodes 獲取所有的子節(jié)點

document.body.childNodes//獲取body下面所有的子節(jié)點

2;children 獲取所有的子元素節(jié)點 ?不兼容

document.body.children// ?獲取的是所有子元素的借點

3;parentNode ? 父節(jié)點

document.body.parentNode

自定義屬性的操作

1

: 自定義屬性的操作

屬性操作有三種方法;

1‘’.‘’

2;

[]

3;attribute系列

attribute系列;

獲??;obj.getAttribute(attr)-拿到元素身上自帶的屬性

設(shè)置;setAttribute(attr,value)

刪除:removeAttribute(attr)

點和attribute的區(qū)別

1)直接給標簽上添加自定義屬性,通過.獲取不到,但是通過getAttribute可以獲取到

2)設(shè)置時;通過.設(shè)置的自定義屬性,可以設(shè)置成功,但是在標簽上看不到,

而通過setAttribute設(shè)置的屬性,通過getAttribute獲取

注意;用.來設(shè)置,就用.來獲取

2

:設(shè)置自定義屬性

1. obj.屬性名 = 屬性值

2. 設(shè)置:元素.setAttribute('屬性名','屬性值')

獲?。涸?getAttribute('屬性名')

移除:元素.removeAttribute('屬性名')

Math函數(shù)

Math函數(shù)

Math不是類,他僅僅是一個對象,'Math' in window ==>true

他是window全局對象的一個屬性而已,這個對象包含了很多的方法,供我們操作數(shù)字,所以我們把它稱之為’數(shù)學(xué)函數(shù)‘

Math.floor(12.5) ?//向下取整 ?12.5

Math.ceil(12.5) ?//向上取整 ? 13

Math.min(1,2,3); ?//取最小值

Math.max(1,2,3); ?//取最大值

Math.round(12.5); ? //四舍五入

Math.random() ?//取[0,1)之間的隨機數(shù)

Math.round(Math.random()*(m-n)+n);

Math.abs() //絕對值

Math.PI() //3.1415926圓周率

Math.sqrt(9) ?//開平方

Math.pow()// ?冪次方 x的y次方 (2,3)2的3次方

Math.trunc(); ? 把小數(shù)點后面的數(shù)字切掉返回整數(shù)部分

Math.sign() ? 判斷這個數(shù)是不是正數(shù) 或者 負數(shù) 或者0 正數(shù)返回1 負數(shù)返回-1 ?0 返回0

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,618評論 0 13
  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,692評論 0 4
  • “陪我聊會吧,我離婚了。”準備睡覺的時候,手機閃出了微信消息。看著信息我卻不知道該怎么回復(fù),因為我無法感同身受。我...
    九月天使閱讀 351評論 5 4
  • 印象深的句子,因果就象在雨中收衣服完成人生課題才能消業(yè)力。匠人精神,無論你做那一行做到極致就接近道了。在我沒有...
    z茜子閱讀 331評論 0 0
  • 都說文如其人,我先摘錄三段文字,看大家能不能看出分我別是誰寫的,嘿嘿。最近特意搗騰書櫥,翻出畢業(yè)后莫名被雪藏的王小...
    Teacher桃貓?zhí)剿?/span>閱讀 480評論 0 0

友情鏈接更多精彩內(nèi)容