WEB前端技术总结.docxVIP

前端部分总结 （概念、应用性、如何应用） HTML HTML5 html第五个版本视屏处理,兼容手机,pc CSS 语法 选择器{属性:值;属性:值} id选择器# class选择器. 标签选择器 常用样式:1.背景样式，2.文字相关,3.文本4.边框的样式,5.盒子模型。 导入外部样式的方式 @import test.css link rel=stylesheet type=text/css href=test.css / Css3 css第三个版本样式增加,兼容性 概念：层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为结构化文档（如 HYPERLINK /wiki/HTML \o HTML HTML文档或 HYPERLINK /wiki/XML \o XML XML应用）添加样式（字体、间距和颜色等）的 HYPERLINK /wiki/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%AF%AD%E8%A8%80 \o 计算机语言 计算机语言 JS（JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。） 控制客户端元素 dom模型 window-documentgetElementById,getElementsByName,getElmentsByTagName,history,location,status 表单验证: 正则表达式 \w \W \d \D [4,9] ? + Ajax:异步数据的请求和响应,提供静态和服务器数据交互减少跳转,客户体验更好,减少网络流量 创建xmlHttpRequest 对象 属性 onreadystatechange readyState 0 1 2 3 4 status 200 400 responseText 方法 Open(url) Send(data) script var xmlHttprequest; function validateServer() { //创建XMLHttpRequest对象 if (window.XMLHttpRequest) { xmlHttprequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttprequest = new ActiveXObject(Microsoft.XMLHTTP); } //异步请求到哪里? xmlHttprequest.open(GET,http://localhost:8080/springmvc_spring_mybaties_bootstrap/validate.do,true); //设置属性。 xmlHttprequest.onreadystatechange = doMessage; xmlHttprequest.send(no=+document.getElementById(inputNo).value); } function doMessage(){ if (xmlHttprequest.readyState == 4 xmlHttprequest.status == 200) { alert(xmlHttprequest.responseText); } } /script Jquery:轻量级200多kb的js函数库，内置浏览器的判断和界面兼容性 语法:支持链式写法 $ 选择器:id ,class,标签,混合. 函数 事件相关的函数 click(function(){}) blur load ready 样式相关的函数 css() 例如: $(p).css({ color: #ff0011, background: blue }); 文档相关函数:append() ,after,before,remove,replaceAll,clone 动画: 基本动画show ,hide, slideUp(切入),slideDown,fadeIn(淡入),fadeout 自定义动画修改样式animate Ajax相关函数: Ajax({url,type,datatype,data,success}) Post Get Json：以javascript {} []语法定义一组数据,轻量级数据传输方式,在客户端解释更方便[{name:wl,age:20,sex:男},{name:wfd,age:30,sex:男}] Java中转json格式: JSONArray.fromObje