javaweb笔记

web概念概述

* JavaWeb:
	* 使用Java语言开发基于互联网的项目

* 软件架构:
	1. C/S: Client/Server 客户端/服务器端
		* 在用户本地有一个客户端程序,在远程有一个服务器端程序
		* 如:QQ,迅雷...
		* 优点:
			1. 用户体验好
		* 缺点:
			1. 开发、安装,部署,维护 麻烦
	2. B/S: Browser/Server 浏览器/服务器端
		* 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
		* 优点:
			1. 开发、安装,部署,维护 简单
		* 缺点:
			1. 如果应用过大,用户的体验可能会受到影响
			2. 对硬件要求过高

* B/S架构详解
	* 资源分类:
		1. 静态资源:
			* 使用静态网页开发技术发布的资源。
			* 特点:
				* 所有用户访问,得到的结果是一样的。
				* 如:文本,图片,音频、视频, HTML,CSS,JavaScript
				* 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
		2. 动态资源:
			* 使用动态网页及时发布的资源。
			* 特点:
				* 所有用户访问,得到的结果可能不一样。
				* 如:jsp/servlet,php,asp...
				* 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器


	* 我们要学习动态资源,必须先学习静态资源!

	* 静态资源:
		* HTML:用于搭建基础网页,展示页面的内容
		* CSS:用于美化页面,布局页面
		* JavaScript:控制页面的元素,让页面有一些动态的效果

HTML

1. 概念:是最基础的网页开发语言
	* Hyper Text Markup Language 超文本标记语言
		* 超文本:
			* 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
		* 标记语言:
			* 由标签构成的语言。<标签名称> 如 html,xml
			* 标记语言不是编程语言

2. 快速入门:
	* 语法:
		1. html文档后缀名 .html 或者 .htm
		2. 标签分为
			1. 围堵标签:有开始标签和结束标签。如  
			2. 自闭和标签:开始标签和结束标签在一起。如 
3. 标签可以嵌套: 需要正确嵌套,不能你中有我,我中有你 错误: 正确: 4. 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来 5. html的标签不区分大小写,但是建议使用小写。 * 代码: title Hello World
Hello World 3. 标签学习: 1. 文件标签:构成html最基本的标签 * html:html文档的根标签 * head:头标签。用于指定html文档的一些属性。引入外部的资源 * title:标题标签。 * body:体标签 * :html5中定义该文档是html文档 2. 文本标签:和文本有关的标签 * 注释: *

to

:标题标签 * h1~h6:字体大小逐渐递减 *

:段落标签 *
:换行标签 *


:展示一条水平线 * 属性: * color:颜色 * width:宽度 * size:高度 * align:对其方式 * center:居中 * left:左对齐 * right:右对齐 * :字体加粗 * :字体斜体 * :字体标签 *
:文本居中 * 属性: * color:颜色 * size:大小 * face:字体 * 属性定义: * color: 1. 英文单词:red,green,blue 2. rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255) 3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF * width: 1. 数值:width='20' ,数值的单位,默认是 px(像素) 2. 数值%:占比相对于父元素的比例 * 案例:公司简介 黑马程序员简介

公司简介


"中关村黑马程序员训练营"是由传智播客联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。

目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。

黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。 中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。

一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。


江苏传智播客教育科技股份有限公司
版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882


			
			

	3. 图片标签:
		* img:展示图片
			* 属性:
				* src:指定图片的位置

		* 代码:
			 

		    古镇
		
		    
		
		    
		
		    
	4. 列表标签:
		* 有序列表:
			* ol:
			* li:
		* 无序列表:
			* ul:
			* li:
	5. 链接标签:
		* a:定义一个超链接
			* 属性:
				* href:指定访问资源的URL(统一资源定位符)
				* target:指定打开资源的方式
					* _self:默认值,在当前页面打开
					* _blank:在空白页面打开

		* 代码:
			 

		    点我
		    
点我
点我
列表标签
联系我们
6. div和span: * div:每一个div占满一整行。块级标签 * span:文本信息在一行展示,行内标签 内联标签 7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。 1.
:页眉 2.
:页脚 8. 表格标签: * table:定义表格 * width:宽度 * border:边框 * cellpadding:定义内容和单元格的距离 * cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、 * bgcolor:背景色 * align:对齐方式 * tr:定义行 * bgcolor:背景色 * align:对齐方式 * td:定义单元格 * colspan:合并列 * rowspan:合并行 * th:定义表头单元格 * :表格标题 * :表示表格的头部分 * :表示表格的体部分 * :表示表格的脚部分

案例:旅游网站首页

1. 确定使用table来完成布局	
2. 如果某一行只有一个单元格,则使用
3. 如果某一行有多个单元格,则使用
	
		
			
4. 代码实现 黑马旅游网
首页 门票 门票 门票 门票 门票 门票 门票 门票 门票
黑马精选

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 899

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 899

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 899

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 899
国内游

	                    

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699
境外游

	                    

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699

上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)

¥ 699
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882

	
	

HTML标签:表单标签

* 表单:
	* 概念:用于采集用户输入的数据的。用于和服务器进行交互。
	* form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
        * 属性:
            * action:指定提交数据的URL
            * method:指定提交方式
                * 分类:一共7种,2种比较常用
                   * get:
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post:
                        2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。

        * 表单项中的数据要想被提交:必须指定其name属性

	* 表单项标签:
		* input:可以通过type属性值,改变元素展示的样式
			* type属性:
				* text:文本输入框,默认值
					* placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息	
				* password:密码输入框
				* radio:单选框
					* 注意:
						1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
						2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
						3. checked属性,可以指定默认值
				* checkbox:复选框
					* 注意:
						1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
						2. checked属性,可以指定默认值

				* file:文件选择框
				* hidden:隐藏域,用于提交一些信息。
				* 按钮:
					* submit:提交按钮。可以提交表单
					* button:普通按钮
					* image:图片提交按钮
						* src属性指定图片的路径	

		   * label:指定输入项的文字描述信息
			   * 注意:
				   * label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
		* select: 下拉列表
			* 子元素:option,指定列表项
			
		* textarea:文本域
			* cols:指定列数,每一行有多少个字符
			* rows:默认多少行。

CSS:页面美化和布局控制

1. 概念: Cascading Style Sheets 层叠样式表
	* 层叠:多个样式可以作用在同一个html的元素上,同时生效

2. 好处:
	1. 功能强大
	2. 将内容展示和样式控制分离
		* 降低耦合度。解耦
		* 让分工协作更容易
		* 提高开发效率


3. CSS的使用:CSS与html结合方式
	1. 内联样式
		 * 在标签内使用style属性指定css代码
		 * 如:
hello css
2. 内部样式 * 在head标签内,定义style标签,style标签的标签体内容就是css代码 * 如:
hello css
3. 外部样式 1. 定义css资源文件。 2. 在head标签内,定义link标签,引入外部的资源文件 * 如: * a.css文件: div{ color:green; }
hello css
hello css
* 注意: * 1,2,3种方式 css作用范围越来越大 * 1方式不常用,后期常用2,3 * 3种格式可以写为: 4. css语法: * 格式: 选择器 { 属性名1:属性值1; 属性名2:属性值2; ... } * 选择器:筛选具有相似特征的元素 * 注意: * 每一对属性需要使用;隔开,最后一对属性可以不加; 5. 选择器:筛选具有相似特征的元素 * 分类: 1. 基础选择器 1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法:#id属性值{} 2. 元素选择器:选择具有相同标签名称的元素 * 语法: 标签名称{} * 注意:id选择器优先级高于元素选择器 3. 类选择器:选择具有相同的class属性值的元素。 * 语法:.class属性值{} * 注意:类选择器选择器优先级高于元素选择器 2. 扩展选择器: 1. 选择所有元素: * 语法: *{} 2. 并集选择器: * 选择器1,选择器2{} 3. 子选择器:筛选选择器1元素下的选择器2元素 * 语法: 选择器1 选择器2{} 4. 父选择器:筛选选择器2的父元素选择器1 * 语法: 选择器1 > 选择器2{} 5. 属性选择器:选择元素名称,属性名=属性值的元素 * 语法: 元素名称[属性名="属性值"]{} 6. 伪类选择器:选择一些元素具有的状态 * 语法: 元素:状态{} * 如: * 状态: * link:初始化的状态 * visited:被访问过的状态 * active:正在访问状态 * hover:鼠标悬浮状态 6. 属性 1. 字体、文本 * font-size:字体大小 * color:文本颜色 * text-align:对其方式 * line-height:行高 2. 背景 * background: 3. 边框 * border:设置边框,符合属性 4. 尺寸 * width:宽度 * height:高度 5. 盒子模型:控制布局 * margin:外边距 * padding:内边距 * 默认情况下内边距会影响整个盒子的大小 * box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小 * float:浮动 * left * right

案例:

	
	
	
	    
	    注册页面
	
	
	
	
	
	

新用户注册

USER REGISTER

	                    

	        

	

	
	

JavaScript:

* 概念:	一门客户端脚本语言
	* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
	* 脚本语言:不需要编译,直接就可以被浏览器解析执行了

* 功能:
	* 可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验。

* JavaScript发展史:
	1. 1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C--	,后来更名为:ScriptEase
	2. 1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
	3. 1996年,微软抄袭JavaScript开发出JScript语言
	4. 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。

	* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

* ECMAScript:客户端脚本语言的标准
	1. 基本语法:
		1. 与html结合方式
			1. 内部JS:
				* 定义
		
		
		
		
		

	2. 基本对象:
		1. Function:函数(方法)对象
            1. 创建:
                1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
                2. 
                    function 方法名称(形式参数列表){
                        方法体
                    }

                3. 
                   var 方法名 = function(形式参数列表){
                        方法体
                   }
            2. 方法:

            3. 属性:
                length:代表形参的个数
            4. 特点:
                1. 方法定义是,形参的类型不用写,返回值类型也不写。
                2. 方法是一个对象,如果定义名称相同的方法,会覆盖
                3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关
                4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
            5. 调用:
                方法名称(实际参数列表);
		
		2. Array:数组对象
            1. 创建:
                1. var arr = new Array(元素列表);
                2. var arr = new Array(默认长度);
                3. var arr = [元素列表];
            2. 方法
                join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                push()	向数组的末尾添加一个或更多元素,并返回新的长度。
            3. 属性
                length:数组的长度
            4. 特点:
                1. JS中,数组元素的类型可变的。
                2. JS中,数组长度可变的。
		3. Boolean
		4. Date:日期对象
            1. 创建:
                var date = new Date();

            2. 方法:
                toLocaleString():返回当前date对象对应的时间本地字符串格式
                getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
		5. Math:数学对象
            1. 创建:
                * 特点:Math对象不用创建,直接使用。  Math.方法名();

            2. 方法:
                random():返回 0 ~ 1 之间的随机数。 含0不含1
                ceil(x):对数进行上舍入。
                floor(x):对数进行下舍入。
                round(x):把数四舍五入为最接近的整数。
            3. 属性:
                PI
		6. Number
		7. String
		8. RegExp:正则表达式对象
			1. 正则表达式:定义字符串的组成规则。
				1. 单个字符:[]
					如: [a] [ab] [a-zA-Z0-9_]
					* 特殊符号代表特殊含义的单个字符:
						\d:单个数字字符 [0-9]
						\w:单个单词字符[a-zA-Z0-9_]
				2. 量词符号:
					?:表示出现0次或1次
					*:表示出现0次或多次
					+:出现1次或多次
					{m,n}:表示 m<= 数量 <= n
						* m如果缺省: {,n}:最多n次
						* n如果缺省:{m,} 最少m次
				3. 开始结束符号
					* ^:开始
					* $:结束
			2. 正则对象:
				1. 创建
					1. var reg = new RegExp("正则表达式");
					2. var reg = /正则表达式/;
				2. 方法	
					1. test(参数):验证指定的字符串是否符合正则定义的规范	
		9. Global
			1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。  方法名();
			2. 方法:
			    encodeURI():url编码
			    decodeURI():url解码

			    encodeURIComponent():url编码,编码的字符更多
			    decodeURIComponent():url解码

			    parseInt():将字符串转为数字
			        * 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
			    isNaN():判断一个值是否是NaN
			        * NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

			    eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
            3. URL编码
               传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

