前端知識點梳理

html的簡介

CSS層疊樣式表

css描述

（1）什麼是css？層疊樣式表

*樣式表：有很多的屬性和屬性值，來設置內容樣式

*層疊：一層一層的，樣式的優先級。

**優先級: 最終以誰的樣式爲準

*使用css目的是：把網頁的內容和樣式進行分離，利用代碼的維護。

*想要使用css，不能單獨使用，要和html結合使用

*css和html的如何結合使用。

css和html的結合方式

（1）css和html有四種結合方式 (第四種不常用import)

第一種：使用html標籤裏面的屬性style="css的代碼"

*代碼 <div style="background-color:red;color:blue;">

第二種：使用html的標籤

*<style type="text/css">

css的代碼;

</style>

*代碼

div{

background-color:red;

color:black;

}

</style>

第三種：使用html標籤實現 link，寫在head裏面

*首先創建css文件，在css文件裏面寫css代碼

*在html中使用link標籤引入css文件

*代碼 <link rel="stylesheet" type="text/css"href="1.css"/>

css的選擇器

（1）css優先級

*在一般情況下，優先級是後加載的優先級高

（2）格式規範：屬性名稱1:屬性值1;屬性名稱2:屬性值2;

（3）選擇器：作用在哪個標籤上（要對哪個標籤裏面的內容進行操作）

*css有三個基本選擇

第一個：標籤選擇器

**使用標籤名稱作爲選擇器

div{

background-color: red;

}

第二個：class選擇器

**每個html標籤上面都有一個屬性class，通過設置class屬性的值

**代碼

.haha{

background-color:red;

}

第三個：id選擇器

**每個html標籤都有一個屬性id，通過設置id的屬性值

**代碼

#hehe{

background-color:green;

}

（4）選擇器的優先級

*style > id選擇器 > class選擇器 > 標籤選擇器

css的擴展選擇器

（1）關聯選擇器

*設置嵌套標籤的樣式

**代碼

divp {

background-color:red;

}

（2）組合選擇器

*設置不同的標籤具有相同的樣式

*代碼

div,p{

background-color:green;

}

（3）僞元素選擇器

*比如超鏈接爲例，

*狀態：原始狀態、鼠標放上去的狀態、點擊狀態、點擊之後的狀態

:link :hover :active :visited

JavaScript

Javascirpt的概述

什麼是JavaScript：是基於對象和事件驅動的語言，應用於客戶端。

學習JavaScript可以參照Java語言的學習模式去知曉.

JavaScript的組成部分

第一部分：ECMAScript

**由ECMA組織制定語句，語法

第二部分：BOM

**Broswer Object Model：瀏覽器對象模型

第三部分：DOM

** Document Object Model：文檔對象模型

（4）JavaScript由三部分組成

第一部分：ECMAScript

**又ECMA組織制定語句，語法

第二部分：BOM

**broswer object model：瀏覽器對象模型

第三部分：DOM

**document object model：文檔對象模型

js的變量聲明和數據類型

描述;JavaScript是一門弱語言,所以變量的定義也會與衆不同

（1）在js裏面如何聲明變量，都是使用一個關鍵字var

* js的原始類型有五個

第一，string：字符串類型

*var a = "abc";

第二，number：數字類型

*var b = 10;

第三，boolean：布爾類型 truefalse

*var c = true;

第四，null

*null是特殊的引用類型

*表示對象引用爲空

*比如 var date = null;

第五，undefined

*表示定義了一個變量，但是沒有賦值

*var a;沒有賦值

（3）typeof(變量的名稱): 查看當前變量的類型

*alert(typeof(a));

js的引用類型和類型轉換

* 引用對象

**Object 對象：所有對象都由這個對象繼承而來

**Boolean 對象：Boolean 原始類型的引用類型

**Number 對象： Number 原始類型的引用類型

** 轉換成字符串

**轉換成數字：parseInt() 和 parseFloat()

**強制類型轉換

Boolean(value)- 把給定的值轉換成 Boolean 型；

Number(value)- 把給定的值轉換成數字（可以是整數或浮點數）；

String(value)- 把給定的值轉換成字符串；

