關於js的一點筆記

1 .js的輸入輸出語句

方法	說明	歸屬
alert（msg）	瀏覽器彈出警示框	瀏覽器
console.log(msg)	瀏覽器控制檯打印輸出信息	瀏覽器
prompt(info)	瀏覽器彈出輸入框	瀏覽器

2 .變量

2.1 變量使用

1. 首先聲明變量

   var age; // 聲明一個名稱爲age的變量

2. 賦值

   直接age=18；就把18賦給了age這個變量

3. 變量初始化

   var age='pink';

3 .數據類型

3.1 簡單數據類型

簡單數據類型	說名	默認值
Number	數字型	0
Boolean	布爾值類型，true，flase等價於1和0	false
String	字符串類型，如「張三」，注意字符串都帶引號	「」
Undefined	var a；聲明瞭變量a可是沒有給值，此時a=undefined	undefined
Null	var a=null;聲明瞭變量a爲空值	null

isNaN() 這方法是用來判斷非數字 並返回一個值，若是數字返回的是 false 若是不是返回 true

特別的,isNaN會將空格字符轉化爲0

console.log(isNaN(12));返回false

3.2字符串型

3.2.1字符串長度

字符串經過length屬性，能夠獲得整個字符串的長度

var str="asdadasd"
str.length;

3.2.2 字符串拼接

• 多個字符串之間可使用+進行拼接，其拼接的方式爲 字符串+任何類型=拼接後的新字符串
• 拼接前會把字符串相加的任何類型轉化爲字符串，再拼接成一個新的字符串

3.3 boolean型

布爾類型有兩個值：ture和false，分別表明1，0

3.4 Undefined 和 Null

聲明沒被賦值的變量會是undefined

null是表明空值

3.5 獲取檢測變量的數據類型

typeof可用來獲取檢測變量的數據類型

typeof後面空格跟着變量

console.log(typeof 變量);

3.6數據類型轉換

prompt獲取過來的數據默認是字符串類型，此時不能進行加減乘除，須要轉換變量的數據類型

