Web前端知识点总结.docx

七、css常用属性

属性名

功能

属性值

font-size

设置字号

1）像素2）百分比

color

设置字体颜色

1）英文单词2）rgb

font-family

设置字体

宋体|黑体

font-weight

设置文字粗体

normal、lightar、bold

font-style

设置字体斜体

normal、italic

font

设置字体所有属性

必须按顺序设置

text-decoration

设置文本下划线格式

none、underline、

line-through

text-align

元素中的内容水平方向对齐方式

left、rigth、center

line-height

设置行高

像素

vertical-align

元素中的内容垂直方向的对齐

top、bottom、middle

text-indent

段落首行缩进

1）像素2）em

text-transform

控制英文字母大小写

none、capitalize、

uppercase、lowercase

width

设置元素的宽度

像素

heigth

设置元素的高度

像素

background-color

设置背景颜色

1）英文单词2）rgb

background-image

设置背景图片

url（'图片路径'）

background-repeat

设置背景图像重复方式

repeat、no-repeat

repeat-x、repeat-y

background-size

设置背景图像的大小

1）像素2）百分比

background-position

设置背景图片的出现位置

像素

background

//设置所有背景属性

display

设置元素是否可见

none、block、inline

overflow

设置内容超出父区域时如何处理

hidden、visible

list-style-type

设置列表符号类型

disc、circle、none

list-style-image

用图片作为编号

url（"图片路径"）

opacity

设置元素的透明度

从0.0（完全透明）到1.0（完全不透明）

cursor

设置鼠标到达元素上的鼠标形状

pointer、text

border-radius

设置圆角矩形

像素

八、案例

1、房地产首页

2、注册页

3、登录页

4、二级菜单

JavaScript知识点

一、功能

浏览器执行html代码后实现动态改变网页内容和格式从而实现动态效果

二、思想

1、分析有哪些动态效果，确定事件三要素并关联从而实现一切功能。

2、要实现某功能找已经存在的对象和方法。

三、html导入独立的js文件的步骤

1、创建文件夹和独立js文件。

2、用标签在html页面中导入。

3、在js文件中定义方法，并与html页面的标签关联。

四、事件关键字

1、onclick：

鼠标单击时触发。

2、onload：

页面全部内容被加载后立即触发，该事件源是body。

3、onmouseover：

鼠标进入区域时触发。

4、onmouseout：

鼠标退出区域时触发。

5、onmousemove：

鼠标在某区域移动时触发。

6、onchange：

内容改变时触发。

7、onsubmit：

表单提交数据时触发。

8、onblur：

控件失去焦点时触发。

9、onfocus：

控件获取焦点时触发。

五、浏览器对象和方法

1、特性

所有对象都是由浏览器负责提供的，编程时可以直接调用方法，又称BOM对象。

2、浏览器对象的方法总结

内置对象名

功能

常用方法

1、window

代表浏览器窗口

alert（"提示内容"）

setInterval（"方法名（）",数值）

clearInterval（对象名）

setTimeout（"方法名（）",时间）

open（"","_blank","width=800,height=500"）;

parseInt（数值）

eval（）

prompt（"提示信息","默认信息"）

//弹出对话框,接受文本框内容

confirm（"对话框上的提示信息"）

//弹出对话框,有确定和取消2个

2、document

代表整个网页

getElementById（"标签的id属性"）

getElementsByTagName（"标签关键字"）

getElementsByName（"标签的name属性值"）

createElement（"标签关键字"）

write（"内容"）

3、event

事件对象

event.x鼠标此时位置的横坐标

event.y鼠标此时位置的纵坐标

4、location

window.location=location

location.href（“地址”）

六、DOM对象的方法

1、原理

Dom对象可以获取html文档的每个标签，以及该标签的属性和内容，并可以对这些标签，属性和内容进行修改从而实现动态的改变网页内容和格式。

2、DOM对象方法总结

方法

功能

说明

getElementById（"标签的id属性"）

根据标签的id获取标签对象

1）任何标签对象可以调用

2）document对象都可以调用

getElementsByTagName（"标签名"）

根据标签名获取包含全部标签的数组

2个

getElementsByName（"name属性值"）