Java運算和JavaScript運算的區別:

js的運算符和java不同的內容

第一個：js裏面不區分整數和小數

* 比如 var a = 123/1000*1000,如果在java裏面結果是 0

*js裏面的結果：123

第二個：字符串的相加和相減操作

* 字符串相加是字符串的拼接操作，字符串相減是真正的相減運算，如果字符串不是數字提示NaN

* //字符串的相加和相減

第三個：boolean類型相加和相減的操作

* 如果布爾類型值是true，把類型當成1運算；如果布爾類型值是false，把類型當成0運算

//布爾類型相加和相減操作

第四個：==和===區別

* ==比較的是值

* === 比較的是值和類型

JavaScript的數組

與Java相比較,區別非常大,JS可以存放不同類型的數組,

第一個：var arr1 = [];

第二個：var arr2= ["10",10,true]; //可以寫任意的類型

第三種：var arr3= new Array(3);

**表示定義數組名稱是arr3，數組的長度是3

第四種：var arr4= new Array(4,5,6);

**表示定義數組名稱是arr4，數組裏面的值4 5 6

*數組裏面的屬性：查看數組的長度 length

js的全局函數

（1）不屬於任何對象，可以使函數

（2）主要的函數

eval(): 把字符串當成js代碼執行

** var str = "alert('123456');";

//alert(str);

eval(str);

isNaN() 檢查某個值是否是數字

** 如果是數字返回 false,如果不是一個數字返回true。

parseInt() 解析一個字符串並返回一個整數

** var str1 = "123";

alert(parseInt(str1)+1);

encodeURI() 把字符串編碼爲 URI

** var str2 = "abc測試中文";

var encodestr2 = encodeURI(str2);

document.write(str2);

document.write("<br/>");

document.write(encodestr2);

decodeURI() 解碼某個編碼的 URI

** var decodestr2 = decodeURI(encodestr2);

JavaScript高級教程

1、js的函數

（1）在java裏面定義方法

publicvoid/int 方法名稱(參數列表) {

方法體和返回值;

}

（2）在js裏面定義函數有三種方式

第一種：使用關鍵字function 方法名稱(參數列表) { 方法體和返回值 }

*注意一：參數列表，不需要寫類型（var），直接寫參數名稱

*注意二：返回值，根據實際需要可以有也可以沒有

*代碼

functiontest1() {

alert("123456");

}

//test1();

//實現兩個數的相加

functionadd1(a,b) {

varsum = a+b;

returnsum;

}

alert(add1(2,3));

第二種：匿名函數，使用關鍵字function(參數列表) { 方法體和返回值; }

*代碼

//第二種定義方式

vartest1 = function(a,b) {

returna+b;

}

//調用函數

alert(test1(3,4));

第三種：動態函數（方法體和返回值，包含參數列表都是通過參數傳遞進來的）

*使用js裏面的內置對象 new Function("參數列表","方法體和返回值")

*代碼

//第三種定義方式

varparam = "a,b";

varmethod = "var sum;sum=a+b;return sum;";

vartest2 = new Function(param,method);

//調用函數

alert(test2(5,6));

2、js的函數的重載

（1）在java裏面存在重載，方法名稱相同，參數列表不同

（2）js裏面是否存在函數的重載？

第一，在js不存在重載

第二，可以使用js函數裏面arguments數組模擬重載的效果

（3）模擬重載的效果

*在js裏面有一個數組arguments，保存傳遞進來的參數，使用這個數組模擬重載的效果

*代碼

//模擬重載的效果

//在js函數裏面有一個數組arguments，保存傳遞進來的參數的

functionadd1() {

//alert(arguments.length);

//遍歷數組

/*for(vari=0;i<arguments.length;i++) {

alert(arguments[i]);

}*/

//模擬重載的效果（有幾個參數，實現這幾個參數的相加）

varsum = 0;

for(vari=0;i<arguments.length;i++) {

sum+= arguments[i];

}

returnsum;

}

//調用

alert(add1(1,2));

alert(add1(1,2,3));

alert(add1(1,2,3,4));

3、js的事件

（1）什麼是事件：在html的元素裏面可以觸發事件調用js裏面的函數

