Js基礎知識

時間 2019-12-09

標籤基礎知識欄目 JavaScript 简体版

原文原文鏈接

1、Javascript是什麼?javascript

被設計用來向 HTML 頁面添加交互行爲css

一種腳本語言（腳本語言是一種輕量級的編程語言）html

一般被直接嵌入 HTML 頁面java

是一種解釋性語言（就是說，代碼執行不進行預編譯）正則表達式

2、javascript 與html 的結合方式編程

js與html的結合方式主要有兩種api

1，文件內結合方式：<script type="text/javascript">js代碼</script>數組

2，文件外記在js文件<script type="text/javascript" src="test.js"></script>瀏覽器

css與html文件結合的方式：服務器

1，文件內部樣式表<style type="text/css">樣式代碼</style>

2，外部樣式表<link rel="stylesheet" type="text/css" href="css_3.css" />

明顯js用src引用文件地址；css href一用，我認爲應該把js跟css html 做爲一體的就是網頁網頁就應該包含這些。

這些代碼都是由瀏覽器來解析的。而不是服務器，因此說網頁對於不一樣的瀏覽器有不一樣的顯示，這就是兼容性。

3、Javascript 語法

雖說是若類型的語言js的邏輯性跟java等面向對象的語言差很少，js也是區分大小寫的。

一、變量的聲明

js的所有變量能夠用var來定義，var至關於java的object 能夠說是全部數據類型的基類吧，可是java語言是須要編譯的

所以java不容許這樣的代碼：Object obj =34;int num =obj+56;這樣編譯的時候會出錯的，而js是解釋性的語言因此js不用編譯直接交給瀏覽器運行就行

所以js容許這樣的代碼var obj=34;var num=obj+67；當處理到第二段代碼時這時才肯定obj的類型是int類型，

也就是當執行程序的時候才肯定類型，所以咱們也能夠這樣寫var obj=34;var str=obj+"hah";這樣的話瀏覽器就將變量obj當成字符串來處理了。

也就是說網頁中的任何元素均可以用var來聲明的。

若是變量沒有賦值或沒有聲明，默認值爲：undefined

其實js是有數據類型的即在運行的時候它將會根據環境的到變量的數據類型而後處理數據（運行的時候）當運行的時候它就會處理該處理的數據類型

js原始數據類型：

number ：數字

string ：字符串，使用引號引發（單引號或雙引號）

boolean ：邏輯類型 true false

null ：表明的是空，通常用於引用類型賦默認值

undefined ：未定義，咱們在使用變量時，這個變量沒有聲明就使用了//這個變量還沒定義

若是變量沒有聲明，改變量將自動聲明

例如：x = "abc"; //以前沒有聲明，能夠直接使用

若是重複聲明變量，變量不會被重置或清除

例如：var x = "abc"; var x; alert(x); //結果還是abc

二、js的運算符沒什麼好說的主要記住的就是 "=="跟"==="雙等號是隻比較數值而不比較數據類型然後者不只比較數值還比較數據類型

例子：8=="8" 返回true 8==="8"返回false

三、函數（方法）

格式：

function 函數名(形式參數...)

{

執行語句；

return 返回值；

}

注意：一、函數是多條執行語句的封裝體，只有被調用纔會被運行。

二、函數的執行，只要寫了函數名後面跟一對小括號，該函數就會運行-----注意：咱們js動態綁定事件的時候不能寫括號只要寫括號就會

在綁定的時候執行，可是在html代碼的事件中添加處理方法的時候應該加括號，應爲只有當html事件觸發的時候纔會去通知它此時它就執行

三、調用有參數的函數，但沒有給其傳值，函數同樣能夠運行

四、調用沒有參數的函數，給其傳值，該函數也同樣運行。-------注意：運行函數的時候js默認會傳參數的他會傳當前調用該參數的對象

（1）網頁中好比<input type="button" onclick="fn_click(this);" /> 此時html傳的就是input這個標籤在fn_click函數中能夠設置參數接受

function fn(obj){

alert(obj.aa);

}

</script>

運行結果：aaaaaaaaaa

（2）js中動態綁定事件的時候，執行該參數的時候不用寫傳入參數，由於只要加括號寫傳入參數函數就會執行，傳入參數就能夠在運行函數是this直接調用

function init(){

document.getElementById("button01").onclick=fn;

}

