JavaWeb项目笔记包括jsp的用法selevt,HTML5-白红宇

JavaWeb项目笔记包括jsp的用法selevt,HTML5

阅读量：4957 次

发布时间：2019-06-12

本文共 107022 字，大约阅读时间需要 356 分钟。

-------------------《认识HTML5》-----------------

1 <>生成的快捷键是table键 ctrl+D是直接复制一行

2 <h1>-<h6> 标题字体由大到小

<p> 段落

<br> 换行标签

<hr> 水平线标签

<em> 斜体

<strong> 字体加粗

../ 返回上一级目录

> 大于号

< 小于号

  空格

" 引号“”

3----------加图片

src是相对路径绝对路径 alt 文字代替图片 title 鼠标放在图片上会显示文字

4-------- 超链接

1页面链接

<p><a href="http://www.kgc.cn/job/oe/1.shtml" target="_blank">文本内容的连接1</a></p>

herf代表相对路径或者绝对路径 target窗口的位置 -blank是打开一个新的窗口 -self是自身窗口

<a href="http://www.kgc.cn/job/oe/1.shtml" target="_self">文本内容的连接2</a>

2 锚链接

跳转到同一页面的固定位置上来

超链接部分

要跳转的部分

跳转到不同页面的固定位置上来

1 html

2 html

3 功能性的超链接如qq 或者邮箱

如果每个switch块里对应的字符不同可以在外面设置一个统一的

用户选择某一个对应的就是最后的结果

String week="";

week="001";

week="002";//走哪个对应哪个值

week="003";

System.out.println(week);

* 数组

* 基本数据的使用声明开空间赋初始值 nums[0]=6

* 对象声明开空间赋初始值在对对象的属性赋值 students[0]=stu

-------------------《列表》--------------------------------

有序 <ol> --> <li> 选项或者问卷调查

无序 <ul> --> <li> 导航或者有规律的图文或者侧边栏信息

ul{list-style: none}取消黑心点

自定义 <dl> --> <dt>--<dd> dl表示自定义列表 dt列表项 dd列表内容

列表样式

值说明语法示例

none 无标记符号 list-style-type:none;

disc 实心圆，默认类型 list-style-type:disc;

circle 空心圆 list-style-type:circle;

square 实心正方形 list-style-type:square;

decimal 数字 list-style-type:decimal

----------------------《表格》

跨行rowspan 横向的是跨列竖向的是跨行

跨列colspan

table--tr（行）--td(单元格) th在第一行可代替td作为表格的标题

<table border="1" width="1300px"

align="left" bgcolor="aqua" cellspacing="0" cellpadding="20">

height：30px;

line-height:30px; 设置一样的话字体是垂直居中的

border：1px solid yellow；是设置边框

font-size：14px；设置字体

padding-left；8px 让最左边的字体往右去点

color： #fff；让字体全部变成白色

cellpanding=5 单元格内部的空白

cellspacing=0 设置单元格与单元格之间的距离

bgcolor 设置行或者单元格的颜色

margin: 0px ; 外边框与电脑最外边缘距离

alion 对齐的格式

-------------《网页布局》

</header>

</section>

</footer>

通过样式调节网页布局

margin: 0px;

padding: 0px;

} 初始化网页

header,section,footer{

width: 100%;

background-color : red; //背景颜色

border: 1px outset red; //solid 代表线的类型

margin: 0px 0px 0px 0px; // 外边框与电脑最外边缘距离

margin: 0px auto;//居中

}

header{

height: 100px;

}

section{

height: 200px;

}

footer{

height: 100px;

}

---------------------《内联框架iframe使用》

-----------------------《添加视频》

</video>

controls 是添加控制按钮

--------------------------《跨行与跨列的应用》

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

这个表格是五行三列

----------------------《表单》

------------------------------------《视频上的》

<p>用户账号： <input type="text" name="useername" value="在框里输入的值" size=30px maxleng=6 代表长度/> 代表账号框

<p> 用户密码： <input type="password" name="psd"/> 代表密码文

<p> <input type="submit" value="登录"/> 登录按键

让他们互斥加上name属性

action 代表提交给谁

method= "get" 把用户的账号密码呈现在地址栏

method= "post" 没有放入地址栏

type 是类型 name是名称 value是值

chcekbox 是多选按钮用到的元素

radio 是单选

submit 是提交按钮

reset 是重置按钮不等于清空

checked="checked" 是个属性代表给单选多选框架默认选项的

属性type对应的元素有

text password checkbox radio submit reset file image button 默认的是text

-------------------------《老师讲的》

<body>

<h2>表单的使用</h2>

<p>

邮箱地址:  

<input type="text" name="email" value="请输入邮箱名字" size="30" maxlength="18"/>@163.com

</p>

<p>

用户密码： <input type="password"name="password"size="30" maxlength="16"/>

</p>

<p>

确认密码： <input type="password"name="repassword"size="30"maxlength="16"/>

</p>

<p>

选择性别:

</p>

<p>

兴趣爱好：

<input type="checkbox"name="loveing" value="sports" />运动

<input type="checkbox"name="loveing" value="charting" checked/>聊天

<input type="checkbox"name="loveing" value="music"/>听音乐

<input type="checkbox"name="loveing" value="sleep"/>睡觉

<input type="checkbox"name="loveing" value="play"/>玩

</p>

<p>

籍贯：

省份：

</select>

城市：

</select>

</p>

<p>

验证码：

</p>

<p>多行文本域：

<textarea name="xieyi" cols="10" rows="6" readonly >文本域的内容是你必须遵守我定的规矩不然t了你</textarea>

<input type="radio" checked/>同意网易协议

</p>

<p>

上传头像：<input type="file" name="file"/>

</p>

<p>

带有格式的邮箱注册<input type="email"name="email"/>

</p>

<p>

</p>

<p>

网络信息来源： <input type="url"name="url"/>

</p>

<p>

输入年龄： <input type="number" name="age" max="25"min="20"step="1"/>

</p>

<p>

滑块：<input type="range"name="range"min="1" max="20"/>

</p>

<p>

搜索框1： <input type="search" name="search" value="oppo手机"/>

搜索框2： <input required type="search" name="search" placeholder="oppo手机"/>

</p>

<p>

出生日期：<input type="date"/>

具体出生时间: <input type="time"/>

</p>

<p>

此处禁用：<input disabled type="text" name="btnsub" value="保存资料"/>

</p>

<p>

</p>

<p>

邮箱地址只读：<input type="email" readonly value="1355022178@qq.com" name="email"/>

</p>

<p>

</p>

<p>

输入手机号： <input type="text" required pattern="^1[358]\d{9}"/>

</p>

</form>

</section>

</body>

placeholder 提示语

适合于input标签：text、search、url、email和password等类型

required 必填项

规定文本框填写内容不能为空，否则不允许用户提交表单

正则表达式

pattern="^1[358]\d{9}"

<legend>用户登录框<lenend>

-----------------------《css》

<style>

选择器{

属性：值；

}

<style>

下面这些放在标签选择器里那么选择器就拥有这些特征

font-size ；12px 代表字体大小

color：代表字体颜色

有设置字体的还有文本的

text-align 文本对齐

text-indent 文本缩进 em汉字

color：文本颜色

line-height 行高

text-decrition 装饰下划线穿字体的线

h1使用样式了

如果h1有个别的不想用这些样式？

如果某些段落P也想用这个样式怎么办？但是不在h1里面

1类选择器它的注释/* */

。red{

color：red；

}

2 ID选择器

#green{

color：red；

}

<h2 id="green"> id只能使用一次

3 内联样式

4 外部样式表

link 链接

@import 导入式

5 <p>hhhh<span>111<span/></p>

111不会换行

块元素可以设置宽高行内元素设置宽高不起作用·

20px/50px 20是字体大小 50是行间距 line-height

font:italic bold 20px/50px "微软雅黑";

/*字体放一起的顺序：风格>粗细>大小>类型 */

------------------------《老师讲的CSS》-------------

CSS；字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS代码写在<head>的<style>标签中

CSS代码保存在扩展名为.css的样式表中

链接：

外部样式表引入HTML中

herf：后缀.css的文件路径

rel 使用外部样式表

type 文件类型

导入

行内样式>内部样式表>外部样式表就近原则

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次但是可以在创建新的id选择器

ID选择器 >类选择器 >标签选择器

CSS的高级选择器

1 层次选择器

2 结构伪类选择器

3 属性选择器

选择器类型功能描述

E F 后代选择器选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

E>F 子选择器选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

E+F 相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

E~F 通用兄弟选择器(找到的是同辈) 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

2结构伪类选择器

选择器功能描述

E:first-child 作为父元素的第一个子元素的元素E

E:last-child 作为父元素的最后一个子元素的元素E

E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

E:first-of-type 选择父元素内具有指定类型的第一个E元素

E:last-of-type 选择父元素内具有指定类型的最后一个E元素

E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

E F:nth-child(n) 在父级里从一个元素开始查找，不分类型

E F:nth-of-type(n) 在父级里先看类型，再看位置

属性选择器功能描述

E[attr] 选择匹配具有属性attr的E元素

E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，

删除换句话说，字符串val与属性值中的任意位置相匹配

字体样式

属性名含义举例

font-family 设置字体类型 font-family:Verdana，"隶书";

font-size 设置字体大小 font-size:12px;

font-style 设置字体风格 font-style:italic;（斜体）oblique也是斜的 normal正常的

font-weight 设置字体的粗细 font-weight:bold; 粗体 lighter细的

/*字体放一起的顺序：风格>粗细>大小>类型 */

---------------------文本样式

属性含义举例

color 设置文本颜色 color:#00C;

text-align 设置元素水平对齐方式 text-align:right;

text-indent 设置首行文本的缩进 text-indent:20px;

line-height 设置文本的行高 line-height:25px;

text-decoration 设置文本的装饰 text-decoration:underline;

text-align：right右边 left左边 center居中 justify 俩端对齐

-------------------文本的装饰

text-decoration：none默认值 underline文本下划线 overline文本上划线 line-through 删除线

------------------垂直对齐方式

vertical-align属性：middle、top、bottom

-------------《文本阴影》

text-shadow : color x-offset y-offset blur-radius; 最后写半径

------------------列表样式

list-style-type=list-style

list-style-image：url（）为列表样式前面加一个图片

list-style-position

对应的值 list-style-type:none;

none取消黑心 disc实心圆 circle 空心圆 square 正方形 decimal 数字

-------------------背景样式

1背景颜色

2背景图片（默认平铺）---》背景图片大小

3背景重复

4背景位移

5背景尺寸

列如

2背景图片 background-image:url(图片路径)

3背景重复（也就是平铺不平铺）background-repeat

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

3背景定位（也就把图片放在那里）

background-position

Xpos （水平） Ypos （垂直）

X% Y%

left、center、right top、center、bottom

背景尺寸 background-size

auto 默认值，使用背景图片保持原样

cover 整个背景图片放大填充了整个元素

percentage当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的

contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

偏移量俩个数上下左右四个数上右下左

------------------渐变是用法background: linear-gradient

线性渐变颜色沿着一条直线过渡：从左到右、从右到左、从上到下

linear-gradient 是个属性 ( position, color1, color2,…)

渐变方向第一种第二种。。。

background: linear-gradient(to bottom,black,red);

--------------------《交集选择器》

标签选择器后面跟个id或者类选择器 h1#one1{} h1.one{}

--------------------------《浮动知识点》-------------------

块级元素-block 带有换行符

行内或者叫内联元素 inline 不带有换行符

inline-block 行内块元素，元素既具有内联元素的特性，也具有块元素的特性

display：none 设置元素不会被显示而且不会占用网页内存 hidden会占用内存

display：block 块级元素与行级元素的转变

display：inline 块级元素与行级元素的转变

display:inline-block 控制块元素排到一行

float列子

<div class="layer04">浮动的盒子……</div>

</div>

分别设置

layer01{

border:1px #F00 dashed;

float:left;

}

/*设置同一种浮动后*/

/*设置浮动后下一个元素紧挨着该元素的后面*/

/*未设置浮动下一个元素紧挨着该元素的正下方*/

清除浮动 clera

值说明

left 在左侧不允许浮动元素

right 在右侧不允许浮动元素

both 在左、右两侧不允许浮动元素

none 默认值。允许浮动元素出现在两侧

列如clear:both;

clear属性可以清除浮动对其他元素造成的影响，

可是依然解决不了父级边框塌陷问题，怎么办？

1 浮动元素后面加空div

<div class="clear"></div> 样式为 .clear{ clear: both; margin: 0; padding: 0;}

2 父级添加overflow属性

加个样式 #father {overflow: hidden;border:1px #000 solid; }

属性值说明

visible 默认值。内容不会被修剪，会呈现在盒子之外

hidden 内容会被修剪，并且其余内容是不可见的

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

3父级添加伪类after

