Web前端知识点总结.docx
- 文档编号:8032773
- 上传时间:2023-01-28
- 格式:DOCX
- 页数:15
- 大小:45.60KB
Web前端知识点总结.docx
《Web前端知识点总结.docx》由会员分享,可在线阅读,更多相关《Web前端知识点总结.docx(15页珍藏版)》请在冰豆网上搜索。
Web前端知识点总结
HTML知识点
一、功能
用来制作静态网页,网页中的全部内容都是通过Html语言展现出来。
使用场合:
开发静态网页。
二、思想
一切功能都由标签实现,标签具有四要素。
三、常用标签
标签关键字
《
功能
常用属性
设置字体,字号,颜色
face,color,size
换行
/
居中对齐
设置标题级别
H1最大h6最小
$
align
插入水平线
size,width,align
划分段落,
align
>
创建有序编号列表
type,start
定义一个列表项
—
定义无序符号列表
type
插入图片
src,width,height,border,title,alt
—
插入表格
border,width,height,bgcolor,bordercolor,cellpadding,cellspacing
创建一行
…
创建一列
colspan,rowspan
创建一列,元素居中,粗体
【
设置表格的标题
收集用户输入信息,并提交给服务器
"
action,method
创建文本框
name,value
readonly,disabled
创建密码框
{
创建单选按钮
checked
创建下拉列表框
name
—
创建列表项
value,selected
创建复选框
checked
创建文本区域
)
name,rows,cols
创建隐藏控件
创建提交按钮
*
创建重置按钮
·
超级链接,网页跳转
href,target
指定快速的查询到该网页的关键字
开始;2>标签添加class属性与样式关联。
~
5、属性选择器
标签名[属性名=属性值],根据标签关键字和属性值自动关联。
6、包含选择器
1>子样式名中间加>或空格分隔(>直接包含);
2>看最后一个子样式是什么选择器就如何关联标签。
7、多个样式名同一样式体
1>样式名中间加逗号分隔;
|
2>根据样式类型决定如何与标签关联。
8、多条件同时成立选择器
1>多个子样式名紧挨着
2>一个标签必须同时具备这多个条件才可以被该样式修饰
9、各选择器使用场合
1)如果想根据标签名用一个样式修饰所有同名标签时,用标签选择器;
2)如果一个样式只想修饰唯一的一个标签时,用id选择器;
>
3)如果一个样式想修饰多个任意标签时,用类选择器;
4)尽量使用包含选择器。
四、元素定位
1、盒子模型
通过设置标签的内外边距从而改变元素的位置,没有脱离标准文档流。
相关属性:
marging-top:
外上边距
【
margin-right:
外右边距
margin-bottom:
外下边距
margin-left:
外左边距
margin:
同时设置上右下左四个外边距(顺时针)
padding-top:
内上边距
padding-right:
内右边距
padding-bottom:
内下边距
padding-left:
内左边距
;
padding:
同时设置上右下左四个内边距
border-top:
设置上边线的粗细,颜色,线型
border-right:
设置右边线的粗细,颜色,线型
border-bottom:
设置下边线的粗细,颜色,线型
border-left:
设置左边线的粗细,颜色,线型
border:
同时设置四个边线的粗细,颜色,线型
border-width:
只设置4个边线的宽度(粗细)
/
border-color:
兄弟元素都设置浮动后成为一行,脱离标准文档流。
相关属性
float:
设置浮动定位
clear:
清除浮动定位的影响
5、各定位方式使用场合
1)靠左或靠右,兄弟标签一列变一行,文字环绕——浮动定位。
2)移动位移比较小,用盒子模型。
|
3)移动位移比较大,父容器相对定位,子元素绝对定位。
五、添加独立css文件3步骤
1、创建子文件夹和css文件
2、在html页面用标签导入独立css文件
3、定义样式并修饰各html标签
六、静态网页开发思想
1、对网页元素通用属性进行设置。
·
2、分析页面的组成,整个网页布局划分为多个矩形区域,在矩形区域内部又可以划分子矩形区域,每个矩形区域都用
3、用html标签把实际元素放在
七、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
`
(
、
}
}
.
:
.
·
:
·
%
location=location
(“地址”)
六、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()匹配一个任意字符,除了\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$)/;
*()$/\[]^{}:
{
例如:
\.\*
说明:
在[]中/\[]这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]):
ppendTo("div");
父子关系,把自己添加到父标签的最后。
$("p").insertBefore("#foo");
兄弟,新增加在原有兄弟的前面。
(3)修改
replaceWith();
参数只能是jquery对象,不能是字符串
(4)创建标签对象
$("html代码");
2、操作html标签的属性
attr("","");
removeAttr("");
val();
3、操作标签内容
html();
text();
4、操作标签的css属性
css()
addClass()
removeClass()
5、获取标签对象的相关方法
为了获取标签对象有2种方式:
1)选择器2)相关方法
$("p").eq
(1);
$("p").parent();
获取p的父亲
$("p").next();
获取p的下一个兄弟
$("p").prev();
获取p的上一个兄弟
六、循环
语法
$.each(object,function(i,n){
循环体语句;
})
功能
循环遍历jquery对象数组中的每个一个标签对象,遍历普通数组。
参数
参数1:
jquery对象数组,普通数组。
参数2:
方法定义,在方法体内写循环体
参数i:
整形,每次循环的循环变量,从0开始
参数n:
每次循环时真正的值。
每次循环的当前对象,本身是DOM对象,使用时转换成JQuery对象。
$(js对象)-->jquery对象;$arr[i]-->js对象。
function(i,n)方法里返回'false'将停止循环(就像在普通的循环中使用break);
function(i,n)方法里返回'true'跳至下一个循环(就像在普通的循环中使用continue)。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 前端 知识点 总结
![提示](https://static.bdocx.com/images/bang_tan.gif)