方式	說明	案例
toString()	轉成字符串	var num=1;alert(num.toString());
String()強制轉換	轉成字符串	var num =1;alert(String(num));
加號拼接字符串	和字符串拼接的結果都是字符串	var num=1;alert(num+‘我是字符串’)；
parselnt（string）函數	將string類型轉成整數數值型	parselent(‘78’)
parseFloat(string)函數	將string類型轉換成浮點數數值型	parseFloat(‘78.21’)
Number()強制轉換函數	將string類型轉換成數值型	Number(‘12’)
js隱式轉換	利用算術運算隱式轉換爲數值型	‘12’-0
parselnt(string)函數	將string類型轉成整數數值型	parselnt(‘78’)
parseFloat(string)函數	將string類型轉成浮點數數值型	parseFloat(‘78.21’)
Number()強制轉換函數	將string類型轉換成數值型	Number(‘12’)
js隱式轉換（-/**）	利用算數運算隱式轉換成數值型	‘12’-0
Boolean（)函數	其餘類型轉成布爾值	Boolean(‘ture’);表明空、否認的值都轉爲flase，其他true

特別注意，在alert中換行用\n，可是在document.write裏，換行用< br / >

\n是對對話框文本的換行

4.運算符

javascript中不少運算符表達形式和c語言差很少，這裏發現有些區別的地方

1. var a=(1>0)

   返回ture

   這是由於再js中，比較運算符若是正確會返回ture錯誤返回flase

5.流程控制

這一部分跟C語言也基本一致，沒什麼好說的

6.函數

在js中函數都是function來定義的

function 函數名（ ）{
}

函數的調用，js有獨特的調用方式

在超連接中調用

<a href="javascript:函數名"></a>

==在事件中調用==

好比點擊就是一個事件

兩個重要的內置函數

parseint （）提取字符串中的數字，只限提取整數

parseFloat（）提取字符串中的數字，能夠提取小數

7。字符串對象

咱們只用掌握length這一個屬性，在調用對象的屬性時，咱們要用到點運算符

1. 轉換成大寫字符串 字符串名 . toUpperCase() 轉換成小寫字符串 字符串名 . toLowerCase 這個方法獲得的是值的轉變，而實際字符串自己是沒變的

2. 獲取一個字符 字符串名 . charAt(n)

3. 截取字符串 字符串名 . substring（ start ,end ） 截取[start ,end)範圍，end能夠省略，表示截取到最後

4. 替換字符串 字符串名 . replace (原字符串，替換字符串)

   ​ 字符串名 .replace(正則表達式，替換字符串 ) 正則表達式 / 字符串 /g

   ==兩種不同，後者是替換字符串中全部相同的，而前者是替換字符串中第一個所選字符串==

5. 分割字符串 字符串名 . split（「 分隔符」），把字符串分割成數組，分隔符能夠是一個或多個字符或者一個正則表達式，此外，分割符不做爲返回的數組元素的一部分

   特別的，若是分隔符爲空字符，那麼能夠分割每個字符

6. 檢索字符串的位置 字符串名.indexOf(指定字符串) 這是找指定字符串首次出現的位置

   ​ 字符串名 . lastIndexOf(指定字符串) 這是找指定字符串最後一次出現的位置

   ​ 若是不含指定字符串，則會返回 -1

8. 數組對象

用法

var 數組名 ={"a" "c" "v" "v" "v"}

9.時間對象

語法

var 日期對象名 =new Date();

建立一個日期對象，必須使用new關鍵字

• 若是沒有參數返回當前時間

10. 數學對象

11. DOM

11.1獲取元素的方法

• getElementByld() 經過id選中

• getElenmentsByTagName() 經過標籤

• getElementsByClassName() 經過class

• querySelector()和querySelectorAll() 前者是表示所選的第一個元素，後者表示第二個元素，二者的跟着的是選擇器，因此該加 。的要加 。，該加# 的要加#

• getElementsByName() 是經過name屬性來獲取元素，通常用於表單元素，單選按鈕和複選框

• document.title 和document.body.

  這些方法，在用的時候，用法都是 document.方法（「 須要引用的」）

  若是放在head裏，那就要加個window.onload=function {.........}

  若是這個方法在若是在body裏，就必定要放到存放這個id屬性標籤的下方，不然會出錯

  咱們習慣的在DOM對象變量命名時候，以「o」開頭，以代表這是一個DOM對象

11.1.1 getElementByld()

經過id選中元素

11.1.2 getElementsByTagName()

若是要指定某個父元素中的子元素時，咱們先用id來選中父元素

創造元素

語法

var e1(變量名)=document.createElement("元素名");  //創造元素節點
var txt（變量名）=document.createTextNode("文本內容")  //建立文本節點
e1.appendChild(txt);                  //把文本節點插入元素節點中
e2.appendChild(e1);                 //把組裝好的元素插入已存在的元素中

當給創造的元素賦予屬性的時候，class不能用，由於class是保留字，因此咱們用classname

總結：創造元素須要下面四步

1. 建立元素節點，
2. 建立文本節點
3. 將文本節點添加到元素節點中
4. 將元素節點添加到已有元素中去

除了appendChild還有insertBefore()

前者是將新元素插到父元素最後一個子元素後

後者是將元素插到父元素的一個子元素以前

用法

A.insertBefore (B,ref);     A是父元素，B是新子元素，ref 是指定的子元素

刪除元素

語法

A.removeChild(B);A是被刪除元素的父元素，B是被刪除元素

複製元素

語法

A.cloneNode(bool) A表示被複制的元素，bool是個布爾值，取值
1或true 表示被複制元素自己以及複製該元素下全部的元素
0或false 表示僅僅複製元素自己，不復制該元素下的子元素

替換元素

A.replaceChild(new,old);A表示父元素，B表示新子元素，old表示舊元素

2 .DOM進階

HTML屬性操做（對象屬性）

2.1 獲取HTML屬性值

語法

obj.attr

(obj是元素名)，是一個DOM對象，指的是用元素操做獲得的元素節點

attr是屬性名

2.2 設置HTML屬性值

obj.attr="值"；

2.3 使用對象方法來進行屬性操做

1. 元素名.getAttribute(「屬性」) 此方法和 元素名.屬性同樣能夠得到元素某個屬性的值，只是前者能夠拿到自定義屬性，然後者不行
2. 元素名.setAttribute(「屬性」 ，「值」) 此方法能夠設置屬性的值，一樣，和前面的設置方式同樣，但自定義函數不行
3. 元素名 .removeAttribute(「屬性」) 移除元素的屬性
4. 元素名.hasAttribute(「屬性」) 用來判斷元素是否含有某個元素，含有返回true，不含返回flase

總結

對象屬性方式和對象方法方式均可以用來操做靜態或動態DOM，只有對象方法方式才能操做自定義屬性

css屬性操做

一樣分爲獲取和設置倆種

• 獲取CSS屬性值

  getComputedStyle(obj).attr

  obj表示DOM對象，也就是經過getElementByld()等方法獲取的元素節點

  attr表示css屬性名

• 設置CSS屬性值

  設置一個CSS屬性值，有兩種方式能夠實現

  • style對象

  • cssText屬性

    obj.style.attr = "值"   attr是css屬性名，attr要用駝峯命名，由於在這裏，attr做爲變量出現，變量不能用-
    obj.style.cssText= "值";   這個不用駝峯，就css什麼樣就什麼樣

DOM遍歷

即查找元素

• 查找父元素

  能夠用parentNode屬性來獲取

  obj.parentNode   obj是DOM對象,元素

• 查找子元素

  childNodes獲取的是全部的子節點,firstChild lastChild 這裏是得到全部節點,包括元素節點以及文本節點

  children .firstElementChild \ lastElementChild.得到的是元素節點 想得到任意節點能夠用數組形式

  注意:空白也是節點,換行也是節點,是文本節點

• 查找兄弟元素

  • previousSibling查找前一個兄弟節點 nextSbling查找後一個兄弟節點
  • previousElementSibling 前一個兄弟元素節點 nextElementSibling後一個兄弟元素節點

• innerHTML和innerText

  • innerHTML得到的是元素內全部內容
  • innerText得到的是文本里內容

  attr.innerHTML="..
  ........
  "//將.........元素添加到或屬性添加到元素中

事件

鼠標事件

事件	說明
onclick	單擊
onmouseover	移入
onmouseout	移出
onmousedown	鼠標按下
onmouseup	鼠標鬆開事件
onmousemove	鼠標移動事件

鍵盤事件

1. 鍵盤按下：onkeydown
2. 鍵盤松開:onkeyup

表單事件

1. onfocus和onblur
2. onselect
3. onchange

onfocus表示得到焦點時觸發的事件，onblur表示失去焦點時觸發的事件

得到焦點和失去焦點特色的元素只有兩種

1. 表單元素
2. 超連接

onselect當咱們選中單行文本框或多行文本框內容時，就會觸發

onchange用於具備多個選項的表單元素

編輯事件

• oncopy禁止複製
• onselectstart禁止選取文本
• oncontextmenu禁止鼠標右鍵

頁面事件

• onload
• onbeforeunload

事件監聽器

綁定事件

指的是用addEventListener()方法爲一個元素添加事件

語法

obj.addEventListener(type ,fn ,false)
obj 是DOM對象   type是一個字符串   這個事件類型是不用加on前綴，單擊事件就用click，鼠標移入就用mouseover
fn是一個函數名，或是一個匿名函數
false表示事件冒泡階段調用

解綁事件

obj.removeEventListener(type,fn,false);

this

能夠理解爲，哪一個DOM對象調用了this所在的函數，那麼this指向的就是哪一個DOM對象

窗口操做

打開窗口

window.open(url,target)   url 表示新窗口的地址，target 表示新窗口打開方式，和html同樣

關閉窗口

window.close()方法是沒有參數的

對話框

對話框有三種alert、confirm、prompt 都是window對象的方法是能夠省略window前綴

alert無需多言，只是彈出對話框

confirm不只彈出對話框，還帶有肯定和取消，肯定返回ture，取消返回false

prompt不只會提示文字，還帶有一個文本框，以便用戶輸入字符串，返回字符串

定時器

setTimeout（code,time）code能夠是一段代碼，能夠是一個函數，也能夠是一個函數名，

time是時間，單位爲毫秒，表示要過多久才執行code中的代碼

clearTimeout()暫停

setlnterval(code，time)能夠重複的調用，並用clearlnterval中止

document對象

document.URL屬性來獲取當前網頁的地址

那window.location.href也能夠獲取當前頁面URL，可是他們也有區別，前者只能讀取，後者還能夠操做