有什么做動畫的網(wǎng)站seo的英文全稱是什么
寫在前面:本文用于快速學(xué)會簡易的JS,僅做掃盲和參考作用
1.JavaScript函數(shù)
什么是函數(shù):執(zhí)行特定任務(wù)的代碼塊
1.1定義:
使用function來進(jìn)行定義(類似于python里面的def 或者java和c++里面的void,int這些返回類型開頭)。定義規(guī)則如下:
function Func_1(para1, para2){//代碼塊
}
注意,para1和para2這種形式參數(shù)不需要給類型,返回值也不需要定義類型(屬于弱語言定義,和python是類似的效果)
1.2調(diào)用函數(shù):
1.2.1直接定義和調(diào)用:
function add(a, b){return a+b;
}
var m = add(1,2)
1.2.2直接定義的同時調(diào)用:
var add = function(a, b){return a+b;
}
var m = add(1,2)
2.JavaScript對象
JS和眾多的語言一樣,具備著面向?qū)ο缶幊痰奶攸c,所以我們在此章節(jié)討論JS里面的對象。JS有著各種各樣的對象,我們主要講比較重要的幾種對象。
對象模型 | 子模型 |
---|---|
Array(數(shù)組模型) | |
String(字符串模型) | |
JSON(JavaScript Object Notation模型) | |
BOM(Browser Object Model) | window(瀏覽器窗口對象),history(歷史對象),location(獲取窗口、框架對象),navigator(對Navigator對象的只讀引用) |
DOM(Document Object Model) | Document(整個文檔的對象),Element(元素對象),Attribute(屬性對象),Text(文本對象),Comment(注釋對象) |
2.1Array(數(shù)組):
2.1.1定義方式:
//第一種
var arr = new Array(1,2,3,4);
//第二種
var arr = [1,2,3,4];
2.1.2屬性和使用方式:
數(shù)組的長度是可變的,存放數(shù)據(jù)類型也可以改變,例子如下:
var arr = [1,2,3,4]
arr[10] = "50"
alert(arr)
alert(arr[5])
我們可以看到數(shù)組的輸出長度已經(jīng)變成了11,然后中間未定義的數(shù)組類型已經(jīng)變成了undefined類型(未定義類型)。
Array對象里面內(nèi)置了各種屬性和方法,我們介紹比較常見的屬性和方法:
屬性or方法 | 作用 |
---|---|
length | 返回數(shù)組的長度 |
forEach() | 遍歷數(shù)組中每個有值的元素,返回值為依次彈出來的值 |
push() | 往數(shù)組末尾添加新元素,返回新的長度 |
splice() | 從數(shù)組中刪除元素,使用兩個參數(shù),第一個為開始的位置(從0開始),第二個為刪除的數(shù)量為多少 |
通過以下代碼即可看到各個函數(shù)的效果
arr = [1,2,3,4]
alert(arr.length) //獲取到數(shù)組的長度
arr.forEach(element=>{alert(element)
});
arr.push(2)
arr.splice(0,1)
alert(arr)
2.2String(字符串):
2.2.1定義方式:
//第一種
var a = new String("HelloJS")
//第二種
var a = "HelloJS"
2.2.2 屬性和方法
屬性or方法 | 作用 |
---|---|
length | 獲取字符串長度 |
charAt() | 獲取下標(biāo)位置所在的字符 |
indexOf() | 檢索字符串,輸入的參數(shù)為需要找到的字符串,返回的是找到的子字符串的開頭的下標(biāo) |
trim() | 去掉字符串兩邊的空格 |
substring() | 截取字符串,參數(shù)為start和end,截取到start到end的字符串,和JAVA類似,截取到的僅包括start而不包括end |
通過以下代碼可以看到各個函數(shù)的效果:
var str = new String(" HelloJS ")
console.log(str)
console.log(str.length)
console.log(str.charAt(1))
console.log(str.indexOf("ll"))
console.log(str.trim())
console.log(str.substring(1,2))
效果如下所示:
2.3JSON(JavaScript Object Notation):
2.3.1 定義方式:
當(dāng)我們定義普通的自定義類的時候,使用如下方式實現(xiàn)自定義類
var Json = {name:"Tom",age:18,zong:add(a,b){return a+b;}
};
JSON實際上是一種特殊的自定義類,它和自定義類的區(qū)別在于JSON對象的所有屬性都需要雙引號括起來(如下個示范代碼所示,單引號也是不行的,且最后一行的屬性不準(zhǔn)使用",",否則就不是格式正確的JSON格式,且JSON里面不包含自定義類的方法)
var json={"name":"Jerry","type":"rabbit","age":10
};
如果需要驗證自己的JSON格式是否正確,可以到這個網(wǎng)站來測試自己的JSON格式是否正確,如下圖所示則為正確的格式
2.3.2 如何使用:
JSON多用于數(shù)據(jù)載體,主要在網(wǎng)絡(luò)中進(jìn)行數(shù)據(jù)傳輸。在使用的時候,使用字符串進(jìn)行包裝然后進(jìn)行賦值給變量。如何獲得JSON對象的字符
//JSON字符串到JS對象
var jsObject = JSON.parse(userStr);
alert(jsObject.name)
//從JS對象到JSON字符串
var jsonStr = JSON.stringify(jsObject)
2.4BOM(Browser Object Model):
全稱為瀏覽器對象模型,被用于JS與瀏覽器進(jìn)行對話。主要有以下幾種模型
對象 | 作用 |
---|---|
window | 瀏覽器窗口對象(重點了解) |
history | 獲取History對象的只讀引用 |
location | 獲取窗口或框架的Location對象(重點了解) |
navigator | 對navigator對象的只讀引用 |
2.4.1 window(窗口對象):
如何調(diào)用:
window.alert("Hello")
//由于默認(rèn)的Window會使用,所以可以直接省略window
alert("Hello")
window里面所能使用的方法為:
方法 | 作用 |
---|---|
alert() | 顯示帶有一段消息和一個確定按鈕的警告框 |
confirm() | 顯示帶有一段消息以及確定按鈕和取消按鈕的對話框,點擊確定按鈕返回值為true,點擊取消返回的值為false |
setInterval() | 按照指定的周期(以毫秒計)來調(diào)用函數(shù)or計算表達(dá)式,周期性的執(zhí)行,調(diào)用方式為setInterval(function(){},2000),每隔2000ms調(diào)用一次function() |
setTimeout() | 和setInterval()差不多,在指定的毫秒數(shù)后調(diào)用函數(shù),但是setTimeout(function(){},2000)僅僅只執(zhí)行一次 |
需要注意的事,我們在使用setInterval的時候,里面的function(){}不能帶有形式參數(shù),如果我們需要使用參數(shù),可以在function里面調(diào)用別的函數(shù)來傳遞參數(shù)
2.4.2 location(地址欄對象):
如何調(diào)用:
window.location.屬性
或者
location.屬性
常用屬性:
屬性 | 作用 |
---|---|
href | 設(shè)置或者返回完整的URL |
2.5 DOM(Document Object Model):
DOM為文檔對象模型,就是將標(biāo)記語言的各個組成部分封裝為對應(yīng)的對象。主要有以下幾種
對象 | 作用 |
---|---|
Document | 整個文檔構(gòu)成為一個對象 |
Element | 元素對象,如(html),(div)等都為元素對象 |
Attribute | 屬性對象,如(div)里面的href=等即為Attribute對象 |
Text | 文本對象,如div里面的文字屬性即為這個 |
Comment | 注釋對象 |
JS通過DOM和事件監(jiān)聽行為來控制網(wǎng)頁端的變化,主要可以實現(xiàn)下列效果:
1.改變HTML的內(nèi)容
2.改變HTML的樣式(改變CSS)
3.對DOM事件做出反應(yīng)
4.添加或者刪除HTML語言
2.5.1獲取方式:
HTML中的Element可以通過Document獲取,而Document可以通過window來獲取。
1.通過id,返回單個對象
var h1 = document.getElementById('h1');
2.通過標(biāo)簽名,獲得對象數(shù)組
var divs = document.getElementsByTagName('div');
3.通過name屬性值獲得對象數(shù)組
var hobbys = document.getElementsByName('hobby');
4.通過class屬性獲得對象數(shù)組
var clss = document.getElementsByClassName('cls');
通過以下代碼可以實現(xiàn)改變HTML語言??梢园扬@示的內(nèi)容從HelloJS改為 改變
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="use">HelloJS</div>
</body>
</html>
<script>var gai = document.getElementById('use');gai.innerHTML = "改變"
</script>