jsdemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onload="allTerm()">
<form id="form1" name="form1">
<table width="300" border="1" align="center">
<tr>
<td width="70" align="center">學(xué)期</td>
<td>
<select id="sTerm" onchange="cTerm()">
<option >請(qǐng)選擇學(xué)期</option>
</select>
</td>
</tr>
<tr>
<td align="center">課程</td>
<td>
<select id="sCourse">
<option >請(qǐng)選擇所對(duì)應(yīng)的課程</option>
</select>
</td>
</tr>
</table>
</form>
<script src="js/select.js"></script>
</body>
</html>
全局函數(shù)
Eval() isNaN() decodeURI()encodeURI()
var a = "3",b="4";
alert(a+"+"+b);
//****如果 x 是特殊的非數(shù)字值 NaN****(或者能被轉(zhuǎn)換為這樣的值)肠阱,返回的值就是 true****涛癌。如果 x 是其他值****,****則返回 false****。
alert(isNaN(a));//false
//eval() 函數(shù)可計(jì)算某個(gè)字符串撵彻,并執(zhí)行其中的的 JavaScript 代碼。
alert(eval(a+"+"+b));
目錄的結(jié)構(gòu):****../ / ../../../
如何改變堆疊次序:****z-index
面中的圖像加入超鏈接后,默認(rèn)情況下都帶有一道黑框,如何去掉它呢底挫?
border="0"
在****CSS****中下面哪種方法表示超鏈接文字在鼠標(biāo)經(jīng)過時(shí),超鏈接文字無(wú)下劃線
A:hover {TEXT-DECORATION: none}
CSS****有三種選擇符脸侥,分別是標(biāo)簽選擇符建邓,類選擇符和****ID****選擇器。
通過****readonly****屬性可以設(shè)置文本框?yàn)橹蛔x睁枕。
<pre style="background:white;word-break:break-all">JS****中的基本數(shù)據(jù)類型****Number String****Boolean Null</pre>
Undefined
*var a=“aaaa”; parseInt(a) NaN
** var a=“2aaa”涝缝,parseInt(a) 2
** eval“2+3”) 5
在****HTML5****規(guī)范中,定義了****<video>****和****<audio>****標(biāo)簽譬重,請(qǐng)寫出標(biāo)簽作用
標(biāo)簽****<video> 元素定義視頻:****<video width="1280" height="720" controls src="video.mp4">****您的瀏覽器不支持 video 標(biāo)簽拒逮。****</video> 標(biāo)簽****<audio> 元素定義音頻,比如音樂或其他音頻流 <audio src=****“****audio.mp3****“ controls>****您的瀏覽器不支持 audio 標(biāo)簽臀规。****</audio> 屬性: autoplay 視頻在就緒后馬上播放滩援。 controls 向用戶顯示控件,比如播放按鈕塔嬉。 height 設(shè)置視頻播放器的高度玩徊。 loop 當(dāng)媒介文件完成播放后再次開始播放。 src 要播放的視頻的 URL****谨究。 width 設(shè)置視頻播放器的寬度恩袱。
在****CSS****中,偽類及偽對(duì)象是什么胶哲,有什么特點(diǎn)
偽類及偽對(duì)象:由****CSS****自動(dòng)支持畔塔,屬****CSS****的一種擴(kuò)展型類****名稱不能被用戶自定義****使用時(shí)只能按照標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用
function fun(){
return 5;
}
var a=fun ;
var b=fun() ;
a與b有什么區(qū)別:第一個(gè)是將函數(shù)賦值給a
第二個(gè)b的值為5,表示調(diào)用函數(shù)鸯屿,這個(gè)函數(shù)的返回值為5
Vue react react native foundation angularjs
Nodejs webpack glup
d=”post” id=”form1” name=”form1”></form>
Post與get的區(qū)別
表單的元素:<input type=””>text password file hidden date email radio checkbox select
JS:
1.JS中的對(duì)象:自定義對(duì)象 內(nèi)置對(duì)象Array
以下對(duì)象都屬于BOM
History:go(-1) back()加載 history 列表中的前一個(gè) URL澈吨。Forward()加載 history 列表中的下一個(gè) URL。
Location:reload()方法 屬性href
2.獲取元素的三種方法:
getElementById() getElementsByName() getElementsByTagName();
<script type="text/javascript">
function getValue() {
var x = document.getElementById("username").value;正確的
document.username.value;不正確的
document.form1.username.value;正確的
alert(x);
}
</script>
<form action="" method="post" name=”form1”>
<!--如何獲取到當(dāng)前文檔框的值-->
<input type="text" id="username" />
<input type="button" value="ok" onclick="getValue()"/>
</form>
Html中每個(gè)標(biāo)簽都會(huì)對(duì)應(yīng)一個(gè)DOM對(duì)象
1.setInterval(code執(zhí)行多次)與setTimeout(指定的毫秒后code執(zhí)行一次)的區(qū)別
基本語(yǔ)法:setInterval(code,millisec[,"lang"])
setInterval(“show()”,50)在指定的周期內(nèi)執(zhí)行多次show()方法
setTimeout(“show()”,50)在50毫秒后調(diào)用一次show方法
4.Form對(duì)象中[elements[]]的用法(http://www.w3school.com.cn/jsref/coll_form_elements.asp)
求表單元素的個(gè)數(shù)
var x = document.form1.elements.length;
var x = document.form1.length;
document.form1.elements[0]獲取到表單中指定的元素
5.如何向selec中動(dòng)態(tài)的添加option選項(xiàng)
selTerm.add(new Option(i),null);
如何清空下拉框中的選項(xiàng)
selCourse.options.length =0;
3.通過js可以動(dòng)態(tài)改變樣式
<div id="imageLayer" style="display: none;">dfadf</div>
<script type="text/javascript">
document.getElementById("imageLayer").style.display="block";
</script>
< a href=" ">這是一個(gè)鏈接</ a>
表單:
<form action=”服務(wù)器端的資源” metho
通過可編程的對(duì)象模型寄摆,JavaScript 獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的 HTML谅辣。
? JavaScript 能夠改變頁(yè)面中的所有 HTML 元素
? JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性
? JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式
? JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)
Window對(duì)象的方法
Window.document對(duì)象
每個(gè)載入瀏覽器的 HTML 文檔都會(huì)成為 Document 對(duì)象。
Document 對(duì)象使我們可以從腳本中對(duì) HTML 頁(yè)面中的所有元素進(jìn)行訪問婶恼。
關(guān)于Html,css,js的基礎(chǔ)
P ul ol hr br strong em form input a img
Span div table select option header nav
Section footer aside
表單的元素:text password button submit reset
Radio checkbox file hidden date textarea
CSS:
外部樣式表:不需要<style>標(biāo)簽 使用link標(biāo)簽來(lái)調(diào)用外部樣式表桑阶,有什么好處柏副?可以使網(wǎng)站簡(jiǎn)潔,風(fēng)格統(tǒng)一蚣录。
函數(shù)的總結(jié)
1.當(dāng)一個(gè)函數(shù)沒有明確的返回值的時(shí)候搓扯,返回的值就是undefined
2.在使用return的時(shí)候,函數(shù)就會(huì)停止執(zhí)行包归。并返回指定的值(具體的值/函數(shù))。
3.return會(huì)返回唯一的一個(gè)值铅歼,那么也可以返回一個(gè)函數(shù)
<script type="text/javascript">
var box = function() {
var a = 1;
return function(){
alert(a++);
}
alert(a);
}
var newFunction = box();
alert(newFunction());
</script>
4.匿名函數(shù)
d) 如何定義
function(){
return “這是一個(gè)匿名函數(shù)”
}
- 函數(shù)的自執(zhí)行
(function(){
alert("這是一個(gè)自執(zhí)行函數(shù)");
})();
//如果有參數(shù)
(function(age){
alert(age);
})(10);
- 在JS中函數(shù)的參數(shù)也可以傳遞函數(shù)function
function box(sumFunction,num) {
return sumFunction(num);
}
var sum = function(num){
return num+10;
}
var result = box(sum,10);
alert(result);
BOM: 瀏覽器對(duì)象模型(Browser Object Model (BOM))允許 JavaScript與瀏覽器對(duì)話公壤。
瀏覽器對(duì)象模型包含的對(duì)象:
· Window: 所有瀏覽器都支持window對(duì)象。它代表瀏覽器的窗口椎椰。
· Screen
· History:對(duì)象包含瀏覽器歷史厦幅。****history.back() history.forward()
· Location: 對(duì)象可用于獲取當(dāng)前頁(yè)面地址(URL)并把瀏覽器重定向到新頁(yè)面。
HTML DOM 樹
jsref_prototype_array.asp)
作用:將元素顯示為塊級(jí)元素
塊級(jí)元素的特點(diǎn):
1.每個(gè)塊級(jí)元素都會(huì)從新的一行開始(獨(dú)占一行)
2.元素的高度 寬度 行高 頂邊距以及底邊距都是可以設(shè)置的
3.如果元素不設(shè)置寬度慨飘,它是本身父容器的100%(和父元素的一樣)
行內(nèi)元素(內(nèi)聯(lián)元素 inline)特點(diǎn):
1.在同一行顯示
2.元素的寬度以及高度是不可以設(shè)置的
3.元素的寬度就是它包含文字或圖片的寬度确憨,是不可變的
內(nèi)聯(lián)塊(inline-block):就是同時(shí)具備內(nèi)聯(lián)元素以及塊級(jí)元素的特點(diǎn)
元素的特點(diǎn):
1.和其它元素在同一行來(lái)顯示的
2.元素的寬度以及高度是可以設(shè)置的
盒子模型
Margin外邊距
Padding 內(nèi)邊距
Border 邊框
盒子模型的寬度以及高度和平時(shí)理解的是不一樣的,CSS內(nèi)定義的寬度以及高度指的是填充以里的內(nèi)容范圍瓤的。
CSS的布局模型(3種)
- 流動(dòng)模型(Flow)
- 流動(dòng)模型它是網(wǎng)頁(yè)默認(rèn)的布局方式休弃,塊級(jí)元素,它會(huì)垂直分布圈膏,因?yàn)閴K級(jí)元素默認(rèn)的寬度為100%塔猾,而內(nèi)聯(lián)元素在此模型下是從左到右水平分布的。
- 浮動(dòng)模型(Float)
- 層模型(Layer):它有三種類型 絕對(duì)定位 相對(duì)定位 固定定位
絕對(duì)定位:需要用到position:absolute表示絕對(duì)定位稽坤,它可以將元素從文檔流是拖離出來(lái)丈甸,然后可以使用一些屬性left right top bottom相對(duì)于其最近的一個(gè)具有定位的屬性的父包含塊進(jìn)行絕對(duì)定位,如果不存在尿褪,它會(huì)相對(duì)于body元素(相對(duì)于瀏覽器的窗口)
相對(duì)定位:需要用到position:relative可以使用一些屬性left right top bottom來(lái)確定元素在正常文檔流中的偏移位置睦擂。偏移前的位置保留不動(dòng)
NPM:包管理工具,通過這個(gè)命令可以在NPM服務(wù)上安裝所有需要的前端框架
NPM如何安裝:NodeJS https://nodejs.org/en/
安裝之后到命令窗口輸入Npm –version
Npm install 所要安裝的框架
JavaScript
JS的作用
ECMAScript(標(biāo)準(zhǔn)杖玲、核心部分) ES3 ES5 ES6 ES7
JavaScript的組成部分
a) ECMAScript(標(biāo)準(zhǔn)顿仇、核心部分) 基本的語(yǔ)法
b) DOM(Document Object Model文檔對(duì)象模型)
c) BOM(瀏覽對(duì)象模型)js可以寫在什么地方
a) 可以寫在head頭里
b) 可以寫在body的最后
c) 區(qū)別:如果寫在頭里面,當(dāng)頁(yè)面加載的時(shí)候首先會(huì)執(zhí)行js,然后才會(huì)加載其它的內(nèi)容摆马,如果寫在body里面:它會(huì)先加載頁(yè)面的內(nèi)容夺欲,然后再執(zhí)行js腳本
5.js可以寫入輸出 對(duì)事件做出反應(yīng) 改變html的內(nèi)容
可以改變樣式 可以對(duì)表單做驗(yàn)證ECMAScript中有5種簡(jiǎn)單數(shù)據(jù)類型:
Undefined、Null今膊、Boolean些阅、Number和String。還有一種復(fù)雜數(shù)據(jù)類型——Object斑唬。ECMAScript不支持任何創(chuàng)建自定義類型的機(jī)制市埋,所有值都成為以上6中數(shù)據(jù)類型之一黎泣。函數(shù)的聲明
1.普通的函數(shù)聲明
function box(num1, num2) {
return num1+ num2;
}
2.使用變量初始化函數(shù)
var box= function(num1, num2) {
return num1 + num2;
};
Js中除了自定義對(duì)象之外還提供了一些內(nèi)置對(duì)象:String
Date Array
Array:在文檔中提供了三個(gè)屬性
[prototype](http://www.w3school.com.cn/jsref/
Web開發(fā)
1.Web前端:基礎(chǔ)Html靜態(tài)頁(yè)面 css樣式表 JavaScript動(dòng)態(tài)的特效
基本的概念:URL: http://localhost:port/path/file
http這是一種無(wú)狀態(tài)的連接協(xié)議
Web開發(fā)的基本結(jié)構(gòu):
C/S結(jié)構(gòu)
B/S結(jié)構(gòu) Java的主要開發(fā)結(jié)構(gòu)
前端的開發(fā)工具:HBuilder WebStorm VScode Sublim
文檔 1.W3C 2. https://www.runoob.com
2.Html(超文本標(biāo)記語(yǔ)言) 版本 html4 html5
3.CSS層疊樣式表:負(fù)責(zé)頁(yè)面的排版以及美化
· CSS 指層疊樣式表 (Cascading Style Sheets)
· 樣式定義如何顯示HTML 元素
· 樣式通常存儲(chǔ)在樣式表中
· 把樣式添加到 HTML 4.0 中,是為了解決內(nèi)容與表現(xiàn)分離的問題
· 外部樣式表可以極大提高工作效率
· 外部樣式表通常存儲(chǔ)在CSS 文件中
· 多個(gè)樣式定義可層疊為一
層疊次序
當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)缤谎,會(huì)使用哪個(gè)樣式呢抒倚?
一般而言,所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中坷澡,其中數(shù)字 4 擁有最高的優(yōu)先權(quán)托呕。
1.瀏覽器缺省設(shè)置
2.外部樣式表
3.內(nèi)部樣式表(位于 <head> 標(biāo)簽內(nèi)部)
4.內(nèi)聯(lián)樣式(在 HTML 元素內(nèi)部)
因此,內(nèi)聯(lián)樣式(在 HTML 元素內(nèi)部)擁有最高的優(yōu)先權(quán)频敛,這意味著它將優(yōu)先于以下的樣式聲明:<head> 標(biāo)簽中的樣式聲明项郊,外部樣式表中的樣式聲明,或者瀏覽器中的樣式聲明(缺省值)斟赚。
總結(jié):以上三種樣式是有優(yōu)先級(jí)的 內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式着降。
內(nèi)部樣式表>外部樣式表有一個(gè)前提:外部樣式表一定要寫在內(nèi)部樣式表的前面∞志總體來(lái)說:就近原則(離被設(shè)置元素越近優(yōu)先級(jí)就越高)
CSS 類選擇器
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式任洞。
id 選擇器以 "#" 來(lái)定義。
類選擇器:.選擇器名稱
Id選擇器與類選擇器的區(qū)別发侵?
相同點(diǎn):可以應(yīng)用于任何html元素
不同點(diǎn):
1.id選擇器只能在文檔中使用一次而類選擇器可以使用多次
2.可以使用類選擇器為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式交掏,而id選擇器是不可以的。
子元素選擇器:使用(>)主要用于選擇指定標(biāo)簽元素的第一代子元素
后代選擇器:可以使用(空格)用于選擇指定標(biāo)簽元素下的后代元素
總結(jié):>作用于元素的第一代后代 空格:作用于元素的所有后代
通用選擇器(*):它的作用是匹配html中所有的標(biāo)簽元素
分組選擇器:element,element
注意:
1.CSS是具有繼承性的:它就是一種規(guī)則刃鳄,它允許樣式不僅應(yīng)用于某個(gè)特定的html標(biāo)簽元素耀销,而且也可以應(yīng)用其后代
2.CSS是具有特殊性的,從例子中可以看到green生效了铲汪?為什么呢熊尉?瀏覽器會(huì)根據(jù)一個(gè)權(quán)值一判斷使用哪一種樣式。使用的是權(quán)值最高的樣式掌腰。
權(quán)值的定義:標(biāo)簽的權(quán)值為1 類選擇器的權(quán)值為10 ID選擇器權(quán)值為100
P span 它的權(quán)值如何計(jì)算:1+1=2
P span .waring 它的權(quán)值是:12
3.CSS具有層疊性:當(dāng)權(quán)值相同的時(shí)候狰住,后面的樣式會(huì)覆蓋前面的樣式
4.重要性 !important
元素的分類
Html中的標(biāo)簽分類:塊級(jí)元素 內(nèi)聯(lián)元素(行內(nèi)元素) 內(nèi)聯(lián)塊級(jí)元素
常見的塊級(jí)元素:<div> <p> <h1>…<h6> <ol> <ul> <table> <form>
常見的內(nèi)聯(lián)元素:<a> <span> <strong> <em>
常見的內(nèi)聯(lián)塊元素:<img> <input>
塊級(jí)元素<div> <p> <h1>…<h6> <ol> <ul> <table> <form>。塊級(jí)元素的設(shè)置 display:block 作