Web前端知识点总结Word文件下载.docx
- 文档编号:21169042
- 上传时间:2023-01-28
- 格式:DOCX
- 页数:15
- 大小:45.60KB
Web前端知识点总结Word文件下载.docx
《Web前端知识点总结Word文件下载.docx》由会员分享,可在线阅读,更多相关《Web前端知识点总结Word文件下载.docx(15页珍藏版)》请在冰豆网上搜索。
/table>
插入表格
border,width,height,bgcolor,bordercolor,cellpadding,cellspacing
tr>
/tr>
创建一行
…
td>
/td>
创建一列
colspan,rowspan
th>
/th>
创建一列,元素居中,粗体
caption>
/caption>
【
设置表格的标题
form>
/form>
收集用户输入信息,并提交给服务器
"
action,method
inputtype="
text"
/>
创建文本框
name,value
readonly,disabled
password"
创建密码框
{
radio"
创建单选按钮
checked
select>
/select>
创建下拉列表框
name
option>
/option>
创建列表项
value,selected
checkbox"
创建复选框
textarea>
/textarea>
创建文本区域
)
name,rows,cols
hidden"
创建隐藏控件
submit"
/>
创建提交按钮
*
reset"
创建重置按钮
a>
/a>
·
超级链接,网页跳转
href,target
metaname="
keywords"
content="
淘宝网"
指定快速的查询到该网页的关键字
metaname="
description"
content="
淘宝网-亚洲最大/>
开始;
2>
标签添加class属性与样式关联。
~
5、属性选择器
标签名[属性名=属性值],根据标签关键字和属性值自动关联。
6、包含选择器
1>
子样式名中间加>
或空格分隔(>
直接包含);
看最后一个子样式是什么选择器就如何关联标签。
7、多个样式名同一样式体
样式名中间加逗号分隔;
|
根据样式类型决定如何与标签关联。
8、多条件同时成立选择器
多个子样式名紧挨着
一个标签必须同时具备这多个条件才可以被该样式修饰
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页面用<
link>
标签导入独立css文件
3、定义样式并修饰各html标签
六、静态网页开发思想
1、对网页元素通用属性进行设置。
2、分析页面的组成,整个网页布局划分为多个矩形区域,在矩形区域内部又可以划分子矩形区域,每个矩形区域都用<
div>
标签实现。
3、用html标签把实际元素放在<
标签中,再用css实现元素定位和格式化(对每个元素和div),依次类推,搞定每个div区域。
七、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
设置背景颜色
background-image
设置背景图片
url('
图片路径'
background-repeat
设置背景图像重复方式
repeat、no-repeat
repeat-x、repeat-y
background-size
设置背景图像的大小
]
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("
标签关键字"
根据标签关键字创建标签对象
appendChild(node)
把参数对象添加到父标签内
insertBefore(newnode,oldnode)
为父标签对象增加一个子标签对象
removeChild(node)
为父标签对象删除一个子标签对象
getAttributeNode("
属性名"
根据属性名获取属性对象
1)标签对象可以调用该方法
setAttribute("
"
属性值"
为标签对象添加一个新的属性或改变它现有属性的值
,
1)标签对象可以调用该方法
属性
意义
innerHTML
用来获取或修改标签对象中的文本内容
parentNode
返回子标签的父标签对象
2)文本对象
firstChild
用来获取父标签的第一子标签对象
lastChild
返回父标签的最后一个子标签对象
childNodes
返回父标签所有子节点对象
nextSibling
返回当前标签对象的下一个兄弟节点
2)属性对象
previousSibling
返回当前标签对象的上一个兄弟节点
'
七、正则表达式
1、正则表达式使用场合
客户端表单数据校验
2、创建正则表达式的对象
varregex=newRegExp("
^.{6}$"
);
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个"
varunameRegex=/(^abc$)|(^liming$)|(^zxy$)/;
*()$/\[]^{}:
\.\*
说明:
在[]中/\[]这4个字符必须写转义字符才能表达本身
其它字符写不写转义都行能表达本身
在[]外必须用转义字符
(5)附加参数:
varregex=/^\d{4}$/gi
i:
加i匹配时忽略大小写,没有i就严格区分大小写。
g:
主要在从字符串中查找匹配的子串时起作用,加g表示查找出所有的匹配子串。
?
absdfwabdfwab34324ab;
varregex=/^ab$/只找到1个
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"
input[name='
newsletter'
]"
6、基本过滤选择器
input:
eq(0)"
7、表单标签属性过滤选择器
checked"
四、事件处理机制
1、语法
方法语句;
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)相关方法
).eq
(1);
).parent();
获取p的父亲
).next();
获取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);
true'
跳至下一个循环(就像在普通的循环中使用continue)。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 前端 知识点 总结