* BOM

* DOM

DOM简单学习:为了满足案例要求

* 功能:控制html文档的内容
* 获取页面标签(元素)对象:Element
	* document.getElementById("id值"):通过元素的id获取元素对象

* 操作Element对象:
	1. 修改属性值:
		1. 明确获取的对象是哪一个?
		2. 查看API文档,找其中有哪些属性可以设置
	2. 修改标签体内容:
		* 属性:innerHTML
		1. 获取元素对象
		2. 使用innerHTML属性修改标签体内容

事件简单学习

* 功能: 某些组件被执行了某些操作后,触发某些代码的执行。
	* 造句:  xxx被xxx,我就xxx
		* 我方水晶被摧毁后,我就责备对友。
		* 敌方水晶被摧毁后,我就夸奖自己。

* 如何绑定事件
	1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
		1. 事件:onclick--- 单击事件

	2. 通过js获取元素对象,指定事件属性,设置一个函数

	* 代码:
		
			
			
			
			
		

* 案例1:电灯开关
	
	
	
	    
	    电灯开关
	
	
	
	
	
	
	
	
	

BOM:

1. 概念:Browser Object Model 浏览器对象模型
	* 将浏览器的各个组成部分封装成对象。

2. 组成:
	* Window:窗口对象
	* Navigator:浏览器对象
	* Screen:显示器屏幕对象
	* History:历史记录对象
	* Location:地址栏对象

3. Window:窗口对象
    1. 创建
    2. 方法
         1. 与弹出框有关的方法:
            alert()	显示带有一段消息和一个确认按钮的警告框。
            confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮,则方法返回true
                * 如果用户点击取消按钮,则方法返回false
            prompt()	显示可提示用户输入的对话框。
                * 返回值:获取用户输入的值
         2. 与打开关闭有关的方法:
            close()	关闭浏览器窗口。
                * 谁调用我 ,我关谁
            open()	打开一个新的浏览器窗口
                * 返回新的Window对象
         3. 与定时器有关的方式
            setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                * 参数:
                    1. js代码或者方法对象
                    2. 毫秒值
                * 返回值:唯一标识,用于取消定时器
            clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

            setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
            clearInterval()	取消由 setInterval() 设置的 timeout。

    3. 属性:
        1. 获取其他BOM对象:
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document
    4. 特点
        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
        * window引用可以省略。  方法名();



4. Location:地址栏对象
	1. 创建(获取):
		1. window.location
		2. location

	2. 方法:
		* reload()	重新加载当前文档。刷新
	3. 属性
		* href	设置或返回完整的 URL。



5. History:历史记录对象
    1. 创建(获取):
        1. window.history
        2. history

    2. 方法:
        * back()	加载 history 列表中的前一个 URL。
        * forward()	加载 history 列表中的下一个 URL。
        * go(参数)	加载 history 列表中的某个具体页面。
            * 参数:
                * 正数:前进几个历史记录
                * 负数:后退几个历史记录
    3. 属性:
        * length	返回当前窗口历史列表中的 URL 数量。

DOM:

* 概念: Document Object Model 文档对象模型
	* 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作

* W3C DOM 标准被分为 3 个不同的部分:

	* 核心 DOM - 针对任何结构化文档的标准模型
		* Document:文档对象
		* Element:元素对象
		* Attribute:属性对象
		* Text:文本对象
		* Comment:注释对象

		* Node:节点对象,其他5个的父对象
	* XML DOM - 针对 XML 文档的标准模型
	* HTML DOM - 针对 HTML 文档的标准模型





* 核心DOM模型:
	* Document:文档对象
		1. 创建(获取):在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法:
			1. 获取Element对象:
				1. getElementById()	: 根据id属性值获取元素对象。id属性值一般唯一
				2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
				3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
				4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
			2. 创建其他DOM对象:
				createAttribute(name)
            	createComment()
            	createElement()
            	createTextNode()
		3. 属性
	* Element:元素对象
		1. 获取/创建:通过document来获取和创建
		2. 方法:
			1. removeAttribute():删除属性
			2. setAttribute():设置属性
	* Node:节点对象,其他5个的父对象
		* 特点:所有dom对象都可以被认为是一个节点
		* 方法:
			* CRUD dom树:
				* appendChild():向节点的子节点列表的结尾添加新的子节点。
				* removeChild()	:删除(并返回)当前节点的指定子节点。
				* replaceChild():用新节点替换一个子节点。
		* 属性:
			* parentNode 返回节点的父节点。


* HTML DOM
	1. 标签体的设置和获取:innerHTML
	2. 使用html元素对象的属性
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如:
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

事件监听机制:

* 概念:某些组件被执行了某些操作后,触发某些代码的执行。	
	* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
	* 事件源:组件。如: 按钮 文本输入框...
	* 监听器:代码。
	* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。


* 常见的事件:
	1. 点击事件:
		1. onclick:单击事件
		2. ondblclick:双击事件
	2. 焦点事件
		1. onblur:失去焦点
		2. onfocus:元素获得焦点。

	3. 加载事件:
		1. onload:一张页面或一幅图像完成加载。

	4. 鼠标事件:
		1. onmousedown	鼠标按钮被按下。
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。
		5. onmouseout	鼠标从某元素移开。

	5. 键盘事件:
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。

	6. 选择和改变
		1. onchange	域的内容被改变。
		2. onselect	文本被选中。

	7. 表单事件:
		1. onsubmit	确认按钮被点击。
		2. onreset	重置按钮被点击。

Bootstrap:

1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
	* 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
	* 好处:
		1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
		2. 响应式布局。
			* 同一套页面可以兼容不同分辨率的设备。



2. 快速入门
	1. 下载Bootstrap
	2. 在项目中将这三个文件夹复制
	3. 创建html页面,引入必要的资源文件



	
	
	
	    
	    
	    
	    
	    Bootstrap HelloWorld
	
	    
	    

	    
	    
	    
	    
	
	
	

你好,世界!

响应式布局

* 同一套页面可以兼容不同分辨率的设备。
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
* 步骤:
	1. 定义容器。相当于之前的table、
		* 容器分类:
			1. container:两边留白
			2. container-fluid:每一种设备都是100%宽度
	2. 定义行。相当于之前的tr   样式:row
	3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
		* 设备代号:
			1. xs:超小屏幕 手机 (<768px):col-xs-12
			2. sm:小屏幕 平板 (≥768px)
			3. md:中等屏幕 桌面显示器 (≥992px)
			4. lg:大屏幕 大桌面显示器 (≥1200px)

	* 注意:
		1. 一行中如果格子数目超过12,则超出部分自动换行。
		2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
		3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

CSS样式和JS插件

1. 全局CSS样式:
	* 按钮:class="btn btn-default"
	* 图片:
		*  class="img-responsive":图片在任意尺寸都占100%
		*  图片形状
			*  ...:方形
			*  ... : 圆形
			*  ... :相框
	* 表格
		* table
		* table-bordered
		* table-hover
	* 表单
		* 给表单项添加:class="form-control" 
2. 组件:
	* 导航条
	* 分页条
3. 插件:
	* 轮播图

案例




    
    
    
    
    Bootstrap HelloWorld

    
    

    
    
    
    
    



   
   


       
黑马精选

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

       
国内游

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)

¥ 699

               
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882



XML:

1. 概念:Extensible Markup Language 可扩展标记语言
	* 可扩展:标签都是自定义的。   

	* 功能
		* 存储数据
			1. 配置文件
			2. 在网络中传输
	* xml与html的区别
		1. xml标签都是自定义的,html标签是预定义。
		2. xml的语法严格,html语法松散
		3. xml是存储数据的,html是展示数据

	* w3c:万维网联盟

2. 语法:
	* 基本语法:
		1. xml文档的后缀名 .xml
		2. xml第一行必须定义为文档声明
		3. xml文档中有且仅有一个根标签
		4. 属性值必须使用引号(单双都可)引起来
		5. 标签必须正确关闭
		6. xml标签名称区分大小写
	* 快速入门:
		
		
			
				zhangsan
				23
				male
				
lisi 24 female
* 组成部分: 1. 文档声明 1. 格式: 2. 属性列表: * version:版本号,必须的属性 * encoding:编码方式。告知解析引擎当前文档使用的字符集,默认值:ISO-8859-1 * standalone:是否独立 * 取值: * yes:不依赖其他文件 * no:依赖其他文件 2. 指令(了解):结合css的 * 3. 标签:标签名称自定义的 * 规则: * 名称可以包含字母、数字以及其他的字符 * 名称不能以数字或者标点符号开始 * 名称不能以字母 xml(或者 XML、Xml 等等)开始 * 名称不能包含空格 4. 属性: id属性值唯一 5. 文本: * CDATA区:在该区域中的数据会被原样展示 * 格式:

	* 约束:规定xml文档的书写规则
		* 作为框架的使用者(程序员):
			1. 能够在xml中引入约束文档
			2. 能够简单的读懂约束文档
		
		* 分类:
			1. DTD:一种简单的约束技术
			2. Schema:一种复杂的约束技术



		* DTD:
			* 引入dtd文档到xml文档中
				* 内部dtd:将约束规则定义在xml文档中
				* 外部dtd:将约束的规则定义在外部的dtd文件中
					* 本地:
					* 网络:



		* Schema:
			* 引入:
				1.填写xml文档的根元素
				2.引入xsi前缀.  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
				3.引入xsd文件命名空间.  xsi:schemaLocation="http://www.itcast.cn/xml  student.xsd"
				4.为每一个xsd约束声明一个前缀,作为标识  xmlns="http://www.itcast.cn/xml" 

			

