前端學習(4)

時間  2020-10-03
標籤 前端 學習 简体版
原文   原文鏈接

一 JavaScripthtml

　　JavaScript分爲三部分：ECMAScript（核心，是一套標準）、DOM（Document object model）、BOM（Browse object model）node

　　JavaScript是基於對象的，就是使用的是由JavaScript建立好的對象，基本不用本身去建立類python

二 JavaScript引入方式 c++

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


    <script>       {# 第一種方式 直接在script標籤中編寫 #}
        alert('hello damon')
    </script>

    <script src="js_study.js"></script> {# 第二種方式 導入*.js文件 #}

    {# srcipt標籤塊推薦放在body標籤塊的最後 #}
</body>
</html>
導入方式

三 JavaScript基礎正則表達式

3.1 變量數組

　　JavaScript是弱類型語言瀏覽器

　　聲明任何類型的變量要用‘var’關鍵字數據結構

　　　　var a;app

　　　　var name="damon", age=20;dom

　　注意：1.聲明變量若是不帶有var關鍵字，說明變量是全局變量；

　　　　　2.變量命名首字符只能是字母、下劃線或者美圓符，而且區分大小寫；

　　　　　3.變量命名通常格式：駝峯式基礎上首字符是類型縮寫，例如 var iAge=20; 表明是整型 ；

3.2 規範

　　1. 每條語句寫完後推薦加分號爲語句結束符，默認的語句結束符是回車；

　　2. 使用/* */ //來進行註釋，和c++相同；

　　3. 使用花括號{}來封裝代碼塊，和c++相同，和python不一樣；

3.3 JavaScript保留字

　　

 3.4 JavaScript運算符

　　1.算數運算符

　　+  -  *  /  %  ++  --  正負號（能夠轉字符串爲數字）

　　2.邏輯運算符

　　==  !=  ===(全等於)  !==(不全等)  >  <  >=  <==  &&  ||  !  &  |  ^ <<  >> 

　　類型轉換

　　　　（1）布爾類型轉換成數字

　　　　（2）字符串和數字類型，字符串轉換成數字

　　　　（3）對象和字符串類型，對象轉換成字符串

　　　　（4）對象和數字類型，對象轉換成數字類型

　　比較時規則

　　　　（1）null和undefined相等

　　　　（2）檢查是否相等，null和undefined不能轉換

　　　　（3）NaN和任何值都不能，和本身也不等

　　　　（4）對象比較引用值，若是引用指向同一個對象則相等，反之不等

　　　　（5）字符串比較，比較最高位字符的ASCII碼，若是相等比較下一位

　　3.賦值運算符

　　=

3.5 JavaScript控制語句

　　1.if else

　　語法與c++同樣

　　2.switch case

　　語法與c++同樣

　　3.for循環

　　語法與c++同樣

　　支持for(var i in a)這種寫法，但不推薦使用，而且能夠用到像字典數據結構的對象中，此時i是key 　

var obj = {"key1":"value1","key2":"value2"}
for(var i  in obj){
    console.log(i);  
    console.log(obj[i]);
}

　　4.while循環

　　語法與c++同樣

　　5.異常處理

　　語法與c++同樣　

try{

}
catch (...) {

}
finally {

}

四 ECMA對象

ECMA其實並不具備類，在ECMA標準中都沒有存在類這個說明，但它定義了「對象定義」，等價於類。

　　1.對象的種類

　　（1）native object：由ECMAScript定義的本地對象

　　（2）build-in object：ECMA實現的兩種獨立於環境的內置對象，Global和Math，內置對象屬於本地對象

　　（3）host object：ECMA實現的由宿主環境提供的對象，全部的DOM和BOM都是宿主對象

　　2.Object

　　全部對象的父類

　　方法：（1）ToString() 對象的字符串表示

　　　　　（2）Valueof() 返回對象原始值，絕大多數返回值與ToString()返回值相等

        3 Fuction對象

　　(1).定義

function 函數名(參數) {
    函數體；
    return 返回值；          
}

或者：
var func1 = new Function("a","alert(a)"};
func1(1);

　　第二種方式不經常使用，推薦使用第一種。

　　(2).說明

　　（1）能夠使用變量、常量或者表達式做爲函數調用的參數

　　（2）函數由關鍵字function定義

　　（3）函數名區分大小寫，規則與標識符一致

　　（4）使用return返回返回值

　　（5）調用函數的位置能夠在函數定義的上面

　　（6）JS調用函數時傳遞的參數個數與形參個數不一致，不會報錯

　　(3).length屬性

alert(func.length)  //函數指望的參數個數

　　(4).void

alert(void(func1(5,8))) //void用來攔截返回值

　　(5).Argument對象

        函數的內置對象，對象中包含傳遞給函數的全部參數。

function Add(){
    var sum=0;
    for(var index in arguments {
       sum += arguments[index];
    return sum;
}

Add(1,2,3,4,5,6,6);

　　(6).匿名函數

//形式一
var func1 = Function(arg){
    return arg;
}

//形式二
(Funcion(arg)){console.log(arg)})("Damon");

 　　4 String對象

　　(1).建立

var str="hello"  

var str=new String("hello") //這種方式建立出來的爲全局對象
建立

　　(2).屬性

var str = "hello"

str.length //字符串長度
屬性

　　(3).方法

var str = "hello"

//針對HTML格式的方法
str.italics()
str.anchor() //返回錨字符串
str.bold() //返回加粗字符串
str.sup() //返回上標格式字符串

str.toLowerCase() //返回全小寫字符串
str.toUpperCase() //返回全大寫字符串

str.charAt(1) //根據索引返回字符
str.charCodeAt(1) //返回索引的字符的Unicode編碼

str.indexof("h") //返回字符索引
str.lastindexof("l") //返回最後一個字符的索引

str.match("el") //返回匹配字符串的數組，沒有則返回null
str.seatch("lo")  //返回匹配字符串的首字符位置索引

str.substr(1, 3) //根據起始索引和長度，返回字符串
str.substring(1,3) //根據起始索引和結束索引，返回字符串
str.slice(1, 3) //與substring方法相比，索引位置能夠爲負數

str.replace("el", "le") //返回替換後的字符串
str.split("l") //返回切割後的字符串數組
str.concat(" world") //返回鏈接後的字符串

//以上方法都是返回新的字符串，對str原字符串沒有影響
方法

　　5 Array對象

　　相似c++中的數組，或者python中的列表

　　(1).建立

var arr = [1,2,3,"元素類型能夠不一樣"] //建立方式一

var arr = new Array(1,2,3,4) //建立方式二

var arr = new Array(4) //當第二種建立方式，只有一個數字時表明，數組長度
建立

　　(2).屬性

var arr = [1,2,3,4];

var arr_len = arr.length

　　(3).方法

join
concat
reverse
sort
slice
splice 
var arr = [1,2,3]

arr.push(4,5) //將4,5壓入數組結尾
arr.pop() //刪除數組最後一個元素

arr.unshift(6,7) //將6,7壓入數組起始
arr.shift() //刪除數組第一個元素
棧操做

 　　6 Date對象

　　(1).建立

var date = new Date(); //未添加參數，默認當前時間

var date = new Date("2020/4/17 21:49") //建立該日期的時間對象

var date = new Date("20/4/17 21:49") //建立該日期的時間對象
//不單單隻能用"/"進行分割，空格或者逗號均可以

var date = new Date(2000) //建立1970/1/1 0:0:00+2000毫秒的對象
建立

　　(2).方法

var date = new Date()

date.getFullYear() //獲取年
date.getMonth() //獲取月(0~11)
date.getDate() //獲取日
date.getDay() //獲取星期
date.getHours() //獲取小時
date.getMinutes() //獲取分鐘
date.getSeconds() //獲取秒
date.getMilliseconds() //獲取毫秒
date.getTime() //後去累積毫秒數(從1970/1/1 0:0:00起)
獲取時間  
var date = new Date()

date.setFullYear(2020) //獲取年
date.setMonth(4) //獲取月(0~11)
date.setDate(17) //獲取日
date.setDay(5) //獲取星期
date.setHours(21) //獲取小時
date.setMinutes(59) //獲取分鐘
date.setSeconds(20) //獲取秒
date.setMilliseconds(40) //獲取毫秒
date.setTime(2000) //後去累積毫秒數(從1970/1/1 0:0:00起)
設置時間 
getTimezoneoffset() //返回本地時間與GMT時間的時間差。單位爲分鐘
toUTCString() //返回國際標準時間的字符串
toLocalStirng() //返回本地時間的字符串

parse(x) //返回累積毫秒數(從1970/1/1 00:00:00到本地時間)
UTC(x) //返回累積毫秒數(從1970/1/1 00:00:00到世界時間)
轉換

 　　7 RegExp對象

var reg1 = new RegExp("參數一", "參數二")  //建立方式一
//參數一爲正則表達式 參數二爲驗證模式 g globla, i 忽略大小寫

var reg2 = /^正則表達式/g/i   //建立方式二

//正則表達式與字符串對象結合的四中方法
var str = "Hello world"

str.match(/o/g)  //返回字符創中符合正則表達式的內容，放進數組
str.search(/o/g) //返回符合正則表達式內容的索引
str.split(/o/g) //按照正則表達式進行切割，放進數組
str.replace(/o/g,"damon") //按照正則表達式對字符串進行替換
正則對象

　　8 Math對象

//Math對象是內置對象，不用本身建立，直接調用便可

Math.pow(2,4) //2的4次方
Math.abs(a) //返回數的絕對值
Math.exp(a) //返回數的指數
Math.log(a) //返回數的天然對數，底爲e
Math.max(x,y) //返回兩個數的最大值
Math.min(x,y) //返回兩個數的最小值
Math.random() //返回0~1之間的隨機數
Math.round(x) //返回根據x四捨五入的數
Math.sin(x) //返回數的正弦
Math.sqrt(x) //返回數的平方根
Math.tan(x) //返回數的正切
Math

五 Window對象

全部瀏覽器都支持window對象，一個html對應一個window對象，是用來控制窗口的，使用時直接調用方法就能夠了，是個全局對象。

1.方法

alert() //顯示一段消息和確認按鈕的警告
confirm() //顯示一段消息和確認及取消按鈕的警告
promt() //顯示可提示用戶輸入的對話框

open() //打開新的瀏覽器窗口，或者查找已存在的窗口
close() //關閉瀏覽器窗口

setInterval() //按照指定的週期，循環調用函數，單位是毫秒。返回值爲ID
clearInterval() //根據ID，取消循環調用

setTimeout() //指定毫秒數後調用函數 返回ID，函數只被執行一遍
clearTimeout() //根據ID取消timeout後調用函數

scrollTo() //把內容滾動到指定的座標

 六 History對象

history對象包含用戶（在瀏覽器窗口中）訪問過的URL，是window對象的一部分，能夠經過window.history屬性進行訪問。

1.屬性

length 返回瀏覽器歷史列表中的URL數量

2.方法

back() 加載history列表中的前一個URL

forward() 加載history列表中的下一個URL

go() 加載history列表中的某個具體頁面

<a href="html2.html">click</a>
<button onclick="history.forward()">forward</button>
<button onclick="history.back()>back</button>
<button onclick="history.go()">go</button> //go()參數填1表明前進，-1表明後退

 六 Location對象

Location對象包含有關當前URL的信息

Location對象是Window對象的一部分，可經過window.location屬性來訪問

1.方法

location.reload() //刷新當前頁面
location.replace(URL) //URL的html文檔取代當前窗口文檔，是不能退回的
location.assign(URL //跳轉到URL文檔，是能夠返回的

2.屬性

location.href="www.baidu.com"，跳轉到百度頁面，與<a>標籤的href屬性相似

七 DOM對象

DOM是萬維網的標準，定義了訪問HTML和XML文檔的標準，它中立於平臺和語言的接口，容許程序和腳本動態地訪問和修改文檔的內容、結構和樣式。

  1. 核心DOM：針對任何結構化文檔的標準模型
  2. XML DOM：針對XML文檔的模型，定義了全部XML元素的對象、屬性和訪問的方法
  3. HTML DOM：針對HTML文檔的模型，定義了全部HTML元素的對象、屬性和訪問方法

1.HTML DOM

HTML文檔中的全部內容都是節點(node)

  • 文檔是一個文檔node(document對象）
  • 每一個HTML元素是元素node(element對象)
  • HTML元素屬性是屬性node(attribute對象)
  • 註釋是註釋node(comment對象)

任何node都有兩類屬性：

　　（1）自身屬性

  • attribute: 節點的屬性節點
  • nodeType: 節點類型
  • nodeValue: 節點值
  • nodeName: 節點名稱
  • innerHTML: 節點的文本值

　　（2）導航屬性

  • parentNode: 節點的父節點
  • firstNode: 節點的第一個子元素(包括空格、回車和文本)
  • lastNode: 節點的最後一個子元素(包括空格、回車和文本)
  • childNodes: 節點的全部子節點(包括空格、回車和文本)

　　推薦使用：

  • parentElement：父節點標籤元素
  • children：全部子標籤
  • firstElementChild：第一個子標籤元素
  • lastElementChild：最後一個子標籤元素
  • nextElementSibling：下一個兄弟標籤
  • previousElementSibling：上一個兄弟標籤

有相同父節點的節點們稱爲同胞(Sibling)

JS代碼訪問HTML元素(節點)能夠經過如下方式：

  1. getElementById()
  2. getElementsByTagName()
  3. getElementsByClassName()
  4. getElementsByName()

 全局查找經過document去調用以上方法；

局部查找經過已拿到的對象只能夠調用2,3方法

八 DOM Event(事件)

事件用來觸發某個動做

onclick     //響應鼠標點擊
ondbclick //響應鼠標雙擊

onfocus    //響應元素獲取鼠標焦點
onblur      //響應元素失去鼠標焦點

onchange  //響應元素內容發生改變

onkeydown //響應鍵盤按鍵被按下
onkeypress //響應鍵盤按鍵被按下並鬆開
onkeyup     //響應鍵盤按鍵鬆開

onmousedown //響應鼠標被按下
onmousemove //響應鼠標被移動
onmouseout    //響應鼠標從元素移走
onmouseover  //響應鼠標移動元素上

onselect         //響應鼠標文本被選中

onload       //響應頁面完成加載 只給body標籤加

onsubmit  //響應提交表單，只給form元素添加

以上時間能夠在HTML標籤中直接添加，也能夠在JS代碼中獲取標籤對象後，經過對象添加。

Event時間一般與函數結合使用

九 DOM增刪改查

增：

　　createElemet(name)建立元素

　　appendChild(「元素對象」);將元素對象添加到父元素對象中

刪：

　　1.得到要刪除的元素

　　2.得到它的父元素

　　3.調用removeChild()刪除

改：

　　使用setAttribute()修改元素屬性

　　使用innerHTML修改元素內容

查：

　　上面介紹過的四中方法

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程