第7章 Javascript與前端開發(fā)技術(shù)_第1頁
第7章 Javascript與前端開發(fā)技術(shù)_第2頁
第7章 Javascript與前端開發(fā)技術(shù)_第3頁
第7章 Javascript與前端開發(fā)技術(shù)_第4頁
第7章 Javascript與前端開發(fā)技術(shù)_第5頁
已閱讀5頁，還剩49頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第7章

Javascript與前端開發(fā)技術(shù)知識要點（1）掌握在網(wǎng)頁中插入腳本語言的三種方式（2）掌握J(rèn)avaScript腳本語言的基本語法規(guī)則：變量、運算符、表達(dá)式、語句以及函數(shù)（3）掌握J(rèn)avaScript對象、瀏覽器對象和HTMLDOM對象（4）熟悉JQuery和Bootstrap的基本用法（5）了解前端開發(fā)框架：Vue.js、React和Angular本章目標(biāo)（1）使用腳本語言script標(biāo)記符直接插入腳本鏈接外部腳本1．三種插入JS的方法(2)Javascript語言的語法所謂變量，就是程序中一個已命名的存儲單元。變量的主要作用是存取數(shù)據(jù)和提供存放信息的容器。1．變量<script>vartoday=15;//today="Todayisthe15th";</script>注意：JavaScript是區(qū)分大小寫的，因此today和Today是不同的(2)Javascript語言的語法2．運算符+、-、*、/、%、++、--算術(shù)運算符&&（邏輯與）、||（邏輯或）、!（邏輯非）邏輯運算符<、<=、>、>=、==、===、!=、!==比較運算符+（字符串接合操作）字符串運算符&（按位與）、|（按位或）、^（按位異或）、<<（左移）、>>（右移）、>>>（無符號右移）位操作運算符(2)Javascript語言的語法賦值運算符=、+=、-=、*=、/=、%=、&=、|=、^=、<<=、>>=、>>>=條件運算符?:（條件?結(jié)果1:結(jié)果2，表示若“條件”值為真，則表達(dá)式的值為“結(jié)果1”，否則為“結(jié)果2”）其他運算符.（成員選擇運算符）、[]（下標(biāo)運算符）、()（函數(shù)調(diào)用運算符）、,（逗號運算符）、delete（刪除一個對象的屬性或一個數(shù)組索引處的元素）、new（生成一個對象的實例）、typeof（返回表示操作數(shù)類型的字符串值）、void（不返回任何數(shù)值）(2)Javascript語言的語法3．條件語句if(expression1)statement1;elseif(expression2)statement2;elseif(expression3)statement3;…elsestatementn;switch(expression){casevalue1:statement1;break;casevalue2:statement2;break;...default:statement;}(2)Javascript語言的語法4．循環(huán)語句for(initializationStatement;condition;adjustStatement){statement;}while(expression){statement;}do{statement;}while(expression);break;continue;(2)Javascript語言的語法5．函數(shù)functionfunctionName(parameter1,parameter2...){statements;return;}JS實例(3)Javascript對象和瀏覽器對象對象就是客觀世界中存在的特定實體。對象包含兩個要素：1．什么是對象？01用來描述對象特性的一組數(shù)據(jù)，也就是若干變量，稱為屬性02用來操作對象特性的若干動作，也就是若干函數(shù)，稱為方法通過訪問或設(shè)置對象的屬性，并且調(diào)用對象的方法，我們就可以對對象進(jìn)行各種操作，從而獲得需要的功能：document.titledocument.write()(3)Javascript對象和瀏覽器對象2．三種對象Array、Date、Math、String等JavaScript內(nèi)部對象Part01window、screen、location等瀏覽器對象Part02documentHTMLDOM對象Part03(3)Javascript對象和瀏覽器對象Array對象(3)Javascript對象和瀏覽器對象Date對象(3)Javascript對象和瀏覽器對象Math對象常用屬性E（歐拉常數(shù)，約為2.718）、PI（圓周率常數(shù)，約為3.14159）和SQRT2（2的平方根，約為1.414）等常用方法abs(num)（絕對值）、cos(num)（余弦）、pow(num1,num2)（num1的num2次方）、random() （隨機(jī)數(shù)）、round(num)（四舍五入）、sin(num)（正弦）、sqrt(num)（平方根）、toString()（返回表示該對象的字符串）。Math.cos(Math.PI/3));(3)Javascript對象和瀏覽器對象String對象vartxt="string";vartxt='string';vartxt="HelloWorld!";document.write(txt.length);varstr="請訪問我們的網(wǎng)站！"varn=str.replace("我們的網(wǎng)站","/");document.write(n);(3)Javascript對象和瀏覽器對象window對象表示瀏覽器窗口。所有JavaScript全局對象、函數(shù)以及變量均自動成為window對象的成員（全局變量是window對象的屬性，全局函數(shù)是window對象的方法）。window對象包含document、navigator、location、history等子對象，是瀏覽器對象層次中的最頂級對象。3．瀏覽器對象01屬性document,location等02方法alert(),confirm(),open(),close()等(3)Javascript對象和瀏覽器對象screen對象(3)Javascript對象和瀏覽器對象location對象(3)Javascript對象和瀏覽器對象navigator對象(4)HTMLDOMHTMLDOM定義了所有HTML元素的對象和屬性，以及訪問它們的方法。它是關(guān)于如何獲取、修改、添加或刪除HTML元素（包括其內(nèi)容和屬性等）的標(biāo)準(zhǔn)。在DOM中，每個東西都是節(jié)點，包括：元素節(jié)點、屬性節(jié)點、文本節(jié)點、注釋節(jié)點，等等。常用父（parent）、子（child）和同胞（sibling）等術(shù)語來描述節(jié)點之間的關(guān)系。1．什么是DOM？(4)HTMLDOMHTMLDOM定義了所有HTML元素的對象和屬性，以及訪問它們的方法。它是關(guān)于如何獲取、修改、添加或刪除HTML元素（包括其內(nèi)容和屬性等）的標(biāo)準(zhǔn)。在DOM中，每個東西都是節(jié)點，包括：元素節(jié)點、屬性節(jié)點、文本節(jié)點、注釋節(jié)點，等等。常用父（parent）、子（child）和同胞（sibling）等術(shù)語來描述節(jié)點之間的關(guān)系。1．什么是DOM？<html><head><title>文檔標(biāo)題</title></head><body><ahref=””>我的鏈接</a><h1>我的標(biāo)題</h1></body></html>(4)HTMLDOM可以用特定的方法和屬性引用這些節(jié)點，以便在腳本中正確地使用它們。方法是我們可以在節(jié)點（HTML元素）上執(zhí)行的動作，屬性是我們可以在節(jié)點（HTML元素）設(shè)置和修改的值。2．使用DOM方法和屬性(4)HTMLDOM常用屬性：body、forms、images、links、title等常用方法：getElementsByClassName()、getElementById()、getElementsByTagName()、querySelector()、querySelectorAll()、write()使用document.forms等屬性，使用document.getElementById()等方法，可以訪問到DOM中的具體元素，之后可以引用其屬性和方法進(jìn)行操作。3．document對象(4)HTMLDOM4．使用Console面板(4)HTMLDOM5．元素對象屬性childNodes、children、className、clientHeight、clientWidth、firstChild、id、innerHTML、lastChild、style方法getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()、setAttribute()使用parentNode、firstChild、lastChild、nextSibling、previousSibling、children和childNodes等屬性，可以遍歷HTMLDOM樹，以對相應(yīng)節(jié)點進(jìn)行操作。使用innerHTML、textContent和style等屬性，可以訪問或設(shè)置HTML元素的內(nèi)容和樣式。使用appendChild()、removeChild()、replaceChild()和insertBefore()等方法，可以修改HTMLDOM樹。(4)HTMLDOM6．事件處理直接在DOM元素中指定事件處理程序<inputonclick="alert('謝謝支持')"type="button"value="點我"/>在JavaScript中用元素的事件屬性進(jìn)行指定elementObject.onXXX=function(){//事件處理代碼}使用元素的addEventListener()方法elementObject.addEventListener(eventName,eventHandler);(4)HTMLDOM7．常見事件類別事件描述鼠標(biāo)事件onclick當(dāng)用戶單擊某個對象時觸發(fā)oncontextmenu在用戶單擊鼠標(biāo)右鍵打開快捷菜單時觸發(fā)ondblclick當(dāng)用戶雙擊某個對象時觸發(fā)onmousedown鼠標(biāo)按鍵被按下時觸發(fā)onmouseenter當(dāng)鼠標(biāo)指針移動到元素上時（從元素外部進(jìn)入元素內(nèi)部）觸發(fā)onmouseleave當(dāng)鼠標(biāo)指針移出元素時（從元素內(nèi)部離開到元素外部）觸發(fā)onmousemove鼠標(biāo)被移動時觸發(fā)onmouseover鼠標(biāo)指針移到某元素之上時（進(jìn)入元素內(nèi)部時觸發(fā)，包括在元素內(nèi)

