JavaWeb項目筆記包括jsp的用法selevt,HTML5

時間 2019-11-17

標籤 javaweb 項目筆記包括 jsp 用法 selevt html5 html 欄目 Java 简体版

原文原文鏈接

-------------------《認識HTML5》-----------------javascript

1 <>生成的快捷鍵是table鍵 ctrl+D是直接複製一行css

2 <h1>-<h6> 標題字體由大到小
<p> 段落
<br> 換行標籤
<hr> 水平線標籤
<em> 斜體
<strong> 字體加粗
../ 返回上一級目錄
> 大於號
< 小於號
  空格
" 引號「」
© 版權符號html

3----------加圖片
<img src="images\\猴子.png" alt="添加的第一張照片"/ width是寬度 height是高度 >
src是相對路徑絕對路徑 alt 文字代替圖片 title 鼠標放在圖片上會顯示文字 java

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 錨連接
跳轉到同一頁面的固定位置上來
超連接部分
<a href="#login">1登陸</a>
<a href="#res">2註冊</a>
要跳轉的部分
<a name="login"></a>
<a name="res"></a>
跳轉到不一樣頁面的固定位置上來
1 html
<a href="2 html#me">點擊這裏</a>
2 html
<a name="me">1調到2這裏來</a>
3 功能性的超連接如qq 或者郵箱node

若是每一個switch塊裏對應的字符不一樣能夠在外面設置一個統一的
用戶選擇某一個對應的就是最後的結果
String week="";
week="001";
week="002";//走哪一個對應哪一個值
week="003";
System.out.println(week);
* 數組
* 基本數據的使用聲明開空間賦初始值 nums[0]=6
* 對象聲明開空間賦初始值在對對象的屬性賦值 students[0]=stu mysql

-------------------《列表》--------------------------------
有序 <ol> --> <li> 選項或者問卷調查jquery

無序 <ul> --> <li> 導航或者有規律的圖文或者側邊欄信息
ul{list-style: none}取消黑心點
自定義 <dl> --> <dt>--<dd> dl表示自定義列表 dt列表項 dd列表內容web

列表樣式
值說明語法示例
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 橫向的是跨列豎向的是跨行
跨列colspanajax

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>
<h2>頭的部分</h2>
</header>

經過樣式調節網頁佈局
<style type="text/css">
*{
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使用》

<a href="http://www.baidu.com"target="fff">用戶管理</a><br/>
<a href="添加視頻.html"target="fff">訂單管理</a><br/>
<iframe src="頁面佈局.html" name="fff" width="600" height="300" ></iframe>

-----------------------《添加視頻》
<video controls="controls" width="600px"height="600px">
<source src="視頻的位置" type="video/mp4"/>
</video>

controls 是添加控制按鈕
--------------------------《跨行與跨列的應用》
<table border="10px"cellspacing="0px" cellpadding="5px"bgcolor="#deb887">
<tr>
<td colspan="3">學生成績</td>
</tr>
<tr>
<td rowspan="2">張三</td>
<td>語文</td>
<td>98</td>
</tr>
<tr>
<td>數學</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>語文</td>
<td>88</td>
</tr>
<tr>
<td>數學</td>
<td>91</td>
</tr>
</table>
這個表格是五行三列

----------------------《表單》
------------------------------------《視頻上的》
<form action=「#」 method= "get">
<p>用戶帳號： <input type="text" name="useername" value="在框裏輸入的值" size=30px maxleng=6 表明長度/> 表明帳號框
<p> 用戶密碼： <input type="password" name="psd"/> 表明密碼文
<p> <input type="submit" value="登陸"/> 登陸按鍵
<p> <input type="radio" value="登陸"/> 男 <p>
<p> <input type="radio" value="登陸"/> 男 <p>
讓他們互斥加上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>
<section>
<form action="提交要跳轉的地方.html" method="post" name="form1" enctype="multipart/form-data">

<p>多行文本域：
<textarea name="xieyi" cols="10" rows="6" readonly >文本域的內容是你必須遵照我定的規矩否則t了你</textarea>
<input type="radio" checked/>贊成網易協議
</p>

<p>

帶有格式的郵箱註冊<input type="email"name="email"/>
</p>

<p>

網絡信息來源： <input type="url"name="url"/>
</p>

<p>

出生日期：<input type="date"/>
具體出生時間: <input type="time"/>
</p>

<p>

郵箱地址只讀：<input type="email" readonly value="1355022178@qq.com" name="email"/>
</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 內聯樣式
<p style=" font-size:15px ">
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中
<link href="style.css" rel="stylesheet" type="text/css" />
herf：後綴.css的文件路徑
rel 使用外部樣式表
type 文件類型
導入
<style type="text/css"> </style>

行內樣式>內部樣式表>外部樣式表就近原則

標籤選擇器直接應用於HTML標籤
類選擇器可在頁面中屢次使用
ID選擇器在同一個頁面中只能使用一次可是能夠在建立新的id選擇器

ID選擇器 >類選擇器 >標籤選擇器

CSS的高級選擇器
1 層次選擇器
2 結構僞類選擇器
3 屬性選擇器

1
選擇器類型功能描述
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能夠是一、二、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 id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /> </div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<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;
}
<div>1<div>

