Web前端知识点总结

HTML知识点一、功能用来制作静态网页，网页中的全部内容都是通过Html语言展现出来。

使用场合：开发静态网页。

二、思想一切功能都由标签实现，标签具有四要素。

三、常用标签开始；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页面用<link>标签导入独立css文件3、定义样式并修饰各html标签六、静态网页开发思想1、对网页元素通用属性进行设置。

2、分析页面的组成，整个网页布局划分为多个矩形区域，在矩形区域内部又可以划分子矩形区域，每个矩形区域都用<div>标签实现。

3、用html标签把实际元素放在<div>标签中，再用css实现元素定位和格式化(对每个元素和div)，依次类推，搞定每个div区域。

七、css常用属性六、DOM对象的方法1、原理Dom对象可以获取html文档的每个标签，以及该标签的属性和内容，并可以对这些标签，属性和内容进行修改从而实现动态的改变网页内容和格式。

2、DOM对象方法总结七、正则表达式1、正则表达式使用场合客户端表单数据校验2、创建正则表达式的对象1> var regex = new RegExp("^.{6}$");2> var pwdRegex = /^.{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"var unameRegex= /(^abc$)|(^liming$)|(^zxy$)/;* ( ) $ /\ [ ] ^ {}:例如：\. \*说明：在[]中/\ []这4个字符必须写转义字符才能表达本身其它字符写不写转义都行能表达本身在[]外必须用转义字符（5）附加参数:var regex = /^\d{4}$/gii：加i匹配时忽略大小写，没有i就严格区分大小写。

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

例如：absdfwabdfwab34324ab ;var regex = /^ab$/ 只找到1个absdfwabdfwab34324ab ; var regex = /^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 .ttt input") ;(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)。