欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript知識(shí)點(diǎn)詳解

 更新時(shí)間:2021年09月18日 16:04:45   作者:噗噗bug  
下面小編就為大家?guī)?lái)一篇JavaScript基礎(chǔ)知識(shí)點(diǎn)歸納(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一.JavaScript基本介紹

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

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

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

如:箭頭切換圖片頁(yè)面,左下角的點(diǎn)也是

沒(méi)有js:沒(méi)有js的頁(yè)面,想要準(zhǔn)確提交信息,是非常麻煩的事。

ANS:js出生時(shí)是為了驗(yàn)證表單數(shù)據(jù)的合法性,js 就是在里面添加驗(yàn)證,輸入完成如果對(duì)就通過(guò),如果不對(duì)就提示錯(cuò)誤,js就是解決這個(gè)問(wèn)題。

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

二、Javascript基礎(chǔ)語(yǔ)法

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

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

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

彈出警示框,彈出對(duì)話框 :

<!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對(duì)話框,無(wú)法統(tǒng)一,這都是瀏覽器底層自帶的,無(wú)法修改。

三、JavaScript事件

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

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

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

事件三要素:

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

1.事件源:《解釋就是這個(gè)事件加給誰(shuí))

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

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

例子2:當(dāng)點(diǎn)擊div標(biāo)簽時(shí),做一件事,如點(diǎn)擊后彈出對(duì)話框?!胕d類

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

例子3:添加標(biāo)簽p,用class類來(lái)

<!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">
	// 點(diǎn)擊頁(yè)面中的div,彈出對(duì)話框
	// 第一步:如果想要控制某個(gè)標(biāo)簽必須先要找到它,在css中用選擇器尋找,js在當(dāng)前頁(yè)面的文檔找
	//第二步:點(diǎn)擊頁(yè)面的div
	// 第三步:彈出對(duì)話框
	document.getElementById('div1').onclick=function()
	{
		alert('點(diǎn)擊div時(shí),才會(huì)彈出');
	}
	//事件的三要素:事件源.事件的類型 = 執(zhí)行的命令
	document.getElementsByClassName('p1')[0].ondblclick=function()
	{
		alert('點(diǎn)擊p時(shí),才會(huì)彈出');
	}
	// getElementsByClassName 通過(guò)class來(lái)找頁(yè)面中的元素,而class可以設(shè)置多個(gè)重復(fù)的類名
	// 則在獲取時(shí)必須要在后面添加[0],從數(shù)字0開始計(jì)數(shù)
</script>

注意:

id是唯一的,即單一

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

測(cè)試點(diǎn):

1、未點(diǎn)擊彈出對(duì)話框

2、點(diǎn)擊未彈出對(duì)話框

四、 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:可以在單獨(dú)的js文件里,通過(guò)script標(biāo)簽中的src屬性引用到頁(yè)面中;即寫在單獨(dú)js文件,通過(guò)script中的src來(lái)鏈入到html頁(yè)面的,叫外鏈?zhǔn)?/p>

<script src="js文件的路徑>
    此處不要寫代碼,寫什么都不會(huì)執(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">
	//此處如果是外鏈的語(yǔ)法,這里寫什么都不會(huì)執(zhí)行
	alert('111111');
</script>

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

行內(nèi)js:寫在標(biāo)簽的屬性里,這個(gè)屬性必須是事件屬性。(任何標(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>

注意:雙引號(hào)和單引號(hào)的區(qū)別在行內(nèi),

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

在行內(nèi)只能用單引號(hào)實(shí)現(xiàn),否則無(wú)法執(zhí)行js行為

注意事項(xiàng):

行內(nèi)js和行內(nèi)css一樣,都是不推薦使用 !內(nèi)嵌和外鏈隨意使用,還是建議使用外鏈?zhǔn)?,因?yàn)槟軐?shí)現(xiàn)js代碼和html代碼的分離,更方便代碼的修改。

五、 js常見(jiàn)特效(了解)

需要將專業(yè)名詞與顯示效果對(duì)的上。

5.1 導(dǎo)航跟隨/電梯導(dǎo)航

導(dǎo)航:點(diǎn)哪去哪

5.2 返回頂部

點(diǎn)擊后,回到頁(yè)面最頂部

5.3 滾動(dòng)跟隨

哪個(gè)地方動(dòng)圖,讓用戶注意點(diǎn)在哪。

5.4 呼吸燈/焦點(diǎn)圖(banner圖)

圖片切換,漸隱漸現(xiàn)效果

5.5 js實(shí)現(xiàn)動(dòng)畫效果

測(cè)試時(shí)一定要多次觸發(fā)動(dòng)畫,查看動(dòng)畫是否有累積的情況。

注意:若是帶動(dòng)畫的效果存在經(jīng)典bug,js寫的,——?jiǎng)赢嬂鄯ebug,移入移出多少次,動(dòng)畫就會(huì)自行執(zhí)行多少次。

只要遇到動(dòng)畫的地方,——怎么測(cè)?重復(fù)觸發(fā)的測(cè)試,因?yàn)樗^的動(dòng)畫,不是點(diǎn)才動(dòng)。

5.6 模態(tài)窗口

模態(tài)窗口:彈出兩個(gè)層,一個(gè)負(fù)責(zé)蓋住下面的其他頁(yè)面內(nèi)容(背景色是灰色,無(wú)法操作底層其他控件),另外一個(gè)是讓用戶操作的層;只允許用戶操作彈初的那個(gè)層。

目的是:讓用戶優(yōu)先解決最上面的那個(gè)層

5.7 定時(shí)切換

5.8 自定義單選、多選、下拉菜單

系統(tǒng)自帶(原生的):

自定義:

只要不是系統(tǒng)瀏覽器原生的,就算是自定義,這些程序需要js + html + css組合才能實(shí)現(xiàn),肯定比原生的寫法浪費(fèi)時(shí)間,但是為了整體頁(yè)面的美觀,必須要求程序員按照設(shè)計(jì)師的要求實(shí)現(xiàn)。

總結(jié)

本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評(píng)論