圓的設置必須知足：
一元素的寬度和高度必須相同
二圓角的半徑爲元素寬度的一半，或者直接設置圓角半徑值爲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 位置方向不可控制，會解析空格倆個行內塊元素會有空格
3
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是設置的

行內的腳本
<input type="button" name="but" value="登陸" onclick="javascript:window.alert('測試input')"/>

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 action="#" onclick="getnum()">
<input type="button"value="開始抽獎啦"/>
</form>

函數的調用
1 事件名=函數名（傳遞的實參數）列如 onclick=函數（）
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屬性）。

--------------------實現動態時鐘代碼
實現頁面動態實時時鐘
第一步：建立一個Date對象
第二步：經過Date對象的get方法，獲取當前時間日期
第三步：使用if語句判斷小時數是否大於12，，從而確認上午仍是下午
第四步：使用setInterval()方法反覆顯示：
<script>
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 id="clock">
<div id="date"></div>
<div id="time"></div>
</div>
</body>

window.onload=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
<script>
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>
<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/>
<input type="button"value="你喜歡的水果" onclick="showenjoy()"/>
</p>

-------------代碼2 在一張圖片前（insertbefore）添加圖片刪除圖片複製圖片

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>
<p id="p1"><img src="img/img1.png"id="one" alt=""/></p>
<p><input type="button" value="添加圖片" onclick="addimg()"/></p>
<p><input type="button" value="複製圖片" onclick="copyimg()"/></p>
<p><input type="button"value="刪除圖片"onclick="delimg()"/></p>
//刪除能夠用過自身開始刪除最後找爹刪除
//刪除也能夠先找到爹在進行刪除

------------代碼3 HTML DOM對象解析table

要求 1增長一行
2刪除第一行
3修改標題樣式
4複製最後一行
5添加一行帶有刪除和保存按鈕顏色變成黃色

</script>

</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td>書名</td>
<td>價格</td>
</tr>
<tr id="row2">
<td>看得見風景的房間</td>
<td class="center">¥30.00</td>
</tr>
<tr id="row3">
<td>60個瞬間</td>
<td class="center">¥32.00</td>
</tr>
</table>
<input type="button" value="增長一行"onclick="addRow()" name="b1"/>
<input type="button" value="刪除第二行"onclick="delRow()" name="b2"/>
<input type="button" value="修改標題樣式"onclick="updateRow()" name="b3"/>
<input type="button" value="複製最後一行"onclick="copyRow()" name="b4"/>
<input type="button"value="添加一行帶有刪除或者保存的按鈕" onclick="addanniu()"/>

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第一種笨方法
<script type="text/javascript">

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.onload=allProvince;
</script>
------------------------------------------------------------------------------
1第2種數組方法

}

function allProvince(){
//顯示全部省份
//獲取省份的下拉框對象(select)
var province=document.getElementById("selProvince");
//在select對象添加選項
for(var i in array){
province.add(new Option(i,i),null);
}

}
//頁面加載完執行allProvince方法
window.onload=allProvince;
</script>

-----------------------------《如何實現鼠標移至「個人購物車」顯示商品內容？》---

使用Dom-Css設置

改變樣式的屬性 style屬性 className屬性

名稱描述
onclick 當用戶單擊某個對象時調用事件
onmouseover 鼠標移到某元素之上
onmouseout 鼠標從某元素移開
onmousedown 鼠標按鈕被按下

------------------------1方式
<div id="cart" onmouseover="over()" onmouseout="out()">個人購物車<span>1</span></div>
<script>
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裏面給他一個樣式
<script>
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.樣式屬性＝"值"

-----------------《滾動廣告》
<script>
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.onload=inix;//頁面加載的時候
window.onscroll=move;//當鼠標滾動的時候
</script>

-----------------------------《表單驗證》---------------------
1 含義數據被送往服務器前對?HTML?表單中的這些輸入數據進行驗證
減輕服務器的壓力保證數據的可行性和安全性
能夠彈出框或者輸入框旁邊
2 是否爲空是否爲數字符合某些特定的內容格式（郵箱、身份證等) 輸入的數據的長度

-------------------------《簡單的驗證不帶焦點》
<form id="registerForm" action="測試提交成功.html" method="post" name="myform" onsubmit="return checkForm()">
<script type="text/javascript">
//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+絕對格式》--------

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
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

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(){})

隱藏與顯示
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("#id1").click(function(){
$("#div1").show();
});
$(".cone1").click(function(){
$("#div1").hide();
})
})
</script>
添加和刪除樣式----
<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>
<p>測試1</p>

