CSS基础和js基础

 

组成：
首先，我们需要了解下web前端由哪些组成：

1. 页面结构：html、Servlet、jsp（Java Server Page）=html+java

2. 页面样式：css（Cascading Style Sheet，层叠样式表）

3. 页面交互：js（javascript）、jQuery、AJAX

 

一、CSS的优先级和继承：

1.1 CSS的优先级：

行内样式>ID选择器>类选择器>标签选择器。

就近原则。

 

1.2 CSS继承：

原则：

1、父元素的样式会在子元素中生效，但是如果子元素也定义了同样的样式，遵循就近原则，以子元素设定的为准。

2、子元素设置的样式不会对父元素的样式产生影响。

 

二、盒子模型：

2.1 内边距padding：

padding的取值：

给定一个值：四个内边距值都是该值。

给定两个值：按照上/下、右/左取值。

给定三个值：按照上、右/左、下取值。

给定四个值：按照上、右、下、左取值。（顺时针）

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特点：

3.1 概述：

javascript，java脚本，跟java没有关系。

NetScape公司。

 

3.2 特点：

1、脚本语言，依赖于html/jsp/asp页面，可以在浏览器中运行。

2、属于解释性语言，不需要编译。

3、跨平台，与平台无关。

4、基于对象的。

 

3.3 js和java的区别：

1、js是基于对象的，java是面向对象。

2、js属于Netscape公司，java属于sun公司。

3、java语言先编译后解释，js不需要编译。

4、java的语法规则比较强，js语法比较弱。

 

四、js的语法：

4.1 js的引入：

内部引入：直接写在html/jsp页面中，可以写在head内，也可写在body内。

 

2、外部引入：把js代码单独写在js文件中，在html/jsp的head（body）中引入js文件。

 

4.2 数据类型：

4.2.1 基本类型：

Number：数字类型

Boolean：布尔类型

String：字符串类型，用””定界，如”2017-08-02”

4.2.2 对象类型：

数组：

对象：Math

自定义对象：

Date：使用’’定界

4.2.3 特殊类型：

null

undefined

 

4.3 js的运算符：

4.3.1 算术运算符：

运算符	描述	例子	结果
+	加
-	减
*	乘
/	除
%	余
++	自增
--	自减

++i和i++：

--i和i--：

4.3.2 赋值运算符：

=

+=

-=

*=

/=

%=

4.3.3 比较运算符：

==：

===：全等（类型和值）、强等

!=

>

<

>=

<=

 

“23”==23   true

“23”===23   false

4.3.4 位运算符：

&

|

！

^

4.3.5 逻辑运算符：

&

&&：短路与

|

||：短路或

4.4 js函数：

1、显示函数:

 

2、隐式函数（匿名函数）：

 

4.5 js表达式：

4.5.1 if-else 表达式：

案例1：用户登录时“账号为空”验证：

 

案例2：if与三目表达式的互换

 

4.5.2 switch-case表达式

If表达式集合switch表达式的使用选择：

If表达式——特定的范围

Switch——有限的、固定值

 

4.5.3 for表达式

 

4.5.4 while/do-while表达式

While：先判断后执行

Do-while：先执行后判断

4.5.5 with表达式：

 

4.6 js事件：

4.6.1 onchange事件：

当输入框的内容发生变化、失去焦点时触发动作。

 

4.6.2 onclick事件：

可以使用js动态修改css样式：

使用js给html元素动态绑定事件：

 

4.6.3 onfocus事件：

4.6.4 onsubmit和onreset事件：

onmouseover：当鼠标从指定的元素上经过时触发；

onmouseout：当鼠标从指定的元素上移除时触发；

onmousedown 和 onmouseup：当鼠标按下（或放开）该元素时触发；

onload：当页面加载完毕后会自动触发，一般放在body中，作为body的属性使用。