Web前端知识点总结12429.pdf

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 实现元素定位和格式化(对每个元素和 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 设置背景颜色 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 var regex=new RegExp(.6$);2 var pwdRegex=/.6$/;RegExp 类的方法：test()匹配一个任意字符，除了n .：表示一个小数点，转义字符 s：匹配任何一个空白字符(空格，制表位)S：匹配任何一个非空白字符(空格，制表位)（2）定位符：规定字符出现的位置 ：字符串必须以后面的字符开始，开始标记，此时不能用包围$：字符串必须以$前面的字符结束，结束标记。（3）限定字符出现次数:数 1,数 2：限定前方字符出现次数=数 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=/d4$/gi i：加 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)直接包含：$(#sssinput.ttt);5、属性选择器$(inputname=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 对象；$arri-js 对象。function(i,n)方法里返回false将停止循环(就像在普通的循环中使用 break)；function(i,n)方法里返回true 跳至下一个循环(就像在普通的循环中使用 continue)。