------------隔行變色
//文件加載完成時執行
$(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();
})
--------------------------鼠標移上去鼠標移下去
<script>
$(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 >
<legend>會員名字</legend>
</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>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</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個元素----------注意是同輩

代碼
<p> This is just a test.</p>
<p> So is this</p>
例如 ---var $num=$("p:eq(1)").text();
或者 $("p").eq(1)

2 --------------------find（）找出正在處理的元素的後代元素的好方法。 ----找到的是後代

代碼
<table border="1px">
<tr>
<td>名字</td>
<td>試用期</td>
<td>轉正期</td>
</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>-------------------------------------此處是表達式
<div class="source-bar">發佈者：<%=author %> 分類：<%=category %></div>
<div class="article-summary"><b><%=summary %></b><span><%=content %></span></div>
</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="text" name="userName"></input></p>
<p>密碼：<input type="password" name="userPass"></input></p>
<p>確認密碼：<input type="password" name="reuserPass"></input></p>
<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>
<input type="submit" value="當即註冊" />
</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>
<h1>帳號：<%=name %></h1>
<h1>密碼：<%=name %></h1>
<h1>愛好：<%=Arrays.toString(love) %></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 action="util/sessiondologin.jsp" method="post">
<label>用戶名</label>
<input type="text" name="uname" />
<label>密碼</label>
<input type="text" name="upassword" />
<input class="login1" type="submit"value="登陸鍵"/>
</form>
<%}else{ %>
歡迎你：   <%=obj %> <a href="util/loginout.jsp">註銷</a>
<% }%>
---代碼練習3

----代碼練習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");

%>
<script >
alert("請先登陸");
function newDoc()
{
window.location.assign("../../index.jsp")
}
newDoc();
</script>
<% }else{%>

----代碼練習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){ %>
<form action="util/zonghedologin.jsp" method="post">
<label>用戶名</label> <input type="text" name="uname" /> <label>密碼</label>
<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指令

2
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>
<span><%=news.getCreateDate() %></span>
<a href="#"><%=news.getTitle() %></a>
<%
}}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\"高能充電";%> --%>
<h1><%=title%></h1>
<div class="source-bar">
<%-- <%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");不能夠用了
2

--------------------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) {
%>
<tr class="admin-list-td-h2">
<td><a href='newsDetailView.jsp?id=<%=news.getId() %>'><%=news.getTitle() %></a></td>
<td><%=news.getAuthor() %></td>
<td><%=news.getCreateDate() %></td>
<td><a href='adminNewsCreate.jsp?id=<%=news.getId() %>'>修改</a>
<a href="javascript:if(confirm('確認是否刪除此新聞？')) location='<%=request.getContextPath() %>/servlet/DeleteServlet?id=<%=news.getId() %>'">
刪除</a>
</td>
</tr>
<%} %>
</tbody>
</table>
<p style="margin-top:20px">
公有<%=totalpage %>頁 <%=currentpageNo %>/<%=totalpage %>
<a href="newsDetailList.jsp?pageindex=1"> 首頁</a>   
<a href="newsDetailList.jsp?pageindex=<%=currentpageNo-1 %>">上一頁</a>   
<a href="newsDetailList.jsp?pageindex=<%=currentpageNo+1 %>">下一頁</a>   
<a href="newsDetailList.jsp?pageindex=<%=totalpage %>">末尾頁</a>   
跳轉到：
<input id="pagego" size="2" type="text" name="pagego"/>
<input type="button" onclick="javascript:location.href='newsDetailList.jsp?pageindex='+go()" value="go"/>
</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);

<h1>${NAME}</h1>
取對象
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>
<a href="jsp/admin/admin.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>
<td><a href='newsDetailCreateSimpleupdate.jsp?id=${news.id }'>修改</a>
<a
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>
<div class="source-bar">
<%-- <%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值也就是用戶輸入的數值
<input name="id"/>

（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 style="text-align:left;" class="text_tabledetail2" colspan="2" id="myImg">
<img src="${pageContext.request.contextPath}/upload/${news.picpath}">

<input type="hidden" value="${news.picpath }" name="picPath"/>
<input type="button" value="修改圖片" onclick="changeImg()"/>
</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>

<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"
<select>
<option value="0">所有</option>
<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表達式的方式拿到它
<input type="hidden" id="totalPage" value="${totalPage}" />

（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按鈕後面加一個 onclick= 最後在函數後面加上 form.submit();
2 使用失去焦點 onblur= 調用ajax這個函數直接在表單提交以前進行函數的使用
3 在form上面加一個屬性 onsubmit=函數
（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"/>
<radio name="r" value="2"/>
<radio name="r" value="3" checked/>
<radio name="r" value="4"/>
<radio name="r" value="5"/>

----------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 在修改圖書時候怎麼樣讓下拉列表項的值自動定位到修改的圖書的類型
<script type="text/javascript">
//設置類別的默認值
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。反射異常
一、包衝突、有重複包或者缺乏包

　　二、項目jdk和部署jdk版本不同，致使InvocationTargetException異常信息返回一個空值，沒有調用invoc裏的重寫消息方法。

　　三、映射文件發生改變
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>
<select name="SPAPFEBOINDEX" id="spapfeboindex" >
<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>