javaWeb--jsp & jQuery
jsp頁面的基本構成：
指令標籤
HTML標記語言
註釋 <!-- html註釋 --> <%-- java代碼註釋 --> //html註釋對jsp嵌入的代碼不起做用，所以能夠組合它們構成動態的html註釋
jsp動做標籤 <jsp: >
1. 指令標籤
指令標籤不會產生任何內容輸出到網頁中，主要用於定義jsp頁面相關信息
如使用的語言、導入的類包、指定錯誤處理頁面
1.1 page指令
重要屬性：
import屬性，設置jsp導入的類包。由於jsp能夠嵌入java代碼，而這些代碼在調用API時須要導入相應的類包
例如： <%@ page import="java.util.*"%>
pageEncoding屬性，定義jsp頁面編碼格式
例如：<%@ page pageEncoding="GB18030"%>
contentType屬性，設置jsp頁面的MIME類型和字符編碼，瀏覽器會據此顯示網頁類容
例如：<%@ page contentType="text/html;charset=UTF-8"%>
session屬性，指定jsp頁面是否使用HTTP的session會話對象
例如：<%@ page session="false"%>
isErrorPage屬性，將當前jsp頁面設置成錯誤處理頁面來處理另外一個jsp頁面的錯誤
例如：<%@ page isErrorPage="true"%>
errorPage屬性，指定處理當前jsp頁面異常錯誤的另外一個jsp頁面，屬性值是一個url字符串
例如：<%@ page errorPage="error/loginErrorPage.jsp"%>
1.2 inlcude指令
用於在jsp頁面中包含另一個文件的內容，只支持靜態包含，內容將原樣包含在jsp頁面中，被包含文件中
代碼不會執行，能夠是一段java代碼、html代碼或者另一個jsp,其值是當前jsp頁面文件的相對url路徑
1.3 taglib指令
用於加載用戶自定義標籤
prefix屬性用來加載自定義標籤的前綴
uri屬性用於指定自定義標籤的描述文件符位置
例如：<%@taglib prefix="view" uri="/tags/view.tld"%>
2. 嵌入java代碼
jsp腳本段
語法格式以下：
<% 編寫java代碼 %>
jsp聲明
定義全局變量與全局方法，能夠在整個jsp頁面使用
格式以下：
<%! 變量或者函數 %>
jsp表達式
jsp表達式能夠把能夠把java表達式的結果輸出到jsp頁面中，表達式的最終運算結果被轉換爲字符串類型
格式以下：
<%= 表達式 %>
3. jsp動做標籤
<jsp:include>
該動做標籤能夠將另一個文件包含到當前的jsp頁面中，可使靜態文本也能夠是動態代碼
page屬性用來指定被包含文件的相對路徑
flush屬性用來指定是否刷新緩衝區
注意，被包含的jsp文件中不要使用<html>和<body>標籤,源文件和被包含文件中變量名和方法不要衝突
例如：
<jsp:include page="validate.jsp" flush="false"/>
<jsp:forward>
將當前頁面的請求轉發給其它web資源（html頁面，jsp頁面，Serverlet等）
用於轉向頁面，該指令後面的全部代碼都沒有機會執行了，由於頁面的流程已經轉向了另一個頁面了
<jsp:param>
可做爲其餘標籤的子標籤，爲其餘標籤傳遞參數
例如：
<jsp:forward page="addUser.jsp">
<jsp:param name="userName" value="mi"/>
</jsp:forward>
4. 部署項目到tomcat
在tomcat的server.xml中編寫<Content>標籤
例如：
<Context path="/test" docBase="F:\Codeing\MyEclipseProjects\test\WebRoot" reloadable="true"/>
其中path爲部署的邏輯路徑，可與項目名稱不一樣，docbase是物理路徑
例如：
https://localhost:8080/test/index.jsp
5. jsp聲明與腳本端變量的區別
jsp聲明格式 <%! int a = 3;%>
腳本段形式：<% int b = 5 %>
當服務器將jsp轉換爲servlet時，會將jsp的聲明轉換爲類的成員變量，而腳本段轉換爲方法中的局部變量，
servlet是單實例的，這樣成員變量的值就只有一個，每一個用戶都會訪問它，而腳本段中則是局部變量，每一個
用戶訪問時各有一份，互不影響。
//jsp中的幾個主要對象
6. 關於requset方法
request的setAttribute與getAttribute方法通常都是成對出現的，首先經過setAttritbute方法設置屬性與
屬性值，而後經過getAttribute方法根據屬性獲取到對應對象值。setAttribute與getAttribute方法都是在
服務器端內部執行，客戶端不知道服務器是否執行過這兩個方法
而request的getParameter方法做用是經過表單或者url請求的參數發送過來的參數值，是客戶端和服務器之
間的交互，並無對應的set方法
request對象內數據的存活範圍：客戶端向服務器發送一個請求，服務器返回一個響應後該請求對象就被銷燬，
以後再向服務器發送新的請求時，服務器會建立新的request對象，該對象跟以前的對象沒任何關係。
session對象的生命週期：同一個瀏覽器中，不管發送多少請求，session對象只有一個。
application存活範圍：存活範圍最大的對象，只要服務器沒有關閉，application對象中的數據就會和一直
存在，整個服務器運行過程當中，application對象只有一個。
7. 重定向和請求轉發
RequestDispatcher的forward方法稱爲請求轉發
請求轉發與重定向的區別：
1）請求轉發整個過程都處於同一個請求當中
2）重定向實際上 客戶端向服務器發送兩個請求
3）RequestDispatcher是經過調用HttpServletRequest對象的getRequestDispatcher方法獲得的，是屬於請求
對象的方法。
4）sendRedirect是HttpServletRsponce對象的方法，即響應對象的方法，既然調用了響應對象的方法，代表整
個請求過程已經結束，服務器開始向客戶端返回執行的結果。
8. 一個標準的javaBean有如下幾個特性：
是一個公共類
有一個不帶參數的構造方法
經過set和get方法設置屬性
典型的javaBean類
public class Person {
private String name = "zhumingjie";
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
10. jsp訪問javaBean的語法
1）導入javaBean類
<%@ page import="com.zhongcunmu.bean.Person" %>
2）聲明javaBean對象
<jsp:useBean id="person1" class="com.zhongcunmu.bean.Person"></jsp:useBean>
3）訪問javaBean屬性
<jsp:getProperty property="name" name="person1"/><br>
<jsp:setProperty property="name" name="person1" value="zcm"/><br>
<jsp:setProperty property="name" name="person1" prama="myname"/><br>
11. javaBean的做用域
scope可選值爲application,session,request,page
選擇相應的scope值就能夠得到相同的生命週期
而後可使用javaBean的id做爲屬性經過getAttribute屬性得到對應的javaBean對象，原理實際上根據做用域不一樣，
在servlet類中生成了javaBean相應的局部變量，成員變量或者靜態變量查看生成的對應servlet源碼便可知道。
12. servlet源碼分析
1）每一個Servlet都必須實現Servlet接口，GenericServlet是個通用的、不特定於任何協議的Servlet，
它實現了Servlet接口，而HttpServlet繼承於GenericServlet，所以HttpServlet也實現了Servlet
接口，因此咱們定義的HttpServlet只須要繼承HttpServlet父類便可。
2）Servlet接口中定義了一個service方法，HttpServlet對該方法進行了實現，實現方式就是將ServletRequest
與ServletResponce轉換爲HttpServletRequest與HtppServletResponce.
3）在HttpServlet類的service方法中，首先得到請求的方法名，而後根據方法名調用對應的doXXX方法。
4）在HttpServlet類中定義的doGet個doPost等都是直接返回錯誤信息，所以咱們須要重載這些錯誤處理方法。
13. servlet生命週期
1)servlet的啓動階段
在下列時刻Servlet容器裝載Servlet：
Servlet容器啓動時自動裝載某些Servlet
在Servlet容器啓動後，客戶首次向Servlet發出請求
Servlet的類文件被更新後，從新裝載Servlet
Servlet被裝載後，servlet容器建立一個Servlet實例，並調用servlet的init方法，在servlet整個生命週期
中，init方法只會被調用一次。
2）Servlet響應客戶請求階段
對於到達Servlet容器的客戶請求，Servlet容器建立特定於這個請求的ServletRequest對象和ServletResponce
對象，而後調用Servlet的service方法。service方法從ServletRequest對象得到客戶請求信息、處理該請求，
並經過ServletResponce對象向客戶端返回響應結果。
3）Servlet終止階段
當web應用被終止，或Servlet容器終止運行，或者Servlet容器從新裝載Servlet的新實例時，servlet容器會調用
Servlet的destory方法，在destory方法中，能夠釋放Servlet所佔用的資源。
14. Session的運行機制
1）當一個Session開始時，Servlet容器將建立一個HttpSession對象，在HttpSession對象中能夠存放客戶的
狀態信息
2）Servlet容器爲HttpSession分配一個惟一的標識符，稱爲Session ID，並做爲Cookie保存在客戶瀏覽器中
3）每次客戶發出Http請求時，Servlet容器能夠從HttpServletRequest對象中讀取Session ID,而後根據ID
找到相應的HttpSession對象。從而獲取客戶的狀態信息。
15. EL表達式
EL目的是幫助產生無java腳本的jsp網頁
EL默認對象
param: a map containing request parameters and single string values
sessionScope: a map containing session-scoped attributes and their values
applicationScope: XXX attributes and their values
requestScope: XXX attributes and their values
pageScope: XXX attributes and their values
pageContext: the PageContext object
paramValues: a map containings request parameters and their corresponding string arrays(適用於checkbox等同一name的數組)
header: a map containing header names and single string
headrValues: a map containing header names and single string values(一樣也是數組概念)
cookie: a map containing cookie names and their values
例如：
<form action="EL2.jsp">
username:<input type="text" name="username">
interest:<br>
basketball<input type="checkbox" name="interset" value="basketball"><br>
badminton<input type="checkbox" name="interset" value="badminton"><br>
reading<input type="checkbox" name="interset" value="reading"><br>
<input type="submit" value="submit">
</form>
<%session.setAttribute("version", "1.01") ;%>
如下EL表達式的等同效果
<%= request.getParameter("username") %><br>
${param.username }<br>
<%= request.getParameterValues("interest")[1] %>
${paramValues.interset[1] }<br>
<%= session.getAttribute("version") %>
${sessionScope.version }<br>
EL表達式運算符(有的有兩種表示方法)
運算符
+
-
*
/ div
% mod
== eq
!= ne
< lt
> gt
<= le
>= ge
EL表達式的邏輯運算符
&& and
|| or
! not
.與[]運算符
${sessionScope.user.sex}等於
${sessionScope.user["sex"]}
當要存取的屬性名稱包含一些特是字符如.- 等非字母或數字的符號，就必定要使用[]
EL變量
EL存取變量默認會先從Page範圍找，找不到再以此從Request、Session、Application範圍，沒有則返回null
自動轉變類型
${param.count+20} //會將傳來的count自動轉換爲數值類型
16. 建立客戶化jsp標籤的步驟
1）建立標籤的處理類
2）建立標籤庫描述文件（標籤庫描述文件的後綴名是.tld，必須與web.xml一個目錄下）
3）在jsp文件中引入標籤庫，而後插入標籤
17. 兩種cookie
1）持久性的cookie,會被存儲到客戶端的硬盤上
2）會話cookie，不會存儲到客戶端的硬盤上，而是存放在瀏覽器進程所處的內存當中，當瀏覽器關閉的話該會話cookie就被銷燬了
18. jQuery 選擇器
基本選擇器
#id 根據給定的id匹配一個元素
例子：$("#button1") //選取id爲button1的元素
.class 根據給定的類名匹配元素，返回集合
例子：$(".left") //選取全部class爲left的元素
element 根據給定的元素匹配，返回集合
例子：$("textarea") //選取全部的<textarea>元素
* 匹配全部元素
例子：$("*")
selector1,selector2,...selectorN 將每個選擇器匹配到元素後合併一塊兒返回
例子：$("div,span,p.myClass") //選取全部的<div>,<span>,及myClass類的<p>元素
層次選擇器
$("ancestor eescedant") 選取ancestor元素裏面的全部後代元素
例子：$("div span") //選取div裏面的全部span元素
$("parent > child") 選擇parent下面的直接子元素
例子：$("div > span") //選擇div下面直接的span子元素
$("prve+next") 選取緊接在prev元素後面的next元素
有等價next方法
例子：$('.one+div') //選擇class爲one的下一個div元素
例子：$(".one").next("div") //選擇class爲one的下一個div元素
$("pre~sib") 選取pre元素後的全部sib元素
有等價的nextAll方法
例子：$('#two~div') //選取id爲two的元素後面全部div兄弟元素
例子：$("#two").nextAll("div") //選取id爲two的元素後面全部div兄弟元素
過濾選擇器
1)基本過濾
:first 選取第一個元素
:last 選取最後一個元素
:not(selector) 除去全部與給定選擇器匹配的元素
:even 選取全部索引是偶數的元素，索引從0開始
:odd 選取全部索引是奇數的元素
:eq(index) 選取索引是index的元素
:gt(index) 選取索引大一index的元素
:lt(index) 選取索引小於index的元素
:header 選取全部的標題元素
:animated 選取當前正在執行的動畫元素
例子：
$("div:first") //選取全部div元素中的第一個元素
$("input:not(.myClass)") //選取class不是myClass的input元素
2)內容過濾
:contains(text) //選取全部文本內容爲text的元素
:empty //選取不包含子元素或者文本爲空的元素
:has(selector) //選取含有選擇器所匹配的元素的元素
:parent //選取擁有子元素護着文本的元素
例子：
$("div:contains('我')") //選取含有’我‘的div元素
$("div:empty") //選取不含子元素的div元素
$("div:has(p)") //選取含有p元素的div元素
$("div:parent") //選取含有子元素的div元素
3)可見性過濾
:hidden //選取全部不可見元素
:visible //選取全部可見元素
例子：
$("div:hidden").show(8000).css("background", "yellow"); //將隱藏的div元素8秒鐘顯示出來並設置顏色
4)屬性過濾器
[attribute] //選取擁有此屬性的元素
[attribute=value] //選取屬性值爲value的元素
[attribute!=value] //選取屬性值不等於value的元素
[attribute^=value] //選取屬性值以value開頭的元素
[attribute$=value] //選取屬性值以value結尾的元素
[attribute*=value] //選取屬性值含有value的元素
[selector1][selector2][selectorN] //用屬性選擇器合成一個複合屬性選擇器，知足多個條件
例子：
$("")
$("div[id]") //選取擁有屬性id的元素
$("div[title=test]") //選取屬性title爲test的元素
$("div"[id][title$=test]) //選取擁有屬性id而且title以test結尾的div元素
5)子元素過濾
:first-child //選取每一個父元素的第一個子元素
:last-child //選取每一個父元素的最後一個子元素
:only-child //若是每一個元素是它父元素中惟一的子元素，那麼將會匹配
例子：
$("ul li:first-child") //選取每一個ul中的第一個li
6)表單對象過濾
:enabled //選取全部可用元素
:disabled //選取全部不可用元素
:checked //選取全部被選中(單選框，複選框)元素
:selected //選取全部被選中(下拉列表)元素
例子：
$("#form1:enabled") //選取id爲form1的表單內全部可用元素
$("#form2:disabled") //選取id爲form2的表單內全部不可用元素
$("input:checked") //選取全部被選中的input元素
$("selectselected") //選取全部被選中的選項元素
表單選擇器
:input //選取全部的input,textarea,select,button元素
:text //選取全部的單行文本框
:password //選取全部的密碼框
:radio //選取全部的單選框
:checkbox //選取全部的多選框
:submit //選取全部的提交按鈕
:image //選取全部的圖像按鈕
:reset //選取全部的重置按鈕
:button //選取全部的按鈕
:file //選取全部的上傳域
:hidden //選取全部的不可見元素
18. jQuery 操做DOM對象
1)查詢
例子：
var p = $("p");
var li = $("ul li:eq(1)");
var title = p.attr("title");
var title2 = li.attr("title");
var text = li.text();
2)添加DOM對象
append() //向每一個元素匹配的元素內部追加內容
appendTo() //將全部匹配元素追加到指定元素中
prepend() //向每一個匹配的元素內部前置內容
remove()
replaceWith()
replaceAll()
clone()
wrap()
wrapInner()
屬性方法
attr()
removeAttr()
例子：
$("p").append("<b>你好</b>") 結果：<p><b>你好</b></p>
$("<b>你好</b>").appendTo("p")
var li1 = $("<li title='a'>a</li>");
var li2 = $("<li title='b'>b</li>");
var li3 = $("<li title='c'>c</li>");
$("ul").append(li1);
$("ul").prepend(li2);
$("ul li:eq(4)").after(li3);
$("ul li:eq(2)").insertAfter("ul li:eq(4)");
js實現
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("value",i);
//alert(document.getElementsByTagName("input").length);
var br = document.createElement("br");
document.getElementById("div1").appendChild(input);
document.getElementById("div1").appendChild(br);
//remove方法會返回被移除節點的jquery對象
//$("ul li:eq(1)").remove();
var removeLi = $("ul li:eq(3)").remove();
//alert(removeLi);
//alert("555");
removeLi.appendTo($("ul"));
$("ul li").remove($("li[title!=2]"));
css
- 1. jQuery---jQuery插件
- 2. JQuery - $, JQuery, Window.load, JQuery.ready
- 3. 【jQuery】1、下載jQuery
- 4. 【jQuery】-----jQuery簡介（一）
- 5. Jquery中(function($){...})(jQuery)，$(function(){})，
- 6. jQuery-jQuery選擇器
- 7. JQuery插件——jquery tools
- 8. jQuery attr() 和 jQuery prop()
- 9. 【JQuery】（1）JQuery基礎
- 10. jQuery-什麼是jQuery
- 更多相關文章...
- • jQuery Mobile 安裝 - jQuery Mobile 教程
- • jQuery Mobile 過渡 - jQuery Mobile 教程
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。