部移動）觸發(fā)onmouseout鼠標(biāo)指針從某元素上移開時（離開元素內(nèi)部時觸發(fā)，包括在元素內(nèi)

部移動）觸發(fā)onmouseup鼠標(biāo)按鍵被松開時觸發(fā)(4)HTMLDOM類別事件描述鍵盤事件onkeydown某個鍵盤按鍵被按下時觸發(fā)onkeypress某個鍵盤按鍵被按下并松開時觸發(fā)onkeyup某個鍵盤按鍵被松開時觸發(fā)表單事件onblur元素失去焦點時觸發(fā)onchange表單元素的內(nèi)容改變時觸發(fā)onfocus元素獲取焦點時觸發(fā)oninput元素獲取用戶輸入時觸發(fā)onselect用戶選取文本時觸發(fā)onsubmit表單提交時觸發(fā)(4)HTMLDOM類別事件描述其他事件onload一張頁面或一幅圖像完成加載時觸發(fā)onresize窗口或框架被重新調(diào)整大小時觸發(fā)onscroll當(dāng)文檔被滾動時觸發(fā)onunload用戶退出頁面時觸發(fā)ondrag元素正在被拖動時觸發(fā)ondrop拖動元素放置在目標(biāo)區(qū)域時觸發(fā)(4)HTMLDOM實例：Tab導(dǎo)航（5）使用JQuery1．安裝與使用下載JS文件jquery-3.4.1.jsjquery-3.4.1.min.jsjquery-3.4.1.slim.jsjquery-3.4.1.slim.min.js鏈接JS文件<scriptsrc="jquery-3.4.1.min.js"></script>（5）使用JQuery2．基本語法<!DOCTYPEhtml><!--表明本文檔是個HTML5文檔--><metacharset="utf-8"><!--指定文檔的字符編碼--><scriptsrc="jquery-3.4.1.min.js"></script><script><!--自定義JQuery代碼-->$(document).ready(function(){//$(function(){$("p").click(function(){$(this).hide();});});</script>（5）使用JQuery3．JQuery選擇器選擇器實例說明*$("*")選取所有元素this$(this)選取當(dāng)前HTML元素標(biāo)記符$("p")選取所有p元素標(biāo)記符,標(biāo)記符

…$("h2,div,span")選取所有h2、div和

span元素#id$("#test")選取id為

test的元素.class$(".test")選取所有class為

test的元素.class,.class

…$(".intro,.demo,.end")選取class為"intro"、"demo"或"end"的所有元素parent>child$("div>

p")選取作為div元素直接子元素的所有p元素parentdescendant$("div

p")選取作為div元素后代的所有p

元素element+

next$("div+

p")選取與每個div元素相鄰的下一個p元素element～siblings$("div～p")選取與div元素同級的所有p

元素[attribute]$("[href]")選取帶有href

屬性的元素（5）使用JQuery選擇器實例說明[attribute=value]$("a[target='_blank']")選取所有

target屬性值等于"_blank"的a元素[attribute!=value]$("a[target!='_blank']")選取所有

target屬性值不等于"_blank"的a元素[attribute$=value]$("[href$='.jpg']")選取所有帶有href

屬性且值以".jpg"結(jié)尾的元素[attribute|=value]$("[title|='Tomorrow']")選取所有帶有title

屬性且值等于'Tomorrow'或者以

'Tomorrow'后跟連接符作為開頭的字符串[attribute^=value]$("[title^='Tom']")選取所有帶有

title屬性且值以"Tom"開頭的元素[attribute～=value]$("[title～='hello']")選取所有帶有

title屬性且值包含單詞"hello"的元素[attribute*=value]$("[title*='hello']")選取所有帶有

title

屬性且值包含字符串"hello"的元素:first/:last$("p:first")選取第一個p元素:first-child/:last-child$("p:first-child")選取屬于其父元素的第一個子元素的所有p元素:even/:odd$("tr:even")選取偶數(shù)位置的tr元素。索引值從0開始，第

1元

素是偶數(shù)（0），第2元素是奇數(shù)（1），以此類推（5）使用JQueryJQuery選擇器（5）使用JQuery6．JQuery方法HTML/CSS方法append()（在被選元素的結(jié)尾插入內(nèi)容）、attr()（設(shè)置或返回被選元素的屬性/值）、css()（為被選元素設(shè)置或返回一個或多個樣式屬性）、html()（設(shè)置或返回被選元素的內(nèi)容）、remove()、text()等JQuery事件方法click()、dblclick()、mouseenter()、mouseleave()、hover()、keypress()、keydown()、keyup()、blur()、change()、submit()、focus()、resize()、scroll()等。（5）使用JQueryJQuery方法（5）使用JQuery7．JQuery動畫效果動畫效果方法：animate()、delay()、fadeIn()、fadeOut()、fadeTo()、fadeToggle()、finish()、hide()、show()、slideDown()、slideToggle()、slideUp()、stop()、toggle()等(6)使用Bootstrap1．安裝與使用Bootstrap文件夾JQuery文件拷貝到Bootstrap/js文件夾使用BootstrapHTML模板(6)使用Bootstrap2．網(wǎng)格系統(tǒng)Bootstrap提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。(6)使用Bootstrap3．Bootstrap布局Bootstrap使用一系列的容器（container）、行（row）和列（col）來對內(nèi)容進(jìn)行布局。容器類是container（固定寬度）或container-fluid（全屏寬度），行類是row，列類是col-*-*（第一個星號表示響應(yīng)的設(shè)備：sm、md、lg或xl，第二個星號表示所占列數(shù)，同一行的列數(shù)相加為12），并且可以用空格分隔多個（如類"col-sm-3col-md-6"表示在平板上占3列，在桌面顯示器上占6列）(6)使用Bootstrap.col-任意屏幕或小屏幕-針對任意尺寸屏幕或屏幕寬度小于576px（容器最大寬度non

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論