JavaScript基礎總結

時間 2019-11-08

標籤 javascript 基礎總結欄目 JavaScript 简体版

原文原文鏈接

1、javascript引入方式:

//這裏寫的js代碼無效

</script>

//這裏的代碼就有用了

alert('hello world ,again')

</script>

</head>

<body>

<div onclick="alert('hello world')">這是一個div</div>

</body>

2、JavaScript基本語法:

1.定義:

var iNum01 = 12,sTr ='abc',bisMove = true;

// 若是沒有定義類型和值,默認就是undefine

var iNum02;

2.js基本類型:

一、number 數字類型

二、string 字符串類型

三、boolean 布爾類型 true 或 false

四、undefined undefined類型，變量聲明未初始化，它的值就是undefined

五、null null類型，表示空對象，若是定義的變量未來準備保存對象，

能夠將變量初始化爲null,在頁面上獲取不到對象，返回的值就是null

3.函數:

// js用分號的緣由是,未來調用的時候回壓成一行,爲了區別代碼因此用了分號

// 若是函數執行在函數的定義上面,這個是函數的預解析,都是能夠用的

// 函數調用

fnMyalert();

//定義函數

function fnMyalert() {

// 函數體能夠包裹其餘函數,以下的alert函數

alert('ok')

}

// 調用函數

// fnMyalert();

// 變量的預解析,變量在下面定義,在上面調用,變量的值是undefined.

alert(iNum01);

var iNum01 = 211;

var a = 10,b = 20 ;

alert("a + b = " +a + b)

</script>

4.條件語句if:

var iNum01 = 12;

var sNum01 = '12';

if(iNum01==12){

alert('相等! ');

}

else{

alert('不相等! ');

}

// '=='符號會將符號兩邊的變量轉換成數字類型再進行對比,這個叫作隱式轉換

if(sNum01==12){

alert('相等! ');

}

else{

alert('不相等! ');

}

// '==='不會作隱式轉換

if(sNum01===12){

alert('相等! ');

}

else{

alert('不相等! ');

}

if(10>5 && 20>15 && 2>3){

alert('都大於');

}

else{

alert('至少有一個不大於')

}

if(10>5 || 20>15 || 2>3){

alert('至少有一個不大於');

}

else{

alert('都不大於')

}

if(!10>5){

alert('大於');

}

else{

alert('不大於');

}

</script>

5.獲取元素:

//window.onload表示窗口的載入事件,這樣能夠進行預加載,直白一點就是說能夠寫上面

window.onload = function(){

// 由於document.getElementById('div01')的返回值是一個對象

var oDiv = document.getElementById('div01')

oDiv.style.color = 'red';

oDiv.style.fontSize = '30px';

oDiv.style.width = '200px';

oDiv.style.height = '200px';

oDiv.style.background = 'gold';

}

</script>

<body>

<div id="div01" >這是一個div</div>

</body>

6.操做元素屬性:

window.onload = function(){

// 獲取

var oDiv = document.getElementById('div01');

var oA = document.getElementById('link01')

// 獨缺屬性值

var sId = oDiv.id;

alert(sId);

// 寫屬性值,也叫作設置屬性值

oDiv.style.color = 'red';

oDiv.style.fontSize = '30px';

// 操做class屬性,class屬性名要寫成className

oA.className = 'sty02';

// 操做元素包裹的內容

// 讀取內容

var sTr = oA.innerHTML;

var sTr2 = oDiv.innerHTML;

alert(sTr);

// 修改內容,寫入內容

oA.innerHTML = '改變文字';

oDiv.innerHTML = '<a href = "http://www.itcast.cn">創中國</a>'

oDiv.innerHTML = '<ul><li>變成列表了</li><li>變成列表了</li><li>變成列表了</li></ul>'

}

</script>

<body>

<div id="div01">這個仍是一個div</div>

<a href="#" class="tay01" id="link01">這廝一個連接</a>

</body>

6.點擊事件:

window.onload = function(){

var oBtn = document.getElementById('btn');

var oDiv = document.getElementById('div01');

// function fnChange(){ 改寫成下面的匿名函數

oBtn.onclick = function(){

oDiv.style.width = '300px';

oDiv.style.height = '300px';

oDiv.style.background = 'gold';

}

// 點擊事件關聯函數

// oBtn.onclick = fnChange;

}

</script>

<body>

<div id="div01">這是一個div</div>

</body>

7.數組:

// 第一種建立數組的方法

var aList01 = new Array(1,2,3);

// 第二種建立數組的方法:直接量的方式

var aList02 = ['a','b','c','d']

// 獲取數組成員的個數

var iLen = aList02.length;

// alert(iLen)

// 操做數組的某個成員

alert(aList02[2]);

//在數組後面增長成員

aList02.push('e')

alert(aList02);

// 在數組後面刪除成員

aList02.pop()

// alert(aList02)

// 將數組反轉

aList02.reverse();

// alert(aList02);

// 將數組轉換成字符串

var sTr = aList02.join('-');

var sTr2 = aList02.join('');

// alert(sTr);

// alert(sTr2);

var aList03 = ['a','b','c','d','e','a','b'];

