一、JavaWeb框架整顿
定义：javaWeb是实现浏览器(B)和服务器(S)沟通的技术。咱们须要进行服务器端的开发(即B/S'Browser/Server'模型开发)，须要先理解前端技术。
JavaWeb
前端技术：HTML、CSS、JS、JQuery、XML、tomcat
1、HTML（把握）：超文本标记语言
一般标签:<p></p> <h1></h1> <br/>
重要标签：<table></table>表格,格式化显示数据,其中<tr>示意行，<td>示意列，
<tr rowspan ="x"> 单元格跨x行 <td colspan="x">单元格跨x列 <form></form>表单 <form action="表单提交的地位" method="GET/POST" enctype="application/x-www-form-urlencoding"> enctype="application/x-www-form-urlencoding"为默认的表单提交编码方式 enctype="mutipart/form-data"文件上传 </form><script></script>写脚本的中央，编写js代码或者引入js库(Js为JavaScript，即JavaWeb的脚本语言)
<link></link>引入CSS款式
<style></stype>编写款式
2、CSS（理解）：层叠样式表单
性能：B/S开发时，B端浏览器端开发时有三要素，构造（HTML）-体现（CSS）-行为（JavaScipt）
【会查文档找css款式】
css款式语法：
选择器{ 款式名1：款式值； 款式名2：款式值； }3、JS（把握）：JavaScript脚本语言
【根本语法】：
1)申明变量：
var temp1 = "aaa"; temp1=1;(js语言中没有数据类型之分，可间接写变量值,因而js是一种弱类型脚本语言)2)申明对象
var obj = { 在此填写对象属性 lastName(属性名):"张三"， age:18 } obj即对象 应用对象属性： alert(obj.属性名) 增加属性：obj.新增加属性名=属性值; 3)申明办法
形式一： 申明：function hello(参数表轻易写，Js语言中无重载){} 调用：hello(1,2); 形式二： 申明：var hello=function(){}定义一个变量，这个变量是一个函数 调用：hello()【事件】
事件定义：用户和浏览器交互的行为
window.onload=function(){ 文档加载实现事件：（页面里所有内容全副显示胜利） } $(function(){ 文档加载实现（dom准备就绪） }) 先调用dom,再调用windom.onload。但win比拟保险dom是html中各个标签的封装为的对象，至于对象标签中的连贯是否曾经胜利不论。将dom数回复，dom准备就绪只是将标签的属性和值筹备好了，外面比方加载的图片并不一定筹备好了。DOM 定义了拜访和操作HTML文档的规范办法，相当于网页的API。
区别：window.onload反复调用不会执行屡次，只会执行最初一次。$(function)反复调用有意义，相当于屡次调用$办法。
罕用事件：
1)如何给一个元素绑定上事件：
eg:给a元素绑定事件 <a href="hello" id="aEle">你好</a> //href为超链接 var aEla= document.getElementById("aEle"); //通过id查找元素 aEla.onclick=function(){ //onclick函数：当元素被点击时执行 alert("你好")； //alert为弹窗函数，用于显示带有指定音讯和一个ok按钮的弹窗 return false； //勾销默认行为。本来a元素中有超链接，点击该元素时，会发送hello申请跳转页面。return false使得页面不跳转。 }4、Jquery(精通)
JQUery是js库
【选择器】
是一串非凡的字符串，语法 $("选择器字符串") jQuery 选择器容许您对 HTML 元素组或单个元素进行操作。 【根本】 #id $("id名") 找到一个指定id名的标签 element $("标签名") 找到所有的“标签名”标签 .class $(".mini") 找到所有class为mini的元素 * $(*) 找到所有元素 selector1,selector2,selectorN $("#b01",".big","form","#a01 *") 找到id为b01的元素，和class为big的元素，以及所有form的表单，以及id为a01下的所有元素。 【层级】 ancestor descendant 找后辈，例如$("#a01 *") parent > child 找子元素 $("a>#btn01") 找到a标签下id为btn01的子元素 prev + next 找下一个兄弟 $("#btn01 + .mini"): 找到id为btn01的下一个同级元素，并且该元素class为mini prev ~ siblings 找所有同辈兄弟 $("#deleteBtn01 ~ a")找到id为deleteBtn01所有标签为a的同级兄弟。 重点： :first $("a:first"):找到第一个a标签 $(":first") ：找到文档第一个标签，即<html> $("a :first"):找到a的第一个后辈元素 $("a+:first")：找到a的第一个兄弟 $("#btn0>:eq(1)")找到id为btn01索引为1的子元素，即第二个元素 $("#btn0>a:eq(1)")找到id为btn01下的第二个a标签 :last :eq(index) :empty $("a:empty")找到所有没有标签体的a元素 [attribute] $("a[id]")有id属性的所有a标签 [attribute=value] :checked 找到所有选中的（复选框、单选框等，不包含select中的option） :selected 匹配所有选中的的option元素 筛选中的办法：肯定是再帅选后果的根底上调用办法进行筛选 find(e|o|e) $("div".find(".mini"))找到所有div下的class为mini的元素（包含子元素和后辈） children([expr]) $("div".find(".mini"))找到所有div下的class为mini的子元素 parent([expr]) $("#div01").parent(".mini")找到div01class为minide 父元素 parents([expr])找先人 【层级关系】 <div> <a><p>张三</p></a> <h1>你好</h1> </div> a和h1互为兄弟，div是a和h1的父亲，p是a的子元素，p是div的后辈元素； a既是div的子元素又是div的后辈元素【文档操作(对dom的增删改)】
API中的文档解决
append(content|fn) appendTo(content)<p id="p01">张三</p>a.append(b) a外面加b$("#p1").append("<a href="hello">hello</a>")； 在张三前面加能够链式调用：$("#p01").append().append()办法返回是jQuery对象可链式调用任何jQuery办法$("#p01").append().append().click(function(){})给p01绑上事件【属性操纵】
获取到元素的属性值、文本内容
<form> <input id="01" name="username"> </form> <a href="hello"> <b>你好</b> </a> attr(name|pro|key,val|fn) $("#01").attr("username") 扭转$("#01").attr("username"，"李四") prop(n|p|k,v|f) $("#01").prop("username") 自定义属性获取和应用attr，标签本来本人的属性应用prop $() html([val|fn]) $("a").html();获取的是<b>你好</b>,还能够设置 text([val|fn]) $("a").text() 只是获取和设置文本，失去 你好 $("a").text("<b>你好</b>") ,获取的是<b>你好</b> val([val|fn|arr])获取表单项的值 $("#01").val【事件】
【外围函数】$
能够将dom对象转为jQuery对象 var btn01=document.getElementId("btn01")//此为dom对象 $(btn01)//转换为jquery对象，能够调用append办法 转回为dom对象： $(btn01)[0]$ 的用法：
1) 传入参数为[函数]时，$(function(){})相当于window.onload=function(){}
2) 选择器 $("选择器")
3) 传入参数为[HTML字符串]时：创立html元素(jquery对象)
4) dom和jquery转化