根据标签的name的属性值获取所有标签对象数组

1）只有document对象可以调用该方法

createElement（"标签关键字"）

根据标签关键字创建标签对象

1）只有document对象可以调用该方法

appendChild（node）

把参数对象添加到父标签内

2个

insertBefore（newnode,oldnode）

为父标签对象增加一个子标签对象

2个

removeChild（node）

为父标签对象删除一个子标签对象

2个

getAttributeNode（"属性名"）

根据属性名获取属性对象

1）标签对象可以调用该方法

setAttribute（"属性名","属性值"）

为标签对象添加一个新的属性或改变它现有属性的值

1）标签对象可以调用该方法

属性

意义

innerHTML

用来获取或修改标签对象中的文本内容

1）标签对象可以调用该方法

parentNode

返回子标签的父标签对象

1）标签对象可以调用该方法

2）文本对象

firstChild

用来获取父标签的第一子标签对象

1）标签对象可以调用该方法

lastChild

返回父标签的最后一个子标签对象

1）标签对象可以调用该方法

childNodes

返回父标签所有子节点对象

1）标签对象可以调用该方法

nextSibling

返回当前标签对象的下一个兄弟节点

1）标签对象可以调用该方法

2）属性对象

previousSibling

返回当前标签对象的上一个兄弟节点

1）标签对象可以调用该方法

2）属性对象

七、正则表达式

1、正则表达式使用场合

客户端表单数据校验

2、创建正则表达式的对象

1>varregex=newRegExp（"^.{6}$"）;

2>varpwdRegex=/^.{6}$/;

RegExp类的方法：

test（）//检测字符串是否与正则表达式匹配

3、正则表达式各通配符

（1）字符匹配符:

[]：

匹配多个字符中的任意一个字符

例如：

[abc]匹配a,b,c其中的任意一个字符

-：

用来指定范围也可以表示字符"-"本身

例如:

[a-z]:

表示匹配从a到z的任意一个字符

[A-Z]:

表示匹配从A到Z的任意一个字符

[0-9]:

表示匹配从0到9的任意一个字符

[\u4e00-\u9fa5]:

表示匹配所有汉字中任意一个汉字

^：

取反,注意只有用[]包围才是取反

例如:

[^A-Z]:

表示匹配不是从A到Z的任意一个字符

[^0-9]:

表示匹配不是从0到9的任意一个字符

[^abc]:

匹配不是a,b,c中的任意一个字符

\d：

匹配任意一个数字字符相当于[0-9]

\D：

匹配任意一个非数字字符相当于[^0-9]

\w：

匹配字母、数字、下划线中的一个字符，相当于[a-zA-Z0-9_]

\W：

与\w相反，相当于[^a-zA-Z0-9_]

.：

匹配一个任意字符，除了\n

\.：

表示一个小数点，转义字符

\s：

匹配任何一个空白字符（空格，制表位）

\S：

匹配任何一个非空白字符（空格，制表位）

（2）定位符：

规定字符出现的位置

^：

字符串必须以^后面的字符开始，开始标记，此时^不能用[]包围

$：

字符串必须以$前面的字符结束，结束标记。

（3）限定字符出现次数:

{数1,数2}：

限定前方字符出现次数>=数1并且次数<=数2；

{数1}：

前方字符出现次数=数1

{数1,}：

前方字符出现次数>=数1

+：

限定前方字符出现次数>=1等同于{1,}

*：

限定前方字符出现次数>=0

：

限定前方字符出现次数0次或1次

|：

或者的关系例如:

/（^xue&）|（^学$）|（^薛$）/

（）：

构成一个整体，括号内的内容作为一个子表达式来处理。

例如：

[abc]：

表示a、b、c其中的一个

（abc）：

表示子串"abc"

/^abc?

$/：

0个或1个c

/^（abc）?

$/：

0个或1个"abc"

varunameRegex=/（^abc$）|（^liming$）|（^zxy$）/;

//要么是abc，要么是liming，要么是zxy

（4）需要用到转义的字符有

.*（）$/\?

[]^{}:

例如：

\.\*

说明：

在[]中/\[]这4个字符必须写转义字符才能表达本身

其它字符写不写转义都行能表达本身

