快捷導(dǎo)航

javascript知識點詳解

更新時間：2021年09月18日 16:04:45 作者：噗噗bug

下面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)知識點歸納(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一.JavaScript基本介紹

js誕生于1995年，是Javascript的縮寫，其與java語言沒有關(guān)系，當(dāng)時的主要目的是驗證表單的數(shù)據(jù)是否合法

科普: Javascript的本來應(yīng)該叫l(wèi)ivescript，但是在發(fā)布前夕，想搭上媒體超熱java的順風(fēng)車，臨時把名字改為了javascript。(也就是說js跟java沒有關(guān)系，當(dāng)時的只是想借助java的名氣)

作用:負(fù)責(zé)控制web前端標(biāo)準(zhǔn)的前兩者。結(jié)構(gòu)和樣式;

如：箭頭切換圖片頁面，左下角的點也是

沒有js：沒有js的頁面，想要準(zhǔn)確提交信息，是非常麻煩的事。

ANS：js出生時是為了驗證表單數(shù)據(jù)的合法性，js 就是在里面添加驗證，輸入完成如果對就通過，如果不對就提示錯誤，js就是解決這個問題。

當(dāng)今，js不僅能做驗證，還能做網(wǎng)站特效

二、Javascript基礎(chǔ)語法

1.寫script標(biāo)簽，放在html頁面的最后位置，js代碼寫在html中的script標(biāo)簽中

2.從script標(biāo)簽的中間，alert("彈窗內(nèi)容，這里寫什么就會彈出什么");

<script>
    alert("彈窗中的顯示內(nèi)容");
</script>

彈出警示框，彈出對話框：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert();
</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert('注意：彈出彈窗');
</script>

注意：瀏覽器自帶的alert對話框，無法統(tǒng)一，這都是瀏覽器底層自帶的，無法修改。

三、JavaScript事件

定義:在什么情況下，執(zhí)行什么命令

作用:捕獲用戶的行為(單擊、雙擊、鼠標(biāo)的移入移出。.. )

例子1：在點擊時，進(jìn)行界面切換，在什么什么情況下，執(zhí)行的命令。

事件三要素:

事件的三要素：事件源.事件的類型 = 執(zhí)行的命令

1.事件源:《解釋就是這個事件加給誰)

2.事件類型:(就是指的這個事件是什么時候發(fā)生的)

3.執(zhí)行的指令:固定寫法function(H你的命令寫在這里}事件源""點事件名=匿名函數(shù)（匿名方法)

例子2：當(dāng)點擊div標(biāo)簽時，做一件事，如點擊后彈出對話框?！胕d類

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "div1">哈哈哈</div>
	</body>
</html>
<script type = "text/javascript">
	// 點擊頁面中的div,彈出對話框
	// 第一步：如果想要控制某個標(biāo)簽必須先要找到它，在css中用選擇器尋找，js在當(dāng)前頁面的文檔找
	//第二步：點擊頁面的div
	// 第三步：彈出對話框
	document.getElementById('div1').onclick=function()
	{
		alert('點擊時，才會彈出');
	}
	//事件的三要素：事件源.事件的類型 = 執(zhí)行的命令
</script>

例子3：添加標(biāo)簽p，用class類來

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "div1">哈哈哈</div>
		<p class = "p1"> 我是p1標(biāo)簽</p>
		<p class = "p1"> 我是p2標(biāo)簽</p>
	</body>
</html>
<script type = "text/javascript">
	// 點擊頁面中的div,彈出對話框
	// 第一步：如果想要控制某個標(biāo)簽必須先要找到它，在css中用選擇器尋找，js在當(dāng)前頁面的文檔找
	//第二步：點擊頁面的div
	// 第三步：彈出對話框
	document.getElementById('div1').onclick=function()
	{
		alert('點擊div時，才會彈出');
	}
	//事件的三要素：事件源.事件的類型 = 執(zhí)行的命令
	document.getElementsByClassName('p1')[0].ondblclick=function()
	{
		alert('點擊p時，才會彈出');
	}
	// getElementsByClassName 通過class來找頁面中的元素，而class可以設(shè)置多個重復(fù)的類名
	// 則在獲取時必須要在后面添加[0],從數(shù)字0開始計數(shù)
</script>

注意：

id是唯一的，即單一

而class是類，是復(fù)數(shù)，在js中用getElementsByClassName 通過class來找頁面中的元素，而class可以設(shè)置多個重復(fù)的類名，則在獲取時必須要在后面添加[0],從數(shù)字0開始計數(shù)

測試點：

1、未點擊彈出對話框

2、點擊未彈出對話框

四、 Javascript書寫位置（引入方式）

4.1 內(nèi)嵌js

內(nèi)嵌js:在html文件中。放在scipt標(biāo)簽里，即寫在html中放在script標(biāo)簽里面，叫內(nèi)嵌式

<script>
    alert ("彈窗中的顯示內(nèi)容"");
</script>

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type = "text/javascript">
	alert('彈窗 內(nèi)嵌');
</script>

4.2 外鏈js

外鏈js:可以在單獨的js文件里，通過script標(biāo)簽中的src屬性引用到頁面中;即寫在單獨js文件，通過script中的src來鏈入到html頁面的，叫外鏈?zhǔn)?/p>

<script src="js文件的路徑>
    此處不要寫代碼，寫什么都不會執(zhí)行
</script>

例子：

.html文件：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!-- <script type = "text/javascript">
	alert('彈窗 內(nèi)嵌');
</script> -->
<script type="text/javascript" src="js.js">
</script>
js.js文件：
alert('彈窗 外鏈');

注意：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript" src="js.js">
	//此處如果是外鏈的語法，這里寫什么都不會執(zhí)行
	alert('111111');
</script>

4.3 行內(nèi)js（禁止使用）

行內(nèi)js:寫在標(biāo)簽的屬性里，這個屬性必須是事件屬性。(任何標(biāo)簽都有事件屬性)，與行內(nèi)css一樣，不推薦使用! 即寫在html標(biāo)簽身上的，叫行內(nèi)式

<div onclick-alert ( 'heihei');”> 按鈕 </div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick = "alert('彈窗 行內(nèi)');">不規(guī)范范例</div>
	</body>
</html>

注意：雙引號和單引號的區(qū)別在行內(nèi)，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div onclick = "alert("彈窗 行內(nèi)");">不規(guī)范范例</div>
	</body>
</html>