JQuery選擇器和jsp
jsp的全稱 java server pages
jsp頁面實際上是servlet
與html頁面的不同：
在jsp頁面中可以寫java程式碼 語法：<%java程式碼 %> < %=java程式碼%>
在jsp頁面中可以使用request和session
jsp頁面是一種java類
jsp和servlet
jsp頁面的優點：方便顯示
缺點：不方便處理業務邏輯
servlet頁面的優點：方便處理業務邏輯
缺點：不方便顯示
JSP和servlet是相互使用的
jsp頁面執行原理
jsp容器會將jsp轉譯成servlet，在通過servlet容器來啟動和執行
jsp頁面的語法
1、編譯器的指令
a、include：<%@ include file = "top.jsp"%>(產生一個類)靜態引入 path和basePath兩個變數
b、page；
c、taglib；
2、指令碼語法
a、註釋：<！-->(能在原始碼中看見，不能註釋java程式碼)，<%- -%>(不能在原始碼中看見，能註釋java程式碼)
b、宣告：<%!%>宣告變數和方法
c、java指令碼段：<% %>
d、表示式：<%=%>
3、動作語法
<jsp:forward>實現轉發的作用
<jsp：include>(產生兩個類)動態引入 不能用path和basePath這兩個變數
jsp標籤實現的就是java程式碼的作用
jsp頁面的九個內建物件
request 請求物件 型別 javax.servlet.ServletRequest 作用域 Requestresponse 響應物件 型別 javax.servlet.SrvletResponse 作用域 Page
pageContext 頁面上下文物件 型別 javax.servlet.jsp.PageContext 作用域 Page
session 會話物件 型別 javax.servlet.http.HttpSession 作用域 Session
application 應用程式物件 型別 javax.servlet.ServletContext 作用域 Application out 輸出物件 型別 javax.servlet.jsp.JspWriter 作用域 Page
config 配置物件 型別 javax.servlet.ServletConfig 作用域 Page
page 頁面物件 型別 javax.lang.Object 作用域 Page
exception 例外物件 型別 javax.lang.Throwable 作用域 page
通過pageContext物件可以得到其他八個內建物件
request = pageContext.getRequest()
response = pageContext.getResponse()
session = pageContext.getSession()
application = pageContext.getServletContext()
out = pageContext.getOut()
config = pageContext.getServletConfig()
page = pageContext.getPage()
exception = pageContext.getException()
pageContext還有兩個方法：
pageContext.forward("轉發的頁面")
pageContext.include("包含的頁面")
JSP頁面的EL(Expression Language)表示式
方法：$(EL Expression)--所有的表示式以"${"開始，以"}"結束
一：JSP EL操作的內容：
1、常量 2、運算 3、變數 4、隱私物件
二：常量：
1、布林型：$(true)
2、整型：$(10)
3、浮點型：$(10.5)
4、字串型：$("wjl")
5、空型別：$(null)
EL表示式的結果為null，什麼也不顯示，結果不是null，是什麼就顯示甚而沒
JQuery選擇器
1、呼叫欄位的結果
function testA(){
var username = $("#username").val();
alert(username);//執行為timo2
username = "timo2"
alert(username);//執行為timo2
$("#username").val("timo3");
alert(username);//執行為timo2
$("#username").val("");
alert(username);//執行為null
}
<input type = "text" id = "username" >
<input type="button" value = "獲取" onclick = "testA()"/>
<hr/>
]
2、獲得屬性，呼叫屬性
function testB(){
alert($("#input").attr("type"));alert($("#input").attr("value"));//獲得屬性
}
<input type = "text" value = "提交" id = "input">
<button onclick = "testB()">點選</button>
<hr/>
3、獲得屬性，修改屬性
function testC(){
alert($("#user").attr("type"));
alert($("#user").attr("value"));//獲得屬性
$("#user").attr("type","button");//修改單個屬性
$("#user").css({borderColor:"red",color:"blue",fontSize:"100px"});//修改多個屬性，在{}修改，用都好隔開
$("#user").removeAttr("value");
}
<input type = "text" value = "提莫" id = "user" >
<button onclick = "testC()">點我啊</button>
4、給button表的屬性
function testD(){
alert($("#name").height());//給屬性高
alert($("#name").width());//給屬性寬
$("#name").height(50);//給屬性高的值
$("#name").width(100);//給屬性寬的值
}
<input type = "text" value = "隊長" id = "name" >
<button onclick = "testD()">點啊</button>
5、雙重方法
function testA(){
$("#user").click(function() {
alert("提莫隊長");
});
}
$(document).ready(
function(){
$("#user").click(function(){
alert("小提莫");
});
}
); <input type = "button" value = "提交" id = "user" onclick = "testA()" >
<hr/>
6、點選標籤的三種方法
$(function(){
$("p").click(
function(){
alert("點選p標籤第一方法")
});
});
$(document).ready(
function(){
$("p").click(function(){
alert("點選p標籤第二方法");
});
});
$().ready(
function(){
$("p").click(
function(){
alert("點選p標籤第三方法")
});
});
7、回車
$(document).ready(
function(){
$("#name").keydown(
function(e){
if(e.keyCode==13){
alert("回車");
}
});
});
8、增添內容
$(document).ready(
function(){
$("div").append("<b>正在送命</b>");
}
);
<div>提莫隊長</div>
9、增新增改
$(document).ready(
function(){
$("p").appendTo("div");
}
);
<p>I would like to say: </p>
<div></div><div></div>
10、查詢第一或者最後一行
$(document).ready(
function(){
$("#name").click(
function () {
alert($("li:first").text())
});
});
$(document).ready(
function(){
$("#name").click(
function () {
alert($("li:last").text())
});
});
<ul>
<li>一隊</li>
<li>二隊</li>
<li>三隊</li>
<li>四隊</li>
</ul>
11、指定查詢想要找的一行
$(document).ready(
function(){
$("#timo").click(
function () {
alert($("tr:eq(3)").text())
});
});
<table>
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
<tr><td>第五行</td></tr>
</table>
12、查詢所選定的一項
$(document).ready(
function(){
$("#xiaopao").click(
function () {
alert($("select option:selected").text())
});
});
<select>
<option value="1">花兒</option>
<option value="2" selected="selected">植物</option>
<option value="3">大樹</option>
</select>
<button id = "xiaopao" >點選</button>
</body>
13、焦點
$(document).ready(
function(){
$("#timo").focus(
function(){
alert("焦點");
}
);
}
);
<input type = "text" value = "提交" id ="timo">