在[]外必须用转义字符

（5）附加参数:

varregex=/^\d{4}$/gi

i：

加i匹配时忽略大小写，没有i就严格区分大小写。

g：

主要在从字符串中查找匹配的子串时起作用，加g表示查找出所有的匹配子串。

例如：

absdfwabdfwab34324ab;varregex=/^ab$/只找到1个

absdfwabdfwab34324ab;varregex=/^ab$/g只找到4个

4、表单数据验证7步骤

（1）获取各表单控件对象

（2）获取各控件的value值

（3）根据id获取显示错误信息的span标签对象

（4）定义正则表达式对象

（5）用if选择结构对数据进行校验.

一个控件对应一个if结构：

如果对一个控件有多个校验用if多分支

如果对一个控件只有1个校验用if单分支

每个分支的条件：

正则表达式.test（"控件value值"）

我们对其取反运算

如果字符串符合要求则取反后返回假,不符合取反后返回真

每个分支的语句：

错误信息处理语句（给保存错误信息的变量赋值）

注意：

数据不合法才执行if语句体

（6）为显示错误信息的span标签添加内容

（7）返回值（str==null&&stt2==null）

注意：

如果验证单选按钮或复选框第

（2）步获取checked属性。

八、案例

1、图片切换

2、级联城市

3、表单数据验证

4、植物大战僵尸

Jquery知识点

一、功能和思想

1、功能

浏览器执行html代码后实现动态改变网页内容和格式从而实现动态效果。

2、思想

（1）分析有哪些动态效果,确定事件三要素并关联从而实现一切功能

（2）要实现某功能找已经存在的对象和方法

二、html添加jquery的3步骤

1、创建js文件夹和独立的js文件

2、在html页面中导入jQuery函数库和独立的js文件

3、在独立文件中编写jQuery代码

$（function（）{

$（"选择器"）.事件方法（function（）{

$（"选择器"）.方法（）;

}）;

}

）

注意：

导入jQuery函数库语句必须在导入独立js文件语句的上方

三、选择器

1、id选择器

$（"#id属性值"）

2、类选择器

$（".class属性的值"）

3、标签选择器

$（"标签名"）

4、包含选择器

（1）间接包含：

$（"#sss.tttinput"）;

（2）直接包含：

$（"#sss>input>.ttt"）;

5、属性选择器

$（"input[name='newsletter']"）

6、基本过滤选择器

$（"input:

eq（0）"）

7、表单标签属性过滤选择器

$（"input:

checked"）

四、事件处理机制

1、语法

$（"选择器"）.事件方法（function（）{

方法语句;

}）;

2、常用事件方法名

click（[fn]）：

//当鼠标单击时触发

blur（[fn]）：

//当标签失去焦点时触发

change（[fn]）：

//当标签内容发生改变时触发

dblclick（[fn]）：

//当鼠标双击击时触发

focus（[fn]）：

//当标签获得焦点时触发

keydown（[fn]）：

//当键盘被按下时触发

keyup（[fn]）：

//当键盘被释放时触发

keypress（[fn]）：

//按下并释放时触发

mousedown（fn）：

//鼠标按下

mouseup（fn）：

//鼠标释放时触发

mousemove（fn）：

//鼠标移动

mouseout（fn）：

//鼠标退出区域

mouseover（fn）：

//鼠标进入区域

resize（fn）：

//当窗口改变大小时触发

submit（[fn]）：

//表单提交

五、方法

1、操作标签

（1）删除

remove（）

无参时把对象删除；有参时从多个对象中删除符合条件的，只能是字符串。

empty（）

删除内容，不删除标签本身。

jquery方法参数就3种形式：

$（"#myul"）、"#myul"、html标签代码

（2）增加

append（）;

父子关系最后

after（）;

兄弟

before（）;

兄弟

$（"p"）.appendTo（"div"）;

父子关系，把自己添加到父标签的最后。

$（"p"）.insertBefore（"#foo"）;

兄弟，新增加在原有兄弟的前面。

（3）修改

replaceWith（）;

参数只能是jquery对象,不能是字符串

（4）创建标签对象

$（"html代码"）;

2、操作html标签的属性

attr