W3C標(biāo)準(zhǔn)：網(wǎng)頁主要由三部分組成
- 結(jié)構(gòu)：html
- 表現(xiàn)：css，層疊樣式表
- 行為：JavaScript
css的導(dǎo)入方式
- div標(biāo)簽稱為選擇器，在div中各種屬性來進(jìn)行選擇
- css導(dǎo)入html有三種方式：
1，內(nèi)聯(lián)樣式：在div標(biāo)簽中使用style屬性
2，內(nèi)部樣式：定義《style》標(biāo)簽，在標(biāo)簽內(nèi)部定義css樣式
3，外部樣式：定義《link》標(biāo)簽，來引入外部的css文件
<style>
span{
color: red;
}
</style>
</head>
<body>
<!--表簽樣式-->
<div style="color: red">hello css</div>
<!--外部引入模式-->
<span>hello css</span>
<!--導(dǎo)入css文件-->
<link rel="stylesheet" href="......">
CSS選擇器
- 選擇器是選取需要設(shè)置的元素（標(biāo)簽）
- 常用的有元素選擇器，id選擇器，類選擇器
Javascript
- JavaScript是一門用來控制網(wǎng)頁行為的，用來實(shí)現(xiàn)網(wǎng)頁交互的語言。前面學(xué)習(xí)的html和css展現(xiàn)的都是靜態(tài)的頁面效果
- JavaScript是一門跨平臺的，面向?qū)ο蟮哪_本語言（不需要編譯，直接解釋運(yùn)行）。
Javascript的引入方式
- 內(nèi)部腳本：將JS代碼定義在HTML頁面中
使用《script》標(biāo)簽
<!--使用js來做信息彈出效果，做警告框，位置沒有要求-->
<script>
alert("hello js")
</script>
- 外部腳本：將JS代碼定義在外部JS文件中，然后引到HTML頁面中
輸出語句
<!--使用js來做信息彈出效果，做警告框，位置沒有要求-->
<script>
/*輸出語句*/
window.alert("hello js") /*寫入警告框*/
document.write("你好啊") /*寫入html輸出*/
console.log("ninghao") /*寫入瀏覽器控制臺*/
</script>
變量
- js中使用var關(guān)鍵字（varable）來聲明變量，JavaScript是一門弱類型的語言，變量可以存放不同類型的值
var a = 20;
a = '周周';
alert(a)
var關(guān)鍵字定義的變量的是全局變量，可以全局使用。可以重復(fù)定義變量
數(shù)據(jù)類型
JavaScript中分為：原始類型和引用類型
5種原始類型：
- number：數(shù)字
- string：字符、字符串
- boolean：布爾
- null：空對象
- undefined：當(dāng)聲明的變量未初始化時，該變量的默認(rèn)值是undefined
使用typeof運(yùn)算符可以獲取數(shù)據(jù)類型
var age = 20;
alert(typeof age)
javascript對象
- 數(shù)組對象：Array
- 字符串對象：String
- 還有一些例如：Boolean、Math、Date、Number、等等
Array對象的定義
/*定義數(shù)組對象*/
var arr = new Array(1,2,3);
var arr = [1,2,3,4]
索引也是從0開始的，但是JavaScript中的數(shù)組相當(dāng)于Java中的集合，長度和類型是可變的
數(shù)組的方法：
- push：添加元素
- splice：刪除元素
String對象
/*String對象定義*/
var str = new String("hello");
var str = "hello";
var str = "你好";
常用的方法：trim（去除前后的空格 ）、charAt()（返回指定位置的字符）、indexOf()（檢索字符串）
- 自定義對象
使用{}來對對象添加屬性和函數(shù)(使用function{}來定義)
BOM對象
- 指的是將瀏覽器的各個組成部分封裝成對象，通常有：
- Windows：瀏覽器窗口對象
- Navigator：瀏覽器對象
- Screen：屏幕對象
- History：歷史記錄對象
- Location：地址欄對象
對于windows對象來說，有如下的方法
let result = confirm("確認(rèn)刪除嗎？");
if (result){
//刪除邏輯
}else {
//非刪除邏輯
}
/*
* setTimeout(function,毫秒值):在一定的時間間隔后執(zhí)行一個function，只執(zhí)行一次
* setInterval(function,毫秒值)：在一定時間間隔后執(zhí)行一個function，循環(huán)執(zhí)行
* */
History對象
- History：歷史記錄，常用的方法有back()、forward()。表示加載類表中前一個url，加載列表中下一個url
Location對象
- 地址欄對象，使用windows.location獲取，
- 屬性有href，設(shè)置或者返回完整的URL
DOM對象
文檔對象模型，將標(biāo)記語言的各個組成部分封裝成為對象，通過DOM就可以對HTML進(jìn)行操作了，可以改變HTML元素的內(nèi)容，改變HTML元素的樣式（css），對HTML DOM
事件做出反應(yīng)
- Document：整個文檔對象
- Element：元素對象，
- Attribute：屬性對象
- Text：文本對象
- Comment：注釋對象
事件監(jiān)聽
對于一些如：按鈕被點(diǎn)擊、鼠標(biāo)移動到元素之上背景顏色改變、按下鍵盤按鍵等等，這些事件都可以被偵測到
對于事件綁定：
-
通過html標(biāo)簽中的事件屬性進(jìn)行綁定
-
通過DOM元素屬性綁定文章來源：http://www.zghlxwxcb.cn/news/detail-505477.html
表單驗(yàn)證
對于一些要提交的表單數(shù)據(jù)，會對于數(shù)據(jù)進(jìn)行一個驗(yàn)證。比如：在輸入手機(jī)號時，會驗(yàn)證手機(jī)號的位數(shù)：對于密碼有條件限制
文章來源地址http://www.zghlxwxcb.cn/news/detail-505477.html
到了這里，關(guān)于前端三劍客簡介的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