3. 解析:操作xml文档,将文档中的数据读取到内存中
	* 操作xml文档
		1. 解析(读取):将文档中的数据读取到内存中
		2. 写入:将内存中的数据保存到xml文档中。持久化的存储

	* 解析xml的方式:
		1. DOM:将标记语言文档一次性加载进内存,在内存中形成一颗dom树
			* 优点:操作方便,可以对文档进行CRUD的所有操作
			* 缺点:占内存
		2. SAX:逐行读取,基于事件驱动的。
			* 优点:不占内存。
			* 缺点:只能读取,不能增删改

	* xml常见的解析器:
		1. JAXP:sun公司提供的解析器,支持dom和sax两种思想
		2. DOM4J:一款非常优秀的解析器
		3. Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。
		4. PULL:Android操作系统内置的解析器,sax方式的。


	* Jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。
		* 快速入门:
			* 步骤:
				1. 导入jar包
				2. 获取Document对象
				3. 获取对应的标签Element对象
				4. 获取数据

		* 代码:
			 //2.1获取student.xml的path
	        String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
	        //2.2解析xml文档,加载文档进内存,获取dom树--->Document
	        Document document = Jsoup.parse(new File(path), "utf-8");
	        //3.获取元素对象 Element
	        Elements elements = document.getElementsByTag("name");
	
	        System.out.println(elements.size());
	        //3.1获取第一个name的Element对象
	        Element element = elements.get(0);
	        //3.2获取数据
	        String name = element.text();
	        System.out.println(name);

	* 对象的使用:
		1. Jsoup:工具类,可以解析html或xml文档,返回Document
			* parse:解析html或xml文档,返回Document
				* parse​(File in, String charsetName):解析xml或html文件的。
				* parse​(String html):解析xml或html字符串
				* parse​(URL url, int timeoutMillis):通过网络路径获取指定的html或xml的文档对象
		2. Document:文档对象。代表内存中的dom树
			* 获取Element对象
				* getElementById​(String id):根据id属性值获取唯一的element对象
				* getElementsByTag​(String tagName):根据标签名称获取元素对象集合
				* getElementsByAttribute​(String key):根据属性名称获取元素对象集合
				* getElementsByAttributeValue​(String key, String value):根据对应的属性名和属性值获取元素对象集合
		3. Elements:元素Element对象的集合。可以当做 ArrayList来使用
		4. Element:元素对象
			1. 获取子元素对象
				* getElementById​(String id):根据id属性值获取唯一的element对象
				* getElementsByTag​(String tagName):根据标签名称获取元素对象集合
				* getElementsByAttribute​(String key):根据属性名称获取元素对象集合
				* getElementsByAttributeValue​(String key, String value):根据对应的属性名和属性值获取元素对象集合

			2. 获取属性值
				* String attr(String key):根据属性名称获取属性值
			3. 获取文本内容
				* String text():获取文本内容
				* String html():获取标签体的所有内容(包括字标签的字符串内容)
		5. Node:节点对象
			* 是Document和Element的父类

	* 快捷查询方式:
		1. selector:选择器
			* 使用的方法:Elements	select​(String cssQuery)
				* 语法:参考Selector类中定义的语法
		2. XPath:XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言
			* 使用Jsoup的Xpath需要额外导入jar包。
			* 查询w3cshool参考手册,使用xpath的语法完成查询
			* 代码:
				//1.获取student.xml的path
		        String path = JsoupDemo6.class.getClassLoader().getResource("student.xml").getPath();
		        //2.获取Document对象
		        Document document = Jsoup.parse(new File(path), "utf-8");
		
		        //3.根据document对象,创建JXDocument对象
		        JXDocument jxDocument = new JXDocument(document);
		
		        //4.结合xpath语法查询
		        //4.1查询所有student标签
		        List jxNodes = jxDocument.selN("//student");
		        for (JXNode jxNode : jxNodes) {
		            System.out.println(jxNode);
		        }
		
		        System.out.println("--------------------");
		
		        //4.2查询所有student标签下的name标签
		        List jxNodes2 = jxDocument.selN("//student/name");
		        for (JXNode jxNode : jxNodes2) {
		            System.out.println(jxNode);
		        }
		
		        System.out.println("--------------------");
		
		        //4.3查询student标签下带有id属性的name标签
		        List jxNodes3 = jxDocument.selN("//student/name[@id]");
		        for (JXNode jxNode : jxNodes3) {
		            System.out.println(jxNode);
		        }
		        System.out.println("--------------------");
		        //4.4查询student标签下带有id属性的name标签 并且id属性值为itcast
		
		        List jxNodes4 = jxDocument.selN("//student/name[@id='itcast']");
		        for (JXNode jxNode : jxNodes4) {
		            System.out.println(jxNode);
		        }

tomcat与servlet

1. web相关概念回顾
2. web服务器软件:Tomcat
3. Servlet入门学习

web相关概念回顾

1. 软件架构
	1. C/S:客户端/服务器端
	2. B/S:浏览器/服务器端

2. 资源分类
	1. 静态资源:所有用户访问后,得到的结果都是一样的,称为静态资源.静态资源可以直接被浏览器解析
		* 如: html,css,JavaScript
	2. 动态资源:每个用户访问相同资源后,得到的结果可能不一样。称为动态资源。动态资源被访问后,需要先转换为静态资源,在返回给浏览器
		* 如:servlet/jsp,php,asp....



3. 网络通信三要素
	1. IP:电子设备(计算机)在网络中的唯一标识。
	2. 端口:应用程序在计算机中的唯一标识。 0~65536
	3. 传输协议:规定了数据传输的规则
		1. 基础协议:
			1. tcp:安全协议,三次握手。 速度稍慢
			2. udp:不安全协议。 速度快

web服务器软件:

* 服务器:安装了服务器软件的计算机
* 服务器软件:接收用户的请求,处理请求,做出响应
* web服务器软件:接收用户的请求,处理请求,做出响应。
	* 在web服务器软件中,可以部署web项目,让用户通过浏览器来访问这些项目
	* web容器



* 常见的java相关的web服务器软件:
	* webLogic:oracle公司,大型的JavaEE服务器,支持所有的JavaEE规范,收费的。
	* webSphere:IBM公司,大型的JavaEE服务器,支持所有的JavaEE规范,收费的。
	* JBOSS:JBOSS公司的,大型的JavaEE服务器,支持所有的JavaEE规范,收费的。
	* Tomcat:Apache基金组织,中小型的JavaEE服务器,仅仅支持少量的JavaEE规范servlet/jsp。开源的,免费的。



* JavaEE:Java语言在企业级开发中使用的技术规范的总和,一共规定了13项大的规范

* Tomcat:web服务器软件
	1. 下载:http://tomcat.apache.org/
	2. 安装:解压压缩包即可。
		* 注意:安装目录建议不要有中文和空格
	3. 卸载:删除目录就行了
	4. 启动:
		* bin/startup.bat ,双击运行该文件即可
		* 访问:浏览器输入:http://localhost:8080 回车访问自己
						  http://别人的ip:8080 访问别人
		
		* 可能遇到的问题:
			1. 黑窗口一闪而过:
				* 原因: 没有正确配置JAVA_HOME环境变量
				* 解决方案:正确配置JAVA_HOME环境变量

			2. 启动报错:
				1. 暴力:找到占用的端口号,并且找到对应的进程,杀死该进程
					* netstat -ano
				2. 温柔:修改自身的端口号
					* conf/server.xml
					* 
					* 一般会将tomcat的默认端口号修改为80。80端口号是http协议的默认端口号。
						* 好处:在访问时,就不用输入端口号
	5. 关闭:
		1. 正常关闭:
			* bin/shutdown.bat
			* ctrl+c
		2. 强制关闭:
			* 点击启动窗口的×
	6. 配置:
		* 部署项目的方式:
			1. 直接将项目放到webapps目录下即可。
				* /hello:项目的访问路径-->虚拟目录
				* 简化部署:将项目打成一个war包,再将war包放置到webapps目录下。
					* war包会自动解压缩

			2. 配置conf/server.xml文件
				在标签体中配置
				
				* docBase:项目存放的路径
				* path:虚拟目录

			3. 在conf\Catalina\localhost创建任意名称的xml文件。在文件中编写
				
				* 虚拟目录:xml文件的名称
		
		* 静态项目和动态项目:
			* 目录结构
				* java动态项目的目录结构:
					-- 项目的根目录
						-- WEB-INF目录:
							-- web.xml:web项目的核心配置文件
							-- classes目录:放置字节码文件的目录
							-- lib目录:放置依赖的jar包


		* 将Tomcat集成到IDEA中,并且创建JavaEE的项目,部署项目。

Servlet: server applet

* 概念:运行在服务器端的小程序
	* Servlet就是一个接口,定义了Java类被浏览器访问到(tomcat识别)的规则。
	* 将来我们自定义一个类,实现Servlet接口,复写方法。



* 快速入门:
	1. 创建JavaEE项目
	2. 定义一个类,实现Servlet接口
		* public class ServletDemo1 implements Servlet
	3. 实现接口中的抽象方法
	4. 配置Servlet
		 在web.xml中配置:
	    
	    
	        demo1
	        cn.itcast.web.servlet.ServletDemo1
	    
	
	    
	        demo1
	        /demo1
	    

* 执行原理:
	1. 当服务器接受到客户端浏览器的请求后,会解析请求URL路径,获取访问的Servlet的资源路径
	2. 查找web.xml文件,是否有对应的标签体内容。
	3. 如果有,则在找到对应的全类名
	4. tomcat会将字节码文件加载进内存,并且创建其对象
	5. 调用其方法

* Servlet中的生命周期方法:
	1. 被创建:执行init方法,只执行一次
		* Servlet什么时候被创建?
			* 默认情况下,第一次被访问时,Servlet被创建
			* 可以配置执行Servlet的创建时机。
				* 在标签下配置
					1. 第一次被访问时,创建
                		* 的值为负数
		            2. 在服务器启动时,创建
		                * 的值为0或正整数



		* Servlet的init方法,只执行一次,说明一个Servlet在内存中只存在一个对象,Servlet是单例的
			* 多个用户同时访问时,可能存在线程安全问题。
			* 解决:尽量不要在Servlet中定义成员变量。即使定义了成员变量,也不要对修改值

	2. 提供服务:执行service方法,执行多次
		* 每次访问Servlet时,Service方法都会被调用一次。
	3. 被销毁:执行destroy方法,只执行一次
		* Servlet被销毁时执行。服务器关闭时,Servlet被销毁
		* 只有服务器正常关闭时,才会执行destroy方法。
		* destroy方法在Servlet被销毁之前执行,一般用于释放资源