（2）在html的標籤上面如何使用事件

*有三種方式

*第一種：使用事件屬性調用js方法

**代碼

<inputtype="button" value="第一種方式"onclick="add1();"/>

*第二種：首先得到要綁定的標籤，在使用事件的屬性

**代碼

//第二種方式綁定事件

document.getElementById("buttonid").onclick= add1;

*第三種：首先得到要綁定的標籤，寫js的代碼

**代碼

document.getElementById("buttonid1").onclick= function() {

alert("aaaaa");

};

4、js的常用的事件

（1）onload事件和onclick事件

*onload：html頁面在加載時候觸發事件，調用響應的js方法

** <body onload="test1();">

*onclick：鼠標點擊事件

**<input type="text" onclick="test2();"/>

（2）onfocus事件和onblur事件

*onfocus：獲取焦點

*onblur：失去焦點

（3）onmouseover 鼠標被移到某元素之上

（4）onmouseout 鼠標從某元素移開

（5）onkeypress：點擊鍵盤上面的某個鍵，調用方法

*<input type="text" id="textid1"onkeypress="key1(event);"/>

*function key1(obj) {

//alert(obj.keyCode);

//如果點擊鍵盤上面的回車鍵，調用方法 13

if(obj.keyCode==13){

alert("key1");

}

5、js的dom對象

（1）什麼dom：document object model：文檔對象模型

*文檔：指的是標記型文檔（html、xml）

*對象：在對象裏面有屬性和方法

**使用dom裏面提供的對象裏面的屬性和方法，對標記型文檔進行操作

*要想使用dom對象標記型文檔進行操作，首先需要解析標記型文檔（html爲例）

**html中包含標籤、屬性、文本內容

（2）使用dom解析html

*解析過程：根據html的層級結構在內存中分配一個樹形結構

*document對象，代表整個文檔

*element對象，代表標籤

*attribute屬性對象

*text文本對象

*Node節點對象，是這些對象的父對象，在找不到想要使用的方法，到Node裏面找

（3）DHTML的簡介

*不是一種技術，是很多技術的簡稱。

*包含的技術：

**html：封裝數據

**css：使用屬性和屬性值修改數據的樣式

**ECMAScript：語句和語法

**DOM：對標記型文檔進行操作

6、document對象

（1）document對象代表整個文檔

（2）方法

第一個：write()，向頁面輸出內容，可以輸出html代碼

*document.write("aa");

document.write("<hr/>");

第二個：getElementById():獲取標籤對象，通過標籤的id值進行獲取

*var input1 = document.getElementById("textid");

document.write(input1.value);

第三個：getElementsByName():根據標籤裏面name屬性的值得到標籤對象，返回數組

*//getElementsByName()

varinputs1 = document.getElementsByName("name1");

//alert(inputs1.length);

//獲取每個input裏面的value值

for(vari=0;i<inputs1.length;i++) {

varinput1 = inputs1[i];

//得到value值

alert(input1.value);

}

*如果只有一個標籤，使用getElementsByName返回的也是一個數組，不需要遍歷，直接使用數組的下標獲取值

*var inputs2 = document.getElementsByName("name2");

//alert(inputs2.length);

alert(inputs2[0].value);

第四個：getElementsByTagName()：根據標籤的名稱獲取標籤對象，返回數組

*var inputs3 = document.getElementsByTagName("input");

//alert(inputs3.length);

//遍歷數組

for(vari=0;i<inputs3.length;i++) {

varinput3 = inputs3[i];

//得到標籤的value

alert(input3.value);

}

*如果只有一個標籤，使用getElementsByTagName返回的也是一個數組，不需要遍歷，直接使用數組的下標獲取值

vararr = document.getElementsByTagName("input");

alert(arr[0].value);

7、innerHTML屬性

（1）innerHTML屬性不是dom裏面屬性

（2）實現什麼功能

第一，獲取標籤裏面的文本內容

**var span1 = document.getElementById("spanid");

alert(span1.innerHTML);

第二，向標籤裏面設置內容（可以寫html代碼）

**var div1 = document.getElementById("div1");

div1.innerHTML= "<tableborder='1'><tr><td>aaa</td><td>bbb</td></tr></table>";

8、練習：動態生成表格

（1）實現的步驟

*首先創建頁面，在頁面中有兩個普通輸入項和按鈕（有事件）

*點擊生成按鈕，生成對應的表格

**首先得到輸入的行和列

**根據行和列生成表格

***循環行 <tr>

***在行裏面循環單元格 <td>

（2）代碼

//實現生成表格

functionadd1() {

//得到輸入的行和列

varhang = document.getElementById("hid").value;

varlie = document.getElementById("lid").value;

//alert(hang+":: "+lie);

vartab = "<table border='1' cellpadding='10'>";

//生成行

for(vari=1;i<=hang;i++) {

tab+= "<tr>";

//生成單元格

for(varj=1;j<=lie;j++) {

tab+= "<td>aaaaa</td>";

}

tab+= "</tr>";

}

tab+= "</table>";

//alert(tab);

//獲取div標籤

vardiv1 = document.getElementById("div1");

//向div裏面寫html代碼

div1.innerHTML= tab;

}

9、表單的提交

（1）在html中寫form標籤，提交方式

提交表單有三種方式

第一種方式：在form標籤裏面，寫提交按鈕<input type="submit"/>

=代碼

<formmethod="get">

username:<input type="text" name="username"/>

<br/>

password: <inputtype="password" name="password"/>

<br/>

<inputtype="submit" value="提交"/>

</form>

第二種方式：在form標籤裏面，寫普通按鈕<input type="button"/>

=代碼

//使用button進行表單的提交

functionform01() {

//得到form標籤

varform01 = document.getElementById("form01");

//提交form表單

form01.submit();

}

第三種方式：使用超鏈接提交數據

*<a href="要鏈接的地址?參數名稱1=參數的值1&參數名稱2=參數的值2">超鏈接</a>

*<a href="15-表單的提交方式二.html?username=ccc&password=123456">超鏈接提交數據</a>

10、表單校驗

（1）規範數據的輸入的格式

（2）如何進行表單的校驗

第一，使用submit進行表單提交，進行表單校驗

*使用事件 onsubmit事件，寫在form標籤裏面

<formmethod="get" onsubmit="return checkForm();">

*如何return返回的值true可以提交表單，如果返回false不會提交表單

=代碼

//submit表單的校驗

functioncheckForm() {

//判斷用戶名不能爲空

varusername = document.getElementById("usernameid").value;

varpassword = document.getElementById("passwordid").value;

if(username== "") {

alert("用戶名不能爲空");

returnfalse;

}

if(password== "") {

alert("密碼不能爲空");

returnfalse;

}

returntrue;

}

第二，使用button進行表單校驗

=代碼

//使用button提交表單，進行校驗

functionform01() {

//得到輸入項裏面的值，判斷值是否爲空，如果爲空不進行提交

varusername = document.getElementById("usernameid").value;

varpassword = document.getElementById("passwordid").value;

//如果值爲空，不進行提交

if(username== "") {

alert("用戶名不能爲空");

}else if(password == "") {

alert("密碼不能爲空");

}else {

//得到form標籤

varform01 = document.getElementById("form01");

form01.submit();

}

11、json的簡介

（1）JavaScriptObject Notation，JavaScript 對象表示法。json是數據的交換格式，比xml更加輕巧。

json是js的原生的格式，通過js操作json不需要依賴其他東西，直接對json格式進行操作。

（2）json數據格式

*json有兩種數據格式

第一種：json的對象的格式

*寫法 {json數據的名稱1:json數據的值1,json數據的名稱2:json數據的值2.....}

**類似於key-value形式

**名稱和值之間使用冒號隔開，多個值之間使用逗號隔開

**json數據的名稱是字符串的類型，json數據的值 string, number, object, array, true, false, null

**具體數據的格式{"name":"zhangsan","age":20,"addr":"nanjing"}

第二種：json的數組的格式

*寫法 [json對象1,json對象2........]

**在數組裏面有多個json對象，多個json對象之間使用逗號進行隔開

**具體數據的格式[{"name":"lucy","age":20},{"name":"mary","age":30}]

（3）可以使用json的這兩種格式組成更加複雜json的格式

*複雜的格式 {"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}

12、js解析json

（1）js解析json的對象的數據格式

*通過json對象數據格式裏面的name的名稱得到name對應的值

*代碼

//js解析json的對象格式的數據

varjson1 ={"username":"lucy","age":20,"addr":"nanjing"};

//對json的對象格式數據進行操作

document.write(json1.username);

document.write("<br/>");

document.write(json1.age);

document.write("<br/>");

document.write(json1.addr);

（2）js解析json的數組的數據格式

*根據數組的下標得到json對象，解析json對象，根據數據的名稱得到值

*遍歷json數組，得到json數組裏面每個json對象，解析每個json對象，根據json對象的數據

的名稱得到值

*代碼

//js解析json數組格式的數據

varjson2 =[{"username":"zhangsan","age":20,"addr":"beijing"},

{"username":"lisi","age":30,"addr":"tianjin"},

{"username":"wangnwu","age":40,"addr":"nanjing"}];

//js操作數組，遍歷數組，根據數組的下標得到值

//遍歷json數組格式，得到的是一個json對象，解析json對象（根據名稱得到值）

//得到第二個json對象裏面的age的值數組下標從0開始的

document.write(json2[1].age);

//得到第一個json對象裏面的addr的值

document.write("<br/>");

document.write(json2[0].addr);

//遍歷json數組的格式

document.write("<hr/>");

for(vari=0;i<json2.length;i++) {

//得到數組裏面的每一個json對象

varperson = json2[i];

//得到每個對象裏面的值

varusername = person.username;

varage = person.age;

varaddr = person.addr;

document.write("username:"+username+"; age:"+age+" ; addr:"+addr);

document.write("<br/>");

}

13、json練習：人員信息的顯示

（1）把多個人員的信息存到json的數據格式裏面，通過js解析json的數據格式，把所有的人員顯示到頁面的表格裏面。

（2）[{"name":"zhangsan","age":20,"addr":"beijing"},

{"name":"lisi","age":30,"addr":"tinajin"},

{"name":"wangwu","age":40,"addr":"nanjing"}]

（3）代碼

//創建json的數據的格式，用於存儲人員的信息

varpersons =[{"name":"zhangsan","age":20,"addr":"beijing"},

{"name":"lisi","age":30,"addr":"tinajin"},

{"name":"wangwu","age":40,"addr":"nanjing"}];

//使用js解析persons格式，把這些人員信息顯示到頁面上

//遍歷json的數組，得到每個人員的信息

//生成表格，把數據放到表格裏面，把表格顯示到頁面上

functionshowData() {

vartab = "<table border='1' cellpadding='10'>";

//添加表頭

tab+= "<tr><th>姓名</th><th>年齡</th><th>地址</th></tr>";

for(vari=0;i<persons.length;i++) {

//得到數組裏面的每個json對象

varperson = persons[i];

//得到每個json對象裏面值

varname = person.name;

varage = person.age;

varaddr = person.addr;

//生成表格

tab+="<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>";

}

tab+= "</table>";

//alert(tab);

//把table表格的代碼顯示到頁面上，使用innerHTML屬性

//得到div標籤

vardiv1 = document.getElementById("div1");

//向div裏面寫table代碼

div1.innerHTML= tab;

}

前端知識點梳理

前端知識點梳理

html的簡介

標籤

字體標籤

（1）文字標籤 <font>

常用兩個屬性:size和color

列表標籤

圖形標籤

表格標籤

表單標籤

其他的標籤的使用

CSS層疊樣式表

css描述

css和html的結合方式

css的選擇器

css的擴展選擇器

JavaScript

Javascirpt的概述

JavaScript的組成部分

js的變量聲明和數據類型

js的引用類型和類型轉換

* 引用對象

** 轉換成字符串

Java運算和JavaScript運算的區別:

js的運算符和java不同的內容

JavaScript的數組

js的全局函數

JavaScript高級教程

1、js的函數

2、js的函數的重載

3、js的事件

4、js的常用的事件

5、js的dom對象