零) js / ajax / json / jQuery
- js: 基于對(duì)象, 解釋型, 事件驅(qū)動(dòng), 瀏覽器交互執(zhí)行, 弱類型, 必須嵌入到<script>標(biāo)簽中, 腳本語(yǔ)言
- ajax: 是一種客戶端與服務(wù)器的一種以異步方式通訊的變成模式, 它能讓瀏覽器局部刷新, 動(dòng)態(tài)獲取服務(wù)器端的相應(yīng)的結(jié)果
- json: JavaScriptObjectNotation, JS對(duì)象標(biāo)記是一種輕量級(jí)數(shù)據(jù)交互技術(shù), 本質(zhì)上就是用JS語(yǔ)法書寫的具有特殊格式的文本字符串
- jQuery: 是第三方開源組織基于js寫的一款跨主流瀏覽器的實(shí)用庫(kù)
一) JSON 簡(jiǎn)介
-
什么是JSON
-
- JSON（Java Script Object Notation（記號(hào),標(biāo)記））是一種輕量級(jí)的數(shù)據(jù)交換語(yǔ)言鸡岗，以文本字符串為基礎(chǔ)侯谁，且易于讓人閱讀
- 注意：XML就是一個(gè)重量級(jí)的數(shù)據(jù)交換語(yǔ)言
- JSON采用完全獨(dú)立于任何程序語(yǔ)言的文本格式背捌，使JSON成為理想的數(shù)據(jù)交換語(yǔ)言
-
-
JSON的作用
-
- 簡(jiǎn)化創(chuàng)建自定義對(duì)象的方式
- 注意：JSON就是用JS語(yǔ)法來(lái)書寫慷嗜，所以必須放在<script>標(biāo)簽中; 在用JS語(yǔ)法書寫JSON時(shí)砾莱，最外面不要用""雙引號(hào)
-
var p = {
id:1,
name:"哈哈",
tel:[
{
no:"135",
type:"中移動(dòng)"
},
{
no:"133",
type:"中聯(lián)通"
}
],
show:function(username){
alert("你的姓名是:" + p.name+":"+username);
},
isSingle:false
};
var p = {'city':['北京','上海','廣州','深圳']};
for(var i=0;i<p.city.length;i++){
document.write(p.city[i]+"<br/>");
}
-
- 在AJAX中讶舰，作為數(shù)據(jù)載體之一
- 注意：JS可以直接解析JSON格式的文本灯抛，前提是：該JSON必須采用JS格式書寫的才行剪侮，如果該JSON是采用Java格式寫的拭宁，必須使用eval()函數(shù)轉(zhuǎn)換后，方可被JS解析瓣俯，該eval("")函數(shù)接收一個(gè)字符串格式的內(nèi)容杰标。
-
- 省份-城市-區(qū)域三級(jí)聯(lián)動(dòng)【Struts2 + JSON版】
- 切記：將來(lái)JSON是不能完完全全替代XML的，只能在定義對(duì)象和數(shù)據(jù)交換語(yǔ)言方面替代
- action:
/**
* 根據(jù)省份查詢城市
*/
public String findCityByProvinceMethod() throws Exception{
cityList = new ArrayList<String>();
if("湖北".equals(province)){
cityList.add("武漢");
cityList.add("黃崗");
}else if("湖南".equals(province)){
cityList.add("岳陽(yáng)");
cityList.add("張家界");
}else if("廣東".equals(province)){
cityList.add("韶關(guān)");
cityList.add("東莞");
}
return "ok";
}
/**
* 根據(jù)城市查詢區(qū)域
*/
public String findAreaByCityMethod() throws Exception{
areaList = new ArrayList<String>();
if("武漢".equals(city)){
areaList.add("AA");
areaList.add("BB");
}else if("黃崗".equals(city)){
areaList.add("CC");
areaList.add("DD");
}else if("岳陽(yáng)".equals(city)){
areaList.add("EE");
areaList.add("FF");
}else if("張家界".equals(city)){
areaList.add("GG");
areaList.add("HH");
}else if("韶關(guān)".equals(city)){
areaList.add("II");
areaList.add("JJ");
}else if("東莞".equals(city)){
areaList.add("KK");
areaList.add("LL");
}
return "ok";
}
private List<String> cityList;
private List<String> areaList;
public List<String> getCityList() {
return cityList;
}
public List<String> getAreaList() {
return areaList;
}
- struts.xml
<package name="provinceCityAreaPackage" extends="json-default" namespace="/">
<action
name="findCityByProvinceRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findCityByProvinceMethod">
<result name="ok" type="json">
</result>
</action>
</package>
- 導(dǎo)入：`` struts2-json-plugin-2.3.1.1.jar ``
二) 使用第三方工具彩匕，將JavaBean對(duì)象/List或Set或Map對(duì)象轉(zhuǎn)成JSON
- 準(zhǔn)備導(dǎo)入第三方j(luò)ar包：
commons-beanutils-1.7.0.jarcommons-collections-3.1.jarcommons-lang-2.5.jarcommons-logging-1.1.1.jarezmorph-1.0.3.jarjson-lib-2.1-jdk15.jar
- 具體API :
- 1> JavaBean -> JSON
- JSONArray jsonArray = JSONArray.fromObject(city);
- String jsonJAVA = jsonArray.toString();
- 2> List<JavaBean> -> JSON
- JSONArray jsonArray = JSONArray.fromObject(cityList);
- String jsonJAVA = jsonArray.toString();
- 3> List<String> -> JSON
- JSONArray jsonArray = JSONArray.fromObject(stringList);
- String jsonJAVA = jsonArray.toString();
- 4> Set<JavaBean> -> JSON
- JSONArray jsonArray = JSONArray.fromObject(citySet);
- String jsonJAVA = jsonArray.toString();
- 5> Map<String,Object> -> JSON
- JSONArray jsonArray = JSONArray.fromObject(map);
- String jsonJAVA = jsonArray.toString();
- 最后一個(gè)例子切記腔剂，將來(lái)jQuery-EasyUI-DataGrid組件時(shí)我們還要用到. 將來(lái)，在企業(yè)中驼仪，就算脫離struts2的環(huán)境掸犬，也能用第三方工具，將Java類型轉(zhuǎn)成JSON文本
- 1> JavaBean -> JSON
三) 總結(jié)JSON的特點(diǎn)
- 在客戶端（特指PC瀏覽器）绪爸，直接使用JavaScript語(yǔ)言解析JSON湾碎，無(wú)需第三方j(luò)ar包
- 本質(zhì)上，就是一個(gè)文本毡泻，只是該文本有特定的書寫格式
- 可以使用第三方工具胜茧，將JavaBean對(duì)象或者List/Set/Map<JavaBean>對(duì)象轉(zhuǎn)成JSON
- 優(yōu)點(diǎn)：JSON與XML很相似，但是它更加輕巧，服務(wù)器只需發(fā)送一個(gè)html普通字符串呻顽，不用發(fā)送復(fù)雜的xml格式文檔了
- 缺點(diǎn)：語(yǔ)法過于嚴(yán)謹(jǐn)雹顺，初學(xué)者可能覺得代碼不易讀，寫錯(cuò)一點(diǎn)都不行
- JSON本質(zhì)上廊遍，就是用JS語(yǔ)法寫的特殊文本記號(hào)嬉愧，用JS可以直接解析
四) 模擬jQuery庫(kù)，體驗(yàn)使用第三方實(shí)用庫(kù)的特點(diǎn)【圖片隱藏與顯示】
- JS的封裝思想
- 創(chuàng)建自定義對(duì)象和優(yōu)化方法
- 引用第三方實(shí)用的庫(kù)喉前，該庫(kù)中預(yù)定義大量實(shí)用的對(duì)象和函數(shù)
- 查閱第三方實(shí)用的庫(kù)提供的API手冊(cè)
//定義一個(gè)Photo函數(shù)没酣，看作是一個(gè)類
function Photo(){
//屬性
var imgElement = document.images[0];
//方法
this.show = function(){
imgElement.style.visibility = "visible";
}
this.hide = function(){
imgElement.style.visibility = "hidden";
}
}
//定義一個(gè)$()函數(shù)，用來(lái)定位標(biāo)簽
function $(str){
//如果str變量是字符串類型
if( typeof(str) == "string" ){
//獲取str變量中的第一個(gè)字符
var init = str.substring(0,1);
//如果第一個(gè)字符是#的話
if("#" == init){
//獲取str變量中除第一個(gè)字符外的其它字符
var other = str.substring(1,str.length);
//通過ID定位節(jié)點(diǎn)
var element = document.getElementById(other);
//如果找到了節(jié)點(diǎn)
if(element != null){
//返回
return element;
}else{
//返回
return null;
}
}else{
//繼續(xù)判斷
}
}else{
alert("參數(shù)必須為string類型");
}
}
<script type="text/javascript">
//創(chuàng)建一個(gè)Photo對(duì)象
var p = new Photo();
//定位隱藏按鈕卵迂，同時(shí)添加單擊事件
$("#hide").onclick = function(){
//調(diào)用Photo對(duì)象的方法
p.hide();
}
//定位顯示按鈕裕便，同時(shí)添加單擊事件
$("#show").onclick = function(){
//調(diào)用Photo對(duì)象的方法
p.show();
}
</script>
五) jQuery簡(jiǎn)介
-
JQuery是什么?
- John Resig在2006年1月發(fā)布的一款跨主流瀏覽器的JavaScript庫(kù)，簡(jiǎn)化JavaScript對(duì)HTML操作 (參見<<什么是jQuery.JPG>>)
-
為什么要使用jQuery
- 寫少代碼,做多事情【write less do more】
-
- 免費(fèi)见咒，開源且輕量級(jí)的js庫(kù)偿衰，容量很小
- 注意：項(xiàng)目中，提倡引用min版的js庫(kù)
-
- 兼容市面上主流瀏覽器改览，例如 IE下翎，F(xiàn)irefox，Chrome
- 注意：jQuery不是將所有JS全部封裝宝当，只是有選擇的封裝
- 能夠處理HTML/JSP/XML视事、CSS、DOM庆揩、事件俐东、實(shí)現(xiàn)動(dòng)畫效果，也能提供異步AJAX功能
- 文檔手冊(cè)很全盾鳞，很詳細(xì)
- 成熟的插件可供選擇
- 提倡對(duì)主要的html標(biāo)簽提供一個(gè)id屬性犬性，但不是必須的
- 出錯(cuò)后，有一定的提示信息
- 不用再在html里面通過<script>標(biāo)簽插入一大堆js來(lái)調(diào)用命令了
-
jQuery開發(fā)步驟
- 引用第三方j(luò)s庫(kù)文件腾仅，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
- 查閱并使用api手冊(cè)乒裆，$("#divID").html()/val()/text()/css("color","red")/....
//var divElement = document.getElementById("divID");
var $div = $("#divID");
//var html = divElement.innerHTML;
var html = $div.html();
alert(html);
六) js對(duì)象和jQuery對(duì)象相互轉(zhuǎn)換
-
- 什么是js對(duì)象及代碼規(guī)則
- 就是使用js-API，即Node接口中的API或是傳統(tǒng)JS語(yǔ)法定義的對(duì)象推励，叫做js對(duì)象
- js代碼規(guī)則 -> divElement ``divElement = document.getElementById("divID");
-
- 什么是jQuery對(duì)象及代碼規(guī)則
- 就是使用jQuery-API鹤耍，返回的對(duì)象就叫做jQuery對(duì)象
- jQuery代碼規(guī)則 -> $div :
var $div = $("#divID") - 聲明：上述代碼規(guī)則，只是老師個(gè)人規(guī)則验辞，不代表所有企業(yè)都這樣做
-
- js對(duì)象轉(zhuǎn)成jQuery對(duì)象【重點(diǎn)】
- 語(yǔ)法：$(js對(duì)象)---->jQuery對(duì)象
- 例如：$(divElement)---->$div
- 例如：$(this)---->$this
- 注意：jQuery對(duì)象將js對(duì)象做了封裝稿黄，js對(duì)象二邊無(wú)引號(hào)
var inputElement = document.getElementById("inputID");//js對(duì)象
var $input = $(inputElement);//jquery對(duì)象
var txt = $input.val();
alert(txt);
-
- jQuery對(duì)象轉(zhuǎn)成js對(duì)象
- 語(yǔ)法1：jQuery對(duì)象[下標(biāo)，從0開始]
- 語(yǔ)法2：jQuery對(duì)象.get(下標(biāo)跌造，從0開始)
- 例如：$div[0]---->divElement
- 注意：不同的對(duì)象只能調(diào)用對(duì)應(yīng)的api方法杆怕，即jQuery對(duì)象不能調(diào)用js對(duì)象的api族购，反之亦然
- $div.innerHTML -> 錯(cuò)
- divElement.html -> 錯(cuò)
var $div = $("#divID");//jquery對(duì)象
var divElement = $div[0];//js對(duì)象(方式一)
//var divElement = $div.get(0);//js對(duì)象(方式二)
var txt = divElement.innerHTML;
alert(txt);
七) js對(duì)象和jQuery對(duì)象的區(qū)別
-
- js對(duì)象的三種基本定位方式
- a) 通過ID屬性：document.getElementById()
- b) 通過NAME屬性：document.getElementsByName()
- c) 通過標(biāo)簽名：document.getElementsByTagName()
-
- jQuery對(duì)象的三種基本定位方式
- a) 通過ID屬性：$("#id屬性值")
- b) 通過標(biāo)簽名：$("標(biāo)簽名")
- c) 通過CLASS屬性：$(".樣式名")
-
- js對(duì)象出錯(cuò)的顯示, 沒有合理的提示信息
- 例如：alert(document.getElementById("usernameIDD").value)
-
- jQuery對(duì)象出錯(cuò)的顯示, 有合理的提示信息
- 例如：undefined
- 例如：alert($("#usernameIDD").val())
八) jQuery九類選擇器（上）【參見jQueryAPI.chm手冊(cè)】
- 選擇器的作用：通過選擇器可以定位web頁(yè)面（HTML/JSP/XML）中的任何標(biāo)簽
- 選擇器分類 :
- 基本選擇器【參見selector_1.html】
//1)查找ID為"div1ID"的元素個(gè)數(shù)
alert( $("#div1ID").size() );
//2)查找DIV元素的個(gè)數(shù)
alert( $("div").size() );
//3)查找所有樣式是"myClass"的元素的個(gè)數(shù)
alert( $(".myClass").size() );
//4)查找所有DIV,SPAN,P元素的個(gè)數(shù)
alert( $("div,span,p").size() );
//5)查找所有ID為div1ID,CLASS為myClass,P元素的個(gè)數(shù)
alert( $('#div1ID,.myClass,p').size() );
- 層次選擇器【參見selector_2.html】
//1)找到表單form里所有的input元素的個(gè)數(shù)
alert( $("form input").size() );
//2)找到表單form里所有的子級(jí)input元素個(gè)數(shù)
alert( $("form > input").size() );
//3)找到表單form同級(jí)第一個(gè)input元素的value屬性值
alert( $("form + input").val() );
//4)找到所有與表單form同級(jí)的input元素個(gè)數(shù)
alert( $("form ~ input").size() );
- 增強(qiáng)基本選擇器【參見selector_3.html】
//1)查找UL中第一個(gè)元素的內(nèi)容
alert( $("ul li:first").text() );
//2)查找UL中最后個(gè)元素的內(nèi)容
alert( $("ul li:last").text() );
//4)查找表格的索引號(hào)為1、3陵珍、5...奇數(shù)行個(gè)數(shù)寝杖，索引號(hào)從0開始
alert( $("table tr:odd").size() );
//5)查找表格的索引號(hào)為2、4互纯、6...偶數(shù)行個(gè)數(shù)瑟幕，索引號(hào)從0開始
alert( $("table tr:even").size() );
//6)查找表格中第二行的內(nèi)容，從索引號(hào)0開始留潦，這是一種祖先 后代 的變化形式
alert( $("table tr td:eq(1)").text() );
//7)查找表格中第二第三行的個(gè)數(shù)只盹，即索引值是1和2，也就是比0大
alert( $("table tr:gt(0)").size() );
//8)查找表格中第一第二行的個(gè)數(shù)兔院，即索引值是0和1殖卑，也就是比2小
alert( $("table tr:lt(2)").size() );
//9)給頁(yè)面內(nèi)所有標(biāo)題<h1><h2><h3>加上紅色背景色，且文字加藍(lán)色
$(":header").css("background-color","red").css("color","blue");
//3)查找所有未選中的input為checkbox的元素個(gè)數(shù)
alert( $(":checkbox:NOT(:checked)").size() );
- 內(nèi)容選擇器【參見selector_4.html】
//1)查找所有包含文本"John"的div元素的個(gè)數(shù)
alert( $("div:contains('John')").size() );
//2)查找所有p元素為空的元素個(gè)數(shù)
alert( $("p:empty").size() );
//3)給所有包含p元素的div元素添加一個(gè)myClass樣式
$("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素個(gè)數(shù),即p為父元素
alert( $("p:parent").size() );
九) jQuery中常用方法（上）
- 常用方法的目的: 通過方法秆乳，能操作web頁(yè)面 (HTML/JSP) 中的任何標(biāo)簽
- 1>
val()：獲取標(biāo)簽的value屬性值懦鼠，前提是該標(biāo)簽有value屬性 - 2>
html()：獲取標(biāo)簽之間的內(nèi)容，不能用運(yùn)于xml文件 - 3>
text()：獲取標(biāo)簽之間的內(nèi)容屹堰，可以用運(yùn)于html/jsp和xml文件(提倡) - 4>
css()：加key-value形成的css樣式 - 5>
addClass()：加已經(jīng)定義好的一個(gè)css樣式 - 6>
size()：獲取jQuery對(duì)象/數(shù)組中元素的個(gè)數(shù)(提倡) - 7>
length：獲取jQuery對(duì)象/數(shù)組中元素的個(gè)數(shù)
- 1>
注意：在寫jQuery代碼時(shí)，不光可以使用jQuery的API街氢，還能使用傳統(tǒng)JS的API