* Servlet3.0:
	* 好处:
		* 支持注解配置。可以不需要web.xml了。

	* 步骤:
		1. 创建JavaEE项目,选择Servlet的版本3.0以上,可以不创建web.xml
		2. 定义一个类,实现Servlet接口
		3. 复写方法
		4. 在类上使用@WebServlet注解,进行配置
			* @WebServlet("资源路径")



			@Target({ElementType.TYPE})
			@Retention(RetentionPolicy.RUNTIME)
			@Documented
			public @interface WebServlet {
			    String name() default "";//相当于
			
			    String[] value() default {};//代表urlPatterns()属性配置
			
			    String[] urlPatterns() default {};//相当于
			
			    int loadOnStartup() default -1;//相当于
			
			    WebInitParam[] initParams() default {};
			
			    boolean asyncSupported() default false;
			
			    String smallIcon() default "";
			
			    String largeIcon() default "";
			
			    String description() default "";
			
			    String displayName() default "";
			}

IDEA与tomcat的相关配置

1. IDEA会为每一个tomcat部署的项目单独建立一份配置文件
	* 查看控制台的log:Using CATALINA_BASE:   "C:\Users\fqy\.IntelliJIdea2018.1\system\tomcat\_itcast"

2. 工作空间项目    和     tomcat部署的web项目
	* tomcat真正访问的是“tomcat部署的web项目”,"tomcat部署的web项目"对应着"工作空间项目" 的web目录下的所有资源
	* WEB-INF目录下的资源不能被浏览器直接访问。
3. 断点调试:使用"小虫子"启动 dubug 启动

Servlet:

1. 概念
2. 步骤
3. 执行原理
4. 生命周期
5. Servlet3.0 注解配置
6. Servlet的体系结构	
	Servlet -- 接口
		|
	GenericServlet -- 抽象类
		|
	HttpServlet  -- 抽象类

	* GenericServlet:将Servlet接口中其他的方法做了默认空实现,只将service()方法作为抽象
		* 将来定义Servlet类时,可以继承GenericServlet,实现service()方法即可

	* HttpServlet:对http协议的一种封装,简化操作
		1. 定义类继承HttpServlet
		2. 复写doGet/doPost方法

7. Servlet相关配置
	1. urlpartten:Servlet访问路径
		1. 一个Servlet可以定义多个访问路径 : @WebServlet({"/d4","/dd4","/ddd4"})
		2. 路径定义规则:
			1. /xxx:路径匹配
			2. /xxx/xxx:多层路径,目录结构
			3. *.do:扩展名匹配

HTTP:

* 概念:Hyper Text Transfer Protocol 超文本传输协议
	* 传输协议:定义了,客户端和服务器端通信时,发送数据的格式
	* 特点:
		1. 基于TCP/IP的高级协议
		2. 默认端口号:80
		3. 基于请求/响应模型的:一次请求对应一次响应
		4. 无状态的:每次请求之间相互独立,不能交互数据

	* 历史版本:
		* 1.0:每一次请求响应都会建立新的连接
		* 1.1:复用连接

* 请求消息数据格式
	1. 请求行
		请求方式 请求url 请求协议/版本
		GET /login.html	HTTP/1.1

		* 请求方式:
			* HTTP协议有7中请求方式,常用的有2种
				* GET:
					1. 请求参数在请求行中,在url后。
					2. 请求的url长度有限制的
					3. 不太安全
				* POST:
					1. 请求参数在请求体中
					2. 请求的url长度没有限制的
					3. 相对安全
	2. 请求头:客户端浏览器告诉服务器一些信息
		请求头名称: 请求头值
		* 常见的请求头:
			1. User-Agent:浏览器告诉服务器,我访问你使用的浏览器版本信息
				* 可以在服务器端获取该头的信息,解决浏览器的兼容性问题

			2. Referer:http://localhost/login.html
				* 告诉服务器,我(当前请求)从哪里来?
					* 作用:
						1. 防盗链:
						2. 统计工作:
	3. 请求空行
		空行,就是用于分割POST请求的请求头,和请求体的。
	4. 请求体(正文):
		* 封装POST请求消息的请求参数的

	* 字符串格式:
		POST /login.html	HTTP/1.1
		Host: localhost
		User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
		Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
		Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
		Accept-Encoding: gzip, deflate
		Referer: http://localhost/login.html
		Connection: keep-alive
		Upgrade-Insecure-Requests: 1
		
		username=zhangsan	


* 响应消息数据格式

Request:

1. request对象和response对象的原理
	1. request和response对象是由服务器创建的。我们来使用它们
	2. request对象是来获取请求消息,response对象是来设置响应消息

2. request对象继承体系结构:	
	ServletRequest		--	接口
		|	继承
	HttpServletRequest	-- 接口
		|	实现
	org.apache.catalina.connector.RequestFacade 类(tomcat)

3. request功能:
	1. 获取请求消息数据
		1. 获取请求行数据
			* GET /day14/demo1?name=zhangsan HTTP/1.1
			* 方法:
				1. 获取请求方式 :GET
					* String getMethod()  
				2. (*)获取虚拟目录:/day14
					* String getContextPath()
				3. 获取Servlet路径: /demo1
					* String getServletPath()
				4. 获取get方式请求参数:name=zhangsan
					* String getQueryString()
				5. (*)获取请求URI:/day14/demo1
					* String getRequestURI():		/day14/demo1
					* StringBuffer getRequestURL()  :http://localhost/day14/demo1

					* URL:统一资源定位符 : http://localhost/day14/demo1	中华人民共和国
					* URI:统一资源标识符 : /day14/demo1					共和国
				
				6. 获取协议及版本:HTTP/1.1
					* String getProtocol()

				7. 获取客户机的IP地址:
					* String getRemoteAddr()
				
		2. 获取请求头数据
			* 方法:
				* (*)String getHeader(String name):通过请求头的名称获取请求头的值
				* Enumeration getHeaderNames():获取所有的请求头名称
			
		3. 获取请求体数据:
			* 请求体:只有POST请求方式,才有请求体,在请求体中封装了POST请求的请求参数
			* 步骤:
				1. 获取流对象
					*  BufferedReader getReader():获取字符输入流,只能操作字符数据
					*  ServletInputStream getInputStream():获取字节输入流,可以操作所有类型数据
						* 在文件上传知识点后讲解

				2. 再从流对象中拿数据

	2. 其他功能:
		1. 获取请求参数通用方式:不论get还是post请求方式都可以使用下列方法来获取请求参数
			1. String getParameter(String name):根据参数名称获取参数值    username=zs&password=123
			2. String[] getParameterValues(String name):根据参数名称获取参数值的数组  hobby=xx&hobby=game
			3. Enumeration getParameterNames():获取所有请求的参数名称
			4. Map getParameterMap():获取所有参数的map集合

			* 中文乱码问题:
				* get方式:tomcat 8 已经将get方式乱码问题解决了
				* post方式:会乱码
					* 解决:在获取参数前,设置request的编码request.setCharacterEncoding("utf-8");

		2. 请求转发:一种在服务器内部的资源跳转方式
			1. 步骤:
				1. 通过request对象获取请求转发器对象:RequestDispatcher getRequestDispatcher(String path)
				2. 使用RequestDispatcher对象来进行转发:forward(ServletRequest request, ServletResponse response) 

			2. 特点:
				1. 浏览器地址栏路径不发生变化
				2. 只能转发到当前服务器内部资源中。
				3. 转发是一次请求



		3. 共享数据:
			* 域对象:一个有作用范围的对象,可以在范围内共享数据
			* request域:代表一次请求的范围,一般用于请求转发的多个资源中共享数据
			* 方法:
				1. void setAttribute(String name,Object obj):存储数据
				2. Object getAttitude(String name):通过键获取值
				3. void removeAttribute(String name):通过键移除键值对

		4. 获取ServletContext:
			* ServletContext getServletContext()

案例:用户登录

* 用户登录案例需求:
	1.编写login.html登录页面
		username & password 两个输入框
	2.使用Druid数据库连接池技术,操作mysql,day14数据库中user表
	3.使用JdbcTemplate技术封装JDBC
	4.登录成功跳转到SuccessServlet展示:登录成功!用户名,欢迎您
	5.登录失败跳转到FailServlet展示:登录失败,用户名或密码错误



* 分析