.clear:after{

content: ''; /*在clear类后面添加内容为空*/

display: block; /*把添加的内容转化为块元素*/

clear: both; /*清除这个元素两边的浮动*/

------------------------《盒子》

1 圆角边框

border-radius 可以设置四个方向的border-radius: 20px 10px 50px 30px;

列如：圆的设置

div{

width: 50px;

height: 50px;

line-height: 50px; /*高度和行内高度一样字体是居中的*/

text-align: center;/*然后在让字体居中*/

background: red;

border-radius: 25px; /*设置圆角宽高一样圆角值等于宽高值得一半*/

color: white;

display: inline-block;

}

圆的设置必须满足：

一元素的宽度和高度必须相同

二圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

2 网页垂直居中

margin:0px auto 条件是块元素固定宽度

3 盒子尺寸 box-sizing 默认是的是 content-box

box-sizing：content-box | border-box | inherit;

content-box 默认值，盒子的总尺度

border-box 盒子的宽度或高度等于元素内容的宽度或高度

inherit 元素继承父元素的盒子模型模式

display和float的区别

display的特点

1 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便 1

2 位置方向不可控制，会解析空格俩个行内块元素会有空格

float特点

1 可以让元素排在一行并且支持宽度和高度，可以决定排列方向

2 float 浮动以后元素脱离文档流，会对周围元素产生影响，

必须在它的父级上添加清除浮动的样式

----难点要好好理解

==========定位

position: relative; 相对定位

top: 50px;

left: 50px;

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。

因此，移动元素会导致它覆盖其它框

position: absolute; 绝对定位

top: 50px;

left: 50px;

绝对定位使元素的位置与文档流无关，

因此不占据空间。这一点与相对定位不同，

相对定位实际上被看作普通流定位模型的一部分，

因为元素的位置相对于它在普通流中的位置。

区别二者

相对定位是“相对于”元素在文档中的初始位置，

而绝对定位是“相对于”最近的已定位祖先元素，

如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

z-index定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

-----------点击显示一个区域

.d{

display: none;

}

li:hover .d{

display: block;

} 让某个隐藏然后设置一个东西鼠标放在他身上可以让隐藏的显示

------------------《javaScript》-----------------------------------------------

描述脚本语言基于对象和事件驱动具有安全性运行在客户端减轻服务端的压力

特点 1 向HTML添加交互行为

2 是一种脚本语言

3 一般编写客户端脚本

4 解释性语言边解释边执行

包括1 ECMAScript

2 浏览器对象模型BOM

3 文档对象模型DOM

window.alert() 属于BOM对象网页的弹出框

window.prompt（）是网页弹出框里的输入框

document.write("这个数字是"+num);既属于BOM有属于DOM 向页面输入内容

var age;//默认的是undefined 不是null null是设置的

行内的脚本

script可以放在网页任何地方

可以在头或者body

可以是行内的脚本

/*运算符*/

var num1;

var num2;

var num3=num2==num1; 因为num1和num2都是undefined；

document.write(num3); 将输出结果为undefined

script的基本数据类型有

undefined 未定义

null 空

String 字符串

boolean 布尔类型

number 数值型的

var num=1;

document.write(num++);结果为1

document.write(++num);结果为2

var name=window.prompt("你好","妲己");

document.write("nsss"+name);

isNAN()判断如果是数字就false 不是或者非数字ture

----------------------《函数》

类似于java方法是执行特定任务的语句块在需要的地方可以重复调用

一系统函数

parseInt（）转换整数

parseFloat（）转换浮点型

isNaN（）判断非数字

evel（）计算表达式值

生成随机数抽奖

//通过math的random的方法生成随机数但是随机数是浮点型的

//通过系统函数parseInt方法强制类型转换整数或者floor

function getnum(){

var num=parseInt(Math.random()*10);

switch(num){

case 1:

case 2:

case 3:

case 4:

case 5:

window.alert("没中奖");

break;

case 6:

window.alert("算中了吧")

break;

case 7:

case 8:

case "a":

window.alert("没中奖");

break;

defaule :

window.alert("一等奖");

break;

}

</script>

</form>

函数的调用

1 事件名=函数名（传递的实参数）列如 οnclick=函数（）

2 直接使用函数名字 var result=add（2,3）;

计算机

function add(num1,num2){

if(!isNaN(num1)&& !isNaN(num2)){

num1=parseInt(num1);

num2=parseInt(num2);

return num1+num2;

}else{

return "你输得的不是数字请核对后再次进行"

}

var num1=window.prompt("请输入第1个数字","a");

var num2=window.prompt("请输入第2个数字","a");

alert(add(num1,num2));

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";

var carname;

----------------------数组

下面的代码创建名为 cars 的数组：

var cars=new Array();

cars[0]="Audi";

cars[1]="BMW";

cars[2]="Volvo";

或者 (condensed array):

var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):

实例

var cars=["Audi","BMW","Volvo"];

typeof（变量名字）----可以用来检测变量的类型

------------JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

var person={

firstname : "Bill",

lastname : "Gates",

id : 5566

};

对象属性有两种寻址方式：

实例

name=person.lastname;

-----------------------------《BOM》

Window对象是指整个窗口对象，可通过操作Window对象的属性和方法控制窗口，

例如，打开或关闭一个窗口

-----Window对象常用的事件

名称说明

1 onload 当一个页面或一幅图像加载完成时

2 onmouseover 当鼠标移动到某元素之上的时候

3 onclick 单击某个对象后触动某个事件

4 onkeydown 某个键盘按键被按下的时候

5 onchange 域的内容被改变时

-----Window对象常用的属性

1 history 有关客户访问过的URL的信息

2 location 有关当前URL的信息

3 screen 有关客户端的屏幕和显示性能的信息

----Window对象常用的方法

1 prompt() 显示提示用户输入的对话框

2 alert() 弹出警告框

3 confirm() 弹出警告框切带有确定和返回

4 close() 关闭浏览器窗口

5 open() 打开一个新的浏览器窗口，加载给定URL所指定的文档

6 setTimeout() 用于在指定的时间后调用函数或计算表达式

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

7 setInterval() 按照指定的周期数来调用函数或计算表达式-----------执行多次

clearInterval()取消由 setInterval() 设置的 timeout。

列如：

定时函数：setTimeout()和setInterval() ---------------------只执行一次

setTimeout()语法：

setTimeout(“调用的函数名称”，等待的毫秒数)

清除语法：

clearTimeout()；

setInterval()语法：

setInterval(“调用的函数名称”，周期性调用函数之间间隔的毫秒数)

---------History对象

浏览器访问过的历史页面对应History对象，

通过History对象的属性或方法可以实现浏览器的前进或后退功能。

-----window的属性History对象的方法

back() History.back(); 浏览器中后退按钮

forward() History. forward(); 浏览器中前进按钮

go() go(n);

go(n)方法中的n是一个具体数字，

当n=0时，装入当前页面；

当n>0时，装入历史列表中往前数第n个页面；

当n<0时，装入历史列表中往后数第n个页面；

---------window的属性Location对象

浏览器的地址栏对应Location对象，

通过Location对象的属性或方法可以控制页面跳转。

Location对象的属性

host 设置或返回主机名和当前URL的端口号

href 设置或返回完整的URL

hostname 设置或返回当前的URL的主机名

location对象的方法

reload() 重新加载当前文档（相当于刷新）

replace() 用新的文档替换当前文档

-----window对象的Document对象

1 getElementById() 返回对拥有指定id的第一个对象的引用

2 getElementsByName() 返回带有指定名称的对象的集合

3 getElementsByTagName() 返回带有指定标签的对象的集合

4 write() 向文档写文本、HTML表达式或JavaScript代码

getElementById()方法一般用于访问DIV,图片，表单元素，网页标签等，

但是要求访问对象的id是唯一的。

getElementsByName()方法与getElementById()方法相似，

但它访问元素的name属性，由于一个文档的name属性可能不是唯一的，

因此getElementsByName()方法一般用于访问

同一组相同name属性的与元素，

如具有相同name属性的复选框而已

getElementsByTagName()：是用来按标签来访问页面元素的，

一般用于访问同一组相同的元素,如一组<input>、一组图片等。

------innerHTML

几乎所有的元素都有innerHTML属性，

它是一个字符串，

用来设置或获取位于对象起始和结束标签内的HTML。

使用innerHTML替换元素的时候，被替换的元素看似无影无踪了，

但实际上，元素与其事件处理程序和JavaScript对象属性的绑定关系在内存中并没有被一并删除，

如果频繁进行替换操作的话，页面所占用的内存数量将会明显增加，占用内存。

因此在使用innerHTML（包括outerHTML属性和insertAdjacentHTML（）方法）时，

我们要先手动删除与被替换元素绑定的所有事件处理程序和JavaScript对象属性。

innerHTML具体用法，时钟代码中会用到

--------------------------实现网页上复选框“全选功能”

第一步：设置同名的复选框组，“全选”复选框设置唯一id.

第二步：使用getElementByName()访问同名复选框组。

第三步：使用getElementById()访问“全选”复选框。

第四步：根据“全选”复选框的状态，设置同名复选框勾选状态（checked属性）。

function allCheckBox(){

//获取全选的复选框

var checkall=document.getElementById("checkall");

var array=document.getElementsByName("product");

if(checkall.checked){ //checked=“checked” 在表单中复选框中显示默认选中

for(var i = 0 ; i<array.length;i++){

array[i].checked=true;

}

}else{

for(var i = 0 ; i<array.length;i++){

array[i].checked=false;

}

</script>

<p>

</p>

</form>

--------------------实现动态时钟代码

实现页面动态实时时钟

第一步：创建一个Date对象

第二步：通过Date对象的get方法，获取当前时间日期

第三步：使用if语句判断小时数是否大于12，，从而确认上午还是下午

第四步：使用setInterval()方法反复显示：

function showMsg() {

var divDate = document.getElementById("date");//根据id获取元素内容

var divTime = document.getElementById("time");

var date = new Date();

var week = new Array();

week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

var month=new Array();

month=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];

var half;

if(date.getHours()<12){

half="a.m";

}else{

half="p.m";

}

var dateMsg = date.getFullYear() + "年  " + month[date.getMonth()] + "  " + date.getDate() + "日  "+week[date.getDay()];

var timeMsg = half+ "  " +date.getHours() + " : " + date.getMinutes() + " : " + date.getSeconds();

divDate.innerHTML = dateMsg;

divTime.innerHTML = timeMsg;

}

window.onload = showMsg;

window.setInterval(showMsg, 0);

</script>

<body>

</div>

</body>

window.οnlοad=showMsg;这个onload事件调用的时候它调用函数不用写括号

黑色半透明rgba(0, 0, 0, 0.8);

-------------------《DOM对象》

1 DOM是文档对象模型和语言无关可以访问动态修改结构文档的接口

2 组成：

1：Core DOM 核心DOM 可以针对任何结构的文档对象

2：XML DOM 定义了一套针对XML文档的对象

3：HTML DOM 定义了一套针对HTML文档的对象一般用于表格的操作

DOM以树型结构组织HTML 文档中的每一个标签都是一个节点

访问节点可以：

1 getElementById()返回特定id的第一个对象的引用

2 getElementByName()返回一个集合带有指定的name对象

3 getElementByTagName()返回一个集合带有特定标签名的对象

操作节点的属性

getAttribute（“属性名”）；

setAttribute（“属性名”，“属性值”）设置修改属性

创建和增加节点

creatElement（tagname）按照指定的标签名字创建一个新的元素节点

appendChild（nodeName）向已存的节点列表末尾添加新的子节点

insertBefore（newNode,oldNode）向指定的节点之前插入一个新的子节点

cloneNode（deep）在进行复制的时候一定主意复制好之后一定要使用appendChild（）方法添加下

deep=true 复制节点而且里面的子节点也会复制

deep=false 复制节点但是里面的子节点不会复制

删除和替换节点

removeChild（node）删除指点的节点

replaceChild（newnode，oldNode）用其他的节点替换原来的

-----------DOM对象里面的HTML DOM对象专门针对于HTML专门处理表格Table

1 Table对象

属性：Rows[] 返回包含表格中所有行的数组列如第一行table。rows【0】

方法 1 insetRow()在表格中插入一个新行末尾行添加 table.insertRow(table.rows.length-1)

2 deleteRow() 从表格中删除一行

获得表格中所有行数 table。rows【】。length

insetRow(index) 表示插入index行之前

index=行数代表在末尾添加新行

index=0 代表在第一行添加新行

index 不可以小于0或大于行数

2 TableRow对象

属性 cells[] 返回行中所有的单元格一个数组

rowindex 返回该行在表中的位置

方法 insetCell(index) 在一行的第index位置放置一个单元格

deleteCell()删除单元格中指定的单元格

3 TableCell对象

属性 innerHTML设置单元格里面的内容

cellindex 返回单元格在某行的位置

align 设置单元格水平排列方式

ClassName 设置返回class属性

---------------代码1

function showpath(){

// 通过id属性找对象封装在一个方法里面调用的时候必须放在括号里面

var tupian=$("tupian");

alert(tupian.getAttribute("src"));

}

function showenjoy(){

var engoy=document.getElementsByName("enjoy");

var msg="";

for(var i=0;i<engoy.length;i++){

if(engoy[i].checked){

msg+=engoy[i].value+",";

}

window.alert(msg);

}

function changeImg(){

var img=$("tupian");

img.setAttribute("src","img/img1.png")

}

</script>

</head>

<body>

<p>

<br/>

</p>

<p>

<span>你喜欢的水果是：</span><br/>

<input type="checkbox"name="enjoy" value="苹果"/>苹果

<input type="checkbox"name="enjoy" value="香蕉"/>香蕉

<input type="checkbox"name="enjoy" value="橘子"/>橘子

<input type="checkbox"name="enjoy" value="梨"/>梨

<br/>

</p>

-------------代码2 在一张图片前（insertbefore）添加图片删除图片复制图片

function addimg(){

var objimg=document.getElementById("one");

var newNode=document.createElement("img");

newNode.setAttribute("src","img/faq02.jpg");

document.getElementById("p1").insertBefore(newNode,objimg);

}

function copyimg(){

document.getElementById("p1").appendChild(document.getElementById("one").cloneNode(true));

}

function delimg(){

var objimg=document.getElementById("one");

objimg.parentNode.removeChild(objimg);

}

</script>

</head>

<body>

//删除可以用过自身开始删除最后找爹删除

//删除也可以先找到爹在进行删除

------------代码3 HTML DOM对象解析table

要求 1增加一行

2删除第一行

3修改标题样式

4复制最后一行

5添加一行带有删除和保存按钮颜色变成黄色

function addRow(){

var table=document.getElementById("myTable");

//添加一个新行

var newtr=table.insertRow();

//添加新单元格

var cell1=newtr.insertCell(0);

cell1.innerHTML="三国演义";

var cell2=newtr.insertCell(1);

cell2.innerHTML="¥66.00";

//让第二个单元格居中

//cell2.className="center";

cell2.setAttribute("class","center");

}

function delRow(){

var table=document.getElementById("myTable");

//var zong=table.rows.length;

table.deleteRow(1);

}

function updateRow(){

var table=document.getElementById("myTable");

//也就是动态的加上一个class属性让他的值等于你在外面设置好的

//table.rows[0].className="title";

//table.rows[0].setAttribute("class","title");

table.rows[0].setAttribute("id","xiugaibiaoti");

}

function copyRow(){

var table=document.getElementById("myTable");

//在进行复制的时候一定主意复制好之后一定要使用appendChild（）方法添加下

table.appendChild(table.rows[2].cloneNode(true));

}

function addanniu(){

var table=document.getElementById("myTable");

var newrow=table.insertRow(2);

var cell1=newrow.insertCell(0);

cell1.innerHTML="红楼梦";

var cell2=newrow.insertCell(1);

cell2.innerHTML="<input type='button' value='删除'/>  <input type='button'value='保存'/>";

newrow.setAttribute("class","addanniu");

}

</script>

</head>

<body>

</tr>

<td>看得见风景的房间</td>

</tr>

</tr>

</table>

insertbefore在p段落里面插入一个新的img 这个img在oldimg前面

----------------------------《实现省市相连》----------------

思路：

1 创建两个下拉列表框，分别显示省份和城市

2 选择某一个省份时，使用onchange事件调用方法（changeCity( )）使城市下拉列表框中显示对应的城市

3 页面加载时把省份名称添加到表示省份的下拉列表框中

1 Select对象常用的事件、方法和属性

类别名称描述

事件 onchange 当改变选项时调用的事件

方法 add() 向下拉列表中添加一个选项

属性 options[] 返回包含下拉列表中的所有选项的一个数组

属性 selectedIndex 设置或返回下拉列表中被选项目的索引号

属性 length 返回下拉列表中的选项的数目

add（）添加功能列如

var city=document.getElementById("selCity");

city.add(new Option("郑州市","郑州市"),null);

2 Option对象常用的属性

类别名称描述

属性 text 设置或返回某个选项的纯文本值

属性 value 设置或返回被送往服务器的值

------------------------《数组》---------

类别名称描述

属性 length 设置或返回数组中元素的数目

方法 join( ) 把数组的所有元素通过分隔符进行分隔连接，拼接成一个字符串

方法 sort() 对数组排序

方法 push() 向数组末尾添加一个或更多元素，并返回新的长度

//第1个声明方式长度是可变的数组

var array=new Array();

array[0]="哈哈";

array[1]="呵呵";

//第2个声明方式长度是可变的数组

var array=["哈哈","呵呵"];

//第3个声明方式长度是可变的数组

var array=new Array("哈哈","呵呵");

//第一种for循环

for(var i=0;i<array.length;i++){

document.write("<h1>"+array[i]+"</h1>");

}

//第二种for循环

for(var i in array){

document.write("<h1>"+array[i]+"</h1>");

}

-------------《二维数组的声明》

//二维数组的应用

var array=new Array();

array["哈哈"]=["哈哈1","哈哈2","哈哈1","哈哈2","哈哈1","哈哈2"];

for(var i in array){

document.write(i+"<br/>");

for(var j in array[i]){

document.write(array[i][j]+"<br/>");

}

在javaScript中下标i可以是整数也可以是字符串

-----------------------------《省市相连的方法》

1第一种笨方法

function changeCity1(){

var province=document.getElementById("selProvince");

var city=document.getElementById("selCity");

//设置city下啦框选项的为1 保留一项

//也可以设置长度为0

city.length=1;

switch(province.value){

case "北京":

city.add(new Option("朝阳区","朝阳区"),null);

city.add(new Option("东城区","东城区"),null);

city.add(new Option("海淀区","海淀区"),null);

break;

case "上海":

city.add(new Option("宝山区","宝山区"),null);

city.add(new Option("长宁区","长宁区"),null);

city.add(new Option("虹口区","虹口区"),null);

break;

case "河南":

city.add(new Option("郑州市","郑州市"),null);

city.add(new Option("开封市","开封市"),null);

city.add(new Option("商丘市","商丘市"),null);

break;

}

function allProvince(){

//显示所有省份

//获取省份的下拉框对象(select)

var province=document.getElementById("selProvince");

//在select对象添加选项

province.add(new Option("北京市","北京"),null);

province.add(new Option("上海市","上海"),null);

province.add(new Option("河南省","河南"),null);

}

//页面加载完执行allProvince方法

window.οnlοad=allProvince;

</script>

------------------------------------------------------------------------------

1第2种数组方法

var array=new Array();

array["北京市"]=["朝阳区","东城区"];

array["上海市"]=["宝山区","长宁区"];

array["河南省"]=["郑州市","开封市"];

function changeCity1(){

var province=document.getElementById("selProvince");

var city=document.getElementById("selCity");

//设置city下啦框选项的为1 保留一项

//也可以设置长度为0

city.length=1;

for(var i in array){

for(var j=0;j<array[i].length;j++){

if(i==province.value){

city.add(new Option(array[i][j],array[i][j]),null);

}

function allProvince(){

//显示所有省份

//获取省份的下拉框对象(select)

var province=document.getElementById("selProvince");

//在select对象添加选项

for(var i in array){

province.add(new Option(i,i),null);

}

//页面加载完执行allProvince方法

window.οnlοad=allProvince;

</script>

-----------------------------《如何实现鼠标移至“我的购物车”显示商品内容？》---

使用Dom-Css设置

改变样式的属性 style属性 className属性

名称描述

onclick 当用户单击某个对象时调用事件

onmouseover 鼠标移到某元素之上

onmouseout 鼠标从某元素移开

onmousedown 鼠标按钮被按下

------------------------1方式

<div id="cart" οnmοuseοver="over()" οnmοuseοut="out()">我的购物车<span>1</span></div>

var cart=document.getElementById("cart");

var cartList=document.getElementById("cartList");

//通过style属性操作div的样式

function over(){

//鼠标移动上去购物车的样式

cart.style.background="#ffffff";

cart.style.zIndex="100";

cart.style.borderBottom="none";

//鼠标移动上去购物车下的列表的样式

cartList.style.display="block";

cartList.style.position="relative";

cartList.style.top="-1px";

}

function out(){

cartList.style.display="none";

cart.style.background="#ffffff";

cart.style.borderBottom="1px solid #dcdcdc";

}

</script>

-----------2直接拿到要修改的div 的classname属性在css里面给他一个样式

var cart=document.getElementById("cart");

var cartList=document.getElementById("cartList");

//利用classname属性进行对样式的修改

function over(){

cart.className="cartOver";

cartList.className="cartListOver";

}

function out(){

cart.className="cartOut";

cartList.className="cartListOut";

}

</script>

style属性但他也是对象

HTML元素.style.样式属性＝"值"

-----------------《滚动广告》

var adverTop; //层距页面顶端距离

var adverLeft;

var adverObj; //层对象

function inix(){

adverObj=document.getElementById("adver");

//currentStyle选择的样式

if(adverObj.currentStyle){

adverTop=parseInt(adverObj.currentStyle.top);

}else{

adverTop=parseInt(document.defaultView.getComputedStyle(adverObj,null).top);

}

function move(){

var stop=parseInt(document.documentElement.scrollTop||document.body.scrollTop);

adverObj.style.top=adverTop+stop+"px";

}

window.οnlοad=inix;//页面加载的时候

window.οnscrοll=move;//当鼠标滚动的时候

</script>

-----------------------------《表单验证》---------------------

1 含义数据被送往服务器前对?HTML?表单中的这些输入数据进行验证

减轻服务器的压力保证数据的可行性和安全性

可以弹出框或者输入框旁边

2 是否为空是否为数字符合某些特定的内容格式（邮箱、身份证等) 输入的数据的长度

-------------------------《简单的验证不带焦点》

//onsumbmit= return checkform();

function checkForm(){

// return true;//代表可以提交

//return false;代表不可以提交提交的地方是action="#submit"；

var username=document.getElementById("userName").value;

if(username.length==0){

alert("用户名不可以为空");

return false;//代表组织表单提交

}

var pwd=document.getElementById("pwd").value;

if(pwd.length < 6){

alert("用户密码必须6位以上");

return false;//代表组织表单提交

}

var repwd=document.getElementById("repwd").value;

if(repwd!=pwd){

alert("用户密码必须6位以上切俩次密码相同");

return false;//代表组织表单提交

}

var emal=document.getElementById("email").value;

if(emal.indexOf("@")==-1||emal.indexof(".")==-1){

alert("邮箱格式有误");

return false;

}

return true;

}

</script>

----------String对象

类别名称说明

属性 length 返回字符串的长度（包括空格等）

方法 toLowerCase() 把字符串转化为小写

方法 toUpperCase() 把字符串转化为大写

方法 charAt(index) 返回在指定位置的字符

方法 indexOf(str，index) 查找某个指定的字符串在字符串中首次出现的位置，str为查找字符串，index为查找的起始位置

方法 substring(index1，index2) 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符

onsubmit = " return checkform() " 自定义的验证方法,返回布尔值

-------------------------文本框对象 ------

类别名称说明

属性 id 设置或返回文本域的id

属性 value 设置或返回文本域的value属性的值

方法 blur() 从文本域中移开焦点

方法 focus() 在文本域中设置焦点，即获得鼠标光标

方法 select() 选取文本域中的内容

事件

onkeypress 某个键盘按键被按下时触发

onblur（）失去焦点，当光标离开某个文本框时触发

onfocus 获得焦点，当光标进入某个文本框时触发

重要的是下面这俩个

--------------------《正则表达式》-----------------

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具

new RegExp(pattern, attributes);

如在字符串中对 "is" 进行全局搜索：

var str="Is this all there is?";

var patt1= new RegExp("is","g");

i 执行对大小写不敏感的匹配

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

m 执行多行匹配

方括号

[abc] 查找方括号之间的任何字符

[^abc] 查找任何不在方括号之间的字符

[0-9] 查找任何从 0 至 9 的数字

[a-z] 查找任何从小写 a 到小写 z 的字符

[A-Z] 查找任何从大写 A 到大写 Z 的字符

[a-zA-Z ]查找任何字母

[red|blue|green]查找任何指定的选项

列如

^((19|20)[0-9]{2}$ 1999-2099

常用的符号

/…/ 代表一个模式的开始和结束

^ 匹配字符串的开始

$ 匹配字符串的结束

\s 任何空白字符

\S 任何非空白字符

\d 匹配一个数字字符，等价于[0-9]

\D 除了数字之外的任何字符，等价于[^0-9]

\w 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]

. 除了换行符之外的任意字符

重复字符

{n} 匹配前一项n次

{n,} 匹配前一项n次，或者多于n次

{n,m} 匹配前一项至少n次，但是不能超过m次

* 匹配前一项0次或多次，等价于{0,}

+ 匹配前一项1次或多次，等价于{1,}

？匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

test() 方法检索字符串中的指定值。返回值是 true 或 false。

^\w+ @ \w+(\ .\w+) {1,2} 邮箱格式

-------------------------《表单验证+String+绝对格式》--------

function $(id){

return document.getElementById(id);//拿到对象

}

function changeClass(obj,className){

obj.className=className;//设置class属性

}

function changePrompt(obj,className,msg){

obj.className=className;//设置class属性

obj.innerHTML=msg; //设置文本内容

}

function nameFocus(){

$("userName").value="";

changeClass($("userName"),"import_prompt");

changePrompt($("userNameId"),"div_prompt","6~18个字符,需以字母开头");

}

function nameBlur(){

var userName=$("userName").value;

if(userName.length>=6 && userName.length<=18){

changePrompt($("userNameId"),"ok_prompt","录入正确");

return true;

}else{

changePrompt($("userNameId"),"error_prompt","用户名录入错误");

return false;

}

function emailFocus(){

$("email").value="";

changeClass($("email"),"import_prompt");

changePrompt($("emailId"),"div_prompt","请输入正确的邮箱");

}

function emailBlur(){

var email=$("email").value;

if(email.indexOf("@")==-1 ||email.indexOf(".")==-1){

changePrompt($("emailId"),"error_prompt","邮箱格式错误，必须包含@和.");

return false;

}else{

changePrompt($("emailId"),"ok_prompt","录入正确");

return true;

}

function checkForm(){

if(nameBlur() && emailBlur()){

return true;

}

return false;

}

</script>

-----------------------《jQuery知识点》--------------------------

1 含义 jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

2 它的设计思想是write less,do more

3 jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

4 引入

在页面中引入jQuery

5 语法结构

$(selector).action()?;

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

6 window.onload $(document).ready() 区别

执行时机必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完

同一页面不能同时编写多个同一页面能同时编写多个

简化写法无 $(function(){ //执行代码 })?;

7 使用addClass( )方法为元素添加样式语法 jQuery 对象.addClass([样式名]);

列如 $("#current").addClass("current");

使用css( )方法设置元素样式

使用show( )、hide( ) 方法设置元素的显示和隐藏

css({"属性1":"属性值1","属性2":"属性值2"...}) ;

$(selector).show( );

$(selector).hide( );

8 对一个对象进行多重操作，并将操作结果返回给该对象 next()

$("h2").css("background-color","#ccffff").next().css("display","block");

---------------------DOM对象和jQuery对象的转换----------------

1 $("#title").html( )等价于 document.getElementById("title").innerHTML;

2 DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

3 jQuery对象命名一般约定以$开头

4 在事件中经常使用$(this)，this是触发该事件的对象

5 jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$(txtName);

var txtName =$txtName[0];

6 通过get(index)方法得到相应的DOM对象

var $txtName =$("#txtName");

var txtName =$txtName.get(0);

txtName变成了一个DOM对象

------------------------------------------

后代儿子孙子一起找子代只找儿子

$("input:not(:checked)") 去除所有与给定选择器匹配的元素

eq（）匹配一个给定索引值的元素

$("tr:eq(1)")

gt(index) 匹配所有大于给定索引值的元素

lt(index) 匹配所有小于给定索引值的元素

---------------------代码

$(function(){}）=======jQuery(function(){}）======$(document).ready(function(){})

隐藏与显示

$(function(){

$("#id1").click(function(){

$("#div1").show();

});

$(".cone1").click(function(){

$("#div1").hide();

})

</script>

添加和删除样式----

$(document).ready(function(){

$(".input1").click(function(){

$("p").addClass("id1");

});

$(".input2").click(function(){

$("p").removeClass("id1");

})

</script>

<style>

.id1{

font-size: 60px;

color: yellow;

}

</style>

</head>

<body>

------------隔行变色

//文件加载完成时执行

$(document).ready(function(){

// $("tr:odd").addClass("id");

$("tr:odd").css("background-color","red");

})

---------------------------

$(function(){

$("h1").click(function(){

$(this).addClass("clone1");

$("p").addClass("clone2");

});

$("a").click(function(){

$("#id2").show();

})

--------------------------鼠标移上去鼠标移下去

$(function(){

$("ul").hide();//ul先设置隐藏

$("div>a").mouseover(function(){

$("ul").show();

$("ul").addClass("clone1")

}); //ul的显示加边框

$("div>a").mouseout(function(){

$("ul").hide();//ul的隐藏

})

-------------

使用siblings( )方法获取当前元素的兄弟元素，设置数字的背景颜色

$("li:nth-of-type("+i+")").siblings().css("background","#333333"); siblings是兄弟姐妹

-----------------------《jQuery 2》

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); opacity设置透明度

切换样式 $("p").toggleClass("content border");

hasClass( )方法来判断是否包含指定的样式 if(!$("p").hasClass("content ")){ $("p").addClass("content "); }

val()可以获取或设置元素的value属性值

html(?) 和text(?)方法的区别

语法格式参数说明功能描述

html(?) 无参数用于获取第一个匹配元素的HTML内容或文本内容

html(content) content为元素的HTML内容用于设置所有匹配元素的HTML内容或文本内容

text(?) 无参数用于获取所有匹配元素的文本内容

text (content) content为元素的文本内容用于设置所有匹配元素的文本内容

节点操作

jQuery中节点操作

查找节点（前面章节已讲）

创建节点

插入节点

删除节点

替换节点

复制节点

------------------------《jQuery 事件》----------------------

基础事件：

鼠标事件键盘事件 window事件表单事件

复合事件：

鼠标光标悬停（hover）鼠标连续点击(toggleClass)

--------鼠标事件（对文件鼠标移动和点击）

方法描述执行时机

click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时

mouseover( ) 触发或将函数绑定到指定元素的mouseover事件鼠标指针移过时

mouseout( ) 触发或将函数绑定到指定元素的mouseout事件鼠标指针移出时

mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件鼠标指针进入时

mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件鼠标指针离开时

----------键盘事件

方法描述执行时机

keydown( ) 触发或将函数绑定到指定元素的keydown事件按下键盘时

keyup( ) 触发或将函数绑定到指定元素的keyup事件释放按键时

keypress( ) 触发或将函数绑定到指定元素的keypress事件产生可打印的字符时

-----

var index=$("#nav li span").index(this); $("#nav li:eq("+index+") span~p").show();

-------绑定事件

bind(type,[data],fn);

type是指事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件

,fn 处理函数

------绑定多个事件

----------代码1 bind里面要有大括号也就是相当于对一个按钮添加点击鼠标滑过画出的事件

$(".top-m .on").bind({

mouseover:function(){

$(".topDown").show();

},mouseout:function(){

$(".topDown").hide();

}

});

-----------代码2

同时绑定多个事件类型/处理程序

、，，，，，，，，，，

jQuery 代码:

$("button").bind({

click:function(){$("p").slideToggle();},

mouseover:function(){$("body").css("background-color","red");},

mouseout:function(){$("body").css("background-color","#FFFFFF");}

});

也可以给绑定的事件的函数用一个变量接收下好分别解除绑定的事件

content1=function

---移除事件使用unbind()方法

当unbind()不带参数时，表示移除所绑定的全部事件

$("#del").click(function(){

$("#nav li:first").unbind("click", content1)

});

------复合事件

hover( )方法相当于mouseover与mouseout事件的组合

$(".top-m .on").hover(

function(){

$(".topDown").show();

function(){

$(".topDown").hide();

}

);

---------------------toggle（）与toggleClass()

toggle()方法用于模拟鼠标连续click事件 toggle()方法不带参数，与show( )和hide( )方法作用一样

----------代码1

$(function(){

$("#show").click(function(){ ---------135。。。show 246.。。。hide

$("#desc").toggle();---------相当于show hide

})

----------代码2

jqery版本是 <script src="js/jquery-1.8.3.js"></script>

$("input").toggle(

function(){$("body").css("background","#ff0000");},

function(){$("body").css("background","#00ff00");},

function(){$("body").css("background","#0000ff");}

)

toggleClass( )可以对样式进行切换

$("input").click(function(){$("p").toggleClass("class1");})

------------toggle( )和toggleClass( )总结

1 toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定-----bind--------click事件

2 toggle( )实现事件触发对象在显示和隐藏状态之间切换

3 toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

相当于addclass和removeclass的集合

--------------jQuery动画效果

---------控制元素显示与隐藏

$(selector).show([speed],[callback])

[speed]可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast

[callback]可选。show函数执行完之后，要执行的函数

----------改变元素的透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

$(selector).fadeIn([speed],[callback])

$(selector).fadeOut([speed],[callback])

[speed]可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast

[callback]可选。show函数执行完之后，要执行的函数

----------改变元素高度相当卷闸门

slideDown() 可以使元素逐步延伸显示 slideUp()则使元素逐步缩短直至隐藏

slideUp()则使元素逐步缩短直至隐藏

----------自定义动画

$(selector). animate({params},speed,callback)

params} 必须，定义形成动画的CSS属性

----代码链式写法

$(function(){

$(".nav-ul a").mouseover(

function(){

$(this).css("background","yellow");

}

).mouseout(

function(){

$(this).css("background","#f01e28");

}

)

----代码 keydown( ) 里的函数带有参数的时候

$(document).ready(function () {

$(document).keydown(function(e){

if(e.keyCode==13){--------------------------------代表摁下enter键

var flag=window.confirm("确认提交表单吗");

if(flag){

$("#form1").submit();

}

});

-----代码 <fieldset >

</fieldset>

------代码商品菜单分类（li-span-p 保证找到的是同一位置下的）

$(function(){

$("#nav li span").mouseover(

function(){

$(this).css("background-color","yellow");

var index=$("#nav li span").index(this);

$("#nav li:eq("+index+") span~p").show();

}

).mouseout(

function(){

$(this).css("background-color","#7a6e6e");

var index=$("#nav li span").index(this);

$("#nav li:eq("+index+") span~p").hide();

}

)

})

eq 从0开始找的是nav的第index位置的li标签 nth-of-style(index) 从1 开始找是找的nav的li标签里面的东西

var index=$("#nav li span").index(this); 拿到span标签的位置

find（）==============================span-（li-span-p 保证找到的是同一位置下的）

-------------------------find()

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$(".leftNav ul li").hover(

function(){

$(this).css("background","green");

$(this).find(".zj").show();

},function(){

$(this).css("background","#B01D1D");

$(this).find(".zj").hide();

}

)

--------代码搜索匹配的元素，并返回相应元素的索引值，从0开始计数。 index（）

<ul>

</ul>

var index=$('li').index($('#bar')); //1，传递一个jQuery对象

----------代码 tab轮播

#nav li:nth-child(1)======#nav li:first

$(document).ready(function(){

$("#nav li:first").bind("click",bg1=function(){

$(".taskContent").css("background","#26a6e3");

}).bind("click",content1=function(){

$("#dayTask").show();

$("#growTask").hide();

});

$("#nav li:last").bind("click",bg2=function(){

$(".taskContent").css("background","#ff9400");

}).bind("click",content2=function(){

$("#dayTask").hide();

$("#growTask").show();

});

$("#del").click(function(){

$("#nav li:first").unbind("click", content1)

});

/* $("#del").click(function(){

$("#nav li:first").unbind();

});*/

})

----链式是点复合是俩个函数之间逗号隔开

--------代码淡入淡出

$(document).ready(function() {

$("input[name=fadein_btn]").click(function(){

$("img").fadeIn("slow");

});

$("input[name=fadeout_btn]").click(function(){

$("img").fadeOut(1000);

});

--------代码卷闸门

$(document).ready(function() {

$("h2").click(function(){

$(".txt").slideUp("slow");

$(".txt").slideDown("slow");

});

--------复合事件

$(function () {

//复合事件

$(".nav-ul a").hover(function () {

$(this).css("background-color", "green");

}, function () {

$(this).css("background-color", "#f01e28");

}

);

});

-----------切换效果

$(function () {

$(".nav-box ul li").hover(

function () {

$(this).children("div").show();//让相应二级内容显示

$(this).toggleClass("orange");

function () {

$(this).children("div").hide();//让相应二级内容隐藏

$(this).toggleClass("orange");

}

);

});

----------

//1 链式事件

//keypress 按下并弹起

//keycode==13代表enter键被按下

//keydown的函数会有参数 event.keycode==13？

//submit()没有参数代表不加校验的提交

//复合事件 hover() 鼠标的移上和移出

//显示与隐藏的切换 toggle（）自带点击

//淡入淡出

//高度

-----------

$(function(){

$("p").hover(function(){

$("div").toggle();

})

hover 鼠标移上和移除 toggle()显示和隐藏

toggle(方法方法) 实现点击切换函数

--------------------siblings()

找到每个div的所有同辈元素。

HTML 代码:

<p>Hello</p>

<div><span>Hello Again</span></div>

<p>And Again</p>

jQuery 代码:

$("div").siblings()

-------------------------find()

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$(".leftNav ul li").hover(

function(){

$(this).css("background","green");

$(this).find(".zj").show();

},function(){

$(this).css("background","#B01D1D");

$(this).find(".zj").hide();

}

)

-----------------------animate动画根的动画类型速度函数

$(function(){

$("div").mousemove(function(){

$("div").animate({

fontSize: "10em",

width:"250px",

height:"250px",

borderWidth: 10

},"slow",add())

})

function add(){

var div=document.getElementById("one1");

div.innerHTML="呵呵";

}

----------------------------《jQuery操作Dom》--------------------------

1 --------------------eq（）返回得到同辈中第n个元素----------注意是同辈

代码

例如 ---var $num=$("p:eq(1)").text();

或者 $("p").eq(1)

2 --------------------find（）找出正在处理的元素的后代元素的好方法。 ----找到的是后代

代码

<tr>

</tr>

</table>

var $num1=$("table").find("tr").find("td:eq(2)").text();

3----------------- not(expr|ele|fn)删除与指定表达式匹配的元素（排除你不要的）

代码 $("#con").find("tr:not(:eq(0))")

代码 <p>Hello</p>

<p id="selected">Hello Again</p>

$("p").not( $("#selected")[0] )

-----------《表格的单元格相加》

var $sum=0;

for( var i=1; i<$("tr").length; i++){

var $td=parseInt($("table tr:eq("+ i +") td:nth-of-type(3)").html());

$sum=$sum+$td;

$("h2").html($sum);

}

或者

var $total=0;

$("#con").find("tr:not(:eq(0))").each(function(i,e){

$total+=parseInt($(e).find("td:eq(2)").text());

});

$("#total").html("总价："+$total);

---------html text

$().html（）获取得 HTML内容和文本内容 ----没参数

$().html("<div>…</div>");---有参数是添加设置设置HTML内容和文本内容

$().text（）获取的只有文本内容----没有参数

$().text("<div>…</div>"); 设置里面的文本内容

-----------val()可以获取或设置元素的value属性值无参是获取有参是设置

----------搜索框特效

思路得到焦点val清空失去焦点val等于电风扇

$(function () {

$("input").focus(

function () {

$(this).css({"background": "yellow", "color": "red"});

var $num=$(this).val();

if($num=="电风扇"){

$(this).val("")

}

).blur(

function () {

$(this).val("电风扇")

})

-------

css(name,value) 设置单个属性

css(name) 获取属性值

----toggleClass()模拟了addClass()与removeClass()实现样式切换的过程

列如

$("h2").click(function() {

$("p").toggleClass("content border"); 俩个样式来回切换

});

--------添加子节点是append prepend

--------添加同辈节点是after before

1 var $node1=$("<li>祝福冬奥会，呵呵1</li>");

$("ul").append($node1); ul上添加一个li子节点

$node2.appendTo("ul"); li节点添加到ul上

2 var $p1=$("<p>哈哈</p>");

$("ul").after($p1); ul后面添加一个p1

3 var $p2=$("<p>呵呵</p>");

$("ul").before($p2); ul前面添加一个p2

4 prepend(content) $(A). prepend (B) 表示将B前置插入到A中（A父类）

5 prependTo(content) $(A). prependTo (B)表示将A前置插入到B中（B父类）

6删除节点

remove()：删除整个节点

empty()：清空节点内容

detach()：删除整个节点，保留元素的绑定事件、附加的数据

7替换节点

replaceWith()和replaceAll()用于替换某个节点两者的关系类似于append()和appendTo()

6 设置和获取元素

attr()用来获取与设置元素属性无参

有参代表设置

7$(selector).removeAttr(name) ; 代表removeAttr()用来删除元素的属性

8 children()方法可以用来获取元素的所有子元素

9遍历同辈元素

next([expr]) 用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange");

prev([expr]) 用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange");

slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange");

10遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

----------------each( ) ：规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element)) ;

index 选择器的位置 element当前的元素

--------end

end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

------prev()找到每个段落紧邻的前一个同辈元素。

slice()截取想要的===substring

------------

不让a链接跳转而是去执行你点击他做的事情

1<a href="####" id="sortPrice" class="now"> 加4个####

2<a href="javascript viod(0)" id="sortPrice" class="now">

3<a href="#" id="sortPrice" class="now" return false> 加个return false

------------------------------第七章 jsp知识点------------------------------------------------------------------

1 c/s b/s区别

b/s--------------------------

请求响应模式进行交互

工作原理

1 客户端接受用户输入

2向服务器发送请求

3应用服务器接受-数据库服务器进行数据处理

4发送响应

统一资源定位符 url 协议+主机+资源位置+参数

http ：www.kgc.cn /news/201609/ newslist.jsp ?page=6

2 常见的web服务器：

IIS微软的

Tomcat

weblogic

websphere

Nginx(越来越常用结合大数据)

3 tomcat安装步骤

1添加环境变量（CATALINA_HOME）

2然后把它的路径粘贴过去（路径在哪粘贴在哪里）

3在path里面添加配置环境变量（%CATALINA_HOME%\bin;）

4 tomcat在安装之前电脑一定安装JDK避免安装错误

%CATALINA_HOME%\bin;

5 startup开启tomcat服务器

shutdown.bat关闭服务器

http://localhost:8080/ 可以测试下进入tomcat欢迎页面（0-65535端口的最大值）

6-------

/bin 存放各个平台的启动停止tomcat的脚本文件

/conf 存放tomcat的配置文件 (里面的context web server.xml文件是重点)

/ lib 存放tomcat服务器的jar架包（里面的jsp servlet-api.jar tomcat-websocket.jar 是核心）

/logs 存放的tomcat服务器日志文件

/temp 存放tomcat的临时文件

/webapps 当发布web应用时默认情况下会将web应用的文件存在此目录中

/ work tomcat把由jsp生成的servlet 存放在此目录中

7 使用tomcat打开静态网页站点步骤

1 先把项目放在webapp目录中

在把tomcat关闭然后在打开

2 然后输入http://localhost:8080/ying/index.html

java se 结束 java ee开始编码格式推荐 utf-8

-----使用myeclipse配置tomcat 打开静态网站和动态网站

此步骤需要记住tomcat的开启和关闭

myeclipse启动tomcat的步骤

添加jre 给myeclipse配置jdk环境

更改编码格式

部署动态网站部署网站或者发布网站发布后访问

统一资源定位符：是internet上标准的资源地址

web服务器：是可以向发出请求的浏览器提供文档的程序功能就是提供网上信息浏览服务

-------------------------------------------------2月24号知识-------------------------------------

实施员安装步骤

1 创建好的然后部署的时候点击redeploy（重新部署）然后查看的时候点击webapps里面的web-info里面可以看到字节码文件压缩成文件

2通过war包

先移除tomcat服务器然后部署的时候已packaged的war包形式部署然后把war压缩给实施员实施员解压

3 -----------------jsp知识点

运行在服务器端的java页面

使用html嵌套java代码实现

jsp执行过程也就是工作原理

翻译阶段--编译阶段--执行阶段

翻译阶段是收到请求对jsp文件转换成可识别的.java文件（没有发送请求的是不会有.java文件的）

编译阶段是将.java编译成.class文件

执行阶段是接收到客服端的请求后经过翻译和编译俩个阶段生成字节码文件执行结束后将生成的结果返回到客户端显示

jsp组成

1 page指令

2 jsp小脚本（也就是在html中嵌入java代码）

3html静态元素(转义符)

4注释

html注释

jsp注释<%--hhh--%>

jsp小脚本注释<%--

//单行

多行注释

声明全局变量

<%! type name=value %>

声明局部变量

<% type name=value %>

5调试错误

在web.xml中可以设置启示页面

404 1url错误 2jsp文件放在了客户端不可以访问的地方列如 web-inf里面

客户端没有权限访问web-inf里面的任何东西

500 java代码错误

--------代码练习变量和表达式：

<body>

String title="谈北京会谈"; //新闻标题

String author="kgc";//作者

String category="新闻信息";//新闻分类

String summary="北京市一个好地方啊";//新闻内容

String content="hehe";---------------------------------------此处是变量

<h1><%=title %></h1>-------------------------------------此处是表达式

</body>

面试题 jsp的9大内置对象（jsp已经准备好的可以直接使用的对象）

1 请求对象 request （获取数据注册成功可以跳转）

2 输出对象 out

3 响应对象 response

4 应用程序对象 application

5 会话对象 session

6 页面上下文对象 pageContext

7 页面对象 page

8 配置对象 config

9 异常对象 exception

-------内置对象练习

1 out 的使用

他的方法有

print（）向页面输出显示

println（）向页面输出显示在显示末尾添加换行 ---换行是源代码换的

代码列如

<% out.print("<img src='../images/2.gif' />")%> 输出显示动态图片

out.print("<script>alert('这是测试')</script>"); 弹出框

out.print("这是测试2"); 输出文字

2 request 的使用

（1）--------------可以得到客户端提交发送的数据

方法：

1 request.getParameter("name");得到单个返回值是String类型没有的话返回null

2 request.getParameterValues("love");得到多个返回值是String类型集合没有的话返回null

二者都是和表单的input标签的name属性相对应

意思就是说通过name-----拿到对应的value

代码列如：

注意util前面不需要加../因为上面有个base根路径

<body>

<form action="util/doreg.jsp" method="post"> -------------有post和get方式 post更安全

<p>

爱好：

<input type="checkbox" name="love" value="lanqiu"></input>篮球

<input type="checkbox" name="love" value="zuqiu"></input>足球

<input type="checkbox" name="love" value="xumaoqiu"></input>羽毛球

</p>

<p>

</p>

</form>

</body>

发送到doreg.jsp文件中得到请求对象

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

String name=request.getParameter("userName");

String pass=request.getParameter("userpass");

String[] love=request.getParameterValues("love");

<h1>请确认你的提交信息</h1>

-----------------------------------------------------2月26号知识

getContextPath();得到路径

1 解决通过request得到的数据是中文乱码问题（因为jsp默认的是ISO-8859-1）

-----提交方式是post的情况下

（必须放在获取请求数据前面）

设置请求的编码格式

request.setCharacterEncoding("utf-8");

设置响应编码格式

response.setCharacterEncoding("utf-8");

-----提交方式是get的情况下

治标

new String(name.getBytes("ISO-8859-1"), "utf-8");

治本

修改配置文件中 tomcat/conf/server.xml

<Connector port="8080" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" URIEncoding="UTF-8" />注意有空格注意保存注意重启服务器

2 如果登录成功将跳转（通过转发/或者重定向）给客户端一个响应response

------- 重定向（将用户请求重新定位到一个新的URL）

实际上是得到的一个新地址拿不到原来的数据 url发生变化俩次请求

response.sendRedirect(basePath+"success.jsp"); 注意是response

------- - 转发

通过转发跳转页面可以拿到原来的数据保证数据的不丢失 url没有发生变化一次请求

request.getRequestDispatcher("../success.jsp").forward(request, response);

---------会话

一个会话就是浏览器与服务器之间的一次通话

会话可以在多次请求中保存和使用数据（转发只能一次）

--------session会话

转发只能俩个页面之间数据的传递

session是会话对象保存在服务器端多个页面之间传递

session可以保存登录的用户名

session.setAttribute("CURRENT_USER", usename);--相当键值对

session.getAttribute("CURRENT_USER"); 得到数据值

requset也有setAttribute()只不过只能得到一次性的数据 session可以多次得到数据

request.setAttribute("mess","注册失败");

request.getAttribute("mess");-----------注意要强转得到的是object类型的

-------清除会话

程序主动清除会话

session.invalidate();

服务器主动清除长时间没有再次发出请求的session

(1)session.setMaxInactiveInterval(10);//单位是秒

(2)<session-config>

<session-timeout>30</session-timeout>

</session-config>单位是分钟---在tomcat/conf/web.xml

--------移除会话

用法：session.removeAttribute("userName");

转发与重定向的区别

比较项转发重定向

重新发出请求不会会

url变化不会会

是否携带请求会不会

目标url要求仅本web应用任意url

不会丢数据url不会变会丢数据url变

转发是服务器行为重定向是客户端行为

-------------代码练习1

//问题 11111111 思路先获取请求数据拿到数据拿到数据进行跳转

//1设置编码格式

request.setCharacterEncoding("utf-8");

//2 拿到用户输入的数据

String usename = request.getParameter("uname");

String usepass = request.getParameter("upassword");

if (usename.equals("admin")) {

if ("0".equals(usepass)) {

//如果登录成功将跳转（通过转发/或者重定向）给客户端一个响应response

//通过重定向跳登陆成功的页面

//重定向实际上是得到的一个新地址拿不到原来的数据 url发生变化俩次请求

response.sendRedirect(basePath+"success.jsp");

//通过转发跳转页面可以拿到原来的数据保证数据的不丢失 url没有发生变化一次请求

//转发是服务器行为重定向是客户端行为

//request.getRequestDispatcher("../success.jsp").forward(request, response);

}else{

out.print("<script>alert('密码错误重新输入');history.go(-1)</script>");

}

} else {

out.print("<script>alert('用户不存在，请重新输入');history.go(-1)</script>");

}

//问题2222222在新闻系统中保存登录状态

//转发只能俩个页面之间数据的传递

// session是会话对象保存在服务器端多个页面之间传递

------代码练习2

//目的是保存用户的名字如果没有登录先给他显示form表单有的话用session保存登录状态

Object obj=session.getAttribute("CURRENT_USER");

if(obj==null){

</form>

<%}else{ %>

欢迎你：   <%=obj %> <a href="util/loginout.jsp">注销</a>

<% }%>

---代码练习3

<body>

<%Object obj=session.getAttribute("CURRENT_USER"); %>

</body>

</html>

----代码练习4

//程序主动清除会话session

session.invalidate();

//重定向index.jsp页面

response.sendRedirect("../index.jsp");

----代码练习5

Object obj=session.getAttribute("CURRENT_USER");

if(obj==null){

//out.print("<script>alert('你尚未登录请返回首页进行登录。 ')</script>");

//response.sendRedirect("../../index.jsp");

alert("请先登录");

function newDoc()

{

window.location.assign("../../index.jsp")

}

newDoc();

</script>

<% }else{%>

<body>

<jsp:include page="adminTop.jsp"></jsp:include>

<jsp:include page="adminSidebar.jsp"></jsp:include>

<jsp:include page="adminRightbar.jsp"></jsp:include>

</div>

<jsp:include page="adminBottom.jsp"></jsp:include>

</body>

<%} %>

----代码练习6

//问题 11111111 思路先获取请求数据拿到数据拿到数据进行跳转

//1设置编码格式

request.setCharacterEncoding("utf-8");

//2 拿到用户输入的数据

String usename = request.getParameter("uname");

String usepass = request.getParameter("upassword");

if (usename.equals("admin")) {

if ("0".equals(usepass)) {

//如果登录成功将跳转（通过转发/或者重定向）给客户端一个响应response

//通过重定向跳登陆成功的页面

//保存登录的用户名

session.setAttribute("CURRENT_USER", usename);

//服务器清除长时间不操作的会话

session.setMaxInactiveInterval(10);//单位是秒

//重定向实际上是得到的一个新地址拿不到原来的数据 url发生变化俩次请求

//response.sendRedirect(basePath+"success2.jsp");

response.sendRedirect("../index.jsp");

}else{

out.print("<script>alert('密码错误重新输入');history.go(-1)</script>");

}

} else {

out.print("<script>alert('用户不存在，请重新输入');history.go(-1)</script>");

}

//问题2222222在新闻系统中保存登录状态

//转发只能俩个页面之间数据的传递 session会话对象可以在多个请求中多个页面之间传递

//set

用浏览器访问服务器——产生会话

通过浏览器在网站登录——在会话中保存数据

登录成功后用个人身份进行访问——会话有效期内

关闭了浏览器——结束会话

服务器主动结束会话——会话到期

使会话失效、删除属性——及时释放会话资源

程序主动结束会话、会话到期——会话中的数据丢失

---------步骤

通过表单提交action到你放jsp的文件中获取用户输入的数据然后在保存或者读取数据通过会话和重定向保存和页面的跳转

其中要对编码格式的设置然后在对表单设置如果通过会话拿到数据说明用户已经登录如果没有数据就让他走登录

request可以获取数据和转发跳转

-------------------2月27号

----application知识

1 通过application统计网页总的访问次数存留服务器端整个项目中共享数据应用程序对象

application.setattriction(String name,object obj) 保存数据 K-v

application.getattriction(String name,) 读取数据 K

---使用代码

Object count = application.getAttribute("count");

if (count == null) {

application.setAttribute("count", 1);

} else {

Integer integer = (Integer) count;

application.setAttribute("count", integer+1);

}

Integer integer = (Integer)application.getAttribute("count");

out.println("页面被访问了"+integer+"次");

----cookie（不属于内置对象）解决的问题是免登录

保存在客户端（session是在服务器端）保存的一般是不重要数据 cookie以文件方式保存数据

必须写上记录用户名

cookie.setpath("/")整个工程都可以访问cookie拿到cookie

使用步骤

1声明cookie对象

2设置cookie的有效期

3设置cookie的路径

4由服务器向客服端写入Cookie

sexMaxAge(int shu) 以秒为单位 shu>0表示cookie的有效期 shu=0 表示删除cookie shu=-1或者不设置

表示cookie会在当前窗口关闭后失效

--------第一步

// 声明cookie对象

Cookie cookie=new Cookie("User","admin&0");---------构造参数俩个都是String类型的K-V

//设置cookie的有效期

cookie.setMaxAge(10*24*3600);

//设置cookie的路径

cookie.setPath("/");

//由服务器向客服端写入Cookie

response.addCookie(cookie);

response.sendRedirect("../index.jsp");

---------第二步

//拿到cookie对象

Cookie[] cookies = request.getCookies();

String value = null;

String usename = "";

String usepass = "";

if (cookies != null) { //防止空指针异常

for (int i = 0; i < cookies.length; i++) {

if ("User".equals(cookies[i].getName())) {

value = cookies[i].getValue();

}

if (value != null) {

usename = value.split("&")[0];

usepass = value.split("&")[1];

}

if (usename.equals("admin") && "0".equals(usepass)) {

欢迎你：   <%=usename %> <a href="util/loginout.jsp">注销</a>

<%}else{ %>

加上表单的内容让其走表单

<% }%>

-------cookie和session的区别

1session是服务器端保存用户信息（重要的） cookie是客户端保存用户信息（不重要的）

2session保存的是对象 cookie中保存的是字符串

3session会随会话的结束失效 cookie可以长期保存信息

4cookie通常保存不重要的信息重要的信息使用session保存

----问题如何防止用户没有登录直接进入后台

//第二种方法

Object obj=session.getAttribute("CURRENT_USER");

if(obj==null){

out.print("<script>alert('你尚未登录请返回首页进行登录。 ');location.href='../../index.jsp'</script>");

}else{

走HTML代码

<jsp:include page="adminBottom.jsp"></jsp:include>

<%} %>

其中的location.href=“url”是跳转到另外一个网页=location.assign

------------------------------JDBC连接数据库-------------------------数据库连接技术

*****使用之前要导入jar架包放在WEB-INF里面的lib

连接出现的异常

1 密码错误 Access denied for user 'root'@'localhost' (using password: YES)

2 数据库服务器没开（通过services.msc） Connection refused: connect

使用JDBC的步骤

1 先加载驱动

2 使用DriverManager获取Connection连接对象(获取连接对象) 注意Connection在java.sql中

3 创建Statement--再去执行sql语句

4 返回resultSet查询结果处理查询结果resultSet

5 释放关闭资源

---JDBC连接数据库使用方法

//1 加载驱动

Class.forName("com.mysql.jdbc.Driver");

//2 使用DriverManager获取Connection连接对象(获取连接对象)

String url = "jdbc:mysql://localhost:3306/news";

Connection connection = DriverManager.getConnection(url, "root",

"aptech");//注意Connection在java.sql中

//3 创建Statement--再去执行sql语句

Statement smt = connection.createStatement();

String sql = "SELECT id ,userName , PASSWORD ,userType FROM news_user";

ResultSet rs = smt.executeQuery(sql);

//4 返回resultSet查询结果处理查询结果resultSet

while (rs != null && rs.next()) {

int id = rs.getInt("id");

String usename = rs.getString("userName");

String password = rs.getString("PASSWORD");

int userType = rs.getInt("userType");

String type = userType == 0 ? "管理员" : "普通用户";

System.out.println("------------");

System.out.println("用户id：" + id);

System.out.println("用户名字：" + usename);

System.out.println("用户密码：" + password);

System.out.println("用户类型：" + type);

System.out.println("------------");

out.print("用户id:"+id+"用户名字:"+usename+"用户密码："+password+"用户类型："+type+"<br/>");

}

//5 释放资源

if (rs != null) {

rs.close();

}

if (smt != null) {

rs.close();

}

if (connection != null) {

rs.close();

}

--------------总和练习

----代码1 header.jsp

//拿到cookie对象

Cookie[] cookies = request.getCookies();

String value = null;

String username = "";

String pass = "";

if (cookies != null) {

for (int i = 0; i < cookies.length; i++) {

if ("User".equals(cookies[i].getName())) {

value = cookies[i].getValue();

}

if (value != null) {

username = value.split("&")[0];

pass = value.split("&")[1];

}

//1 加载驱动

Class.forName("com.mysql.jdbc.Driver");

//2 通过DriverManager类获取连接对象Connection

String url = "jdbc:mysql://localhost:3306/news";

Connection con = DriverManager.getConnection(url, "root",

"aptech");

//3获得Statement执行sql查询语句

Statement statement = con.createStatement();

String sql = "SELECT username,PASSWORD,userType FROM news_user";

ResultSet rs = statement.executeQuery(sql);

//返回resultSet对象处理sql查询出的数据和用户输入的数据做对比

boolean flag = false;

while (rs != null && rs.next()) {

String sqlusername = rs.getString("userName");

String sqlpass = rs.getString("password");

if (username.equals(sqlusername)&&sqlpass.equals(pass)) {

flag = true;

欢迎你：<%=username%><a href="util/loginout.jsp">注销</a>

break;

}

<%if(!flag){ %>

<input type="text" name="upassword" /> <input class="login1"

type="submit" value="登录键" />

</form>

<%} %>

-----dologin.jsp里面的

//设置post的编码格式

request.setCharacterEncoding("utf-8");

//拿到用户输入的数据

String username = request.getParameter("uname");

String pass = request.getParameter("upassword");

//1 加载驱动

Class.forName("com.mysql.jdbc.Driver");

//2 通过DriverManager类获取连接对象Connection

String url = "jdbc:mysql://localhost:3306/news";

Connection con = DriverManager.getConnection(url, "root", "aptech");

//3获得Statement执行sql查询语句

Statement statement = con.createStatement();

String sql = "SELECT username,PASSWORD,userType FROM news_user";

ResultSet rs = statement.executeQuery(sql);

//返回resultSet对象处理sql查询出的数据和用户输入的数据做对比

while (rs != null && rs.next()) {

String sqlusername = rs.getString("userName");

String sqlpass = rs.getString("password");

if (username.equals(sqlusername)) {

if (pass.equals(sqlpass)) {//代表用户名字密码全部输入正确

//保存用户的数据

session.setAttribute("Username", username);

//添加cookie让用户可以免登陆

//1 添加cookie对象

Cookie cookie = new Cookie("User", (username+"&"+pass));

//2 添加cookie的有效期

cookie.setMaxAge(10 * 24 * 3600);

//3 设置cookie的路径

cookie.setPath("/");

//4 添加在客户端

response.addCookie(cookie);

//通过重定向跳转到首页

response.sendRedirect("../index.jsp");

} else {

out.print("<script>alert('密码输入错误无法登陆');location.href='../index.jsp'</script>");

}

} else {

out.print("<script>alert('账号输入错误无法登陆');location.href='../index.jsp'</script>");

}

//释放资源

if(rs!=null){

rs.close();

}

if(statement!=null){

statement.close();

}

if(con!=null){

con.close();

}

---------------------------------------------------------2月28号知识点

1 page指令 include指令

BaseDao操作数据库的帮助类

（SQL注入攻击 x x'or '1'=1）

列如：

SELECT username,PASSWORD FROM news_user WHERE

userName='test' AND PASSWORD='test' OR '1'=1;

java Bean 是一个java类作用封装业务逻辑封装数据

3） Statement（父类）与PreparedStatement（子类）区别知识点

(1) 生成方法不同 statemnt是createstatement()方法生成 preparedstatement是由preparestatement()方法生成

(2) preparedstatement该对象用于发送带有一个或者多个输入参数的SQL语句

SQL语句使用“?”作为数据占位符使用setXxx()方法设置数据

(3) preparedstatement---预编译特点（效率、性能、开销安全性代码可读性）

使用preparedstatement的执行结果值resultset rs=ps.executeQuery()不带参数sql

使用statement得到resultSet set =state.executeQuery(sql)带参数sql

带有参数的sql语句用？代表占位符

String sql="SELECT username,PASSWORD FROM news_user WHERE userName=? AND PASSWORD=?";

properties类是类似Map集合存储K-V值

代码练习1------------

1 BaseDao类是通用数据库操作类包括封装数据库的1连接 2sql查增删改 3 释放资源

public class BaseDao {

private Connection connection=null;//创建数据库连接对象

private PreparedStatement smt=null;

private ResultSet rs=null;

//获取数据库连接

public boolean getConnection(){

boolean flag=false;

try {

//通过配置文件设置数据库的路径，url，root，aptech，以方便在外界的配置文件修改

ConfigManager con=ConfigManager.getInstace();

String driver=con.getString("jdbc.driver_class");

String url=con.getString("jdbc.connection.url");

String sqlname=con.getString("jdbc.connection.username");

String sqlpass=con.getString("jdbc.connection.password");

//1 加载驱动

Class.forName(driver);

//2 通过DriverManager类获取连接对象Connection

connection = DriverManager.getConnection(url, sqlname, sqlpass);

flag=true;

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

}

return flag;

}

/*//获取数据库连接(没有单列模式)

public boolean getConnection(){

boolean flag=false;

try {

//1 加载驱动

Class.forName("com.mysql.jdbc.Driver");

//2 通过DriverManager类获取连接对象Connection

String url="jdbc:mysql://localhost:3306/news";

connection = DriverManager.getConnection(url, "root", "aptech");

flag=true;

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

}

return flag;

}*/

/**

* 查询

* String sql 是sql语句

* Object[] params 存在sql查询的参数

public ResultSet executeQuery(String sql,Object[] params){

if(this.getConnection()){//因为获得连接是true所以先判断是否获得连接才可以执行sql查询

try {

smt=connection.prepareStatement(sql);//获得查询对象

if(params!=null){

for (int i = 0; i < params.length; i++) {

smt.setObject(i+1, params[i]);//下标是从1开始的所以要i+1位置放参数

}

rs=smt.executeQuery();

} catch (SQLException e) {

e.printStackTrace();

}

return rs;

}

/**

* 释放资源

public void closeResource(){

if(rs!=null&&smt!=null&&connection!=null){

try {

rs.close();

smt.close();

connection.close();

} catch (SQLException e) {

e.printStackTrace();

}

----------------代码练习2 单列模式加上配置文件的读取

public class ConfigManager {

private static ConfigManager configManager;

private static Properties Properties;

private ConfigManager(){

String configFile="database.properties";

Properties =new Properties();

//InputStream in=ConfigManager.class.getClassLoader().getResourceAsStream(configFile);

try {

Properties.load(new FileInputStream(configFile));

//Properties.load(in);

//in.close();

} catch (IOException e) {

e.printStackTrace();

}

public static ConfigManager getInstace(){

if(configManager==null){

configManager=new ConfigManager();

}

return configManager;

}

public String getString(String key){

return Properties.getProperty(key);

}

------------------对于封装好的类的应用在jsp文件里面

1 sql语句不带参数

//封装调用

BaseDao dao=new BaseDao();

String sql = "SELECT id ,userName , PASSWORD ,userType FROM news_user";

ResultSet rs=dao.executeQuery(sql, null);

while (rs != null && rs.next()) {

int id = rs.getInt("id");

String usename = rs.getString("userName");

String password = rs.getString("PASSWORD");

int userType = rs.getInt("userType");

String type = userType == 0 ? "管理员" : "普通用户";

System.out.println("------------");

System.out.println("用户id：" + id);

System.out.println("用户名字：" + usename);

System.out.println("用户密码：" + password);

System.out.println("用户类型：" + type);

System.out.println("------------");

out.print("用户id:"+id+"用户名字:"+usename+"用户密码："+password+"用户类型："+type+"<br/>");

}

dao.closeResource();

2 sql语句带参数

boolean isOK = false; //是否登录成功

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

// 设置编码格式

request.setCharacterEncoding("UTF-8");

// 获取请求的数据

String userName = request.getParameter("username");

String userPass = request.getParameter("userpass");

//SQL语句

String sql = "SELECT * FROM news_user WHERE userName=? AND PASSWORD=?";

BaseDao dao=new BaseDao();

Object[] params={userName,userPass};

ResultSet rs = dao.executeQuery(sql,params);

if (rs != null && rs.next()) {

isOK = true;

}

dao.closeResource();

//判断账号或密码是否正确

if (isOK) {

// 跳转（重定向/转发）

// 重定向

// 保存登录的用户名

session.setAttribute("CURRENT_USER", userName);

// 声明一个Cookie对象

Cookie cookie = new Cookie("USER", userName+"&"+userPass);

// 设置cookie的有效期

cookie.setMaxAge(10 * 24 * 3600);

// 设置有效路径

cookie.setPath("/");

// 由服务器向客户端写入Cookie

response.addCookie(cookie);

// 保存的有效期(服务器主动清除长时间没有操作的会话)

//session.setMaxInactiveInterval(10);

response.sendRedirect(basePath + "index.jsp");

//response.sendRedirect(basePath+"success.jsp");

//转发

//request.getRequestDispatcher("../success.jsp").forward(request, response);

} else {

out.print("<script>alert('账号或密码错误，请重新输入');history.back();</script>");

}

----------------------3月1号知识点----JNDI 数据源连接池分层开发模式----------------------

需要在tomcat配置mysql.jar架包

异常 SaxParseException 解析配置context.xml出现错误

1 懒汉和饿汉模式的单列模式

JNDI---（+配套好的代码+lookup("java:comp/env/数据源名称")）---数据源（获取数据库的连接）----连接池（对创建好的连接对象管理）

2 JNDI （Java Naming and Directory Interface）

(1)必须确保服务器打开(2)读取数据库的代码必须运行在Tomcat服务器上（测试框架不可以使用）

含义将一个对象和名字绑定的技术指定一个资源将他的名称与服务相关联

作用读取数据源获得数据库的连接在应用与Java对象或资源之间建立松耦合的逻辑关联，简化应用对于资源的配置及维护工作可以在更大范围、不同应用之间共享资源

配置 <Environment name="tjndi" value="hello JNDI" type="java.lang.String"/>

Tomcat\conf\context.xml文件 name="tjndi" JNDI名称

javax.naming.Context对象提供了查找JNDI 的接口

//需要配套的代码只能在jsp文件中运行

Context context=new InitialContext();//位于javax.naming

String str=(String)context.lookup("java:comp/env/tjndi");//java:comp/env/固定的

3 使用连接池需要在tomcat配置mysql.jar架包

配置context.xml文件配置web.xml 添加数据库驱动文件进行代码编写查找获取数据源

4 <Environment name="tjndi" value="hello JNDI" type="java.lang.String"/>

数据源的配置

<Resource name="jdbc/news"

auth="Container" type="javax.sql.DataSource" maxActive="100"

maxIdle="30" maxWait="10000" username="root" password="aptech"

driverClassName="com.mysql.jdbc.Driver"

url="jdbc:mysql://localhost:3306/news"/>

------------basedao的使用

//获取数据库连接使用JNDI读取数据

public boolean getConnection2(){

boolean flag=false;

try {

//需要配套的代码只能在jsp文件中运行

Context context=new InitialContext();//位于javax.naming

//查找数据源创建的连接对象

DataSource ds=(DataSource)context.lookup("java:comp/env/jdbc/news");

connection =ds.getConnection();

flag=true;

} catch (NamingException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

}

return flag;

}

5 分层开发模式

三层模式（三者相互依赖）

表示层（收集数据/展示结果）--业务逻辑层（根据业务需要控制执行过程，进行事务管理）---数据访问层（提供与业务无关的数据访问操作）

-------列如展示最新的20条新闻

表示层（展示20条新闻）

业务逻辑层 NewsService cn.kgc.news.service

public list<newsdetil> gettop20;

数据访问层 newsdao cn.kgc.news.entity

public resultSet gettop20;-----------------设计原则依赖倒置原则

6JSP+java Bean

功能封装数据封装业务

优点减少代码的冗余

--------------------代码练习使用分层模式进行开发（开发显示网页新闻20条）

归纳总结：

执行顺序 basedao--news实体类---newsdao连接数据库接口--

newsdaoimpl连接数据库实现接口的方法（获得新闻）

--newsService新闻接口管理接口提供方法（show新闻）

---newsSreviceimp实现接口里面的方法（把新闻类放进集合里面for循环遍历从数据库取出来的是基本类型的通过set/get方法取出来放进对象里在通过add方法添加到集合里面）

---------新闻链接数聚库查询的接口

/**

* 数据访问层的接口

public interface NewsDao {

//拿到最新的20条新闻

public ResultSet getNewsTop20();

}

---------新闻查询结果实现接口类重写接口方法

public class NewsDaoImpl extends BaseDao implements NewsDao{

//从数据库查询结果集

public ResultSet getNewsTop20() {

String sql="SELECT title,createDate FROM news_detail ORDER BY createDate DESC LIMIT 0,20";

return super.executeQuery(sql, null);//通过super调用父类的执行数据库操作的查询方法（）；

}

------新闻管理接口类

/**

* 业务逻辑层

public interface NewsService {

public List<NewsDetail> showNewsTop20();

}

----------实现接口里面的方法

public class NewsServiceImpl implements NewsService {

private NewsDao newsDao=new NewsDaoImpl();

public List<NewsDetail> showNewsTop20() {

List<NewsDetail> list=new ArrayList<NewsDetail>();

ResultSet rs=newsDao.getNewsTop20();

try {

while(rs!=null&&rs.next()){

NewsDetail news=new NewsDetail();

news.setTitle(rs.getString("title"));

news.setCreateDate(rs.getTimestamp("createDate"));

list.add(news);

}

} catch (SQLException e) {

e.printStackTrace();

}

//list.clear();//清除数据

return list;

}

----------jsp显示层

NewsService ns=new NewsServiceImpl();

List<NewsDetail> list=ns.showNewsTop20();

if(list.size()>0){//list.size()返回的是集合的个数 list!=null是判断有没有创建list这个对象

for(NewsDetail news:list){

<li>

}}else{

<li>暂时没有新闻可以展示请联系后台添加新闻</li>

<%} %>

-------------代码练习2 用户登录

1----------

//获得数据库的查询用户信息

public interface News_UserDao {

public News_user getUser(String username);

}

2--------------

public class News_UesrDaoimpl extends BaseDao implements News_UserDao {

public News_user getUser(String username) {

News_user user=null;

String sql="SELECT username,`password` FROM news_user WHERE username=?";

Object[] params={username};

ResultSet rs=super.executeQuery(sql, params);

try {

if(rs!=null&&rs.next()){

user=new News_user();

String sqlname=rs.getString("username");

user.setUsername(sqlname);//从数据库取出来的值放进uesr对象里让他从String类型变成对象的属性

String sqlpass=rs.getString("password");

user.setPassword(sqlpass);

return user;

}

} catch (SQLException e) {

e.printStackTrace();

}

return null;

}

3 ----------

public class News_UesrDaoimpl extends BaseDao implements News_UserDao {

public News_user getUser(String username) {

News_user user=null;

String sql="SELECT username,`password` FROM news_user WHERE username=?";

Object[] params={username};

ResultSet rs=super.executeQuery(sql, params);

try {

if(rs!=null&&rs.next()){

user=new News_user();

String sqlname=rs.getString("username");

user.setUsername(sqlname);//从数据库取出来的值放进uesr对象里让他从String类型变成对象的属性

String sqlpass=rs.getString("password");

user.setPassword(sqlpass);

return user;

}

} catch (SQLException e) {

e.printStackTrace();

}

return null;

}

4--------------------

public interface UserService {

public boolean dologin(String username,String pass);

}

5-----------

public class UserServiceimpl implements UserService {

public boolean dologin(String username, String pass) {

boolean flag=false;

News_UserDao dao=new News_UesrDaoimpl();

News_user user=dao.getUser(username);

if(user.getPassword().equals(pass)){

flag=true;

}

return flag;

}

6------------jsp显示

//使用分层模式开发进行用户登录

//设置post的编码格式

request.setCharacterEncoding("utf-8");

//拿到用户输入的数据

String username = request.getParameter("uname");

String pass = request.getParameter("upassword");

UserService us=new UserServiceimpl();

boolean flag=us.dologin(username, pass);

if (flag) {

//保存用户的数据

session.setAttribute("Username", username);

//添加cookie让用户可以免登陆

//1 添加cookie对象

Cookie cookie = new Cookie("User", (username + "&" + pass));

//2 添加cookie的有效期

cookie.setMaxAge(10 * 24 * 3600);

//3 设置cookie的路径

cookie.setPath("/");

//4 添加在客户端

response.addCookie(cookie);

//通过重定向跳转到首页

response.sendRedirect("../index.jsp");

} else {

out.print("<script>alert('账号输入错误无法登陆');location.href='../index.jsp'</script>");

}

---------------------3月2号知识点-------------------------------------

<jsp:UserBean>

(1) jsp动作标签（一般放在一个公用的地方通过包含去调用）将页面的显示功能封装起来简洁页面易于维护

动态--返回html代码

javaBean标签创建：（一般放在一个公用的地方通过包含去调用）

<jsp:UserBean id="us" class="com.kgc.news.service.imp.NewsServiceImpl" scope="page">

<jsp:UserBean id="newsDao" class="com.kgc.news.service.imp.newsDaoImpl" scope="page">

=====等同于：

UserService us=new UserServiceimpl();

newsDao newsDao=new newsDao();

pageContext.setattribute("UserService","UserService");

pageContext.setattribute("newsDao","newsDao");

id:javabean的名称可以与java类相同

class：javaBean名称所引用或者指向的javaBean类的完整定义

scope 是作用范围与有效期 requset session application page（默认值）

设置javabean属性<jsp:setProperty> 获取设置javabean属性<jsp:getProperty> 获取

(2)jsp页面包含

1 <%@include%>指令实现静态包含就是将另一个文件中的代码复制到一个jsp中文件将会被执行

格式<%@include file="url"%> 列如<%@include file="common/common.jsp"%>

将common下的common。jsp文件包含在当前页面

2<jsp:include>标签实现动态包含页面先执行被包含的页面代码然后再将结果包含到当前页面中

< page="Url"> page表示包含的页面路径

(3)jsp页面跳转

<jsp:forword>====转发 request.getrequestdispatcher("url").forword(request,response)

列如 <jsp:forword page="url">

--------------代码编写中的问题

(1)---<a href="pages/newsDetail.jsp?newsid=<%=news.getId() %>">

点击链接过去？想要拿到id必须设置这样设置超链接让用户点击的新闻id=数据库中的id 这样就可以通过id拿到新闻了

(2)Date date = new Date();代表获得今天的时间

String time = new SimpleDateFormat("yyyy-MM-dd").format(nd.getCreateDate());)

//格式化一个date类型的变成String类型显示出来

-----------代码练习实现用户注册-------------------------------

--------第一个方法 BaseDao里面的代码

/**

* 增删改操作数据库的数据都是用这个方法

* @param sql

* @param params

* @return

public int executeUpdate(String sql,Object[] params){

int rows=-1;

if(this.getConnection2()){//因为获得连接是true所以先判断是否获得连接才可以执行sql查询

try {

smt=connection.prepareStatement(sql);//获得查询对象

if(params!=null){

for (int i = 0; i < params.length; i++) {

smt.setObject(i+1, params[i]);//下标是从1开始的所以要i+1位置放参数

}

rows=smt.executeUpdate();

} catch (SQLException e) {

rows=-1;

e.printStackTrace();

}

return rows;

}

-----------第二个方法 News_userdao接口里的方法

//根据用户给的参数注册用户

public int savaUser(News_user user);

------------第三个方法 News_userdaoimp里面的方法

public int savaUser(News_user user) {

String sql="INSERT INTO news_user(username,`password`,email,userType)VALUES(?,?,?,?)";

Object[] params={user.getUsername(),user.getPassword(),user.getEmail(),1};

return super.executeUpdate(sql, params);

}

------------第4个方法 user_Service接口里的方法

public boolean register(News_user user);

---------------第5个方法 UserServiceimpl类的方法

/**

* 注册插入到数据库一条看行数有影响则插入成功

public boolean register(News_user user) {

if(dao.savaUser(user)==1){

return true;

}

return false;

}

------------------jsp里面的代码

//解决请求中文乱码格式

request.setCharacterEncoding("utf-8");

String name = request.getParameter("userName");

String userPass = request.getParameter("userPass");

String email = request.getParameter("email");

News_user user=new News_user(name,userPass,email);

UserService us=new UserServiceimpl();

if(us.register(user)){

out.print("<script>alert('注册成功');location.herf='../index.jsp'</script>");

}else{

out.print("<script>alert('注册失败');history.back();</script>");

}

思路

注册就是相当在数据库添加（insert into）一个用户 basedao进行连接调用增加方法会有一行的影响在News_userdaoimp 把注册的数据封装在对象里

sql语句的查询参数就是用户给的然后在service里面进行判断是否有影响的行数

----------------代码练习实现查看新闻详情类

--------第一个方法 BaseDao里面的代码

使用查询方法

-----------第二个方法 NewsDao接口里的方法

//通过新闻id查看新闻详情

public NewsDetail getNewsById(int id);

------------第三个方法 NewsDaoImpl里面的方法

//这个方法返回的肯定是NewsDetail的类里面所有的内容也就是在页面要显示的包含newsdetail类的属性包括作者啊标题啊等等

public NewsDetail getNewsById(int id) {

NewsDetail newd=null;

try {

StringBuffer sb=new StringBuffer();//此处使用StringBuffer类

sb.append(" SELECT title,author,`name`,d.createDate,summary,content FROM news_detail d ");

sb.append(" INNER JOIN news_category c ");

sb.append(" ON d.categoryId=c.id ");

sb.append(" WHERE d.id=?");

Object[] parpams={id};

ResultSet rs=super.executeQuery(sb.toString(), parpams);

if(rs!=null && rs.next()){

newd=new NewsDetail();

newd.setTitle(rs.getString("title"));

newd.setAuthor(rs.getString("author"));

newd.setName(rs.getString("name"));

newd.setCreateDate(rs.getTimestamp("createDate"));//date类型转换为时间戳类型 timestamp

newd.setSummary(rs.getString("summary"));

newd.setContent(rs.getString("content"));

}

} catch (SQLException e) {

e.printStackTrace();

}

return newd;

}

------------第4个方法 NewsService接口里的方法

/**

* 显示新闻详情

public NewsDetail showNewsById(int id);

---------------第5个方法 UserServiceimpl类的方法

public NewsDetail showNewsById(int id) {

return newsDao.getNewsById(id);

}

------------------jsp里面的代码

String id=request.getParameter("newsid");//从超链接a中取得用户点击新闻的id

NewsService ns=new NewsServiceImpl();

Integer it=new Integer(id);//---------------一定要String转换成int类型

NewsDetail nd=ns.showNewsById(it);

String title=nd.getTitle();

String author=nd.getAuthor();

String name=nd.getName();

String summary=nd.getSummary();

String content=nd.getContent();

<%-- <%String title = "课工场\"Java Web\"高能充电";%> --%>

<%-- <%String author = "小K童鞋";%> --%>

发布者：<%=author%> 分类：<%=name %> 更新时间：

//Date date = new Date();代表获得今天的时间

String time = new SimpleDateFormat("yyyy-MM-dd").format(nd.getCreateDate());

<%=time %>

-----------------------3月2号知识点第三个组件（文件上传和文件编辑内容）和分页

1 使用之前要在lib里面导入2个架包jar commons-fileupload-1.2.2 和commons-io-2.4.jar

表单中(1) 必须有属性 enctype="multipart/form-data" 表示多表单提交二进制格式（有file）

(2) 提交方式必须是post

加上enctype="multipart/form-date之前的String id=request.getParameter("categoryId");不可以用了

--------------------3月5号知识点---ckeditor在线文本编辑器--------分页

插入一条新闻带有图片的让他显示出来用 <img src="uploap/<%=picpath %>">

1 ckeditor的使用：

（1）下载下来资源包直接粘贴在webRoot下面就行了；

（2）<script type="text/javascript" src="<%=request.getContextPath() %>/ckeditor/ckeditor.js"></script>

（3）<textarea class="ckeditor"></textarea> 在多行文本域添加一个属性

3：测试框架的使用

（1）不能实现jndi连接技术测试

（2）导入项目右键点击buildpath --addlib添加junit4 类库

（3）建一个资源文件建类测试方法必须没有返回值导入@test （org.junit.Test）

（4）run的时候点击junit Test进行测试不需要main方法

2 分页的使用：

--------- -----代码1 newsdao -------------------实现效果分页显示新闻

//分页显示所有新闻 from 偏移量 pagesize每页的数据

public List<NewsDetail> getNewslist(int from,int pagesize);

//拿到新闻总个数

public int getNewsCount();

--------- -----代码2 newsdaoimp

public List<NewsDetail> getNewslist(int from, int pagesize) {

List<NewsDetail> list=new ArrayList<NewsDetail>();

try {

StringBuffer sb=new StringBuffer();

sb.append(" SELECT id,title,author,createdate FROM news_detail d ");

sb.append(" ORDER BY d.createdate DESC ");

sb.append(" LIMIT ?,? ");

Object[] parpams={from,pagesize};

ResultSet rs=super.executeQuery(sb.toString(), parpams);

while(rs!=null && rs.next()){

NewsDetail newd=new NewsDetail();

newd.setTitle(rs.getString("title"));

newd.setAuthor(rs.getString("author"));

newd.setId(rs.getInt("id"));

newd.setCreateDate(rs.getTimestamp("createDate"));//date类型转换为时间戳类型 timestamp

list.add(newd);

}

} catch (SQLException e) {

e.printStackTrace();

}

return list;

}

//得到新闻总条数

public int getNewsCount() {

int count=0;//代表行数

String sql=" SELECT COUNT(1) FROM news_detail ";

try {

ResultSet rs=super.executeQuery(sql, null);

if(rs.next()&&rs!=null){

count=rs.getInt(1);//此处1 代表整个列名

}

} catch (SQLException e) {

e.printStackTrace();

}

return count;

}

-------得到count（1） == rs.getint(1)

------------------------代码3 newservice

/**

* 拿到新闻总条数

public int getNewsCount();

/**

* 分页显示数据

* @param currentPageNo 页码

* @param pageSize 每页显示的个数

* @return

public List<NewsDetail> getNewsList(int currentPageNo,int pageSize);

//得到总页数

public int getTotalPage(int pageSize);

---------------代码4 serviceimp里面的代码

public int getNewsCount() {

return newsDao.getNewsCount();

}

public List<NewsDetail> getNewsList(int currentPageNo, int pageSize) {

int from=(currentPageNo-1)*pageSize;//偏移量 =当前页-1*显示的数量

return newsDao.getNewslist(from, pageSize);

}

//得到新闻总页数

public int getTotalPage(int pageSize) {

int count=this.getNewsCount();//拿到新闻总数量

int temp=count/pageSize;

return count%pageSize==0 ? temp:temp+1;

}

-------------------------jsp表示层

NewsService ns = new NewsServiceImpl();

int currentpageNo = 1; //当前在那一页

String pageindex = request.getParameter("pageindex");

if (StringUtil.isNullOrEmpty(pageindex)) {

currentpageNo = Integer.parseInt(pageindex);

}

int pageSize = 5; //每页显示的新闻条数

int totalpage = ns.getTotalPage(pageSize);

if (currentpageNo < 1) {

currentpageNo = 1;

} else if (currentpageNo > totalpage) {

currentpageNo = totalpage;

}

List<NewsDetail> list = ns.getNewsList(currentpageNo, pageSize);

for (NewsDetail news : list) {

<a href="javascript:if(confirm('确认是否删除此新闻？')) location='<%=request.getContextPath() %>/servlet/DeleteServlet?id=<%=news.getId() %>'">

删除</a>

</td>

</tr>

<%} %>

</tbody>

</table>

公有<%=totalpage %>页 <%=currentpageNo %>/<%=totalpage %>

跳转到：

</p>

----------------------3月7号知识点 EL表达式和JSTL jsp的标准标签库（实现页面中的逻辑控制）

内置对象不需要指定作用域

---el的使用------------------

1 必须有作用域

2 el表达式 ${el 表达式}

el操作符 "."

获取对象的属性 ${news.title}

操作符[]

获取对象的属性 ${news["title"]}

获取集合中的对象 newsList[0]

列如：

取String

String name="hello";

request.setAttribute("NAME", name);

取对象

News_user user=new News_user("张三","0","0");

session.setAttribute("USER", user);

<h1>${USER.username} 等于 ${USER["username"] } ${USER.password} ${USER.email} </h1>

取集合

List<News_user> list=new ArrayList<News_user>();

list.add(user);

list.add(user2);

application.setAttribute("USER_LIST", list);

<h1>${USER_LIST[0].username } </h1>用[]访问数组和集合

3 el表达式在携带数据跳转页面的时候作用域不同携带的数据也会不同

（1）注意如果使用重定向跳转另一个页面作用域是session application可以取得数据因为会携带数据的传递俩个页面

（2）如果使用转发跳转另一个页面数据都可以取到

---------如何使用el来获取参数的值-----------

param 表示一个保存了所有请求参数的Map对象

paramValues 表示一个保存了所有请求参数的Map对象，它对于某个请求参数，返回的是一个string[]

列如：

<h1>${pageContext.request.contextPath } </h1>

<h1>${param.id } 取得带有参数url的id值 </h1>

<h1>${param.type } 取得带有参数url的type值 </h1>

<h1>${paramValues["type"][0] } 模拟数据取值 </h1>

<h1>${paramValues.type[1] } 模拟数据取值 </h1>

4 EL表达式语言中定义了11个隐含对象，

使用这些隐含对象可以很方便地获取web开发中的一些常见对象，

并读取这些对象的数据。

语法：${隐式对象名称} ：获得对象的引用

pageScope 代表page域中用于保存属性的Map对象

requestScope 代表request域中用于保存属性的Map对象

sessionScope 代表session域中用于保存属性的Map对象

applicationScope 代表application域中用于保存属性的Map对象

param 表示一个保存了所有请求参数的Map对象

-------------------------jstl 标签的使用---------------

JSTL一共包含四大标签库：

core：核心标签库

fmt：格式化标签库

1 使用前下载jstl.jar和standard.jar包

将这两个包复制到WEB-INF\lib目录

http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/

在网页添加taglib指令导入标签库

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

uri是地址 prefix是前缀

2 标签set out remove-------已经定制作用域不用设置作用域

(1) <c:set var="name" value="张三"></c:set>

<c:out value="${name }"></c:out>

(2) <c:set var="script" value="<script> alert('hello') </script>"></c:set>

<c:out value="${script}" escapeXml="false" ></c:out>

<c:remove var="name"/>

(3)set

set设置标签 var声明变量 value是变量的值此标签已经制定作用域pagcontext 不需要setattribute

(1) 设置变量

<c:set value="xx" var="xx" scope="page/request/session/application">

（2）设置对象

<c:set value="xx" target="aa" property="aa" >

value属性值 target 对象的名称 property 对象的属性名称

（4）out 标签

<c:out value="xx" defalut="aa" escapeXml="false|true">

out输出标签 escapeXml="false" 会把value里面的javascript当成脚本语言

escapeXml="true" 会把value里面的javascript当成普通语言解析

value 需要输出显示的

default 如果value=null 则显示默认设置的值

3 标签 if 和foreach循环标签

${empty 变量} 判断是否为null true 是空

<c:if test="${!empty USER }"> 代表不是null

<c:choose>

<c:when test="${USER.userType eq 1 }">

欢迎你：普通用户：${USER.username }<a href="util/loginout.jsp">注销</a>

</c:when>

<c:when test="${USER.userType eq 0 }">

欢迎你：管理员：${USER.username}<a href="util/loginout.jsp">注销</a>

</c:when>

</c:choose>

</c:if>

if语句是单分支==java的if（） choose是多分支if(){}else{}

（1）if标签

<c:if test="${!empty USER }"> test加上条件 var=“判断的结果” scope=“session” scope是作用域

</c:if>

（2）if-else标签

<c:choose>

<c:when test="${USER.userType eq 1 }">

</c:when>

</c:choose>

（3）foreach迭代器实现对集合的遍历

<c:foreach var="放的集合中元素的名称" items=“集合对象”varStatus=" 循环的状态信息如循环的索引" >

</c:foreach>

类似普通的增强for

List<News> list=new ArrayList();

for(News news:list){

}

----------------------代码练习-----------------------------------

<c:forEach var="news" items="${list }" varStatus="status">

<tr

<c:if test="${status.count%2==0 }">class="admin-list-td-h2"</c:if>>

<td><a href='newsDetailView.jsp?id=${news.id }'>${news.title

}</a></td>

<td>${news.author }</td>

<td>${news.createDate }</td>

href="javascript:if(confirm('确认是否删除此新闻？')) location='<%=request.getContextPath()%>/jsp/admin/adminNewsDel.jsp?id=${news.id }'">

删除</a>

</td>

</tr>

</c:forEach>

4 标签

（1）${empty 变量} 判断是否为null true 是空

（2）

关系运算符列如

==或者eq ${5==5}或者${5eq5}

!=或者ne ${5！=5}或者${5ne5}

<或者lt ${3,<5}或者${3lt5}

>或者gt ${3<5}${3gt5}

<=或者le ${3<=5}${3le5}

>=或者ge ${3>=5}或者${3ge5}

--------------代码练习

String id=request.getParameter("newsid");//从超链接a中取得用户点击新闻的id

NewsService ns=new NewsServiceImpl();

Integer it=new Integer(id);//---------------一定要String转换成int类型

NewsDetail news=ns.showNewsById(it);

request.setAttribute("news", news);

<%-- <%String title = "课工场\"Java Web\"高能充电";%> --%>

<h1>${news.title }</h1>

<%-- <%String author = "小K童鞋";%> --%>

发布者：${news.author} 分类：${news.name} 更新时间：${news.createDate }

--------------------------------

5 jstl标签格式化日期显示

使用前导入指令

<%@ taglib uri= "http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<fmt:formateDate value="date" pattern="yyyy-MM-dd " />

value= 时间对象 pattern= 显示格式

<fmt:formatDate value="${news.createDate }" pattern="yyyy年MM月dd日 HH:mm:ss" />

-----------------------------------3月8号知识点

（1）容易出错点

String id=request.getParameter("id");

通过拿input的name属性获得value值也就是用户输入的数值

String id=request.getParameter("id");

通过拿input的name属性获得value值也就是用户输入的数值

（2）隐藏域hidden的使用也可以拿到用户传递过的参数值

（1）在表单中添加一个<input name="ss" type="hidden" value="${param.id }" />

（2）就可以向拿普通input标签一样获取hidden里面的数据了

String name=fileitem.getfilename()如果name=ss 那么 String id=fileitem.getString("utf-8"); 从而得到id

（3）代码练习

<c:if test="${!empty news.picpath}">

</td>

</c:if>

<c:if test="${empty news.picpath}">

<td style="text-align:right;" class="text_tabledetail2">上传图片

</td>

<td style="text-align:left;"><input type="file"

name="picPath" value="" /></td>

</c:if>

----------------------------------------3月9号知识点--------- servlet（让jsp只负责显示自己做接受请求处理请求的工作）

1 MVC 一种开发设计架构（model view controller）

客户端发请求----servlet(controller控制器) ----java bean（业务逻辑数据访问）---数据库服务器----java bean（业务逻辑数据访问）

---servlert----view视图---客户端

2 二者关系 jsp 和servlet---------------->面试题

servlet 是运行在服务器端的应用程序 jsp最终编译成servlet

3 servlet的部署三种映射方式

<servlet-name>Login</servlet-name>

<servlet-class>cn.kgc.news.controller.LoginServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>Login</servlet-name>

<url-pattern>/dologin</url-pattern>-------用户访问URL的路径

</servlet-mapping>

<servlet-mapping>

<servlet-name>Login</servlet-name>

<url-pattern>/lujing/admin/*</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>Login</servlet-name>

<url-pattern>*.do</url-pattern>

</servlet-mapping>

4 servlet的生命周期（面试题）--------------------

注意细节：（初始化一次过后当服务器关闭的时候初始化才会再次进行）

1 加载和实例化

2 初始化

3 处理请求

4 销毁

生命周期谁来做何时做

加载和实例化 Servlet 容器当Servlet容器启动或者容器检测到客户端请求时

初始化 Servlet 容器实例化后，容器调用Servlet的init()初始化对象

处理请求 Servlet 容器得到客户端请求并做出处理时

销毁 Servlet 容器当程序中的Servlet对象不再使用的时候或者Web服务器停止运行的时候

5 用户怎么把数据提交到servlet类里提交的地方怎么写？？

用户提交的数据路径就写servlet的web.xml里面添加的

url映射mapping---《《《《url-pattern里面的路径》》》》（分为精确的路径的扩展名匹配）

拿到pattern里面找到匹配的 servletname 从而找到对应的servlet类就可以使用它的方法

6 page指令后面加上contentType="text/html; charset=utf-8" 代表页面内容设置编码格式utf-8

response.setContentType("text/html; charset=UTF-8"); 处理页面显示的编码格式

7 在servlet里面是没有session对象的（它属于jsp的内置对象）想要在servlet类里面拿到session

： -----》requset.getsession();获取session对象

8 把用户user 要使用的servlet 全部放在一个servlet类里面不用写很多serclet类

user 要进行通过超连接表单提交到 servlet类的时候路径带有一个相同的参数

代码练习-----------

request.setCharacterEncoding("UTF-8");

String action=request.getParameter("action");

if(StringUtil.isNullOrEmpty(action)){

if("loginout".equals(action)){

//执行注销功能

this.loginOut(response);//把执行注销的步骤封装成一个私有化的方法 this去调用

}else if("add".equals(action)){

if(this.add(request)){

out.print("<script>alert('注册成功');location.href='index.jsp'</script>");

}else{

out.print("<acript>alert('注册失败');location.href='index.jsp'</script>");

}

}else{

out.print("<script>alert('接受到无效参数');history.back()</script>");

}

9 ------关于servlet映射的路径问题

类：location.href='jsp/admin/newsDetailList.jsp'

表单提交：<form name ="dataFrm" id="dataFrm" action="../../donews?action=update" method="post" enctype="multipart/form-data">

10 servlet重定向相相对路径对于项目名称news/servlet跳转绝对路径相对于8080跳要加news

转发绝对路径不加news -------/开头是绝对路径跳-----------

11 ？action= ?action=公用一个参数类里面判断antion 的值

12 servlet 路径问题

配置了映射的路径

localhost：8080/chinanews/donews

你自己配置的映射路径列如 /donews

（1）在jsp中怎么写

主要看地址栏例如我想要跳转到servlet 但是他在jsp/admin下面

所以 jsp中写== jsp/admin/donews

（2）在servlet怎么写

主要看地址栏列如我想要提交到admin.jsp

所以servlet中写== admin.jsp

13 sql语句中where 1=1 代表永久成立的条件代表用户没有给任何参数直接select 出来结果相当于没有条件

数据库设置PreparedStatement的参数时下标是从1开始的

----------------------3月12号知识点项目中的问题

（1）部署一个新的项目

先放在工作盘然后右键点击新闻最下面的properties 找到web 修改web contextroot 为项目名重新部署下就可以了

（2）下拉列表项代表被选中 selected="selected"

<c:forEach var="cate" items="${cateList}">

<option value="${cate.id }"

<c:if test="${categoryId eq cate.id}">

selected="selected"

</c:if>>${cate.name}

</option>

</c:forEach>

</select>

（3）包装类的默认值是 null 不是0；

（4）我想要使用totalpage 这个数但是在jsp中它是文字不是input框之类的

可以通过隐藏域的+el表达式的方式拿到它

（5）跳转

function jump_to(){

var regexp=/^[1-9]\d*$/;

var frm=document.forms[0]; //拿到第一个form表单

var totalPage = document.getElementById("totalpage").value;

var pageno=document.getElementById("inputPage").value;

if(!regexp.test(pageno)){

alert("请输入正确的数字！");

return false;

}else if((pageno-totalPage) > 0){

alert("总页码一共"+totalPage+"页，请输入正确的页码！");

return false;

}else{

frm.pageIndex.value=pageno; //把用户输入的值通过servlet提交给pageindex在dopost里面赋值给当前页

frm.submit();

}

（6）使用ajax实现局部刷新技术

1 可以先网页加载完成后执行一个ajax 判断有没有cookie 如果有cookie再根据用户类型判断要不要进入后台

没有的话使用ajax服务器传过去input框让用户登录

2 在servlet里面根据用户输入正确判断是否有没有进入后台的权限

在向客户端css/dom里面传入result

---------------------------------------3月13号监听器和过滤器---------------------------

1 过滤器（用于拦截传入的请求和传出的响应）

（一般使用session作为作用域）用法和servlet基本一样但是url-pattern 指的是过滤谁

（1）使用过滤器的类实现filter接口（位于javax.servlet.Filter）

（2）部署过滤器和servlet一样

（3）重写dofilter（）方法必须写上 chain.dofiletr（req，res）调用下一个过滤器或者web资源

（4）生命周期实力化-初始化-处理过滤-销毁

2 cookie存数据不可以存中文解决方法：

public static String encoder(String str){

String result=null;

//URLEncoder 编码

//URLDecoder 解码

try {

result=URLEncoder.encode(str,"utf-8");

} catch (UnsupportedEncodingException e) {

result=null;

}

return result;

}

public static String decoder(String str){

String result=null;

//URLEncoder 编码

//URLDecoder 解码

try {

result=URLDecoder.decode(str, "UTF-8");

} catch (UnsupportedEncodingException e) {

result=null;

}

return result;

}

3 在web.xml里面存取初始化参数可以在类里面用

把配好的参数作为类里面的一个属性 ----------------解决中文乱码问题的filter类

列如： web.xml中的参数

<init-param>

<param-name>encoding</param-name>

<param-value>UTF-8</param-value>

</init-param>

public class CharEncodingFilter implements Filter{

public String encoding="UTF-8";//防止用户在web.xml忘记配置初始化参数

public void destroy() {

System.out.println("执行销毁功能");

}

public void doFilter(ServletRequest req, ServletResponse rsp,

FilterChain chain) throws IOException, ServletException {

System.out.println("执行过滤功能");

//处理用户post请求

req.setCharacterEncoding(encoding);//xml里面配置了参数所有可以拿来直接用

chain.doFilter(req,rsp);//调用下一个过滤器或者下一个web资源

}

public void init(FilterConfig config) throws ServletException {

//接受web.xml的初始化参数

encoding=config.getInitParameter("encoding");

System.out.println("执行初始化"+encoding);

}

问题：

此类中使用的是ServletRequest接口的requset 是没有request.getparam()方法的所以使用的话要强制转换

5 监听器

是Web应用程序事件模型的一部分 Web应用中的某些状态发生改变时会产生相应的事件监听器可以接收这些事件，以便在事件发生时做出相关处理

总结为：

监听ServletContext、HttpSession、ServletRequest三个域对象及域对象中的属性引发的事件

8个监听器

1 javax.servlet. ServletContextListener（在Servlet上下文对象初始化或销毁时得到通知）

2 javax.servlet. ServletContextAttributeListener（在Servlet上下文中的属性列表发生变化时得到通知）

3 javax.servlet.http. HttpSessionListener（在session创建后或者失效前得到通知）

4 javax.servlet.http. HttpSessionActivationListener （绑定到session中，当session被钝化或者激活时得到通知）

5 javax.servlet.http. HttpSessionAttributeListener（在session中的属性列表发生变化时得到通知）

6 javax.servlet.http. HttpSessionBindingListener （在绑定session或从session中删除时会得到通知）

7 javax.servlet. ServletRequestListener （在请求对象初始化时或者被销毁时得到通知）

8 javax.servlet. ServletRequestAttributeListener （在请求对象中的属性列表发生变化时得到通知）

分为3类

第一类其中第6称为感知性监听器（无须在web.xml文件中进行声明）

其实例可感知自己与session作用域绑定和解绑的事件

第二类监听域对象中属性的增加、删除、替换事件的监听器（需要在web.xml中进行声明）

第三类监听域对象的创建和销毁事件的监听器（需要在Web应用程序的部署描述符（web.xml）中进行声明）

6 泛型方法（声明的话一定要写在static后面返回值类型前）

7 session 钝化与活化

session钝化就是把内存中的session对象序列化到存储设备中

活化就是通过反序列化将session对象从存储设备上进行恢复

实现了java.io.Serializable接口的JavaBean才能被钝化存储

8HttpSessionBindingListener

谁用谁实现它user---imp----HttpSessionBindingListener 就行了重写方法

HttpSessionListener需要去创建一个类

Uselistener ----impl----HttpSessionListener

------------------------------------------3月14号 ----------- AJax-(面试也叫XmlHttpRequest)----------非常重要----------------------

1 使用之前要导入webroot里面 js---jquery-1.12.4.min.js

异步刷新技术不是一种新的编程语言只刷新局部不刷新全部（存在客户端）(Asynchronous Javascript And XML)

2 调试谷歌 -----f12 ----network

3 ajax的get提交数据 post提交数据的使用和区别

4 jquery方法里面有参数时逗号隔开

5 ---------------------使用javascript实现ajax---------------

（0）创造一个XMLHttpRequest对象函数

function createXmlHttpRequest() {

if (window.XMLHttpRequest) {

// 返回值为true时说明是新版本IE或其他浏览器

return new XMLHttpRequest();

} else {

// 返回值为false时说明是老版本IE浏览器（IE5和IE6）

return new ActiveXObject("Microsoft.XMLHTTP");

}

（1）创建XMLHttpRequest对象 //调用ajax函数里面的函数

var xmlHttpRequest=createXmlHttpRequest();

（2）设置回调函数

xmlHttpRequest.onreadystatechange = callBack;

（3）初始化XmlHttpRequest组件 url type data 创建一个新的HTTP请求

var url="userServlet";(可以加参数)

xmlHttpRequest.open("GET",url,true); （true代表异步fasle代表同步）

（4）发送请求

xmlHttpRequest.send(null);

（5）创建回调函 function callBack(){

if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){

// 修改DOM元素或改变CSS样式

document.getElementById("msg").innerHTML=xmlHttpRequest.responseText;

}

6------------------ 如果post方式必须加request头

function validate() {

var name = $("#userName").val();

if (name == null || name == "") {

$("#nameDiv").html("用户名不能为空！");

} else {

// 1.创建XMLHttpRequest对象

var xmlHttpRequest = createXmlHttpRequest();

// 2.设置回调函数

xmlHttpRequest.onreadystatechange = callBack;

var url = "userServlet";（post不能在这加参数）

// 3.初始化XMLHttpRequest组件

xmlHttpRequest.open("POST", url, true);

//请求头

xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// 4.发送请求

var data = "name=" + name;

xmlHttpRequest.send(data);

function callBack() {

if (xmlHttpRequest.readyState == 4

&& xmlHttpRequest.status == 200) {

var data = xmlHttpRequest.responseText; //以文本形式获得响应的内容

if (data == "true") {

$("#nameDiv").html("用户名已被使用！");

} else {

$("#nameDiv").html("用户名可以使用！");

}

6--------------------使用jquery实现ajax异步刷新技术---------------------小框架------------经常用到

function validate(){

var name=$("#userName").val();

if (name == null || name == "") {

$("#nameDiv").html("用户名不能为空！");

} else {

$.ajax({ 注意逗号隔开

type:"POST", 发送请求的方式

url:"userServlet", 要提交的URL路径

date: "name="+name, ------------- 发送到服务器的数据

dataType" : "text",

success:function(result){----------------

请求成功后调用的函数参数result：可选，由服务器返回的数据

if (result == "true") {

$("#nameDiv").html("用户名已被使用！");

} else {

$("#nameDiv").html("用户名可以使用！");

}

});

}

--------服务器端

String name=request.getParameter("name");

if("admin".equals(name)){

out.print(true);

}else{

out.print(false);

}

-------result是任意类型

-------------------------3月15号知识点 ajax里面的post提交或者get提交或者getjson -------json就是取代xml------------------

1 ajax格式

（1）

$.ajax( {

"url" : "url", // 要提交的URL路径

"type" : "get", // 发送请求的方式

"data" : data, // 要发送到服务器的数据

"dataType" : "text", // 指定传输的数据格式

"success" : function(result) { // 请求成功后要执行的代码

"error" : function() { // 请求失败后要执行的代码

}

} );

（2）get

$.get("userServlet",{"name":userName},function(data){

if (data == "true") {

$("#nameDiv").html("用户名已被使用！");

} else {

$("#nameDiv").html("用户名可以使用！");

}

} ,"+类型json/xml/text");

( 3 )post

$.post("userServlet",{"name":userName},function(data){

if (data == "true") {

$("#nameDiv").html("用户名已被使用！");

} else {

$("#nameDiv").html("用户名可以使用！");

}

} ,"+类型json/xml");

2 -----------------------------------JSON---------------------------对应的ajax格式 $.getjson

（1）一种轻量级的数据交换格式

采用独立于语言的文本格式(Java script)

通常用于在客户端和服务器之间传递数据

（2）

优点轻量级交互语言结构简单易于解析

（3）JSON格式的对象（使用{ } 里面存的是键值对）前面的属性必须加“”属性值为int可以不加“”

var JSON对象 = { "name" : value, "name" : value, …… };

（4）JSON格式的对象数组（使用[ ]）

var JSON数组 = [ value, value, …… ];

var personArray = [ { "name":"张三", "age":30 },

{ "name":"李四", "age":40 } ];

（5） ------js小脚本中

$(function(){

这个是网页完成加载的时候注意要看包含关系如果没有把代码写进去可能会出现错误

})

（6）json对象数组的使用

$(function(){

var user={"name":"张三","sex":"男","age":20}

$("#id").html("我叫"+user.name+",性别:"+user.sex+",今年"+user.age);

var userarray=[{"name":"张三","sex":"男","age":20},

{"name":"张三","sex":"男","age":20},

{"name":"张三","sex":"男","age":20}]

$(userarray).each(function(i){-------------此处也可以不加i 直接使用this

$("#table").append("<tr><td>"+userarray[i].name+"</td><td>"

+userarray[i].sex+"</td><td>"+userarray[i].age+"</td></tr>");

})

（6）处理StringBuffer字符串不想要最后一个字符俩个方法

sb.deleteCharAt(sb.length()-1);

sb.replace(sb.length()-1,sb.length(), " ");

（7）由服务器向客户端发送json格式的字符串时可以使用阿里巴巴的fastjson-1.2.13.jar 架包简化字符串--json来回的转换

列如java类----json

List<Uesr>list=new ArrayList<Uesr>();

list.add(new Uesr(1,"张1","男"));

list.add(new Uesr(2,"张2","女"));

list.add(new Uesr(3,"张3","男"));

out.print(JSON.toJSONString(list));--------------》用这个方法就可以了

等价的========= 或者 out.print(JSON.toJSONString(list));

--------js中

$(function(){

$("#input").click(function(){

$.getJSON("douser",function(list){

$(list).each(function(){---------注意把返回结果写上

$("#table").append(

"<tr><td>" + this.id + "</td><td>" + this.name

+ "</td><td>" + this.sex

+ "</td></tr>");

})

(8) status：HTTP的状态码

状态码说明

200 服务器正确返回响应

404 请求的资源不存在

500 服务器内部错误

403 没有访问权限

就绪状态是4且状态码是200，表示正确完成

var userarray = $.parseJSON(result);//把从服务器端接受到的字符串转换成json格式

（9）Uncaught Error: Syntax error, unrecognized expression: ajax语法错误

--------------------------代码练习：ajax的格式

列如

function validate(){

var name=$("#userName").val();

if (name == null || name == "") {

$("#nameDiv").html("用户名不能为空！");

} else {

$.ajax({

type:"POST",

url:"userServlet",

date: "name="+name,

success:function(result){

if (result == "true") {

$("#nameDiv").html("用户名已被使用！");

} else {

$("#nameDiv").html("用户名可以使用！");

}

});

}

---------------ajax格式2

$(function(){

$("#input").click(function(){

$.ajax({

type:"GET",

url:"douser",

dataType:"JSON",-----------------此处翻过错误

success:function(result){

$(result).each(function(){--------------------此处翻过错误

$("#table").append(

"<tr><td>" + this.id + "</td><td>" + this.name

+ "</td><td>" + this.sex

+ "</td></tr>");

})

}

})

-----------------------------3月16号知识点 --------------------（验证码） ----md5加密-----用户输错网址

（1）项目开发完成以后可以加错误页面

（2）提交表单的同时执行一个函数的方法

1 用button按钮后面加一个 οnclick= 最后在函数后面加上 form.submit();

2 使用失去焦点 οnblur= 调用ajax这个函数直接在表单提交之前进行函数的使用

3 在form上面加一个属性 οnsubmit=函数

（3）注册加验证码出现的问题

在注册时候如果使用ajax 那么ajax的参数一定要写全

（4）使用md5给用户密码加密（扩展pmd5可以解密）

要注意在用户注册的时候要把密码加密在用户登录的时候在次加密才能保证数据库提取出来的密码一样

------------3月20号知识点

讲解了svn的使用服务器客户端

------------3月21号知识点 servlet3.0的使用步骤-----------------------------------------

1 必须配合java ee 6.0使用

2 创建一个类继承HttpServlet 调用他的doget dopost方法

在创建的类上面加上注解

@WebServlet(urlPatterns = { "/donews" }, name = "NewsServlet")

3 如果想在一个servlet里面使用多个处理请求的servlet(注册啦或者登陆啦)

donews?action=toregister

package cn.news.web.controller;

import java.io.IOException;

import java.lang.reflect.Method;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import cn.news.web.util.EmptyUtils;

import cn.news.web.util.PrintUtil;

import cn.news.web.util.ReturnResult;

public abstract class AbstractServlet extends HttpServlet {

private static final long serialVersionUID = -9091634310610279325L;

public abstract Class<?> getServletClass();

@Override

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

@Override

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

String actionIndicator = request.getParameter("action");

Method method = null;

Object result = null;

try {

if (EmptyUtils.isEmpty(actionIndicator)) {

result = this.execute(request, response);

} else {

method = this.getServletClass().getDeclaredMethod(

actionIndicator, HttpServletRequest.class,

HttpServletResponse.class);

result = method.invoke(this, request, response);

}

toView(result, request, response);

} catch (NoSuchMethodException e) {

String viewName = "404.jsp";

request.getRequestDispatcher(viewName).forward(request, response);

} catch (Exception e) {

if (!EmptyUtils.isEmpty(result)) {

if (result instanceof String) {

String viewName = "500.jsp";

request.getRequestDispatcher(viewName).forward(request,

response);

} else {

ReturnResult returnResult=new ReturnResult();

returnResult.returnFail("系统错误");

PrintUtil.write(request, response);

}

}else{

String viewName = "500.jsp";

request.getRequestDispatcher(viewName).forward(request,

response);

}

protected void toView(Object result, HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

if (!EmptyUtils.isEmpty(result)) {

if (result instanceof String) {

String viewName = result.toString() + ".jsp";

request.getRequestDispatcher(viewName).forward(request,

response);

} else {

PrintUtil.write(request, response);

}

public Object execute(HttpServletRequest request,

HttpServletResponse response) {

return "index";

}

------------------------项目中出现的问题

1 定义一个带有返回值的方法 if分支(里面的return和在方法最后面的return是不一样的) 放在最后return user是走的else分支

2 获得数据库连接要mysql驱动架包

3 欢迎页不带.jsp后缀的设置

4 注意查看项目结构

5<jsp:forward page="${pageContext.request.contextPath }/myServlet" />

在web.xml中能设置首页,把这个首页直接设置成你想进行的servlet,

然后就会在打开首页的时候,先走这个servlet的处理,才会进入处理指向的"首页

6 <radio name="r" value="1"/>

----------servlet中

String r = request.getParameter("r");//r的值为3

---------jq中

var radio=$("input[name='radiobutton']:checked").val();

7 js和jq中比较字符串是否相等没有equals只有==

8 $(this).find("div").show(); 注意show后面有括号

js中 innerhtml= 是等于这样赋值

jq 中是val（） html( )这样拿值赋值带有小括号

onclick是js的 click是jq的

jq的text()方法可以拿到单元格里面的内容（String类型的）可以parseInt（）转化为int类型

9 在cof里面可以修改tomcat的端口号

10 配置jdk windo--pre--java--jre--找到你下载的jdk然后--comp-勾选1.7版本

11 配置tomcat myecli---service---找到tomcat 勾选1.7

12 jsp--中可以更改jsp中的网页编码格式

13 动态sql语句价格区间

SELECT id,`name`,price,pnum,category FROM products

WHERE 1=1

AND id='3cdd01d2-95d4-4077-b512-ff4c3b340d6b'

AND category='文学'

AND `name` LIKE '%学%'-----------------------------注意单引号是把俩个%都括起来的

AND price BETWEEN 20 AND 25

14 客户端请求新页面

超链接超链接+js submit提交使用js提交表单

拿数据的话可以地址栏 getparamter 或者隐藏域或者js 连接带有参数

15 表单提交第一次可以用第二次不可以用加个绝对路径加个base

16表单的提交可以js完成

function tiao(){

var regexp=/^[1-9][0-9]*$/;

var jumppage=document.getElementById("tiaozhuan").value;

var zongye=document.getElementById("zongye").value;

if(!regexp.test(jumppage)){

alert("你输入的不是数字");

return false;

}else if(jumppage>zongye){

alert("输入的页数大于总页数");

return false;

}else{

document.getElementById("pageindex").value=jumppage;

document.getElementById("Form1").submit();

17 servlet的映射路径前面不加斜杠 / 加的话代表绝对路径 }

18 在修改图书时候怎么样让下拉列表项的值自动定位到修改的图书的类型

//设置类别的默认值

function setProductCategory() {

var hidden=document.getElementById("hidden").value;

var category = document.getElementById("category");

var ops = category.options;

for ( var i = 0; i < ops.length; i++) {

if (ops[i].value ==hidden ) {

ops[i].selected = true;

return;

}

};

window.onload = setProductCategory;

</script>

可

以使用hidden 把要修改的图书的值放进hidden 然后读取出来在通过js for 循环遍历出每个option 是否和修改图书的一样一样的话让其显示select

19 java.lang.reflect.InvocationTargetException。反射异常

1、包冲突、有重复包或者缺少包

　　2、项目jdk和部署jdk版本不一样，导致InvocationTargetException异常信息返回一个空值，没有调用invoc里的重写消息方法。

　　3、映射文件发生改变

4，合并的时候要注意与别人写的servlet映射名字是否一样

20 配置文件在读取时注意K-V k的名字不要写错

21 <script type="text/javascript">

function add() {

var s = document.getElementById("s");

var array = [ "审核中", "已申报", "已审核" ];

//var id=document.getElementById("h");

var id="已申报";

for(var i=0;i<array.length; i++ ){

s.add(new Option(array[i], array[i]), null);

}

var op=s.options;

for(var i=0;i<op.length; i++ ){

if(id==op[i].value){

op[i].selected = true;

}

window.onload = add;

</script>

22 在数据库连接中获得字节输入流

InputStream is=BaseDao.class.getClassLoader().getResourceAsStream(configFile);

23 select b.*,p.proName as providerName from smbms_bill b, smbms_provider p where b.providerId = p.id

24 题目要求的是对象数组可以先用集合写最后Object[] params = list.toArray();转换成对象数组就行了

25 用户登录失败我可以不使用弹框提示我可以把错误信息放在request请求中通过转发我在jsp中在div中显示出来

26 <td>

<c:forEach items="${list}" var="stateList" varStatus="status">

<c:if test="${stateList.id == project.stateId}">

<option value="${stateList.id}" selected="selected" >${stateList.name }</option>

</c:if>

<c:if test="${stateList.id != project.stateId}">

<option value="${stateList.id}" >${stateList.name}</option>

</c:if>

</c:forEach>

</select>

</td>

26 <span>

<c:if test="${user.gender==1}">男</c:if>

<c:if test="${user.gender==2}">女</c:if>

</span>

转载于:https://www.cnblogs.com/niweiniwei/p/8994245.html

你可能感兴趣的文章

文字过长用 ... 表示 CSS实现单行、多行文本溢出显示省略号

查看>>

1Caesar加密

查看>>

【TP SRM 703 div2 500】 GCDGraph

查看>>

MapReduce 重要组件——Recordreader组件 [转]

MediaWiki左侧导航栏通过特殊页面就可以设置。

查看>>

揭秘：黑客必备的Kali Linux是什么，有哪些弊端？

查看>>

linux系统的远程控制方法——学神IT教育

查看>>

springboot+mybatis报错Invalid bound statement (not found)

查看>>

Linux环境下SolrCloud集群环境搭建关键步骤

查看>>

P3565 [POI2014]HOT-Hotels