// 在數組中增長或者刪除成員

// 從第4個('e')開始刪除,刪除兩個,獲得abcdb

aList03.splice(4,2);

// alert(aList03);

// 從第四個開始刪除,刪除一個,任何增長'e','f'兩個元素

aList03.splice(4,1,'e','f');

alert(aList03);

// 獲取某個成員在數組中第一次出現的索引值

var aList04 = ['a','b','c','d','e','a','b','b','a','c'] ;

var iPost = aList04.indexOf('c');

alert(iPost);

</script>

8.循環(for):

var aList = ['a','b','c','d','e','f'];

var iLen = aList.length;

//遍歷

for(var i = 0;i<iLen;i++){

alert(aList[i]);

}

var aList01 = ['a','b',,'a','c','d','b','e','f'];

var aList02 = [];

//去重

for(var i=0;i<aList01.length;i++){

if(aList01.indexOf(aList01[i])==i){

aList02.push(aList01[i]);

}

alert(aList02);

</script>

9.將數組載入頁面中:

window.onload = function(){

var oList = document.getElementById('list');

var aList = ['七龍珠','高達','火影','海賊','死神','魯路修',''];

var sTr = '';

//遍歷數組內容,存放在空字符串中

for (var i = 0;i<aList.length;i++){

sTr += '<li>' + aList[i] + '</li>'

}

//替換頁面內容

oList.innerHTML = sTr;

}

</script>

</head>

<body>

</ul>

</body>

10.字符串反轉:

var sTr1 = 'afuiajflasjfl230893482';

var sTr2 = sTr1.split('').reverse().join('');

alert(sTr2);

</script>

11.字符串:

var iNum01 = 12;

var sNum01 = '12';

var sNum02 = '26';

var sNum03 = '88.90';

// '+'符號兩遍若是都是數字,就作加法運算,若是有一個是字符串,就作字符串拼接操做

alert(iNum01 + 10);

alert(iNum01 + sNum01);

// parseInt方法將整數的字符串轉化爲整數,若是是小數的字符串會將小數去掉

alert(parseInt(sNum02) + iNum01);

alert(parseInt(sNum03) + iNum01);

// parseFloat會將小數字符串轉換爲小數

alert(parseFloat(sNum03) + iNum01);

// 將字符串轉換爲數組

var sTr = '2018-06-14';

var aList = sTr.split('-')

var aList2 = sTr.split('');

alert(aList);

alert(aList2);

var sTr2 = 'jdfafka11hk2332akfh';

var iPos = sTr2.indexOf('888');

alert(iPos);

// 切取字符串,從11開始切,到16結束

var sTr3 = sTr2.substring(11,16);

alert(sTr3);

// 若是不寫結束就直接切到結尾

var sTr4 = sTr2.substring(11);

alert(sTr4);

</script>

12.定時器(setInterval):

function fnMalert(){

alert('上牀了!');

}

// fnMalert();

// 建立只執行一次的定時器

// 第一個參數是要調用的函數名稱,第二個參數是間隔時間,單位是毫秒,咱們不用寫單位

// setTimeout(fnMalert,2000);

var oTimer01 = setTimeout(fnMalert,2000);

// 關閉只執行一次的定時器

// clearTimeout(oTimer01);

// 建立反覆執行的定時器

var oTimer02 = setInterval(fnMalert,2000);

// 關閉反覆執行的定時器

// clearInterval(oTimer02);

</script>

-----------------

<style>

.box{

width: 200px;

height: 200px;

background: gold;

margin-left: 10px;

position: fixed;

top: 100px;

left: 0px;

}

</style>

window.onload = function(){

var oDiv = document.getElementById('box');

var iLeft = 0;

function fnMove(){

iLeft += 3;

oDiv.style.left = iLeft + 'px';

}

// for(var i = 0;i < 19;i++){

// fnMove();

// }

setInterval(fnMove,30);

}

</script>

<body>

</body>

13.變量定義域:

// 定義全局變量

var iNum01 = 12;

function fnMyalert(){

//定義局部變量

var iNum02 = 24;

// 調用全局變量

alert('函數裏面彈出：'+iNum01);

//調用局部變量

alert('函數裏面彈出：'+iNum02);

// 在函數內部修改全局變量

iNum01 = 13;

alert('函數裏面彈出：'+iNum01);

// 函數內部定義變量時，若是不用var關鍵字，那麼它使用一次以後，就會變成全局變量

iNum03 = 48;

}

fnMyalert();

// 函數外部調用全局變量

alert('函數外面彈出：'+iNum01);

alert('函數外面彈出：'+iNum03);

alert('函數外面彈出：'+iNum02);

</script>

14.封閉函數:

function fnWrap(){

function fnTouzi(){

alert('親，請關注咱們新的產品！');

}

fnTouzi();

}

fnWrap();

簡寫方式1:

;~function(){

function fnTouzi(){

alert('親，請關注咱們新的產品！');

}

fnTouzi();

}();

簡寫方式2:

;!function(){

function fnTouzi(){

alert('親，請關注咱們新的產品！');

}

fnTouzi();

}();

15.

相關標籤/搜索

每日一句

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