* 开发步骤
	1. 创建项目,导入html页面,配置文件,jar包
	2. 创建数据库环境
		CREATE DATABASE day14;
		USE day14;
		CREATE TABLE USER(
		
			id INT PRIMARY KEY AUTO_INCREMENT,
			username VARCHAR(32) UNIQUE NOT NULL,
			PASSWORD VARCHAR(32) NOT NULL
		);

	3. 创建包cn.itcast.domain,创建类User
		package cn.itcast.domain;
		/**
		 * 用户的实体类
		 */
		public class User {
		
		    private int id;
		    private String username;
		    private String password;

		    public int getId() {
		        return id;
		    }
		
		    public void setId(int id) {
		        this.id = id;
		    }
		
		    public String getUsername() {
		        return username;
		    }
		
		    public void setUsername(String username) {
		        this.username = username;
		    }
		
		    public String getPassword() {
		        return password;
		    }
		
		    public void setPassword(String password) {
		        this.password = password;
		    }
		
		    @Override
		    public String toString() {
		        return "User{" +
		                "id=" + id +
		                ", username='" + username + '\'' +
		                ", password='" + password + '\'' +
		                '}';
		    }
		}
	4. 创建包cn.itcast.util,编写工具类JDBCUtils
		package cn.itcast.util;

		import com.alibaba.druid.pool.DruidDataSourceFactory;
		
		import javax.sql.DataSource;
		import javax.xml.crypto.Data;
		import java.io.IOException;
		import java.io.InputStream;
		import java.sql.Connection;
		import java.sql.SQLException;
		import java.util.Properties;
		
		/**
		 * JDBC工具类 使用Durid连接池
		 */
		public class JDBCUtils {
		
		    private static DataSource ds ;
		
		    static {
		
		        try {
		            //1.加载配置文件
		            Properties pro = new Properties();
		            //使用ClassLoader加载配置文件,获取字节输入流
		            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
		            pro.load(is);
		
		            //2.初始化连接池对象
		            ds = DruidDataSourceFactory.createDataSource(pro);
		
		        } catch (IOException e) {
		            e.printStackTrace();
		        } catch (Exception e) {
		            e.printStackTrace();
		        }
		    }
		
		    /**
		     * 获取连接池对象
		     */
		    public static DataSource getDataSource(){
		        return ds;
		    }

		    /**
		     * 获取连接Connection对象
		     */
		    public static Connection getConnection() throws SQLException {
		        return  ds.getConnection();
		    }
		}
	5. 创建包cn.itcast.dao,创建类UserDao,提供login方法
		
		package cn.itcast.dao;

		import cn.itcast.domain.User;
		import cn.itcast.util.JDBCUtils;
		import org.springframework.dao.DataAccessException;
		import org.springframework.jdbc.core.BeanPropertyRowMapper;
		import org.springframework.jdbc.core.JdbcTemplate;
		
		/**
		 * 操作数据库中User表的类
		 */
		public class UserDao {
		
		    //声明JDBCTemplate对象共用
		    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
		
		    /**
		     * 登录方法
		     * @param loginUser 只有用户名和密码
		     * @return user包含用户全部数据,没有查询到,返回null
		     */
		    public User login(User loginUser){
		        try {
		            //1.编写sql
		            String sql = "select * from user where username = ? and password = ?";
		            //2.调用query方法
		            User user = template.queryForObject(sql,
		                    new BeanPropertyRowMapper(User.class),
		                    loginUser.getUsername(), loginUser.getPassword());

		            return user;
		        } catch (DataAccessException e) {
		            e.printStackTrace();//记录日志
		            return null;
		        }
		    }
		}
	
	6. 编写cn.itcast.web.servlet.LoginServlet类
		package cn.itcast.web.servlet;

		import cn.itcast.dao.UserDao;
		import cn.itcast.domain.User;
		
		import javax.servlet.ServletException;
		import javax.servlet.annotation.WebServlet;
		import javax.servlet.http.HttpServlet;
		import javax.servlet.http.HttpServletRequest;
		import javax.servlet.http.HttpServletResponse;
		import java.io.IOException;

		@WebServlet("/loginServlet")
		public class LoginServlet extends HttpServlet {

		    @Override
		    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		        //1.设置编码
		        req.setCharacterEncoding("utf-8");
		        //2.获取请求参数
		        String username = req.getParameter("username");
		        String password = req.getParameter("password");
		        //3.封装user对象
		        User loginUser = new User();
		        loginUser.setUsername(username);
		        loginUser.setPassword(password);
		
		        //4.调用UserDao的login方法
		        UserDao dao = new UserDao();
		        User user = dao.login(loginUser);
		
		        //5.判断user
		        if(user == null){
		            //登录失败
		            req.getRequestDispatcher("/failServlet").forward(req,resp);
		        }else{
		            //登录成功
		            //存储数据
		            req.setAttribute("user",user);
		            //转发
		            req.getRequestDispatcher("/successServlet").forward(req,resp);
		        }
		
		    }
		
		    @Override
		    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		        this.doGet(req,resp);
		    }
		}

	7. 编写FailServlet和SuccessServlet类
		@WebServlet("/successServlet")
		public class SuccessServlet extends HttpServlet {
		    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		        //获取request域中共享的user对象
		        User user = (User) request.getAttribute("user");
		
		        if(user != null){
		            //给页面写一句话
		
		            //设置编码
		            response.setContentType("text/html;charset=utf-8");
		            //输出
		            response.getWriter().write("登录成功!"+user.getUsername()+",欢迎您");
		        }

		    }		



		@WebServlet("/failServlet")
		public class FailServlet extends HttpServlet {
		    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		        //给页面写一句话
		
		        //设置编码
		        response.setContentType("text/html;charset=utf-8");
		        //输出
		        response.getWriter().write("登录失败,用户名或密码错误");
		
		    }
		
		    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		        this.doPost(request,response);
		    }
		}




	8. login.html中form表单的action路径的写法
		* 虚拟目录+Servlet的资源路径

	9. BeanUtils工具类,简化数据封装
		* 用于封装JavaBean的
		1. JavaBean:标准的Java类
			1. 要求:
				1. 类必须被public修饰
				2. 必须提供空参的构造器
				3. 成员变量必须使用private修饰
				4. 提供公共setter和getter方法
			2. 功能:封装数据



		2. 概念:
			成员变量:
			属性:setter和getter方法截取后的产物
				例如:getUsername() --> Username--> username



		3. 方法:
			1. setProperty()
			2. getProperty()
			3. populate(Object obj , Map map):将map集合的键值对信息,封装到对应的JavaBean对象中

Response&&ServletContext

1. HTTP协议:响应消息
2. Response对象
3. ServletContext对象

HTTP协议:

1. 请求消息:客户端发送给服务器端的数据
	* 数据格式:
		1. 请求行
		2. 请求头
		3. 请求空行
		4. 请求体
2. 响应消息:服务器端发送给客户端的数据
	* 数据格式:
		1. 响应行
			1. 组成:协议/版本 响应状态码 状态码描述
			2. 响应状态码:服务器告诉客户端浏览器本次请求和响应的一个状态。
				1. 状态码都是3位数字 
				2. 分类:
					1. 1xx:服务器就收客户端消息,但没有接受完成,等待一段时间后,发送1xx多状态码
					2. 2xx:成功。代表:200
					3. 3xx:重定向。代表:302(重定向),304(访问缓存)
					4. 4xx:客户端错误。
						* 代表:
							* 404(请求路径没有对应的资源) 
							* 405:请求方式没有对应的doXxx方法
					5. 5xx:服务器端错误。代表:500(服务器内部出现异常)

		2. 响应头:
			1. 格式:头名称: 值
			2. 常见的响应头:
				1. Content-Type:服务器告诉客户端本次响应体数据格式以及编码格式
				2. Content-disposition:服务器告诉客户端以什么格式打开响应体数据
					* 值:
						* in-line:默认值,在当前页面内打开
						* attachment;filename=xxx:以附件形式打开响应体。文件下载
		3. 响应空行
		4. 响应体:传输的数据



	* 响应字符串格式
		HTTP/1.1 200 OK
		Content-Type: text/html;charset=UTF-8
		Content-Length: 101
		Date: Wed, 06 Jun 2018 07:08:42 GMT

		
		  
		    $Title$
		  
		  
		  hello , response
		  
		

Response对象

* 功能:设置响应消息
	1. 设置响应行
		1. 格式:HTTP/1.1 200 ok
		2. 设置状态码:setStatus(int sc) 
	2. 设置响应头:setHeader(String name, String value) 
		
	3. 设置响应体:
		* 使用步骤:
			1. 获取输出流
				* 字符输出流:PrintWriter getWriter()

				* 字节输出流:ServletOutputStream getOutputStream()

			2. 使用输出流,将数据输出到客户端浏览器



* 案例:
	1. 完成重定向
		* 重定向:资源跳转的方式
		* 代码实现:
			//1. 设置状态码为302
	        response.setStatus(302);
	        //2.设置响应头location
	        response.setHeader("location","/day15/responseDemo2");



	        //简单的重定向方法
	        response.sendRedirect("/day15/responseDemo2");

		* 重定向的特点:redirect
			1. 地址栏发生变化
			2. 重定向可以访问其他站点(服务器)的资源
			3. 重定向是两次请求。不能使用request对象来共享数据
		* 转发的特点:forward
			1. 转发地址栏路径不变
			2. 转发只能访问当前服务器下的资源
			3. 转发是一次请求,可以使用request对象来共享数据
		
		* forward 和  redirect 区别
			
		* 路径写法:
			1. 路径分类
				1. 相对路径:通过相对路径不可以确定唯一资源
					* 如:./index.html
					* 不以/开头,以.开头路径

					* 规则:找到当前资源和目标资源之间的相对位置关系
						* ./:当前目录
						* ../:后退一级目录
				2. 绝对路径:通过绝对路径可以确定唯一资源
					* 如:http://localhost/day15/responseDemo2		/day15/responseDemo2
					* 以/开头的路径

					* 规则:判断定义的路径是给谁用的?判断请求将来从哪儿发出
						* 给客户端浏览器使用:需要加虚拟目录(项目的访问路径)
							* 建议虚拟目录动态获取:request.getContextPath()
							*  , 
重定向... * 给服务器使用:不需要加虚拟目录 * 转发路径


	2. 服务器输出字符数据到浏览器
		* 步骤:
			1. 获取字符输出流
			2. 输出数据

		* 注意:
			* 乱码问题:
				1. PrintWriter pw = response.getWriter();获取的流的默认编码是ISO-8859-1
				2. 设置该流的默认编码
				3. 告诉浏览器响应体使用的编码

				//简单的形式,设置编码,是在获取流之前设置
    			response.setContentType("text/html;charset=utf-8");
	3. 服务器输出字节数据到浏览器
		* 步骤:
			1. 获取字节输出流
			2. 输出数据

	4. 验证码
		1. 本质:图片
		2. 目的:防止恶意表单注册

ServletContext对象:

1. 概念:代表整个web应用,可以和程序的容器(服务器)来通信
2. 获取:
	1. 通过request对象获取
		request.getServletContext();
	2. 通过HttpServlet获取
		this.getServletContext();
3. 功能:
	1. 获取MIME类型:
		* MIME类型:在互联网通信过程中定义的一种文件数据类型
			* 格式: 大类型/小类型   text/html		image/jpeg

		* 获取:String getMimeType(String file)  
	2. 域对象:共享数据
		1. setAttribute(String name,Object value)
		2. getAttribute(String name)
		3. removeAttribute(String name)

		* ServletContext对象范围:所有用户所有请求的数据
	3. 获取文件的真实(服务器)路径
		1. 方法:String getRealPath(String path)  
			 String b = context.getRealPath("/b.txt");//web目录下资源访问
	         System.out.println(b);
	
	        String c = context.getRealPath("/WEB-INF/c.txt");//WEB-INF目录下的资源访问
	        System.out.println(c);
	
	        String a = context.getRealPath("/WEB-INF/classes/a.txt");//src目录下的资源访问
	        System.out.println(a);

案例:

* 文件下载需求:
	1. 页面显示超链接
	2. 点击超链接后弹出下载提示框
	3. 完成图片文件下载



* 分析:
	1. 超链接指向的资源如果能够被浏览器解析,则在浏览器中展示,如果不能解析,则弹出下载提示框。不满足需求
	2. 任何资源都必须弹出下载提示框
	3. 使用响应头设置资源的打开方式:
		* content-disposition:attachment;filename=xxx



* 步骤:
	1. 定义页面,编辑超链接href属性,指向Servlet,传递资源名称filename
	2. 定义Servlet
		1. 获取文件名称
		2. 使用字节输入流加载文件进内存
		3. 指定response的响应头: content-disposition:attachment;filename=xxx
		4. 将数据写出到response输出流



* 问题:
	* 中文文件问题
		* 解决思路:
			1. 获取客户端使用的浏览器版本信息
			2. 根据不同的版本信息,设置filename的编码方式不同

Cooki&&Session

1. 会话技术
	1. Cookie
	2. Session
2. JSP:入门学习

会话技术

1. 会话:一次会话中包含多次请求和响应。
	* 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止