function fn(){

alert(this.aa);

}

</script>

</head>

也就是說只要在js中綁定事件就不用（）；直接函數名便可，而在html代碼中用（）激活函數運行；

四、js對象

Array new Array();返回新建立並被初始化了的數組

屬性：length經常使用；

Boolean

Date new Date()

方法：getTime()

Math

Number

String

方法：substr(start,length)在字符串中抽取從 start 下標開始的指定數目的字符

substring(start,stop)提取字符串中介於兩個指定下標之間的字符

match(regexp)在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配

RegExp

Global

詳情信息查api w3c

五、js全局函數（至關與java的static修飾的函數直接調用就行）

decodeURI() 解碼某個編碼的 URI。

decodeURIComponent() 解碼一個編碼的 URI 組件。

encodeURI() 把字符串編碼爲 URI。

encodeURIComponent() 把字符串編碼爲 URI 組件。

escape() 對字符串進行編碼。

eval() 計算 JavaScript 字符串，並把它做爲腳本代碼來執行。（經常使用）

getClass() 返回一個 JavaObject 的 JavaClass。

isFinite() 檢查某個值是否爲有窮大的數。

isNaN() 檢查某個值是不是數字。（經常使用）

Number() 把對象的值轉換爲數字。

parseFloat() 解析一個字符串並返回一個浮點數。

parseInt() 解析一個字符串並返回一個整數。（經常使用）

String() 把對象的值轉換爲字符串。 String(object)

unescape() 對由 escape() 編碼的字符串進行解碼。

4、Javascript 操做html元素

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象，Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。

也就是說在瀏覽器解析html的時候就生成了dom樹，瀏覽器解析html的方式是dom方式，咱們不用本身解析，如果想修改html的元素咱們

只是操做已經存在的dom而後將內存修改好的寫如到當前瀏覽器解析的文件，

提示：Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問。

1，dom介紹

經過 JavaScript，您能夠重構整個 HTML 文檔。您能夠添加、移除、改變或重排頁面上的項目。

在 1998 年，W3C 發佈了第一級的 DOM 規範。這個規範容許訪問和操做 HTML 頁面中的每個單獨的元素。

全部的瀏覽器都執行了這個標準，所以，DOM 的兼容性問題也幾乎難覓蹤跡了。

DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。

DOM 被分爲不一樣的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：

Core DOM

定義了一套標準的針對任何結構化文檔的對象

XML DOM

定義了一套標準的針對 XML 文檔的對象

HTML DOM

定義了一套標準的針對 HTML 文檔的對象。

也就是說dom只是操做文檔的一種方式；

2，名詞解析

HTML 文檔中的每一個成分都是一個節點。

HTML DOM 的這樣規定：

整個文檔是一個文檔節點

每一個 HTML 標籤是一個元素節點

包含在 HTML 元素中的文本是文本節點

每個 HTML 屬性是一個屬性節點

註釋屬於註釋節點

HTML 文檔中的全部節點組成了一個文檔樹（或節點樹）

節點彼此間都存在關係

除文檔節點以外的每一個節點都有父節點

大部分元素節點都有子節點

當節點分享同一個父節點時，它們就是同輩(同級節點或兄弟節點)

3，節點訪問

節點信息：屬性直接"。" 元素.backgroundcolor="red";文本節點元素.innerHTML 能夠設置能夠獲取

父子關係：getElementById() 經過HTML元素的Id屬性得到第一個對象Element id值不能重複

getElementsByName() 經過HTML元素的Name屬性得到對象集合 name值能夠重複

getElementsByTagName() 經過HTML元素(標籤)名稱得到對象集合標籤名稱能夠重複

childNodes() 所有節點

增刪改：createElement(標籤名)

removeChild(子節點)

元素：setAttribute("屬性名稱","屬性值")

getAttribute("屬性名稱","屬性值")

文本：innerHTML，

dom解析方式只能由父節點刪除子節點

var x=document.getElementById("td01");

x.parentNode.removeChild(x);

注意：若是把特殊字符串 "*" 傳遞給 getElementsByTagName() 方法，它將返回文檔中全部元素的列表，元素排列的順序就是它們在文檔中的順序

五：最後事例

模擬註冊頁面級聯三級地址

說明：裏面的市縣級聯寫的有點代碼浪費，時間緊急就沒去修正

http://pan.baidu.com/s/1gdqp9lh

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。