CSS基础和js基础
?
組成：
首先，我們需要了解下web前端由哪些組成：
1. 頁面結(jié)構(gòu)：html、Servlet、jsp（Java Server Page）=html+java
2. 頁面樣式：css（Cascading Style Sheet，層疊樣式表）
3. 頁面交互：js（javascript）、jQuery、AJAX
?
一、CSS的優(yōu)先級和繼承：
1.1 CSS的優(yōu)先級：
行內(nèi)樣式>ID選擇器>類選擇器>標(biāo)簽選擇器。
就近原則。
?
1.2 CSS繼承：
原則：
1、父元素的樣式會在子元素中生效，但是如果子元素也定義了同樣的樣式，遵循就近原則，以子元素設(shè)定的為準(zhǔn)。
2、子元素設(shè)置的樣式不會對父元素的樣式產(chǎn)生影響。
?
二、盒子模型：
2.1 內(nèi)邊距padding：
padding的取值：
給定一個值：四個內(nèi)邊距值都是該值。
給定兩個值：按照上/下、右/左取值。
給定三個值：按照上、右/左、下取值。
給定四個值：按照上、右、下、左取值。（順時針）
padding-top
padding-right
padding-bottom
padding-left
?
2.2 邊框border：
邊框的方向：
border
border-top
border-right
border-bottom
border-left
邊框的特征：
border-style：邊框的樣式
border-width：邊框的寬度
border-color：邊框顏色
邊框的方向和特征：
border-top-style
border-top-width
border-top-color
?
2.3 外邊距margin：
margin：
給定一個值：四個方向的邊距全部是該值；
給定兩個值：上/下、右/左；
給定三個值：上、右/左、下；
給定四個值：上、右、下、左。
margin-top
margin-right
margin-bottom
marginleft
?
?
2.4 盒子模型的大小問題：
?
?
三. js特點(diǎn)：
3.1 概述：
javascript，java腳本，跟java沒有關(guān)系。
NetScape公司。
?
3.2 特點(diǎn)：
1、腳本語言，依賴于html/jsp/asp頁面，可以在瀏覽器中運(yùn)行。
2、屬于解釋性語言，不需要編譯。
3、跨平臺，與平臺無關(guān)。
4、基于對象的。
?
3.3 js和java的區(qū)別：
1、js是基于對象的，java是面向?qū)ο蟆?/p>
2、js屬于Netscape公司，java屬于sun公司。
3、java語言先編譯后解釋，js不需要編譯。
4、java的語法規(guī)則比較強(qiáng)，js語法比較弱。
?
四、js的語法：
4.1 js的引入：
內(nèi)部引入：直接寫在html/jsp頁面中，可以寫在head內(nèi)，也可寫在body內(nèi)。
?
2、外部引入：把js代碼單獨(dú)寫在js文件中，在html/jsp的head（body）中引入js文件。
?
4.2 數(shù)據(jù)類型：
4.2.1 基本類型：
Number：數(shù)字類型
Boolean：布爾類型
String：字符串類型，用””定界，如”2017-08-02”
4.2.2 對象類型：
數(shù)組：
對象：Math
自定義對象：
Date：使用’’定界
4.2.3 特殊類型：
null
undefined
?
4.3 js的運(yùn)算符：
4.3.1 算術(shù)運(yùn)算符：
| 運(yùn)算符 | 描述 | 例子 | 結(jié)果 |
| + | 加 | ? | ? |
| - | 減 | ? | ? |
| * | 乘 | ? | ? |
| / | 除 | ? | ? |
| % | 余 | ? | ? |
| ++ | 自增 | ? | ? |
| -- | 自減 | ? | ? |
++i和i++：
--i和i--：
4.3.2 賦值運(yùn)算符：
=
+=
-=
*=
/=
%=
4.3.3 比較運(yùn)算符：
==：
===：全等（類型和值）、強(qiáng)等
!=
>
<
>=
<=
?
“23”==23 ??true
“23”===23?? false
4.3.4 位運(yùn)算符：
&
|
！
^
4.3.5 邏輯運(yùn)算符：
&
&&：短路與
|
||：短路或
4.4 js函數(shù)：
1、顯示函數(shù):
?
2、隱式函數(shù)（匿名函數(shù)）：
?
4.5 js表達(dá)式：
4.5.1 if-else 表達(dá)式：
案例1：用戶登錄時“賬號為空”驗(yàn)證：
?
案例2：if與三目表達(dá)式的互換
?
4.5.2 switch-case表達(dá)式
If表達(dá)式集合switch表達(dá)式的使用選擇：
If表達(dá)式——特定的范圍
Switch——有限的、固定值
?
4.5.3 for表達(dá)式
?
4.5.4 while/do-while表達(dá)式
While：先判斷后執(zhí)行
Do-while：先執(zhí)行后判斷
4.5.5 with表達(dá)式：
?
4.6 js事件：
4.6.1 onchange事件：
當(dāng)輸入框的內(nèi)容發(fā)生變化、失去焦點(diǎn)時觸發(fā)動作。
?
4.6.2 onclick事件：
可以使用js動態(tài)修改css樣式：
使用js給html元素動態(tài)綁定事件：
?
4.6.3 onfocus事件：
4.6.4 onsubmit和onreset事件：
onmouseover：當(dāng)鼠標(biāo)從指定的元素上經(jīng)過時觸發(fā)；
onmouseout：當(dāng)鼠標(biāo)從指定的元素上移除時觸發(fā)；
onmousedown 和 onmouseup：當(dāng)鼠標(biāo)按下（或放開）該元素時觸發(fā)；
onload：當(dāng)頁面加載完畢后會自動觸發(fā)，一般放在body中，作為body的屬性使用。
?
?
?
?
?
?
?
?
總結(jié)
以上是生活随笔為你收集整理的CSS基础和js基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 161115
- 下一篇： 粘连 Footer 的 5 种方法 |