2. 功能:在一次会话的范围内的多次请求间,共享数据
3. 方式:
	1. 客户端会话技术:Cookie
	2. 服务器端会话技术:Session

Cookie:

1. 概念:客户端会话技术,将数据保存到客户端

2. 快速入门:
	* 使用步骤:
		1. 创建Cookie对象,绑定数据
			* new Cookie(String name, String value) 
		2. 发送Cookie对象
			* response.addCookie(Cookie cookie) 
		3. 获取Cookie,拿到数据
			* Cookie[]  request.getCookies()  



3. 实现原理
	* 基于响应头set-cookie和请求头cookie实现

4. cookie的细节
	1. 一次可不可以发送多个cookie?
		* 可以
		* 可以创建多个Cookie对象,使用response调用多次addCookie方法发送cookie即可。
	2. cookie在浏览器中保存多长时间?
		1. 默认情况下,当浏览器关闭后,Cookie数据被销毁
		2. 持久化存储:
			* setMaxAge(int seconds)
				1. 正数:将Cookie数据写到硬盘的文件中。持久化存储。并指定cookie存活时间,时间到后,cookie文件自动失效
				2. 负数:默认值
				3. 零:删除cookie信息
	3. cookie能不能存中文?
		* 在tomcat 8 之前 cookie中不能直接存储中文数据。
			* 需要将中文数据转码---一般采用URL编码(%E3)
		* 在tomcat 8 之后,cookie支持中文数据。特殊字符还是不支持,建议使用URL编码存储,URL解码解析
	4. cookie共享问题?
		1. 假设在一个tomcat服务器中,部署了多个web项目,那么在这些web项目中cookie能不能共享?
			* 默认情况下cookie不能共享

			* setPath(String path):设置cookie的获取范围。默认情况下,设置当前的虚拟目录
				* 如果要共享,则可以将path设置为"/"

		2. 不同的tomcat服务器间cookie共享问题?
			* setDomain(String path):如果设置一级域名相同,那么多个服务器之间cookie可以共享
				* setDomain(".baidu.com"),那么tieba.baidu.com和news.baidu.com中cookie可以共享



5. Cookie的特点和作用
	1. cookie存储数据在客户端浏览器
	2. 浏览器对于单个cookie 的大小有限制(4kb) 以及 对同一个域名下的总cookie数量也有限制(20个)

	* 作用:
		1. cookie一般用于存出少量的不太敏感的数据
		2. 在不登录的情况下,完成服务器对客户端的身份识别

