例1、javascript典型例子。Javascript解析html和解析xml檔案時一樣的
第一步、cities.xml
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="吉林省">
<city>長春</city>
<city>吉林市</city>
<city>四平</city>
<city>松原</city>
<city>通化</city>
</province>
<province name="遼甯省">
<city>沈陽</city>
<city>大連</city>
<city>鞍山</city>
<city>撫順</city>
<city>鐵嶺</city>
</province>
<province name="山東省">
<city>濟南</city>
<city>青島</city>
<city>威海</city>
<city>煙台</city>
<city>濰坊</city>
</province>
</china> 第二步、city.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province" name="province">
<option value="">請選擇...</option>
<option value="吉林省">吉林省</option>
<option value="遼甯省">遼甯省</option>
<option value="山東省">山東省</option>
</select>
<select id="city" name="city">
<option value="">請選擇...</option>
</select>
</body>
<script type="text/javascript">
window.onload=function(){
var provinceElement = document.getElementById("province");
//1.注冊<select id="province" name="province">onchange事件
provinceElement.onchange=function(){
//alert("xx");
/**************************************************************/
//清空下拉選的值
var cityElement=document.getElementById("city");
var cityOptionElements = cityElement.getElementsByTagName("option");
var len=cityOptionElements.length;
//javascript 是一個動态的數組，是以删除的時候從後往前删,注意for循環裡面的内容
for(var i=len-1;i>0;i--){
cityElement.removeChild(cityOptionElements[i]);
}
/**************************************************************/
//聲明
var provinceElement=null;
//2.擷取第一個下拉選的值
var pvalue=this.value;
//alert(pvalue);
//3.加載xml檔案
var xmlDoc= parseXML("cities.xml");
//4.擷取xmlprovince标簽
var provinceXmlElements = xmlDoc.getElementsByTagName("province");
//alert(provinceXmlElements.length);
//5.周遊xml檔案中所有province标簽
if(provinceXmlElements!=null){
for(var i=0;i<provinceXmlElements.length;i++){
//6.擷取province标簽
var provinceXmlElement=provinceXmlElements[i];
//7.擷取province标簽的name屬性
var xmlProvinceNameValue=provinceXmlElement.getAttribute("name");
//8.下拉選變化的值與name屬性做比對、
//9.如相等，則找到了
if(pvalue==xmlProvinceNameValue){
//10.儲存province标簽的到一個變量中
provinceElement=provinceXmlElement;
//10.中止循環
break;
}
}
}
if(provinceElement!=null){
var xmlCityElements=provinceElement.getElementsByTagName("city");
for(var i=0;i<xmlCityElements.length;i++){
var xmlCityElement=xmlCityElements[i];
//alert(xmlCityElement.firstChild.nodeValue);
var cityValue=xmlCityElement.firstChild.nodeValue;
//<option value="">請選擇...</option>
var optionElement=document.createElement("option");
optionElement.setAttribute("value",cityValue);
var optionTextElement=document.createTextNode(cityValue);
optionElement.appendChild(optionTextElement);
cityElement=document.getElementById("city");
cityElement.appendChild(optionElement);
}
}
}
}
/*
* 加載xml檔案的函數
*/
function parseXML(filename){
var xmlDoc;
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e)
{
//alert(e.message);
return;
}
}
xmlDoc.async=false;//關閉異步加載
xmlDoc.load(filename);//解析器加載filename的xml檔案
return xmlDoc;
}
</script>
</html> 例2、innerHtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>innerHtml.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="city"></div>
</body>
<script language="JavaScript">
//在div層中插入<h1>今天</h1>
var cityElement=document.getElementById("city");
cityElement.innerHTML="<h1>今天</h1>";
</script>
</html> 例3、彈出對話框選擇。
showDialog_1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>showDialog_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script language="JavaScript">
function viewData(cid,cname){
/*
* 客戶編号：<input type="text" name="cid" value="" id="cid">
客戶名稱：<input type="text" name="cname" value="" id="cname">
*/
//擷取showDialog_2.html的内容，dialogArguments儲存showDialog_2.html頁面的内容
var s2data=window.dialogArguments;
s2data.setDocumentValue(cid,cname);
window.close();
}
</script>
<body>
<table border="1">
<tr>
<td>操作</td>
<td>客戶id</td>
<td>客戶名稱</td>
</tr>
<tr>
<td><input type="button" value="選擇" id="ss" onclick="viewData('001','深圳華為');"></td>
<td>001</td>
<td>深圳華為</td>
</tr>
<tr>
<td><input type="button" value="選擇" onclick="viewData('002','北京用友');"></td>
<td>002</td>
<td>北京用友</td>
</tr>
</table>
</body>
</html> showDialog_2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>showDialog_2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script language="JavaScript">
function openWin(){
/*
* 第一個參數：必選項，字元串String，指定要載入和顯示的URL
* 第二個參數：可選項。指定供顯示文檔時使用的變量。利用這個參數
可以傳遞任何類型的值，包括包含多個值得的數組。對話框可以
通過調用程式從 window 對象的 dialogArguments 屬性提取這些值。
* 第三個參數：可選項。字元串(String)。指定對話框的視窗裝飾。使用下面的值。多個之間用分号隔開。
*/
//1.非模态對話框
window.showModelessDialog("showDialog_1.html",window,"status:no;dialogHeight:210px;dialogWidth:360px;help:no");
//2.模态對話框
//window.showModelessDialog("showDialog_1.html",window,"status:no;dialogHeight:210px;dialogWidth:360px;help:no");
}
function setDocumentValue(cid,cname){
document.getElementById("cid").value=cid;
document.getElementById("cname").value=cname;
}
</script>
<body>
<form name="form1" action="test.html" method="post">
客戶編号：<input type="text" name="cid" value="" id="cid">
客戶名稱：<input type="text" name="cname" value="" id="cname">
<input type="button" name="ok" value="請選擇客戶" onclick="openWin();">
</form>
</body>
</html> 例4、實作例3同樣的功能，但是采用不同的方法
A1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>showDialog_2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script language="JavaScript">
//在新視窗顯示a2.html
/*
* _blank :在新視窗中打開sUrl
*/
function openWin(){
window.open("a2.html","_blank",'height=200,width=400,status=no,toolbar=no,menubar=no,location=no');
}
</script>
<body>
<form name="form1" action="test.html" method="post">
客戶編号：<input type="text" name="cid" value="" id="cid">
客戶名稱：<input type="text" name="cname" value="" id="cname">
<input type="button" name="ok" value="請選擇客戶" onclick="openWin();">
</form>
</body>
</html> A2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>showDialog_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script language="JavaScript">
function viewData(cid,cname){
//opener表示父視窗的值
window.opener.document.getElementById("cid").value=cid;
window.opener.document.getElementById("cname").value=cname;
//不再使用父視窗的内容
window.opener=null;
window.close();
}
</script>
<body>
<table border="1">
<tr>
<td>操作</td>
<td>客戶id</td>
<td>客戶名稱</td>
</tr>
<tr>
<td><input type="button" value="選擇" id="ss" onclick="viewData('001','深圳華為');"></td>
<td>001</td>
<td>深圳華為</td>
</tr>
<tr>
<td><input type="button" value="選擇" onclick="viewData('002','北京用友');"></td>
<td>002</td>
<td>北京用友</td>
</tr>
</table>
</body>
</html> 例5、ajax的第一個應用執行個體
第一步、TestServlet.java
package cn.itcast.web;
public class TestServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
System.out.println("request.getMethod"+request.getMethod());
System.out.println("request.getRequestUri"+request.getRequestURI());
System.out.println("********doGet()**********");
System.out.println(request.getParameter("b"));
PrintWriter out=response.getWriter();
//伺服器傳回到用戶端，這是一個文本
out.println("Connection server ******");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
} 第二步、test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.jsp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/testget/test.js">
</script>
</head>
<body>
<input type="button" name="ok" id="ok" value="測試和伺服器的連接配接"><br>
</body>
</html> 第三步、test.js
function ajaxFunction(){
var xmlHttp;
try{//火狐
xmlHttp=new XMLHttpRequest();
}catch(e){
try {//IE
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
/*點選ok按鈕執行Servlet的doGet方法
* 1.初始化XMLHttpRequest對象（支援異步請求）
* 2.建立與伺服器的連接配接
* 3.發送請求
* 4.處理伺服器端發回的請求(随時發回的)
*/
/*
* 建立XMLHttpRequest對象的函數
*/
var xmlHttp=null;
window.onload=function(){
document.getElementById("ok").onclick=function(){
//1.初始化XMLHttpRequest對象
xmlHttp=ajaxFunction();
/****************************************************************************/
//2.定義事件處理函數,等号後面如果加函數名，函數名不需要加括号
//事件處理函數,伺服器的狀态每次發生改變(0,1,2,3,4)都會調用該函數
xmlHttp.onreadystatechange=function(){
alert(xmlHttp.readyState+" "+xmlHttp.status);//1,1,2,3,4
//xmlHttp.readyState==4:響應發送完畢
if(xmlHttp.readyState==4){
if(xmlHttp.status==200||xmlHttp.status==304){
//如果伺服器傳回的是文本類型，用xmlHttp.responseText來接收
alert(xmlHttp.responseText);
}
}
}
/****************************************************************************/
/*3.建立到伺服器的連接配接
* * 第一個參數：請求方法get/post
* * 第二個參數：請求路徑url,(加上時間戳可以告訴浏覽器不要緩存響應,後面可
* 以加上傳送的資料,在servlet中用request.getParameter來取)
* * 第三個參數：表示請求是否異步傳輸
* 注意：第二個參數的相對路徑
*
*/
xmlHttp.open("get","../servlet/TestServlet?timeStamp="+new Date().getTime()+"&b=123",true);
/*4.發送請求
* 若為get請求，将不會發送任何資料，為null
*/
//alert("xx");
xmlHttp.send(null);
}
}
例6、POST方式送出資料
第一步、TestServlet.java
package cn.itcast.web;
public class TestServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws Exception {
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
System.out.println("request.getMethod"+request.getMethod());
System.out.println("request.getRequestUri"+request.getRequestURI());
System.out.println("********doGet()**********");
System.out.println(request.getParameter("a"));
System.out.println(request.getParameter("b"));
System.out.println(request.getParameter("c"));
PrintWriter out=response.getWriter();
//伺服器傳回到用戶端，這是一個文本
out.println("Connection post server ******");
}
} 第二步、test.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.jsp</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/testpost/test.js">
</script>
</head>
<body>
<input type="button" name="ok" id="ok" value="測試和伺服器的連接配接"><br>
</body>
</html> 第三步、test.js
function ajaxFunction(){
var xmlHttp;
try{//火狐
xmlHttp=new XMLHttpRequest();
}catch(e){
try {//IE
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
var xmlHttp=null;
window.onload=function(){
document.getElementById("ok").onclick=function(){
xmlHttp=ajaxFunction();
/****************************************************************************/
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200||xmlHttp.status==304){
alert(xmlHttp.responseText);
}
}
}
/****************************************************************************/
xmlHttp.open("post","./servlet/TestServlet?timeStamp="+new Date().getTime()+"&a=123",true);
/* 1.如果用POST請求想伺服器發送資料，需要将"Content-Type"的首部設定為application/x-www-form-urlencoded他會告訴伺服器正在發送資料，并且資料已經符合URL編碼了
* 2.該方法必須放在open方法的後面
*/
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//若選用的是post方法,可以傳遞資料
xmlHttp.send("b=fandong12388&c=fandong8299799");
}
} 第四步、運作結果
request.getMethodPOST
request.getRequestUri/day24ajax01/servlet/TestServlet
***doGet()*****
123
fandong12388
fandong8299799
例7、網站注冊頁面。
第一步、RegisterServlet.java
package cn.itcast.web;
public class RegisterServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws Exception {
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
//擷取使用者名 連接配接資料庫進行處理
String username = request.getParameter("username");
if("sa".equals(username)){
out.println("使用者名已存在");
}else{
out.println("使用者名可以注冊");
}
}
} 第二步、register.jsp
……
<script type="text/javascript" src="${pageContext.request.contextPath}/register/test.js"></script>
</head>
<body>
<form action="" method="post">
<h2>請填寫使用者注冊資訊</h2><br>
<table border="1">
<tr>
<td>使用者名：</td>
<td>
<input type="text" name="username" value="" id="username"/>
<div id="divcheck"></div>
<input type="button" name="checkusername" value="查詢" id="checkusername"/>
</td>
</tr>
<tr>
<td>密碼：</td>
<td>
<input type="password" name="password" value="" id="password"/>
</td>
…… 第三步、test.js
function ajaxFunction(){
var xmlHttp;
try{//火狐
xmlHttp=new XMLHttpRequest();
}catch(e){
try {//IE
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
var xmlHttp=null;
window.onload=function(){
document.getElementById("checkusername").onclick=function(){
//1.擷取頁面<input type="text" name="username" value="" id="username"/>的值
var username=document.getElementById("username").value;
xmlHttp=ajaxFunction();
/****************************************************************************/
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200||xmlHttp.status==304){
var str = xmlHttp.responseText;
//<div id="divcheck"></div>
//alert(str);
document.getElementById("divcheck").innerHTML=str;
}
}
}
/****************************************************************************/
xmlHttp.open("post","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username="+username);
}
} 例8、ajax處理xml檔案
第一步、
第二步、XmlServlet.java
package cn.itcast.web;
public class XmlServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws Exception {
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//設定傳回的mime類型是text/xml
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
StringBuffer buf=new StringBuffer();
buf.append("<china>");
buf.append("<province name='吉林省'>");
buf.append("<city>長春</city><city>吉林市</city><city>四平</city><city>通化</city>");
buf.append("</province>");
buf.append("<province name='山東省'>");
buf.append("<city>濟南</city><city>棗莊</city><city>濟甯</city><city>臨沂</city>");
buf.append("</province>");
buf.append("<province name='四川省'>");
buf.append("<city>成都</city><city>綿陽</city><city>德陽</city><city>巴中</city>");
buf.append("</province>");
buf.append("</china>");
out.println(buf.toString());
}
} 第三步、xmlfile.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>級聯菜單</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/xmlfile/xmlFile.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">請選擇...</option>
</select>
<select id="city" name="city">
<option value="">請選擇...</option>
</select>
</body>
</html> 第四步、xmlFile.js
/****************************************************************************/
function ajaxFunction(){
var xmlHttp;
try{//火狐
xmlHttp=new XMLHttpRequest();
}catch(e){
try {//IE
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
/****************************************************************************/
var xmlHttp=null;
window.onload=function(){
//1.建立XMLHttpRequest
xmlHttp=ajaxFunction();
//2.指定事件處理程式
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status == 304) {
//伺服器傳回的是一個xml檔案
var xmlDoc=xmlHttp.responseXML;
var provinceElements = xmlDoc.getElementsByTagName("province");
//擷取<province name='吉林省'>
for (var i = 0; i < provinceElements.length; i++) {
var provinceName = provinceElements[i].getAttribute("name");
var optionElement = document.createElement("option");
optionElement.setAttribute("value", provinceName);
var textElement = document.createTextNode(provinceName);
optionElement.appendChild(textElement);
var provinceSelectElement = document.getElementById("province");
provinceSelectElement.appendChild(optionElement);
}
var provinceElement=document.getElementById("province");
provinceElement.onchange = function(){
/**************************************************************/
var cityElement = document.getElementById("city");
var cityOptionElements = cityElement.getElementsByTagName("option");
var len = cityOptionElements.length;
for (var i = len - 1; i > 0; i--) {
cityElement.removeChild(cityOptionElements[i]);
}
/**************************************************************/
var provinceElement = null;
var pvalue = this.value;
var provinceXmlElements = xmlDoc.getElementsByTagName("province");
if (provinceXmlElements != null) {
for (var i = 0; i < provinceXmlElements.length; i++) {
var provinceXmlElement = provinceXmlElements[i];
var xmlProvinceNameValue = provinceXmlElement.getAttribute("name");
if (pvalue == xmlProvinceNameValue) {
provinceElement = provinceXmlElement;
break;
}
}
}
if (provinceElement != null) {
var xmlCityElements = provinceElement.getElementsByTagName("city");
for (var i = 0; i < xmlCityElements.length; i++) {
var xmlCityElement = xmlCityElements[i];
var cityValue = xmlCityElement.firstChild.nodeValue;
var optionElement = document.createElement("option");
optionElement.setAttribute("value", cityValue);
var optionTextElement = document.createTextNode(cityValue);
optionElement.appendChild(optionTextElement);
cityElement = document.getElementById("city");
cityElement.appendChild(optionElement);
}
}
}
}
}
}
//3.建立連接配接
/****************************************************************************/
xmlHttp.open("post","../servlet/XmlServlet?timeStamp="+new Date().getTime(),true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.發送請求
xmlHttp.send(null);
} JSON
例1、javascript對象的建立和通路
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>json.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
<script language="JavaScript">
/*java中對象的建立和通路:
* class Person(){
* public namae;
* public tel;
* }
* Person person=new Person();
* person.name;
* person.tel;
*
*/
//javascript中對象的建立與通路
var person={"name":"zhang","tel":"1234"};
alert(person.name);
</script>
</html> 例2、建立多個對象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>json.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
<script language="JavaScript">
/*
* 表示多個人的資訊
*/
var person= [
{"name":"zhang","tel":"1234"},
{"name":"li","tel":"5678"},
{"name":"fandong","tel":"8901"}
]
alert(person[0].name);
alert(person[1].name);
alert(person[2].name);
</script>
</html> 例3、多個對象2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>json.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
<script language="JavaScript">
/*
* 表示多個人的資訊
* 名稱：值="params":數組
*/
var person={"params":[
{"name":"zhang","tel":"1234"},
{"name":"li","tel":"5678"},
{"name":"fandong","tel":"8901"}
]};
alert(person.params[0].name);//zhang
</script>
</html> 例4、多個對象之3
……
<script language="JavaScript">
/*
* 表示多個人的資訊
* 名稱1：值1",名稱2：值2,名稱3：值3,名稱4：值4
*/
var person={"params1":[
{"name":"zhang1","tel":"1234"},
{"name":"li1","tel":"5678"},
{"name":"fandong1","tel":"8901"}
],
"params2":[
{"name":"zhang2","tel":"1234"},
{"name":"li2","tel":"5678"},
{"name":"fandong2","tel":"8901"}
],
"params3":[
{"name":"zhang3","tel":"1234"},
{"name":"li3","tel":"5678"},
{"name":"fandong3","tel":"8901"}
],
"params4":[
{"name":"zhang4","tel":"1234"},
{"name":"li4","tel":"5678"},
{"name":"fandong4","tel":"8901"}
]};
alert(person.params1[0].name);
</script>
…… 例5、javascript多個對象的建立和通路—-JSON對象
,……
<script language="JavaScript">
/*
* 表示多個人的資訊
*/
var person={
"username":"zhang",
"age":"20",
"info":{"tel":"0102434","celltel":"12345"},
"address":[
{"address":"海澱","pcode":"6336623"},
{"address":"通州","pcode":"6336645"}
]
};
alert(person.info.celltel);
alert(person.address[1].pcode);
</script>
</html> 例6、JSON對象與servlet之間的互動執行個體
第一步、
第二步、
package cn.itcast.web;
public class JsonServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws Exception {
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
String jsonStr="{\"name\":\"zhangsan\",\"tel\":\"123456\"}";
//上面一行等同于String jsonStr="{name:'zhangsan',tel:'789'}";
out.println(jsonStr);
}
} 第三步、jsonServlet.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jsonServlet.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
<script language="JavaScript">
function ajaxFunction(){
var xmlHttp;
try{//火狐浏覽器
xmlHttp=new XMLHttpRequest();
}catch(e){
try {//IE
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
window.onload=function(){
//1.建立XMLHttpRequest
xmlHttp=ajaxFunction();
//2.指定時間處理程式
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status == 304) {
var jsonStr=xmlHttp.responseText;
//alert(jsonStr);
//利用eval函數，把伺服器傳遞過來的String轉化為javascript可以識别的格式
var jsonObj=eval("("+jsonStr+")");
alert(jsonObj);
var nameValue=jsonObj.name;
alert(nameValue);
}
}
}
//3.建立連接配接
/****************************************************************************/
xmlHttp.open("post","../servlet/JsonServlet?timeStamp="+new Date().getTime(),true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.發送請求
xmlHttp.send(null);
}
</script>
</html> 第四步、在IE中鍵入http://localhost:8080/day24ajax01/json/jsonServlet.html 可以看到效果
注意：在定義json對象的時候,冒号後面的值需要加上引号，前面的可以不加！！！
例7、json表達式建立javascript對象之綜合案例分析。
第一步、Province.java
package cn.itcast.bean;
public class Province {
private String id;
private String name;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Province(String id, String name) {
this.id = id;
this.name = name;
}
} 第二步、JsonServlet02.java
package cn.itcast.web;
public class JsonServlet02 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws Exception {
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
/* [
* {id:1,name="吉林省"},
* {id:2,name="山東省"},
* {id:3,name="遼甯省"}
* ]
*
*/
Province p1=new Province("1", "吉林省");
Province p2=new Province("2", "山東省");
Province p3=new Province("3", "遼甯省");
List<Province> list=new ArrayList<Province>();
list.add(p1);
list.add(p2);
list.add(p3);
StringBuffer sb=new StringBuffer("[");
for(int i=0;i<list.size();i++){
Province p=(Province)list.get(i);
sb.append("{id:"+p.getId()+",name:'"+p.getName()+"'},");
}
sb.deleteCharAt(sb.length()-1);
sb.append("]");
System.out.println(sb.toString());//[{id:1,name:'吉林省'},{id:2,name:'山東省'},{id:3,name:'遼甯省'}]
out.print(sb.toString());
}
} 第三步、jsonServlet02.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jsonServlet.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
<script language="JavaScript">
function ajaxFunction(){
var xmlHttp;
try{//火狐浏覽器
xmlHttp=new XMLHttpRequest();
}catch(e){
try {//IE
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
window.onload=function(){
//1.建立XMLHttpRequest
xmlHttp=ajaxFunction();
//2.指定時間處理程式
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status == 304) {
var jsonStr=xmlHttp.responseText;
//利用eval函數，把伺服器傳遞過來的String轉化為javascript可以識别的格式
alert(jsonStr);
var jsonObj=eval("("+jsonStr+")");
alert(jsonObj);
var nameValue=jsonObj[0].name;
alert(nameValue);
}
}
}
//3.建立連接配接
/****************************************************************************/
xmlHttp.open("post","../servlet/JsonServlet02?timeStamp="+new Date().getTime(),true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.發送請求
xmlHttp.send(null);
}
</script>
</html> 第四步、在IE中通路：http://localhost:8080/day24ajax01/json/jsonServlet02.html
例8、建立json表達式（javascript對象）的幾種方法：
第一步、導包
第二步、Province.java
package cn.itcast.bean;
public class Province {
private String id;
private String name;
private String description="fandong";
public Province() {
}
public Province(String id, String name) {
this.id = id;
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
} 第三步、Test.java
package cn.itcast.web;
public class Test {
public static void main(String[] args) {
Province p1=new Province("1", "吉林省");
Province p2=new Province("2", "山東省");
Province p3=new Province("3", "遼甯省");
List<Province> list=new ArrayList<Province>();
list.add(p1);
list.add(p2);
list.add(p3);
/***************************轉化list到json*************************************/
//方法一
JSONArray jsonArray=(JSONArray)JSONSerializer.toJSON(list);
System.out.println(jsonArray.toString());
//[{"description":"fandong","id":"1","name":"吉林省"},{...
//方法二,過濾屬性，沒有用的屬性轉化為json時，不往上面添加
JsonConfig jsonConfig=new JsonConfig();
//1.設定哪些屬性不寫在json中
jsonConfig.setExcludes(new String[]{"description"});
JSONArray jsonArray1=(JSONArray)JSONArray.fromObject(list,jsonConfig);
System.out.println(jsonArray1.toString());
//[{"id":"1","name":"吉林省"},{"id":"2","name":"山東省"},{"id":"3","name":"遼甯省"}]
/***************************轉化javabean到json*************************************/
JSONObject jsonObject=JSONObject.fromObject(p1);
System.out.println(jsonObject.toString());
//{"description":"fandong","id":"1","name":"吉林省"}
/***************************轉化json到javabean*************************************/
String jsonStr="{\"id\":\"1\",\"name\":\"吉林省\"}";
//1.把字元串轉化為json類型的對象
JSONObject jsonObject1=(JSONObject)JSONSerializer.toJSON(jsonStr);
//2.json對象-->javabean,要求Province類中要有一個無慘的構造函數和一個有參的構造函數
Province pp =(Province)JSONObject.toBean(jsonObject1, Province.class);
System.out.println(pp.getId()+":"+pp.getName());//吉林省
/***************************轉化javabean到json*************************************/
}
} JQuery
例1、DOM對象轉化為JQuery對象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOMJquery.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="js/jquery.js"></script>
</head>
<body>
<input type="text" value="zhang" name="username" id="username"/>
</body>
<script language="JavaScript">
//dom對象轉化為Jquery對象 $(DOM對象)
//1.擷取DOM對象
var usernameElement=document.getElementById("username");
var valueStr=usernameElement.value;
alert(valueStr);
//2.dom轉化為jquery
var $usernameElement=$(usernameElement);
alert("*****"+$usernameElement.val());
</script>
</html> 例2、JQuery對象轉化為DOM對象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JqueryDOM.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="js/jquery.js"></script>
</head>
<body>
<input type="text" value="zhang" name="username" id="username"/>
</body>
<script language="JavaScript">
//jquery對象轉化為DOM對象
//$usernameElement ---- 是一個JQuery對象
var $usernameElement = $("#username");
alert($usernameElement.val());
//方法一 JQuery對象是一個數組對象，可以通過[index]的方法，來得到相應的DOM對象
var usernameElement1=$usernameElement[0];
alert(usernameElement1.value);
//方法二、jquery本身提供通過get(index)方法得到相應的DOM對象
var usernameElement2=$usernameElement.get(0);
alert(usernameElement2.value);
</script>
</html> 例3、DOM和jquery之間的比較
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOMJquery.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="js/jquery.js"></script>
</head>
<body>
<input type="text" value="zhang" name="username" id="username"/>
</body>
<script language="JavaScript">
/********************DOM***********************************/
//在javascript中函數的傳回值為空，表示false
var usernameElement=document.getElementById("username1");
if(usernameElement){
alert(usernameElement.value);
}else{
alert("不存在");//彈出不存在
}
/********************JQuery***********************************/
alert($("#username1").val());//彈出undefind
</script>
</html> （一） 選擇器
1、 五個基本選擇器
例1 、五個基本選擇器(首先将jquery.js放在工程中)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
<style type="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999cc;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#000 1px solid;
font-size:12px;
font-family:Roman;
}
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="改變id為one的元素的背景色為#0000FF" id="b1"/>
<input type="button" value="改變元素名為div的所有元素的背景色為#00FFFF" id="b2"/>
<input type="button" value="改變class為mini的所有元素的背景色為#FF0033" id="b3""/>
<input type="button" value="改變所有元素的背景色為#00FF33" id="b4" />
<input type="button" value="改變所有span元素和id為two的元素的背景色為#3399FF" id="b5"/>
<h1>天氣愣了</h1>
<h2>天氣又冷了</h2>
<div id="one">id為one</div>
<div id="two" class="mini">
id為two class為mini
<div class="mini">class是mini</div>
</div>
<div class="one">
class是one
<div class="mini">class是mini</div>
<div class="mini">class是mini</div>
</div>
<div class="one">
<div class="mini01">class是mini01</div>
<div class="mini">class是mini</div>
</div>
<br>
<div id="mover">動畫</div>
<br>
<span class="spanone">span</span>
<span class="mini">span</span>
</body>
<script language="javascript">
//1.改變id為one的元素的背景色為#0000FF
$("#b1").click(function(){
/*css("background","#0000FF")
第一個參數：css中的屬性
第二個參數：對應屬性的值
*/
$("#one").css("background","#0000FF");
});
//2.改變元素名為div的所有元素的背景色為#00FFFF
$("#b2").click(function(){
$("div").css("background","#00FFFF");
});
//3.改變class為mini的所有元素的背景色為#FF0033
$("#b3").click(function(){
$(".mini").css("background","#FF0033");
});
//4.改變所有元素的背景色為#00FF33
$("#b4").click(function(){
$("*").css("background","#00FF33");
});
//5.改變所有span元素和id為two的元素的背景色為#3399FF
$("#b5").click(function(){
$("span,#two").css("background","#3399FF");
});
</script>
</html> 2、層次選擇器
例2、層次選擇器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
<style type="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999cc;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#000 1px solid;
font-size:12px;
font-family:Roman;
}
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="改變body内所有div的背景色為#0000FF" id="b1"/>
<input type="button" value="改變body内子div的背景色為#FF0033" id="b2"/>
<input type="button" value="改變id為one的下一個div的背景色為#0000FF" id="b3""/>
<input type="button" value="改變id為two的元素後面的所有兄弟div的元的背景色為#0000FF" id="b4" />
<input type="button" value="改變id為two的元素的所有div兄弟元素的背景色為#0000FF" id="b5"/>
<h1>天氣愣了</h1>
<h2>天氣又冷了</h2>
<div id="one">id為one</div>
<div id="two" class="mini">
id為two class為mini
<div class="mini">class是mini</div>
</div>
<div class="one">
class是one
<div class="mini">class是mini</div>
<div class="mini">class是mini</div>
</div>
<div class="one">
<div class="mini01">class是mini01</div>
<div class="mini">class是mini</div>
</div>
<br>
<div id="mover">動畫</div>
<br>
<span class="spanone">span</span>
<span class="mini">span</span>
</body>
<script language="javascript">
//1.改變body内所有div的背景色為#0000FF
$("#b1").click(function(){
$("body div").css("background","#0000FF");
});
//2.改變body内子div的背景色為#FF0033(不包括孫元素)
$("#b2").click(function(){
$("body > div").css("background","#FF0033");
});
//3.改變id為one的下一個div的背景色為#0000FF
$("#b3").click(function(){
$("#one + div").css("background","#0000FF");
});
//4.改變id為two的元素後面的所有兄弟div的元的背景色為#0000FF
$("#b4").click(function(){
$("#two ~ div").css("background","#0000FF");
});
//5.改變id為two的元素的所有div兄弟元素的背景色為#0000FF
$("#b5").click(function(){
$("#two").siblings("div").css("background","#0000FF");
});
</script>
</html> **3.過濾選擇器
3.1 基礎過濾選擇器**
例3、baseFilter_selector.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
<style type="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999cc;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#000 1px solid;
font-size:12px;
font-family:Roman;
}
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="改變第一個div的背景色為#0000FF" id="b1"/>
<input type="button" value="改變最後一個div的背景色為#0000FF" id="b2"/>
<input type="button" value="改變class不為one的所有div的背景色為#0000FF" id="b3""/>
<input type="button" value="改變索引值為偶數的div元素的背景色為#0000FF" id="b4" />
<input type="button" value="改變索引值為奇數的div元素的背景色為#0000FF" id="b5" />
<input type="button" value="改變索引值大于3的div元素的背景色為#0000FF" id="b6" />
<input type="button" value="改變索引值等于3的div元素的背景色為#0000FF" id="b7" />
<input type="button" value="改變索引值小于3的div元素的背景色為#0000FF" id="b8" />
<input type="button" value="改變所有标題标元素的背景色為#0000FF" id="b9" />
<input type="button" value="改變目前正在執行動畫的所有元素的背景色為#0000FF" id="b10"/>
<div id="mover">動畫</div>
<h1>天氣愣了</h1>
<h2>天氣又冷了</h2>
<div id="one">id為one</div>
<div id="two" class="mini">
id為two class為mini
<div class="mini">class是mini</div>
</div>
<div class="one">
class是one
<div class="mini">class是mini</div>
<div class="mini">class是mini</div>
</div>
<div class="one">
<div class="mini01">class是mini01</div>
<div class="mini">class是mini</div>
</div>
<br>
<br>
<span class="spanone">span</span>
<span class="mini">span</span>
</body>
<script language="javascript">
//1.改變第一個div的背景色為#0000FF
$("#b1").click(function(){
$("div:first").css("background","#0000FF");
});
//2.改變最後一個div的背景色為#0000FF
$("#b2").click(function(){
$("div:last").css("background","#FF0033");
});
//3.改變class不為one的所有div的背景色為#0000FF
$("#b3").click(function(){
$(".one + div").css("background","#0000FF");
});
//4.改變索引值為偶數的div元素的背景色為#0000FF
$("#b4").click(function(){
$("div:even").css("background","#0000FF");
});
//5.改變索引值為奇數的div元素的背景色為#0000FF
$("#b5").click(function(){
$("div:odd").css("background","#0000FF");
});
//6.改變索引值大于3的div元素的背景色為#0000FF
$("#b6").click(function(){
$("div:gt(3)").css("background","#0000FF");
});
//7.改變索引值等于3的div元素的背景色為#0000FF
$("#b7").click(function(){
$("div:eq(3)").css("background","#0000FF");
});
//8.改變索引值小于3的div元素的背景色為#0000FF
$("#b8").click(function(){
$("div:lt(3)").css("background","#0000FF");
});
//9.改變所有标題标元素的背景色為#0000FF
$("#b9").click(function(){
$(":header").css("background","#0000FF");
});
//10.改變目前正在執行動畫的所有元素的背景色為#0000FF
function ca(){
//.slideToggle("slow");隻閃動一下,下面表示連接配接持續閃動
$("#mover").slideToggle("slow",ca);
}
//調用函數
ca();
$("#b10").click(function(){
$(":animated").css("background","#0000FF");
});
</script>
</html> 3.2 内容過濾選擇器
例4 contentFilter-selector.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
<style type="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999cc;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#000 1px solid;
font-size:12px;
font-family:Roman;
}
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="改變含有文本‘di’的div元素的背景色為#0000FF" id="b1"/>
<input type="button" value="改變不包含子元素（或者文本元素）的div空元素的背景色為#FF0033" id="b2"/>
<input type="button" value="改變含有class為mini元素的div子元素的背景色為#0000FF" id="b3""/>
<input type="button" value="改變包含子元素（或者文本元素）的div元素的背景色為#FF0033" id="b4" />
<input type="button" value="改變不含有文本‘di’的div元素的背景色為#0000FF" id="b5"/>
<h1>天氣愣了</h1>
<h2>天氣又冷了</h2>
<div id="one">id為one di</div>
<div id="two" class="mini">
id為two class為mini di
<div class="mini">class是mini</div>
</div>
<div class="one">
class是one
<div class="mini">class是mini</div>
<div class="mini">class是mini</div>
</div>
<div class="one">
<div class="mini01">class是mini01</div>
<div class="mini">class是mini</div>
</div>
<div class="one"></div>
<br>
<div id="mover">動畫</div>
<br>
<span class="spanone">span</span>
<span class="mini">span</span>
</body>
<script language="javascript">
//1.改變含有文本‘di’的div元素的背景色為#0000FF
$("#b1").click(function(){
$("div:contains('di')").css("background","#0000FF");
});
//2.改變不包含子元素（或者文本元素）的div空元素的背景色為#FF0033
$("#b2").click(function(){
$("div:empty").css("background","#FF0033");
});
//3.改變含有class為mini子元素的div元素的背景色為#0000FF
$("#b3").click(function(){
$("div:has(.mini)").css("background","#0000FF");
});
//4.改變包含子元素（或者文本元素）的div元素的背景色為#FF0033
$("#b4").click(function(){
$("div:parent").css("background","#FF0033");
});
//5.改變不含有文本‘di’的div元素的背景色為#0000FF
$("#b5").click(function(){
$("div:not(:contains('di'))").css("background","#0000FF");
});
</script>
</html> 3.3 可見度過濾選擇器
例5、可見度過濾選擇器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
<style type="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999cc;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#000 1px solid;
font-size:12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="改變所有可見div元素的背景色為#0000FF" id="b1"/>
<input type="button" value="選區所有不可見的元素,利用jquery中的show()方法将他們顯示出來,并設定其背景顔色為#0000FF" id="b2"/>
<input type="button" value="選取所有的文本隐藏域，并列印它們的值" id="b3""/>
<input type="button" value="選取所有的文本隐藏域，并列印它們的值" id="b4" />
<!-- 文本隐藏域-->
<input type="hidden" value="hidden_1"/>
<input type="hidden" value="hidden_2"/>
<input type="hidden" value="hidden_3"/>
<input type="hidden" value="hidden_4"/>
<h1>天氣愣了</h1>
<h2>天氣又冷了</h2>
<div id="one">id為one di</div>
<div id="two" class="mini">
id為two class為mini di
<div class="mini">class是mini</div>
</div>
<div class="one">
class是one
<div class="mini">class是mini</div>
<div class="mini">class是mini</div>
</div>
<div class="visible">
這是隐藏的！！
</div>
<div class="one">
<div class="mini01">class是mini01</div>
<div class="mini">class是mini</div>
</div>
<div class="one"></div>
<br>
<div id="mover">動畫</div>
<br>
<span class="spanone">span</span>
<span class="mini">span</span>
</body>
<script language="javascript">
//1.改變所有可見div元素的背景色為#0000FF
$("#b1").click(function(){
$("div:visible").css("background","#0000FF");
});
//2.選區所有不可見的元素,利用jquery中的show()方法将他們顯示出來,并設定其背景顔色為#0000FF
$("#b2").click(function(){
$("div:hidden").show().css("background","#0000FF");
});
//3.選取所有的文本隐藏域，并列印它們的值(方法一)
$("#b3").click(function(){
//alert($("input:hidden").length);
var $inputHidden=$("input:hidden");
/*each:以每一個比對的元素作為上下文來執行一個函數
* function(index,data)
* index:每次周遊的索引0,1,2,3.
* data:目前的對象,在循環中等價于this
*/
$inputHidden.each(function(index,data){
//alert($(this).val());
//alert(index);
alert($(data).val());
});
});
//4.選取所有的文本隐藏域，并列印它們的值(方法二)
$("#b4").click(function(){
var $inputHidden=$("input:hidden");
/* jQuery.each(obj,callback)
* 通用的便利方法，可用于例遍對象和數組
* * 隻要是jQuery.xxx方法，就用$.xxx的形式去寫
* 第一個參數obj：要周遊的對象和數組
* 第二個參數callback：回調函數
*
*/
$.each($inputHidden,function(index,data){
alert($(data).val());
});
});
</script>
</html> 3.5屬性過濾選擇器
例6、屬性過濾器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
<style type="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999cc;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#000 1px solid;
font-size:12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="改變含有屬性title的div元素的背景色為#0000FF" id="b1"/>
<input type="button" value="改變含有屬性title=test的div元素的背景色為#0000FF" id="b2"/>
<input type="button" value="改變含有屬性title不為test的div元素的背景色為#0000FF(沒有title屬的元素也被選中)" id="b3""/>
<input type="button" value="改變含有屬性title不為test的div元素的背景色為#0000FF(沒有title屬的元素不被選中)" id="bx""/>
<input type="button" value="改變含有屬性title以te開頭的div元素的背景色為#0000FF" id="b4" />
<input type="button" value="改變含有屬性title以est結束的div元素的背景色為#0000FF" id="b5" />
<input type="button" value="改變含有屬性title含有es的div元素的背景色為#0000FF" id="b6" />
<input type="button" value="選取含有屬性 id 的div元素 然後在結果中選取屬性title值含有es的div元素" id="b7" />
<!-- 文本隐藏域-->
<input type="hidden" value="hidden_1"/>
<input type="hidden" value="hidden_2"/>
<input type="hidden" value="hidden_3"/>
<input type="hidden" value="hidden_4"/>
<h1>天氣愣了</h1>
<h2>天氣又冷了</h2>
<div id="one">id為one di</div>
<div id="two" class="mini" title="test">
id為two class為mini di,title="test"
<div class="mini">class是mini</div>
</div>
<div class="one" title="test02">
class是one,title="test02"
<div class="mini">class是mini</div>
<div class="mini">class是mini</div>
</div>
<div class="visible">
這是隐藏的！！
</div>
<div class="one">
<div class="mini01">class是mini01</div>
<div class="mini">class是mini</div>
</div>
<div class="one"></div>
<br>
<div id="mover">動畫</div>
<br>
<span class="spanone">span</span>
<span class="mini">span</span>
</body>
<script language="javascript">
//1.改變含有屬性title的div元素的背景色為#0000FF
$("#b1").click(function(){
$("div[title]").css("background","#0000FF");
});
//2.改變含有屬性title=test的div元素的背景色為#0000FF
$("#b2").click(function(){
$("div[title='test']").css("background","#0000FF");
});
//3.改變含有屬性title不為test的div元素的背景色為#0000FF(沒有title屬的元素也被選中)
$("#b3").click(function(){
$("div[title!='test']").css("background","#0000FF");
});
//x.改變含有屬性title不為test的div元素的背景色為#0000FF(沒有title屬的元素不被選中)
$("#bx").click(function(){
//$("div[title][title!='test']").css("background","#0000FF");
$("div[title]:not([title='test'])").css("background","#0000FF");
});
//4.改變含有屬性title以te開頭的div元素的背景色為#0000FF
$("#b4").click(function(){
$("div[title^='te']").css("background","#0000FF");
});
//5.改變含有屬性title以est結束的div元素的背景色為#0000FF
$("#b5").click(function(){
$("div[title$='est']").css("background","#0000FF");
});
//6.改變含有屬性title含有es的div元素的背景色為#0000FF
$("#b6").click(function(){
$("div[title*='es']").css("background","#0000FF");
});
//7.選取含有屬性 id 的div元素 然後在結果中選取屬性title值含有es的div元素
$("#b7").click(function(){
$("div[id][title*='es']").css("background","#0000FF");
});
</script>
</html> 3.6 子元素選擇器
例7、childFilter_selector.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> childFilter_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
<style type="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999cc;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#000 1px solid;
font-size:12px;
font-family:Roman;
}
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="改變每一個class為one的div父元素下的第二個子元素的背景色為#0000FF" id="b1"/>
<input type="button" value="改變每一個class為one的div父元素下的第一個子元素的背景色為#0000FF" id="b2"/>
<input type="button" value="改變每一個class為one的div父元素下的最後個子元素的背景色為#0000FF" id="b3""/>
<input type="button" value="如果class為one的div父元素下隻有一個子元素，改變這個子元素的背景色為#0000FF" id="b4" />
<div id="mover">動畫</div>
<h1>天氣愣了</h1>
<h2>天氣又冷了</h2>
<div id="one">id為one</div>
<div id="two" class="mini">
id為two class為mini
<div class="mini">class是mini</div>
</div>
<div class="one">
class是oneasdfasdf
<div class="mini">class是mini</div>
</div>
<div class="one">
class是one
<div class="mini">class是mini</div>
<div class="mini">class是mini</div>
</div>
<div class="one">
<div class="mini01">class是mini01</div>
<div class="mini">class是mini</div>
</div>
<br>
<br>
<span class="spanone">span</span>
<span class="mini">span</span>
</body>
<script language="javascript">
//1.改變每一個class為one的div父元素下的第二個子元素的背景色為#0000FF
$("#b1").click(function(){
//注意：div[class='one']與冒号之間有空格
$("div[class='one'] :nth-child(2)").css("background","#0000FF");
});
//2.改變每一個class為one的div父元素下的第一個子元素的背景色為#0000FF
$("#b2").click(function(){
$("div[class='one'] :first-child").css("background","#0000FF");
});
//3.改變每一個class為one的div父元素下的最後個子元素的背景色為#0000FF
$("#b3").click(function(){
$("div[class='one'] :last-child").css("background","#0000FF");
});
//4.如果class為one的div父元素下隻有一個子元素，改變這個子元素的背景色為#0000FF
$("#b4").click(function(){
$("div[class='one'] :only-child").css("background","#0000FF");
});
</script>
</html> 3.8 表單對象屬性過濾選擇器
例8 表單對象過濾器執行個體
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
<style type="text/css">
div,span{
width:140px;
height:140px;
margin:20px;
background:#9999cc;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Roman;
}
div.mini{
width:30px;
height:30px;
background:#CC66FF;
border:#000 1px solid;
font-size:12px;
font-family:Roman;
}
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="利用jQuery對象的val()方法改變表單内可用<input>元素的值" id="b1"/>
<input type="button" value="利用jQuery對象的val()方法改變表單内不可用<input>元素的值" id="b2"/>
<input type="button" value="利用jQuery對象的length屬性擷取多選框選中的個數" id="b3""/>
<input type="button" value="利用jQuery對象的text()方法擷取下拉框選中的内容" id="b4" />
<input type="text" value="不可用值1" disabled="disabled"/>
<input type="text" value="可用值1"/>
<input type="text" value="不可用值2" disabled="disabled"/>
<input type="text" value="可用值2""/>
<br>
<input type="checkbox" name="items" value="美容">美容
<input type="checkbox" name="items" value="IT">IT
<input type="checkbox" name="items" value="金融">金融
<input type="checkbox" name="items" value="管理">管理
<br>
<input type="checkbox" name="a" value="美容1">美容1
<input type="checkbox" name="a" value="IT1">IT1
<input type="checkbox" name="a" value="金融1">金融1
<input type="checkbox" name="a" value="管理1">管理1
<br>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
<br>
<select name="job" id="job" multiple="multiple" size=4>
<option value="程式員" selected="selected">程式員</option>
<option value="中級程式員">中級程式員</option>
<option value="進階程式員">進階程式員</option>
<option value="系統分析師">系統分析師</option>
</select>
<select name="edu" id="edu">
<option value="大學">大學</option>
<option value="博士">博士</option>
<option value="碩士">碩士</option>
<option value="大專">大專</option>
</select>
<textarea cols=12 rows=4>textarea</textarea>
<button value="确定">确定</button>
</body>
<script language="javascript">
//1.利用jQuery對象的val()方法改變表單内可用<input>元素的值
$("#b1").click(function(){
$("input[type='text']:enabled").each(function(){
$(this).val("可用的值**********");
});
});
//2.利用jQuery對象的val()方法改變表單内不可用<input>元素的值
$("#b2").click(function(){
$("input[type='text']:disabled").each(function(){
$(this).val("不可用的值**********");
});
});
//3.1利用jQuery對象的length屬性擷取多選框選中的個數
$("#b3").click(function(){
var $ch = $("input[type='checkbox']:checked");
alert($ch.length);
});
//3.2利用jQuery對象的length屬性擷取多選框選中的個數
$("#b3").click(function(){
var $ch = $("input[name='items'][type='checkbox']:checked");
alert($ch.length);
});
//4.利用jQuery對象的text()方法擷取下拉框選中的内容
$("#b4").click(function(){
$("select option:selected").each(function(index,data){
alert($(this).text());
});
});
</script>
</html> 例9 練習
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>base_selector.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<table border="1">
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第二行</td><td>第二行</td>
</tr>
<tr>
<td>第三行</td><td>第三行</td>
</tr>
<tr>
<td>第四行</td><td>第四行</td>
</tr>
<tr>
<td>第五行</td><td>第五行</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第二行</td><td>第二行</td>
</tr>
<tr>
<td>第三行</td><td>第三行</td>
</tr>
<tr>
<td>第四行</td><td>第四行</td>
</tr>
<tr>
<td>第五行</td><td>第五行</td>
</tr>
</table>
</body>
<script language="javascript">
$("p").each(function(index,data){
$(this).click(function(){
alert($(this).text());
});
});
//将第一個表格的奇數行的北京顔色設定為紅色
$("table:eq(0) tr:even").css("background","red");
//将第二個表格的奇數行的北京顔色設定為紅色
$("table:eq(1) tr:even").css("background","red");
</script>
</html> 4、DOM操作
例9、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
</style>
</head>
<body>
<input type="button" value="儲存" class="mini" name="ok"/>
<input type="button" value="輸出li id=bj name=beijing北京</li>name屬性的值" id="b1"/>
<input type="button" value="在<ul>中添加<li id=tj name=tianjin>天津</li>" id="b2"/>
<input type="button" value="删除<li id=sh name=shanghai>上海</li>" id="b3""/>
<input type="button" value="清空結點<ul>" id="b4" />
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
</ul>
</body>
<script language="javascript">
//1.輸出<li id="bj" name="beijing">北京</li>name屬性的值
$("#b1").click(function(){
alert($("#bj").attr("name"));
});
//2.在<ul>中添加<li id=tj name=tianjin>天津</li>
$("#b2").click(function(){
var $li=$("<li></li>");
$li.attr("id","tj");
$li.attr("name","tianjin");
$li.text("天津");
//2.1 append():向每個比對的元素的内部的結尾處追加内容
//$("#city").append($li);在id=city的元素的最後追加新元素
//2.2 appendTo():将每個比對的元素追加到指定的元素中的内部結尾處
//$li.appendTo($("#city"));
//2.3 prepend():向每個比對的元素的内部的開始處插入内容
//$("#city").prepend($li);
//2.4 prependTo():将每個比對的元素插入到指定的元素内部的開始處
$li.prependTo($("#city"));
});
//3.删除<li id=sh name=shanghai>上海</li>
$("#b3").click(function(){
$("#sh").remove();
});
//4.清空結點<ul>
$("#b4").click(function(){
$("#city").empty();
//id結點沒有删除
alert($("#city").attr("id"));
});
</script>
</html> 例10 ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>user.html</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
</head>
<body>
<br><br><br>
<center>
添加使用者：<br><br>
使用者名：<input type="text" name="username" id="username"/>
電子郵箱：<input type="text" name="email" id="email"/>
電話：<input type="text" name="tel" id="tel"/>
<br><br>
<button id="addUser">送出</button>
</center>
<br><br><br>
<hr>
<center>
<br>
<table border="1" id="user">
<!--這裡一定要有tbody标簽否則下面appendChild不好使-->
<tbody>
<tr>
<th>使用者名</th>
<th>電子郵箱</th>
<th>電話</th>
<th>操作</th>
</tr>
<tr>
<td>fandong</td>
<td>[email protected]</td>
<td>12345</td>
<td><a href="emp?id=fandong">delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
<script language="JavaScript">
$("#addUser").click(function(){
var nameValue=$("#username").val();
var emailValue=$("#email").val();
var telValue=$("#tel").val();
$tdName=$("<td/>");
$tdName.text(nameValue);
$tdEmail=$("<td/>");
$tdEmail.text(emailValue);
$tdTel=$("<td/>");
$tdTel.text(telValue);
$tdA=$("<td/>");
$a=$("<a/>");
$a.text("delete");
$a.attr("href","delete");
$tdA.append($a);
//建立tr
$tr=$("<tr/>");
$tr.append($tdName);
$tr.append($tdEmail);
$tr.append($tdTel);
$tr.append($tdA);
$("#user").children().eq(0).append($tr);
$a.click(function(){
//alert("xx");
deletetr($a);
return false;
});
});
function deletetr($a){
//1.擷取使用者名稱
var username =$a.parent().parent().children().eq(0).text();
//alert(username);
var flag =window.confirm("您真的要删除["+username+"]的值嗎?");
//alert(flag);
//2.點選取消
if(!flag){
return false;//不再往下執行
}
//3.點選确定
//3.1擷取tbody
$a.parent().parent().remove();
//3.2使連接配接失效
return false;
}
/*總結：
* children() **********
* 取得一個包含比對的元素集合中每一個元素的所有子元素的元素集合。
* eq():擷取第N個元素,這個元素的位置是從0算起。
* parent():取得一個包含着所有比對元素的唯一父元素的元素集合。
*
*/
</script>
</html> 例11、實作選中項的移動
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select.html</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<script language="JavaScript" src="../js/jquery.js"></script>
</head>
<body>
<select name="select1" size="10" multiple="multiple" id="first">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
<option>選項5</option>
<option>選項6</option>
<option>選項7</option>
<option>選項8</option>
</select>
<input type="button" id="add" value="-->">
<input type="button" id="add_all" value="==>">
<input type="button" id="remove" value="<--">
<input type="button" id="remove_all" value="<==">
<select name="select1" size="10" multiple="multiple" style="width:60" id="second">
</select>
</body>
<script language="JavaScript">
//1.選中的移到右邊
$("#add").click(function(){
$("select[id='first'] option:selected").appendTo($("#second"));
});
//2.全移動
$("#add_all").click(function(){
$("select[id='first'] option").appendTo($("#second"));
});
//3.左邊輕按兩下移到右邊
$("#first").dblclick(function(){
$("select[id='first'] option:selected").appendTo($("#second"));
});
</script>
</html> 5.外部插入結點
6、克隆結點
7、替換結點
例12、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>insert.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
</head>
<body>
<p id="p1">xxxxxxxxxxxx1</p>
<p id="p2">xxxxxxxxxxxx2</p>
<p id="p3">xxxxxxxxxxxx3</p>
<button>儲存</button><br><br><br>
<p id="p4">段落</p>
</body>
<script language="JavaScript">
//1.外部插入結點
//1.1.after(content):在每一個比對的元素之後插入内容
//$("#p3").after($("#p1"));//在p3的後面插入p1
//1.2.before(content):在每一個比對的元素之前插入内容
//$("#p3").before($("#p1"));
//1.3.insertBefore(content)把所有比對的元素插入到另一個、指定的元素元素集合的前面。
//$("#p1").insertBefore($("#p3"));
//1.4.insertAfter(content)把所有比對的元素插入到另一個、指定的元素元素集合的後面。
//2.克隆結點
// $("button").click(function(){
// alert("xx");
// });
//clone():克隆比對的DOM元素并且選中這些克隆的副本,但此時複制 的新節點不具有任何行為，不克隆事件
//$("button").clone().appendTo($("#p4"));
//clone(true):複制元素的同時也複制元素的事件
//$("button").clone(true).appendTo($("#p4"));
//3.替換結點
//将p替換為button
$("p").replaceWith("<button>儲存1</button>");
//将button替換為p
$("p").replaceAll($("button"));
</script>
</html> 8、樣式操作
例13、登入執行個體。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
</head>
<body>
<input type="text" value="使用者郵箱/手機号/使用者名" id="b1"/><br>
<input type="password" value="" id="b2"/><br>
<input type="button" value="登入" id="b3"/>
</body>
<script language="JavaScript">
//擷取焦點
$("#b1").focus(function(){
//alert(this.defaultValue);
//1.擷取目前值
var curValue=$(this).val();
//2.如果目前值和預設值相同，就置為空
if(curValue==this.defaultValue){
$(this).val("");
}
});
//失去焦點
$("#b1").blur(function(){
//1.擷取目前值
var curValue=$(this).val();
if($.trim(curValue)==""){
$(this).val(this.defaultValue);
}
});
</script>
</html> 例14、val()方法詳解,取值和指派
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
</head>
<body>
<input type="button" value="使單選下拉框的2号被選中"/><br>
<input type="button" value="使多選下拉框的2号和4号被選中"/><br>
<input type="button" value="使複選框的複選2和複選4被選中"/><br>
<input type="button" value="使單選框的單選2被選中"/><br>
<input type="button" value="列印已經被選中的值"/><br>
<select id="one">
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select><br>
<select id="mary" multiple="multiple">
<option selected="selected">1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option>6号</option>
</select><br>
<input type="checkbox" name="c" value="check1"/>複選1
<input type="checkbox" name="c" value="check2"/>複選2
<input type="checkbox" name="c" value="check3"/>複選3
<input type="checkbox" name="c" value="check4"/>複選4
<br>
<input type="radio" name="r" value="radio1"/>單選1
<input type="radio" name="r" value="radio2"/>單選2
<input type="radio" name="r" value="radio3"/>單選3
</body>
<script language="JavaScript">
//1.使單選下拉框的2号被選中
$("input[type='button']:eq(0)").click(function(){
$("#one").val(["2号"]);//數組
});
//2.使多選下拉框的2号和4号被選中
$("input[type='button']:eq(1)").click(function(){
$("#mary").val(["2号","4号"]);
});
//3.使複選框的複選2和複選4被選中
$("input[type='button']:eq(2)").click(function(){
$("input[name='c']").val(["check2","check4"]);
});
//4.使單選框的單選2被選中
$("input[type='button']:eq(3)").click(function(){
$("input[name='r']").val(["radio2"]);
});
//5.列印已經被選中的值
//5.1 方法1
// $("input[type='button']:eq(4)").click(function(){
// $("#mary option:selected").each(function(index,data){
// alert($(data).text());
// });
// });
//5.2 方法2
$("input[type='button']:eq(4)").click(function(){
$.each($("#mary option:selected"),function(index,data){
alert($(data).text());
});
$("input[name='c']:checked").each(function(index,data){
alert($(data).val());
});
});
</script>
</html> 例15、next()方法舉例。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>收縮展開效果</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
</head>
<body>
<!--收縮展開效果-->
<div class="box">
<h1>收縮展開效果</h1>
<div id="menu1">
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
</div>
</div>
<div id="menu2">
<h1>收縮展開效果</h1>
<div class="text">
1<br/>
2<br/>
</div>
</div>
<div id="menu3">
<h1>收縮展開效果</h1>
<div class="text">
1<br/>
2<br/>
</div>
</div>
<br/>
</body>
<script language="JavaScript">
//1.執行單擊事件的域
$("h1").each(function(index,data){
$(data).click(function(){
// slideToggle(1)通過高度變化切換元素的可見性
$(this).next().slideToggle(1);//1ms
});
});
</script> 例16、實作下拉清單的顯示與隐藏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery.js"></script>
</head>
<body>
<table>
<tbody>
<!--*************************************************************************************-->
<tr>
<td>
<table width="152">
<tr width="152">
<td>
<table width="98%">
<tr style="color:red;background:blue;cursor:hand" onClick="show('1')">
<td><img src="../image/1.gif"></td>
<td>客戶管理1</td>
<td><img src="../image/2.gif"></td>
</tr>
</table>
</td>
</tr>
<tr id="tr0_1" style="display:null">
<td>
<table width="90%" align="center">
<tr>
<td><img src="../image/2.gif"></td>
<td>客戶拜訪1</td>
</tr>
</table>
<table width="90%" align="center">
<tr>
<td><img src="../image/2.gif"></td>
<td>聯系人清單1</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--*************************************************************************************-->
<tr>
<td>
<table width="152">
<tr width="152">
<td>
<table width="98%">
<tr style="color:red;background:blue;cursor:hand" onclick="show('2')">
<td><img src="../image/1.gif"></td>
<td>客戶管理2</td>
<td><img src="../image/2.gif"></td>
</tr>
</table>
</td>
</tr>
<tr id="tr0_2" style="display:none">
<td>
<table width="90%" align="center">
<tr>
<td><img src="../image/2.gif"></td>
<td>客戶拜訪2</td>
</tr>
</table>
<table width="90%" align="center">
<tr>
<td><img src="../image/2.gif"></td>
<td>聯系人清單2</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--*************************************************************************************-->
<tr>
<td>
<table width="152">
<tr width="152">
<td>
<table width="98%">
<tr style="color:red;background:blue;cursor:hand" onClick="show('3')">
<td><img src="../image/1.gif"></td>
<td>客戶管理3</td>
<td><img src="../image/2.gif"></td>
</tr>
</table>
</td>
</tr>
<tr id="tr0_3" style="display:none">
<td>
<table width="90%" align="center">
<tr>
<td><img src="../image/2.gif"></td>
<td>客戶拜訪3</td>
</tr>
</table>
<table width="90%" align="center">
<tr>
<td><img src="../image/2.gif"></td>
<td>聯系人清單</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--*************************************************************************************-->
</tbody>
</table>
</body>
<script language="JavaScript">
function show(i){
// alert(i);
//1.擷取所有要操作的tr tr0_n <tr id="tr0_3" style="display:null">
$("tr[id^='tr0']").each(function(index,data){
//如果目前tr
if(index+1==i){
if($(data).is(":hidden")){
//是隐藏的,則顯示出來
$(data).attr("style","display:null");
}else{
//否則，設定為隐藏
$(data).attr("style","display:none");
}
}else{
//其他的全部隐藏
$(data).attr("style","display:none");
}
});
}
</script>
</html> 10.JQuery表單驗證
一、必須引用：
<script language="JavaScript" src="../form/jquery-1.7.2.js"></script>
<script language="JavaScript" src="../form/jquery.validate.js"></script> 二、預設驗證規則
(1) required: true 必須輸入
(2) number: true 隻能輸入數字(包括小數)
(3) digits:true 隻能輸入整數
(4) min: 3 不能小于3
(5) max: 100 最大不超過100
(6) range:[50,100] 值範圍為50-100
(7) minLength: 5 最小長度(漢字算一個字元)
(8) maxLength: 10 最大長度(漢字算一個字元)
(9) rangeLength:[5,10] 長度範圍為5至10位(漢字算一個字元)
(10) 上面的minLength, maxLength, rangeLength 這三項除了text input之外還可以用于checkbox,select這兩種控件
(11) email:true 電子郵件
(12) equalTo: “#field” 與#field值相同
(14)date:true 日期格式：1982/09/21
(13) dateISO:true 日期型，格式為2012/02/12 2010-1-14
(14)remote:”check.php” 必須使用ajax方法調用check.php驗證輸入值
(15)url:true 必須輸入正确的網址
(16)creditcart:true 必須輸入正确的信用卡号
(17)accept: 輸入擁有合法字尾名的字元串(上傳檔案的字尾名)
例17、表單驗證
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>emp_cn.html</title>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="jquery-1.7.2.js"></script>
<script language="JavaScript" src="jquery.validate.js"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function() { //驗證完畢送出表單之前要走這個方法、
alert("submitted!");
}
});
/*
* 自定義驗證方法:
* $.validator.addMethod(方法名稱,調用函數)
* * 第一個參數：添加的驗證方法的名子,
* * 第二個參數: 自定義的錯誤提示,通常是一個函數
* function(value,element,params)
* * value:是元素的值
* * element:元素本身
* * params:參數
*/
$.validator.addMethod("checkTest",function(value,element,params){
//alert(value);文本框中的值
if(value==""){
return false;//沒有通過
}
return true;//通過
});
$().ready(function(){//頁面準備好了再執行
//對那個表單進行驗證,validate() jquery驗證架構的驗證方法
$("#empForm").validate({
//rules: 自定義規則,key:value的形式,key是要驗證的元素,value可以是字元串或對象
rules: {
realname:"required", //realname是元素節點的name屬性
username:{
required:true,
maxlength:8,
minlength:5
},
password1:{
required:true,
minlength:5,
maxlength:8
},
password2:{
required:true,
minlength:5,
maxlength:8,
equalTo:"#password1" //id
},
sex:{
required:true
},
age:{
required:true,
min:26,
max:50
},
edu:{
required:true
},
birthday:{
required:true,
date:true
},
checkbox1:{
required:true
},
email:{
required:true,
email:true
},
description:{
//調用前面定義的方法,這裡等價于required=true
checkTest:"1" //1表示使用預設資訊
}
},
//messages:自定義的提示資訊key:value的形式key是要驗證的元素,值是字元串或函數
/*
* 錯誤提示資訊預設放在域的後面
*/
messages: {
realname:"您的真實姓名不能為空",
username:"登入名不能為空，長度在5~8之間",
password1:"您的密碼不能為空，長度為5~8之間",
password2:"您的确認密碼不能為空,确認密碼必須和密碼相等",
sex:"必選一個",
age:"年齡不能為空,并且必須在26~50之間",
edu:"請選擇學曆",
birthday:"您出生日期的格式不對",
checkbox1:"必須選中其中一個",
email:"您必須輸入正确的電子郵件",
description:"個人資訊描述不能為空"
}
});
});
</script>
</head>
<body>
<h1> 員工資訊錄入</h1>
<form id="empForm" name="empForm" action="" method="post">
<table border="1">
<tr>
<td width="200">真實姓名(不能為空)</td>
<td><input id="realname" name="realname" type="text"/></td>
</tr>
<tr>
<td width="200">登入名(登入名不能為空，長度應該在5~8之間):</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" name="password1" id="password1"/></td>
</tr>
<tr>
<td>重複密碼:</td>
<td><input type="password" name="password2" id="password2"/></td>
</tr>
<tr>
<!--
jquery.validate.js在處理錯誤資訊時會生成一個标簽<label></label>
<label style="display:none;" for="sex" class="error">性别必須選中一個1</label>
1.标簽名是label
2.标簽開始預設是隐藏的 tyle="display:none;"
3.for="sex" 是該标簽的唯一辨別
4.class="error" 固定寫法，辨別錯誤資訊
5.驗證架構會根據label标簽,for屬性的值查找該标簽是否存在
5.1 如果不存在,即當<label/>在表單中沒有定義的時候,驗證架構會生成一個<label/>标簽,并且增加
for屬性值就是标簽的name屬性的值
5.2 如果存在,即當在表單中定義<label/>的時候,驗證架構會根據name屬性在表單中查找該标簽,然後顯示
-->
<td>性别(必選其一)</td>
<td><input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<label style="display:none;" for="sex" class="error">性别必須選中一個1</label>
</td>
</tr>
<tr>
<td>年齡(必填26~50):</td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td>你的學曆:</td>
<td><select name="edu" id="edu">
<!--注意這裡的<option>都必須要有value屬性-->
<option value="">--請選擇你的學曆--</option>
<option value="博士">博士</option>
<option value="碩士">碩士</option>
<option value="大學">大學</option>
<option value="大專">大專</option>
<option value="高中">高中</option>
</select>
</td>
</tr>
<tr>
<td width="200">出生日期(1982/09/21):</td>
<td><input type="text" name="birthday"/></td>
</tr>
<tr>
<td>興趣愛好:</td>
<td>
<input type="checkbox" name="checkbox1" value="乒乓球"/>乒乓球
<input type="checkbox" name="checkbox1" value="羽毛球"/>羽毛球
<input type="checkbox" name="checkbox1" value="上網"/>上網
<input type="checkbox" name="checkbox1" value="旅遊"/>旅遊
<input type="checkbox" name="checkbox1" value="購物"/>購物
<label style="display:none;" for="checkbox1" class="error">您的興趣愛好必須選擇一個</label>
</td>
</tr>
<tr>
<td width="200">電子郵箱:</td>
<td><input type="text" name="email"/></td>
</tr>
<!--自定義校驗規則-->
<tr>
<td width="200">test:</td>
<td><input type="text" name="description"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="送出"/></td>
</tr>
</table>
</form>
</body>
</html> 經典案例：實作選項的三級關聯
第一步、建表 sql.sql
CREATE TABLE province(
pid INT,
pname VARCHAR(20)
)
SELECT pid,pname FROM province ORDER BY pid
CREATE TABLE city(
cid INT,
cname VARCHAR(20),
pid INT #省對應的編号
) 第二步、readme.txt
利用struts和jquery實作三級關聯
* 引入類庫：
* 引入struts類庫
* 引入json類庫
* 引入資料庫連接配接驅動
* 引入js檔案
* 引入Jquery.js檔案
第三步、web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>/WEB-INF/struts-config.xml</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>list.html</welcome-file>
</welcome-file-list>
</web-app> 第四步、struts-config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts-config PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 1.3//EN"
"http://struts.apache.org/dtds/struts-config_1_3.dtd">
<struts-config>
<action-mappings>
<action path="/listAction" parameter="method" type="cn.itcast.web.action.ListAction"></action>
</action-mappings>
</struts-config> 第五步、list.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>list.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="./js/jquery-1.7.2.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">請選擇...</option>
</select>
<select id="city" name="city">
<option value="">請選擇...</option>
</select>
<select id="county" name="county">
<option value="">請選擇...</option>
</select>
</body>
<script type="text/javascript">
$(document).ready(function(){
//1.擷取省的資訊
//頁面一啟動就發送請求
$.post("./listAction.do?method=listProvince",function(data,textStatus){
var dataObjs=eval("("+data+")");
for(var i=0;i<dataObjs.length;i++){
var dataObj=dataObjs[i];
//alert(dataObj.pid+":"+dataObj.pname);
var $option=$("<option></option>");
$option.attr("value",dataObj.pid);
$option.text(dataObj.pname);
$("#province").append($option);
}
});
//2.省的變化引起城市的變化
$("#province").change(function(){
//alert(this.value);
$.post("./listAction.do?method=listCity",{'pid':$(this).val()},function(data,textStatus){
//删除city下拉選的内容
$("#city option").each(function(index,data){
if(index!=0){//排除第一項
$(data).remove();
}
});
var dataObjs=eval("("+data+")");
for(var i=0;i<dataObjs.length;i++){
var dataObj=dataObjs[i];
//alert(dataObj.cid+":"+dataObjs[i].cname);
var $option=$("<option></option>");
$option.attr("value",dataObj.cid);
$option.text(dataObj.cname);
$("#city").append($option);
}
});
});
//3.城市的變化引起縣城的變化
});
</script>
</html> 第六步、ListAction.java
package cn.itcast.web.action;
public class ListAction extends DispatchAction {
public ActionForward listProvince(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
//1.擷取省的資訊放置到list中
DaoProvinceImpl daoProvinceImpl=new DaoProvinceImpl();
List<Province> list = daoProvinceImpl.findAllProvince();
//2.将list轉化為json格式
JSONArray jsonArray = JSONArray.fromObject(list);
//System.out.println(jsonArray.toString());
//3.輸出:out.println(json);
out.println(jsonArray.toString());
return null;
}
public ActionForward listCity(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
String spid=request.getParameter("pid");
Integer pid=Integer.parseInt(spid);
//System.out.println(spid);
DaoCityImpl daoCityImpl=new DaoCityImpl();
//1.擷取某個省下面的city的資訊放置到list中
List<City> list = daoCityImpl.findAllCity(pid);
//2.将list轉化為json格式
JSONArray jsonArray = JSONArray.fromObject(list);
//3.輸出:out.println(json);
out.println(jsonArray.toString());
return null;
}
} 第七步、Province.java
package cn.itcast.bean;
public class Province {
private Integer pid;
private String pname;
……
第八步、DaoProvinceImpl.java
package cn.itcast.dao.Impl;
public class DaoProvinceImpl {
public List<Province> findAllProvince() {
List<Province> list=new ArrayList<Province>();
DBManager dbManager=DBManager.getDbManager();
Connection conn=dbManager.getConnection();
PreparedStatement pstatement=null;
ResultSet rs=null;
//SELECT pid,pname FROM province ORDER BY pid
String sql="SELECT pid,pname FROM province ORDER BY pid";
try {
pstatement=conn.prepareStatement(sql);
rs=pstatement.executeQuery();
while(rs.next()){
Province p=new Province();
p.setPid(rs.getInt(1));
p.setPname(rs.getString(2));
list.add(p);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
dbManager.closeResource(conn, pstatement, rs);
}
return list;
}
} 第九步、DBManager.java
package cn.itcast.db;
public class DBManager {
private static DBManager dbManager=new DBManager();
private BasicDataSource bds=null;
private DBManager(){
bds=new BasicDataSource();
bds.setUsername("root");
bds.setPassword("root");
bds.setUrl("jdbc:mysql://localhost:3306/test");
bds.setDriverClassName("com.mysql.jdbc.Driver");
bds.setMaxActive(5);
bds.setInitialSize(4);
bds.setMinIdle(3);
bds.setMaxIdle(10);
bds.setMaxWait(5000);
}
public static DBManager getDbManager(){
return dbManager;
}
public Connection getConnection(){
Connection conn=null;
try {
conn=bds.getConnection();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
public void closeResource(Connection conn,Statement statement,ResultSet rs){
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(statement!=null){
try {
statement.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(rs!=null){
try {
rs.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
}
}
}
} 第十步、City.java
package cn.itcast.bean;
public class City {
private Integer cid;
private String cname;
…… 第十一步、DaoCityImpl.java
package cn.itcast.dao.Impl;
public class DaoCityImpl {
public List<City> findAllCity(Integer pid) {
List<City> list=new ArrayList<City>();
DBManager dbManager=DBManager.getDbManager();
Connection conn=dbManager.getConnection();
PreparedStatement pstatement=null;
ResultSet rs=null;
//SELECT pid,pname FROM province ORDER BY pid
String sql="SELECT cid,cname FROM city where pid=? ORDER BY cid";
try {
pstatement=conn.prepareStatement(sql);
pstatement.setInt(1, pid);
rs=pstatement.executeQuery();
while(rs.next()){
City c=new City();
c.setCid(rs.getInt(1));
c.setCname(rs.getString(2));
list.add(c);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
dbManager.closeResource(conn, pstatement, rs);
}
return list;
}
}