6. 案例:记住上一次访问时间
	1. 需求:
		1. 访问一个Servlet,如果是第一次访问,则提示:您好,欢迎您首次访问。
		2. 如果不是第一次访问,则提示:欢迎回来,您上次访问时间为:显示时间字符串

	2. 分析:
		1. 可以采用Cookie来完成
		2. 在服务器中的Servlet判断是否有一个名为lastTime的cookie
			1. 有:不是第一次访问
				1. 响应数据:欢迎回来,您上次访问时间为:2018年6月10日11:50:20
				2. 写回Cookie:lastTime=2018年6月10日11:50:01
			2. 没有:是第一次访问
				1. 响应数据:您好,欢迎您首次访问
				2. 写回Cookie:lastTime=2018年6月10日11:50:01

	3. 代码实现:
		package cn.itcast.cookie;

		import javax.servlet.ServletException;
		import javax.servlet.annotation.WebServlet;
		import javax.servlet.http.Cookie;
		import javax.servlet.http.HttpServlet;
		import javax.servlet.http.HttpServletRequest;
		import javax.servlet.http.HttpServletResponse;
		import java.io.IOException;
		import java.net.URLDecoder;
		import java.net.URLEncoder;
		import java.text.SimpleDateFormat;
		import java.util.Date;



	@WebServlet("/cookieTest")
	public class CookieTest extends HttpServlet {
	    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	        //设置响应的消息体的数据格式以及编码
	        response.setContentType("text/html;charset=utf-8");
	
	        //1.获取所有Cookie
	        Cookie[] cookies = request.getCookies();
	        boolean flag = false;//没有cookie为lastTime
	        //2.遍历cookie数组
	        if(cookies != null && cookies.length > 0){
	            for (Cookie cookie : cookies) {
	                //3.获取cookie的名称
	                String name = cookie.getName();
	                //4.判断名称是否是:lastTime
	                if("lastTime".equals(name)){
	                    //有该Cookie,不是第一次访问
	
	                    flag = true;//有lastTime的cookie
	
	                    //设置Cookie的value
	                    //获取当前时间的字符串,重新设置Cookie的值,重新发送cookie
	                    Date date  = new Date();
	                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
	                    String str_date = sdf.format(date);
	                    System.out.println("编码前:"+str_date);
	                    //URL编码
	                    str_date = URLEncoder.encode(str_date,"utf-8");
	                    System.out.println("编码后:"+str_date);
	                    cookie.setValue(str_date);
	                    //设置cookie的存活时间
	                    cookie.setMaxAge(60 * 60 * 24 * 30);//一个月
	                    response.addCookie(cookie);

	                    //响应数据
	                    //获取Cookie的value,时间
	                    String value = cookie.getValue();
	                    System.out.println("解码前:"+value);
	                    //URL解码:
	                    value = URLDecoder.decode(value,"utf-8");
	                    System.out.println("解码后:"+value);
	                    response.getWriter().write("

欢迎回来,您上次访问时间为:"+value+"

"); break; } } }

	        if(cookies == null || cookies.length == 0 || flag == false){
	            //没有,第一次访问
	
	            //设置Cookie的value
	            //获取当前时间的字符串,重新设置Cookie的值,重新发送cookie
	            Date date  = new Date();
	            SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日 HH:mm:ss");
	            String str_date = sdf.format(date);
	            System.out.println("编码前:"+str_date);
	            //URL编码
	            str_date = URLEncoder.encode(str_date,"utf-8");
	            System.out.println("编码后:"+str_date);
	
	            Cookie cookie = new Cookie("lastTime",str_date);
	            //设置cookie的存活时间
	            cookie.setMaxAge(60 * 60 * 24 * 30);//一个月
	            response.addCookie(cookie);
	
	            response.getWriter().write("

您好,欢迎您首次访问

"); }

	    }
	
	    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	        this.doPost(request, response);
	    }
	}

JSP:入门学习

1. 概念:
	* Java Server Pages: java服务器端页面
		* 可以理解为:一个特殊的页面,其中既可以指定定义html标签,又可以定义java代码
		* 用于简化书写!!!



2. 原理
	* JSP本质上就是一个Servlet

3. JSP的脚本:JSP定义Java代码的方式
	1. <%  代码 %>:定义的java代码,在service方法中。service方法中可以定义什么,该脚本中就可以定义什么。
	2. <%! 代码 %>:定义的java代码,在jsp转换后的java类的成员位置。
	3. <%= 代码 %>:定义的java代码,会输出到页面上。输出语句中可以定义什么,该脚本中就可以定义什么。



4. JSP的内置对象:
	* 在jsp页面中不需要获取和创建,可以直接使用的对象
	* jsp一共有9个内置对象。
	* 今天学习3个:
		* request
		* response
		* out:字符输出流对象。可以将数据输出到页面上。和response.getWriter()类似
			* response.getWriter()和out.write()的区别:
				* 在tomcat服务器真正给客户端做出响应之前,会先找response缓冲区数据,再找out缓冲区数据。
				* response.getWriter()数据输出永远在out.write()之前
			
5. 案例:改造Cookie案例

Session:主菜

1. 概念:服务器端会话技术,在一次会话的多次请求间共享数据,将数据保存在服务器端的对象中。HttpSession
2. 快速入门:
	1. 获取HttpSession对象:
		HttpSession session = request.getSession();
	2. 使用HttpSession对象:
		Object getAttribute(String name)  
		void setAttribute(String name, Object value)
		void removeAttribute(String name)  

3. 原理
	* Session的实现是依赖于Cookie的。

4. 细节:
	1. 当客户端关闭后,服务器不关闭,两次获取session是否为同一个?
		* 默认情况下。不是。
		* 如果需要相同,则可以创建Cookie,键为JSESSIONID,设置最大存活时间,让cookie持久化保存。
			 Cookie c = new Cookie("JSESSIONID",session.getId());
	         c.setMaxAge(60*60);
	         response.addCookie(c);

	2. 客户端不关闭,服务器关闭后,两次获取的session是同一个吗?
		* 不是同一个,但是要确保数据不丢失。tomcat自动完成以下工作
			* session的钝化:
				* 在服务器正常关闭之前,将session对象系列化到硬盘上
			* session的活化:
				* 在服务器启动后,将session文件转化为内存中的session对象即可。
			
	3. session什么时候被销毁?
		1. 服务器关闭
		2. session对象调用invalidate() 。
		3. session默认失效时间 30分钟
			选择性配置修改	
			
		        30
		    

 5. session的特点
	 1. session用于存储一次会话的多次请求的数据,存在服务器端
	 2. session可以存储任意类型,任意大小的数据

	* session与Cookie的区别:
		1. session存储数据在服务器端,Cookie在客户端
		2. session没有数据大小限制,Cookie有
		3. session数据安全,Cookie相对于不安全

案例:验证码

1. 案例需求:
	1. 访问带有验证码的登录页面login.jsp
	2. 用户输入用户名,密码以及验证码。
		* 如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误
		* 如果验证码输入有误,跳转登录页面,提示:验证码错误
		* 如果全部输入正确,则跳转到主页success.jsp,显示:用户名,欢迎您



2. 分析:

JSP&JSTL&EL&MVC

1. JSP:
	1. 指令
	2. 注释
	3. 内置对象

2. MVC开发模式
3. EL表达式
4. JSTL标签
5. 三层架构

JSP:

1. 指令
	* 作用:用于配置JSP页面,导入资源文件
	* 格式:
		<%@ 指令名称 属性名1=属性值1 属性名2=属性值2 ... %>
	* 分类:
		1. page		: 配置JSP页面的
			* contentType:等同于response.setContentType()
				1. 设置响应体的mime类型以及字符集
				2. 设置当前jsp页面的编码(只能是高级的IDE才能生效,如果使用低级工具,则需要设置pageEncoding属性设置当前页面的字符集)
			* import:导包
			* errorPage:当前页面发生异常后,会自动跳转到指定的错误页面
			* isErrorPage:标识当前也是是否是错误页面。
				* true:是,可以使用内置对象exception
				* false:否。默认值。不可以使用内置对象exception



		2. include	: 页面包含的。导入页面的资源文件
			* <%@include file="top.jsp"%>
		3. taglib	: 导入资源
			* <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
				* prefix:前缀,自定义的
2. 注释:
	1. html注释:
		:只能注释html代码片段
	2. jsp注释:推荐使用
		<%-- --%>:可以注释所有



3. 内置对象
	* 在jsp页面中不需要创建,直接使用的对象
	* 一共有9个:
			变量名					真实类型						作用
		* pageContext				PageContext					当前页面共享数据,还可以获取其他八个内置对象
		* request					HttpServletRequest			一次请求访问的多个资源(转发)
		* session					HttpSession					一次会话的多个请求间
		* application				ServletContext				所有用户间共享数据
		* response					HttpServletResponse			响应对象
		* page						Object						当前页面(Servlet)的对象  this
		* out						JspWriter					输出对象,数据输出到页面上
		* config					ServletConfig				Servlet的配置对象
		* exception					Throwable					异常对象

MVC:开发模式

1. jsp演变历史
	1. 早期只有servlet,只能使用response输出标签数据,非常麻烦
	2. 后来又jsp,简化了Servlet的开发,如果过度使用jsp,在jsp中即写大量的java代码,有写html表,造成难于维护,难于分工协作
	3. 再后来,java的web开发,借鉴mvc开发模式,使得程序的设计更加合理性

2. MVC:
	1. M:Model,模型。JavaBean
		* 完成具体的业务操作,如:查询数据库,封装对象
	2. V:View,视图。JSP
		* 展示数据
	3. C:Controller,控制器。Servlet
		* 获取用户的输入
		* 调用模型
		* 将数据交给视图进行展示



	* 优缺点:
		1. 优点:
			1. 耦合性低,方便维护,可以利于分工协作
			2. 重用性高

		2. 缺点:
			1. 使得项目架构变得复杂,对开发人员要求高

EL表达式

1. 概念:Expression Language 表达式语言
2. 作用:替换和简化jsp页面中java代码的编写
3. 语法:${表达式}
4. 注意:
	* jsp默认支持el表达式的。如果要忽略el表达式
		1. 设置jsp中page指令中:isELIgnored="true" 忽略当前jsp页面中所有的el表达式
		2. \${表达式} :忽略当前这个el表达式



5. 使用:
	1. 运算:
		* 运算符:
			1. 算数运算符: + - * /(div) %(mod)
			2. 比较运算符: > < >= <= == !=
			3. 逻辑运算符: &&(and) ||(or) !(not)
			4. 空运算符: empty
				* 功能:用于判断字符串、集合、数组对象是否为null或者长度是否为0
				* ${empty list}:判断字符串、集合、数组对象是否为null或者长度为0
				* ${not empty str}:表示判断字符串、集合、数组对象是否不为null 并且 长度>0
	2. 获取值
		1. el表达式只能从域对象中获取值
		2. 语法:
			1. ${域名称.键名}:从指定域中获取指定键的值
				* 域名称:
					1. pageScope		--> pageContext
					2. requestScope 	--> request
					3. sessionScope 	--> session
					4. applicationScope --> application(ServletContext)
				* 举例:在request域中存储了name=张三
				* 获取:${requestScope.name}

			2. ${键名}:表示依次从最小的域中查找是否有该键对应的值,直到找到为止。


			3. 获取对象、List集合、Map集合的值
				1. 对象:${域名称.键名.属性名}
					* 本质上会去调用对象的getter方法

				2. List集合:${域名称.键名[索引]}
				如果角标越界,返回空字符串

				3. Map集合:
					* ${域名称.键名.key名称}
					* ${域名称.键名["key名称"]}



	3. 隐式对象:
		* el表达式中有11个隐式对象
		* pageContext:
			* 获取jsp其他八个内置对象
				* ${pageContext.request.contextPath}:动态获取虚拟目录

JSTL

1. 概念:JavaServer Pages Tag Library  JSP标准标签库
	* 是由Apache组织提供的开源的免费的jsp标签		<标签>

2. 作用:用于简化和替换jsp页面上的java代码		

3. 使用步骤:
	1. 导入jstl相关jar包
	2. 引入标签库:taglib指令:  <%@ taglib %>
	3. 使用标签

4. 常用的JSTL标签
	1. if:相当于java代码的if语句
		1. 属性:
            * test 必须属性,接受boolean表达式
                * 如果表达式为true,则显示if标签体内容,如果为false,则不显示标签体内容
                * 一般情况下,test属性值会结合el表达式一起使用
   		 2. 注意:
       		 * c:if标签没有else情况,想要else情况,则可以在定义一个c:if标签
	2. choose:相当于java代码的switch语句
		1. 使用choose标签声明         			相当于switch声明
        2. 使用when标签做判断         			相当于case
        3. 使用otherwise标签做其他情况的声明    	相当于default

	3. foreach:相当于java代码的for语句
                 1.完成重复操作
            for(int i=0;i<10;i++){

            }
            属性:
                begin:开始值
                end:结束值
                var:临时变量
                step:步长 1=i++   2= i+=2
                varStatus:循环状态对象
                    index:容器中元素的索引,从0开始
                    count:循环次数
              2.遍历容器
              List list;
              for(User user:list){

              }
              属性:
                items:  容器对象
                var:    容器中元素的临时变量





        --%>
        
        <%--    相当于for{int i=1;i<=10;i++}--%>
            ${i} ${s.index}

${s.count}



<% List list=new ArrayList(); list.add("aaa"); list.add("bbb"); list.add("ccc"); request.setAttribute("list",list); %> ${s.index}${s.count}${str} 5. 练习: * 需求:在request域中有一个存有User对象的List集合。需要使用jstl+el将list集合数据展示到jsp页面的表格table中

三层架构:软件设计架构

1. 界面层(表示层/web层):用户看的得界面。用户可以通过界面上的组件和服务器进行交互    
	功能:接收用户参数,封装数据,调用业务逻辑层完成处理,转发jsp页面完成显示
	例如:SpringMvc框架
2. 业务逻辑层(service层):处理业务逻辑的。
	功能:组合DAO层中的简单方法,形成复杂的功能(业务逻辑操作)
	例如:Spring框架
3. 数据访问层(dao层 Data Acess Object ):操作数据存储文件。
	功能:定义了对于数据库最基本的CRUD操作 
	例如:Mybatis框架

案例:用户信息列表展示

1. 需求:用户信息的增删改查操作
2. 设计:
	1. 技术选型:Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat
	2. 数据库设计:
		create database day17; -- 创建数据库
		use day17; 			   -- 使用数据库
		create table user(   -- 创建表
			id int primary key auto_increment,
			name varchar(20) not null,
			gender varchar(5),
			age int,
			address varchar(32),
			qq	varchar(20),
			email varchar(50)
		);

3. 开发:
	1. 环境搭建
		1. 创建数据库环境
		2. 创建项目,导入需要的jar包

	2. 编码



4. 测试
5. 部署运维

Filter&listener

1. Filter:过滤器
2. Listener:监听器

Filter:过滤器

1. 概念:
	* 生活中的过滤器:净水器,空气净化器,土匪、
	* web中的过滤器:当访问服务器的资源时,过滤器可以将请求拦截下来,完成一些特殊的功能。
	* 过滤器的作用:
		* 一般用于完成通用的操作。如:登录验证、统一编码处理、敏感字符过滤...

2. 快速入门:
	1. 步骤:
		1. 定义一个类,实现接口Filter
		2. 复写方法
		3. 配置拦截路径
			1. web.xml
			2. 注解
	2. 代码:
		@WebFilter("/*")//访问所有资源之前,都会执行该过滤器
		public class FilterDemo1 implements Filter {
		    @Override
		    public void init(FilterConfig filterConfig) throws ServletException {
		
		    }
		
		    @Override
		    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
		        System.out.println("filterDemo1被执行了....");

		        //放行
		        filterChain.doFilter(servletRequest,servletResponse);
		
		    }
		
		    @Override
		    public void destroy() {
		
		    }
		}



3. 过滤器细节:
	1. web.xml配置	
		
	        demo1
	        cn.itcast.web.filter.FilterDemo1
	    
	    
	        demo1
			
	        /*
	    
	2. 过滤器执行流程
		1. 执行过滤器
		2. 执行放行后的资源
		3. 回来执行过滤器放行代码下边的代码
	3. 过滤器生命周期方法
		1. init:在服务器启动后,会创建Filter对象,然后调用init方法。只执行一次。用于加载资源
		2. doFilter:每一次请求被拦截资源时,会执行。执行多次
		3. destroy:在服务器关闭后,Filter对象被销毁。如果服务器是正常关闭,则会执行destroy方法。只执行一次。用于释放资源
	4. 过滤器配置详解
		* 拦截路径配置:
			1. 具体资源路径: /index.jsp   只有访问index.jsp资源时,过滤器才会被执行
			2. 拦截目录: /user/*	访问/user下的所有资源时,过滤器都会被执行
			3. 后缀名拦截: *.jsp		访问所有后缀名为jsp资源时,过滤器都会被执行
			4. 拦截所有资源:/*		访问所有资源时,过滤器都会被执行
		* 拦截方式配置:资源被访问的方式
			* 注解配置:
				* 设置dispatcherTypes属性
					1. REQUEST:默认值。浏览器直接请求资源
					2. FORWARD:转发访问资源
					3. INCLUDE:包含访问资源
					4. ERROR:错误跳转资源
					5. ASYNC:异步访问资源
			* web.xml配置
				* 设置标签即可
			
	5. 过滤器链(配置多个过滤器)
		* 执行顺序:如果有两个过滤器:过滤器1和过滤器2
			1. 过滤器1
			2. 过滤器2
			3. 资源执行
			4. 过滤器2
			5. 过滤器1 

		* 过滤器先后顺序问题:
			1. 注解配置:按照类名的字符串比较规则比较,值小的先执行
				* 如: AFilter 和 BFilter,AFilter就先执行了。
			2. web.xml配置: 谁定义在上边,谁先执行
4. 案例:
	1. 案例1_登录验证
		* 需求:
			1. 访问day17_case案例的资源。验证其是否登录
			2. 如果登录了,则直接放行。
			3. 如果没有登录,则跳转到登录页面,提示"您尚未登录,请先登录"。

	2. 案例2_敏感词汇过滤
		* 需求:
			1. 对day17_case案例录入的数据进行敏感词汇过滤
			2. 敏感词汇参考《敏感词汇.txt》
			3. 如果是敏感词汇,替换为 *** 

		* 分析:
			1. 对request对象进行增强。增强获取参数相关方法
			2. 放行。传递代理对象



		* 增强对象的功能:
			* 设计模式:一些通用的解决固定问题的方式
			1. 装饰模式
			2. 代理模式
				* 概念:
					1. 真实对象:被代理的对象
					2. 代理对象:
					3. 代理模式:代理对象代理真实对象,达到增强真实对象功能的目的
			 	* 实现方式:
				 	1. 静态代理:有一个类文件描述代理模式
				 	2. 动态代理:在内存中形成代理类
						* 实现步骤:
							1. 代理对象和真实对象实现相同的接口
							2. 代理对象 = Proxy.newProxyInstance();
							3. 使用代理对象调用方法。
							4. 增强方法

						* 增强方式:
							1. 增强参数列表
							2. 增强返回值类型
							3. 增强方法体执行逻辑	
public class ProxyTest {
     
    public static void main(String[] args) {
     
        //创建真是对象
        Lenov lenov=new Lenov();
        //动态代理增强lenov对象
        /*
        三个参数 :
            1.类加载器:真是对象.getClass().getClassLoader()
            2.接口数组:真实对象..getClass().getInterfaces()
            3.处理器 new InvocationHandler()
         */
        SaleComputer proxy_lenovo =(SaleComputer) Proxy.newProxyInstance(lenov.getClass().getClassLoader(), lenov.getClass().getInterfaces(), new InvocationHandler() {
     

           /*
           代理逻辑编写的方法,代理对象调用的所有方法都会触发该方法执行
           参数:
                1.proxy:对象
                2.method:代理对象调用的方法,被封装为的对象
                3.args:代理对象调用的方法时,传递的实际参数

            */
            @Override
            public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
     
              /*  System.out.println("该方法执行了");
                System.out.println(method.getName());
                System.out.println(args[0]);*/
                return null;
            }
        });


        //调用方法
        String computer = proxy_lenovo.sale(8000);
        System.out.println(computer);
//        proxy_lenovo.show();
    }

}

Listener:监听器

* 概念:web的三大组件之一。
	* 事件监听机制
		* 事件	:一件事情
		* 事件源 :事件发生的地方
		* 监听器 :一个对象
		* 注册监听:将事件、事件源、监听器绑定在一起。 当事件源上发生某个事件后,执行监听器代码



* ServletContextListener:监听ServletContext对象的创建和销毁
	* 方法:
		* void contextDestroyed(ServletContextEvent sce) :ServletContext对象被销毁之前会调用该方法
		* void contextInitialized(ServletContextEvent sce) :ServletContext对象创建后会调用该方法
	* 步骤:
		1. 定义一个类,实现ServletContextListener接口
		2. 复写方法
		3. 配置
			1. web.xml
					
 					 cn.itcast.web.listener.ContextLoaderListener
 					 



					

					* 指定初始化参数
			2. 注解:
				* @WebListener

JQuery 基础:

1. JQuery 基础:
	1. 概念
	2. 快速入门
	3. JQuery对象和JS对象区别与转换
	4. 选择器
	5. DOM操作
	6. 案例

JQuery 基础:

1. 概念: 一个JavaScript框架。简化JS开发
	* jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨	是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优	化HTML文档操作、事件处理、动画设计和Ajax交互。

	* JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已
2. 快速入门
	1. 步骤:
		1. 下载JQuery
			* 目前jQuery有三个大版本:
				1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
					 功能不再新增。因此一般项目来说,使用1.x版本就可以了,
					 最终版本:1.12.4 (2016年5月20日)
				2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
					 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
					 最终版本:2.2.4 (2016年5月20日)
				3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
					 一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
					 目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
			* jquery-xxx.js 与 jquery-xxx.min.js区别:
				1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些
				2. jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快

		2. 导入JQuery的js文件:导入min.js文件
		3. 使用
			var div1 = $("#div1");


			alert(div1.html());


3. JQuery对象和JS对象区别与转换
	1. JQuery对象在操作时,更加方便。
    2. JQuery对象和js对象方法不通用的.
    3. 两者相互转换
        * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        * js -- > jq : $(js对象)



4. 选择器:筛选具有相似特征的元素(标签)

	1. 基本操作学习:
		1. 事件绑定
			//1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });
		2. 入口函数
			 $(function () {
	           
   			 });
			 window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
		3. 样式控制:css方法
			 // $("#div1").css("background-color","red");
      		$("#div1").css("backgroundColor","pink");



	2. 分类
		1. 基本选择器
			1. 标签选择器(元素选择器)
				* 语法: $("html标签名") 获得所有匹配标签名称的元素
			2. id选择器 
				* 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
			3. 类选择器
				* 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
			4. 并集选择器:
				* 语法: $("选择器1,选择器2....") 获取多个选择器选中的所有元素
		2. 层级选择器
			1. 后代选择器
				* 语法: $("A B ") 选择A元素内部的所有B元素		
			2. 子选择器
				* 语法: $("A > B") 选择A元素内部的所有B子元素
		3. 属性选择器
			1. 属性名称选择器 
				* 语法: $("A[属性名]") 包含指定属性的选择器
			2. 属性选择器
				* 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
				以te开始
				 $("#b1").click(function () {
               $("div[title^='te']").css("backgroundColor","pink");
            })
            	以te开始
				 $("#b1").click(function () {
               $("div[title$='est']").css("backgroundColor","pink");
            })
            	包含es的div元素背景色变红色
				 $("#b1").click(function () {
               $("div[title*='te']").css("backgroundColor","pink");
            })
			3. 复合属性选择器  //同时成立才符合条件
				* 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器
		4. 过滤选择器
			1. 首元素选择器 
				* 语法: :first 获得选择的元素中的第一个元素
				$(function () {
			$("div:first").css("backgroundColor","pink");
		})
			2. 尾元素选择器 
				* 语法: :last 获得选择的元素中的最后一个元素
				$(function () {
			$("div:last").css("backgroundColor","pink");
		})
			3. 非元素选择器
				* 语法: :not(selector) 不包括指定内容的元素
				$(function () {
			$("div:not(.one)").css("backgroundColor","pink");
		})
			4. 偶数选择器
				* 语法: :even 偶数,从 0 开始计数
					$(function () {
			$("div:even").css("backgroundColor","pink");
		})
				
			5. 奇数选择器
				* 语法: :odd 奇数,从 0 开始计数
						$(function () {
			$("div:odd").css("backgroundColor","pink");
		}) 
			6. 等于索引选择器
				* 语法: :eq(index) 指定索引元素
			7. 大于索引选择器 
				* 语法: :gt(index) 大于指定索引元素
			8. 小于索引选择器 
				* 语法: :lt(index) 小于指定索引元素
			9. 标题选择器
				* 语法: :header 获得标题(h1~h6)元素,固定写法
				$(function () {
				$(":header").css("backgroundColor","pink");
			})
		5. 表单过滤选择器
			1. 可用元素选择器 
				* 语法: :enabled 获得可用元素
			2. 不可用元素选择器 
				* 语法: :disabled 获得不可用元素
			3. 选中选择器 
				* 语法: :checked 获得单选/复选框选中的元素
			4. 选中选择器 
				* 语法: :selected 获得下拉框选中的元素

5. DOM操作
	1. 内容操作
		1. html(): 获取/设置元素的标签体内容   内容  --> 内容
		设置标签体内容 $("#mydiv").html("

aaa

"); 2. text(): 获取/设置元素的标签体纯文本内容 内容 --> 内容 3. val(): 获取/设置元素的value属性值 2. 属性操作 1. 通用属性操作 1. attr(): 获取/设置元素的属性 获取:var attr = $("#bj").attr("name"); 设置:var attr = $("#bj").attr("name","xxx "); 2. removeAttr():删除属性 3. prop():获取/设置元素的属性 4. removeProp():删除属性 * attr和prop区别? 1. 如果操作的是元素的固有属性,则建议使用prop 2. 如果操作的是元素自定义的属性,则建议使用attr 2. 对class属性操作 1. addClass():添加class属性值 2. removeClass():删除class属性值 3. toggleClass():切换class属性 * toggleClass("one"): * 判断如果元素对象上存在class="one",则将属性值one删除掉。 如果元素对象上不存在class="one",则添加 4. css(): 3. CRUD操作: 1. append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾 2. prepend():父元素将子元素追加到开头 * 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头 3. appendTo(): * 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾 4. prependTo(): * 对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头 5. after():添加元素到元素后边 * 对象1.after(对象2): 将对象2添加到对象1后边。对象1和对象2是兄弟关系 6. before():添加元素到元素前边 * 对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系 7. insertAfter() * 对象1.insertAfter(对象2):将对象1添加到对象2后边。对象1和对象2是兄弟关系 8. insertBefore() * 对象1.insertBefore(对象2): 将对象1添加到对象2前边。对象1和对象2是兄弟关系 9. remove():移除元素 * 对象.remove():将对象删除掉 10. empty():清空元素的所有后代元素。 * 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点 6. 案例

JQuery 高级:

1. JQuery 高级
	1. 动画
	2. 遍历
	3. 事件绑定
	4. 案例
	5. 插件

JQuery 高级

1. 动画
	1. 三种方式显示和隐藏元素
		1. 默认显示和隐藏方式
			1. show([speed,[easing],[fn]])
				1. 参数:
					1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
					2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
						* swing:动画执行时效果是 先慢,中间快,最后又慢
						* linear:动画执行时速度是匀速的
					3. fn:在动画完成时执行的函数,每个元素执行一次。

			2. hide([speed,[easing],[fn]])
			3. toggle([speed],[easing],[fn])
		
		2. 滑动显示和隐藏方式
			1. slideDown([speed],[easing],[fn])
			2. slideUp([speed,[easing],[fn]])
			3. slideToggle([speed],[easing],[fn])

		3. 淡入淡出显示和隐藏方式
			1. fadeIn([speed],[easing],[fn])
			2. fadeOut([speed],[easing],[fn])
			3. fadeToggle([speed,[easing],[fn]])

2. 遍历
	1. js的遍历方式
		* for(初始化值;循环结束条件;步长)
	2. jq的遍历方式
		1. jq对象.each(callback)
			1. 语法:
				jquery对象.each(function(index,element){});
					* index:就是元素在集合中的索引
					* element:就是集合中的每一个元素对象
					citys.each(function (index,element) {
           alert(index+":"+element.innerHTML);
       })
					* this:集合中的每一个元素对象
					var citys=$("#city");
        citys.each(function () {
            alert(this.innerHTML)
        })
			2. 回调函数返回值:
				* true:如果当前function返回为false,则结束循环(break)。
				* false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
		2. $.each(object, [callback])
		
		$.each(citys,function () {
         alert($(this).html())
     });
		3. for..of: jquery 3.0 版本之后提供的方式 
			for(元素对象 of 容器对象)
	
3. 事件绑定
	1. jquery标准的绑定方式
		* jq对象.事件方法(回调函数);
		* 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
			* 表单对象.submit();//让表单提交
	2. on绑定事件/off解除绑定
		* jq对象.on("事件名称",回调函数)
		* jq对象.off("事件名称")
			* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
	3. 事件切换:toggle
		* jq对象.toggle(fn1,fn2...)
			* 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
			
		* 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
			 

4. 案例
	1. 广告显示和隐藏
		
		
		
		    
		    广告的自动显示与隐藏
		    
		
		    
		    
		    
		
		    
                    
                    

你可能感兴趣的:(javaweb笔记)