Java進階學習第二十六天（JSON基礎、jQuery基礎）
阿新 • • 發佈：2018-12-21
一、JSON基礎
1、JSON的定義 ① JSON（Java Script Object Notation）是一種輕量級的資料交換語言，以文字字串為基礎，且易於讓人閱讀 注意：XML就是一個重量級的資料交換語言 ② JSON採用完全獨立於任何程式語言的文字格式，使JSON成為理想的資料交換語言
2、JSON的作用 ① 簡化建立自定義物件的方式 注意：JSON就是用JS語法來書寫，所以必須放在
<html> <head> <title>簡化建立自定義物件的方式</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <!-- js方式定義Person物件 --> <script type="text/javascript"> function Person(id,name,sal){ this.id = id; this.name = name; this.sal = sal; } var p = new Person(1,"張三",7000); document.write("編號:" + p.id + "<br/>"); document.write("姓名:" + p.name + "<br/>"); document.write("薪水:" + p.sal + "<br/>"); </script> <hr/> <!-- json方式定義Person物件 --> <script type="text/javascript"> //採用js語言來書寫 var p = {id:1,name:"李四",sal:8000}; //屬性可以''或""符號 //字串必加''或""符號，其它型別不用加符號 document.write("編號:" + p.id + "<br/>"); document.write("姓名:" + p.name + "<br/>"); document.write("薪水:" + p.sal + "<br/>"); </script> </body> </html>
<html> <head> <title>建立一個數組，陣列中有三個物件</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript"> var ps = [ { id:1, name:'張三' }, { id:2, name:'李四' }, { id:3, name:'王五' } ]; </script> <script type="text/javascript"> document.write("共有" + ps.length + "個學生<br/>"); for(var i=0;i<ps.length;i++){ document.write("編號：" + ps[i].id + "<br/>"); document.write("姓名：" + ps[i].name + "<br/>"); } </script> </body> </html>
<html> <head> <title>建立一個物件，其它一個屬性是陣列</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <script type="text/javascript"> var p = { id:1, name:'張三', home:['宿遷','鎮江','蘇州'] }; for(var i=0;i<p.home.length;i++){ document.write(p.home[i]+" "); } </script> </body> </html>
<html>
<head>
<title>建立一個物件，使用function做為屬性值</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
var p = {
id:1,
name:'張三',
isLove:true,
home:['廣州','深圳'],
show : function(str){
alert("你是" + str);
}
};
//document.write(p.isLove?"已婚":"單身"+"<br/>");
p.show("趙君");
</script>
</body>
</html>
② 在AJAX中，作為資料載體之一 注意：JS可以直接解析JSON格式的文字，前提是：該JSON必須採用JS格式書寫的才行，如果該JSON是採用Java格式寫的，必須使用eval()函式轉換後，方可被JS解析，該eval("")函式接收一個字串格式的內容。 ③ 省份-城市-區域三級聯動【Struts2 + JSON版】 切記：將來JSON是不能完完全全替代XML的，只能在定義物件和資料交換語言方面替代 jsp：
<html>
<head>
<title>省份-城市-區域三級聯動【Struts2 + JSON版】</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<select id="provinceID" style="width:111px">
<option>選擇省份</option>
<option>湖北</option>
<option>湖南</option>
<option>廣東</option>
</select>
<select id="cityID" style="width:111px">
<option>選擇城市</option>
</select>
<select id="areaID" style="width:111px">
<option>選擇區域</option>
</select>
<!-- 省份->城市 -->
<script type="text/javascript">
document.getElementById("provinceID").onchange = function(){
//清空城市下拉框
var cityElement = document.getElementById("cityID");
cityElement.options.length = 1;
//清空區域下拉框
var areaElement = document.getElementById("areaID");
areaElement.options.length = 1;
var province = this[this.selectedIndex].innerHTML;
if("選擇省份" != province){
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+new Date().getTime();
ajax.open(method,url);
//NO3)
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
//NO4)
var content = "bean.province=" + province;
ajax.send(content);
//-------------------------------------------等待
//NO5
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO6)返回JAVA格式的JSON文字
var jsonJAVA = ajax.responseText;
//p所代表的是java格式的json文字，是不能直接被js執行的
//解決方案：將java格式的json文字，轉成js格式的json文字
//如何做：用js提供的一個函式搞定
var jsonJS = eval("("+jsonJAVA+")");
var array = jsonJS.cityList;
var size = array.length;
for(var i=0;i<size;i++){
var city = array[i];
var option = document.createElement("option");
option.innerHTML = city;
cityElement.appendChild(option);
}
}
}
}
}
}
</script>
<!-- 城市->區域 -->
<script type="text/javascript">
document.getElementById("cityID").onchange = function(){
var areaElement = document.getElementById("areaID");
areaElement.options.length = 1;
var city = this[this.selectedIndex].innerHTML;
if("選擇城市" != city){
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/findAreaByCityRequest?time="+new Date().getTime();
ajax.open(method,url);
//NO3)
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
//NO4)
var content = "bean.city=" + city;
ajax.send(content);
//------------------------------------------等待
//NO5)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO6)
var jsonJAVA = ajax.responseText;
var jsonJS = eval("("+jsonJAVA+")");
var array = jsonJS.areaList;
var size = array.length;
for(var i=0;i<size;i++){
var area = array[i];
var option = document.createElement("option");
option.innerHTML = area;
areaElement.appendChild(option);
}
}
}
}
}
}
</script>
</body>
</html>
bean.java：
/**
* 封裝省份和城市
*/
public class Bean {
private String province;//省份
private String city;//城市
public Bean(){}
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
}
action：
public class ProvinceCityAreaAction extends ActionSupport{
private Bean bean;
public Bean getBean() {
return bean;
}
public void setBean(Bean bean) {
this.bean = bean;
}
/**
* 根據省份獲取城市
*/
public String findCityByProvince() throws Exception {
cityList = new ArrayList<String>();
if("湖北".equals(bean.getProvince())){
cityList.add("武漢");
cityList.add("赤壁");
}else if("湖南".equals(bean.getProvince())){
cityList.add("郴州");
cityList.add("張家界");
cityList.add("瀏陽");
}else if("廣東".equals(bean.getProvince())){
cityList.add("陽江");
cityList.add("清遠");
cityList.add("佛山");
cityList.add("湛江");
}
//讓struts2框架幫你將List/Set/Map<String>轉成JSON文字
return SUCCESS;
}
/**
* 根據城市獲取區域
*/
public String findAreaByCity() throws Exception {
areaList = new ArrayList<String>();
if("陽江".equals(bean.getCity())){
areaList.add("AA");
areaList.add("BB");
}else if("清遠".equals(bean.getCity())){
areaList.add("CC");
areaList.add("DD");;
}else if("佛山".equals(bean.getCity())){
areaList.add("EE");
areaList.add("FF");
}else if("湛江".equals(bean.getCity())){
areaList.add("GG");
areaList.add("HH");
}
return SUCCESS;
}
private List<String> areaList;//區域的集合
private List<String> cityList;//城市的集合
public List<String> getCityList() {
return cityList;
}
public List<String> getAreaList() {
return areaList;
}
}
struts.xml：
<struts>
<package name="myPackage" extends="json-default" namespace="/">
<!-- 全域性結果型別 -->
<global-results>
<result name="success" type="json"/>
</global-results>
<action
name="checkRequest"
class="cn.itcast.javaee.js.checkcode.CheckcodeAction"
method="check">
</action>
<!-- 省份->城市 -->
<action
name="findCityByProvinceRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findCityByProvince">
</action>
<!-- 城市->區域 -->
<action
name="findAreaByCityRequest"
class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction"
method="findAreaByCity">
</action>
</package>
</struts>
匯入：struts2-json-plugin-2.3.1.1.jar
3、使用第三方工具，將JavaBean物件/List或Set或Map物件轉成JSON ① 準備匯入第三方jar包： ◇ commons-beanutils-1.7.0.jar ◇ commons-collections-3.1.jar ◇ commons-lang-2.5.jar ◇ commons-logging-1.1.1.jar ◇ ezmorph-1.0.3.jar ◇ json-lib-2.1-jdk15.jar ② 最後一個例子切記，將來jQuery-EasyUI-DataGrid元件時我們還要用到，將來在企業中，就算脫離struts2的環境，也能用第三方工具將Java型別轉成JSON文字
public class TestBean2Json {
private static void javabean2json() {
City city = new City(1,"廣州");
JSONArray jSONArray = JSONArray.fromObject(city);
String jsonJAVA = jSONArray.toString();
System.out.println(jsonJAVA);
//[{"id":1,"name":"廣州"}]
}
private static void list2json() {
List<City> cityList = new ArrayList<City>();
cityList.add(new City(1,"廣州"));
cityList.add(new City(2,"珠海"));
JSONArray jSONArray = JSONArray.fromObject(cityList);
String jsonJAVA = jSONArray.toString();
System.out.println(jsonJAVA);
//[{"id":1,"name":"廣州"},{"id":2,"name":"珠海"}]
}
private static void set2json() {
Set<City> citySet = new LinkedHashSet<City>();
citySet.add(new City(1,"廣州"));
citySet.add(new City(2,"珠海"));
JSONArray jSONArray = JSONArray.fromObject(citySet);
String jsonJAVA = jSONArray.toString();
System.out.println(jsonJAVA);
//[{"id":1,"name":"廣州"},{"id":2,"name":"珠海"}]
}
private static void javabeanlist2json() {
List<City> cityList = new ArrayList<City>();
cityList.add(new City(1,"中山"));
cityList.add(new City(2,"佛山"));
Province province = new Province(1,"廣東",cityList);
JSONArray jSONArray = JSONArray.fromObject(province);
String jsonJAVA = jSONArray.toString();
System.out.println(jsonJAVA);
/*
[
{
"id":1,
"name":"廣東"
"cityList":[{"id":1,"name":"中山"},{"id":2,"name":"佛山"}],
}
]
*/
}
private static void map2json() {
List<City> cityList = new ArrayList<City>();
cityList.add(new City(1,"中山"));
cityList.add(new City(2,"佛山"));
Map<String,Object> map = new LinkedHashMap<String,Object>();
map.put("total",cityList.size());//表示集合的長度
map.put("rows",cityList);//rows表示集合
JSONArray jSONArray = JSONArray.fromObject(map);
String jsonJAVA = jSONArray.toString();
System.out.println(jsonJAVA);
//[{"total":2,"rows":[{"id":1,"name":"中山"},{"id":2,"name":"佛山"}]}]
jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);
System.out.println(jsonJAVA);
}
public static void main(String[] args) {
//javabean2json();
//list2json();
//set2json();
//javabeanlist2json();
map2json();
}
}
4、總結JSON的特點
① 在客戶端（特指PC瀏覽器），直接使用JavaScript語言解析JSON，無需第三方jar包
② 本質上，就是一個文字，只是該文字有特定的書寫格式
③ 可以使用第三方工具，將JavaBean物件或者List/Set/Map<JavaBean>物件轉成JSON
④ 優點：JSON與XML很相似，但是它更加輕巧，伺服器只需傳送一個html普通字串，不用傳送複雜的xml格式文件了
⑤ 缺點：語法過於嚴謹，初學者可能覺得程式碼不易讀，寫錯一點都不行
⑥ JSON本質上，就是用JS語法寫的特殊文字記號，用JS可以直接解析
5、模擬jQuery庫，體驗使用第三方實用庫的特點【圖片隱藏與顯示】 學會：JS的封裝思想 學會：建立自定義物件和優化方法 學會：引用第三方實用的庫，該庫中預定義大量實用的物件和函式 學會：查閱第三方實用的庫提供的API手冊
<body>
<img src="images/zgl.jpg"/>
<input id="hide" type="button" value="隱藏" style="position:absolute;top:250;left:50"/>
<input id="show" type="button" value="顯示" style="position:absolute;top:250;left:120"/>
<script type="text/javascript">
//定位隱藏按鈕，同時提供單擊事件
document.getElementById("hide").onclick = function(){
//定點陣圖片
var img = document.images[0];
//隱藏圖片
img.style.visibility = "hidden";
}
//定位顯示按鈕，同時提供單擊事件
document.getElementById("show").onclick = function(){
//定點陣圖片
var img = document.images[0];
//隱藏圖片
img.style.visibility = "visible";
}
</script>
</body>
<body>
<img src="images/zgl.jpg"/>
<input id="hide" type="button" value="隱藏" style="position:absolute;top:250;left:50"/>
<input id="show" type="button" value="顯示" style="position:absolute;top:250;left:120"/>
<script type="text/javascript">
function Photo(){
//相像
var img = document.images[0];
//隱藏方法
this.hide = function(){
img.style.visibility = "hidden";
}
//顯示方法
this.show = function(){
img.style.visibility = "visible";
}
}
</script>
<script type="text/javascript">
var p = new Photo();
document.getElementById("hide").onclick = function(){
p.hide();
}
document.getElementById("show").onclick = function(){
p.show();
}
</script>
</body>
<body>
<img src="images/zgl.jpg"/>
<input id="hide" type="button" value="隱藏" style="position:absolute;top:250;left:50"/>
<input id="show" type="button" value="顯示" style="position:absolute;top:250;left:120"/>
<script type="text/javascript">
function Photo(){
//相像
var img = document.images[0];
//隱藏方法
this.hide = function(){
img.style.visibility = "hidden";
}
//顯示方法
this.show = function(){
img.style.visibility = "visible";
}
}
</script>
<script type="text/javascript">
//$()表示定位指定的標籤
function $(str){
//獲取str變數的型別
var type = typeof(str);
//如果是string型別的話
if(type == "string"){
//擷取字串的第一個字元
var first = str.substring(0,1);
//如果是#號的話
if("#" == first){
//獲取#號之後的所有字串
var end = str.substring(1,str.length);
//根據id定位標籤
var element = document.getElementById(end);
//如果找到了
if(element != null){
//返回標籤
return element;
}else{
alert("查無此標籤");
}
}else{
}
}else{
alert("引數必須是字串型別");
}
}
</script>
<script type="text/javascript">
var p = new Photo();
$("#hide").onclick = function(){
p.hide();
}
$("#show").onclick = function(){
p.show();
}
</script>
</body>
二、jQuery基礎
1、jQuery定義 John Resig在2006年1月釋出的一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作
2、為什麼要使用jQuery
① 寫少程式碼，做多事情【write less do more】
② 免費，開源且輕量級的js庫，容量很小
注意：專案中，提倡引用min版的js庫
③ 相容市面上主流瀏覽器，例如 IE，Firefox，Chrome
注意：jQuery不是將所有JS全部封裝，只是有選擇的封裝
④ 能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供非同步AJAX功能
⑤ 文件手冊很全，很詳細
⑥ 成熟的外掛可供選擇
⑦ 提倡對主要的html標籤提供一個id屬性，但不是必須的
⑧ 出錯後，有一定的提示資訊
⑨ 不用再在html裡面通過<script>標籤插入一大堆js來呼叫命令了
3、jQuery開發步驟 ① 引用第三方js庫檔案， ② 查閱並使用api手冊，$("#divID").html()/val()/text()/css(“color”,“red”)/…
<html>
<head>
<title>jQuery入門</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<input id="inputID" type="button" value="這就是jQuery庫,寫少程式碼，做多事情"/>
<div id="divID">哈哈哈</div>
<script type="text/javascript">
//取得<input>標籤中的value屬性的內容
/*js方式
var inputElement = document.getElementById("inputID");
var input = inputElement.value;
alert(input);*/
/*jquery方式
var $input = $("#inputID");
var input = $input.val();
alert(input);*/
//取得<div>標籤中的文字內容
/*js方式
var divElement = document.getElementById("divID");
var div = divElement.innerHTML;
alert(div);*/
//jquery方式
var $div = $("#divID");
var div = $div.html();
alert(div);
</script>
</body>
</html>
4、js物件和jQuery物件相互轉換
① 什麼是js物件及程式碼規則
就是使用js-API，即Node介面中的API或是傳統JS語法定義的物件，叫做js物件
js程式碼規則----divElement
var divElement = document.getElementById(“divID”);
var nameArray = new Array(3);
② 什麼是jQuery物件及程式碼規則
就是使用jQuery-API，返回的物件就叫做jQuery物件
jQuery程式碼規則----$div
var $div = $("#divID")
宣告：上述程式碼規則，只是個人規則，不代表所有企業都這樣做
③ js物件轉成jQuery物件【重點】
語法：(divElement)---->(this)---->div[0]---->divElement`
注意：不同的物件只能呼叫對應的api方法，即jQuery物件不能呼叫js物件的api，反之亦然
<script type="text/javascript">
//取得<input>標籤中的value屬性的內容[js物件->jquery物件]
var inputElement = document.getElementById("inputID");//js物件
var $input = $( inputElement );//jquery物件
var input = $input.val();
alert(input);
//取得<div>標籤中的文字內容[jquery物件->js物件]
var $div = $("#divID");//jquery物件
//var divElement = $div.get(0);//js物件
var divElement = $div[0];//js物件
var div = divElement.innerHTML;
alert(div);
</script>
5、js物件和jQuery物件的區別
① js物件的三種基本定位方式
◇ 通過ID屬性：document.getElementById()
◇ 通過NAME屬性：document.getElementsByName()
◇ 通過標籤名：document.getElementsByTagName()
② jQuery物件的三種基本定位方式
◇ 通過ID屬性：$("#id屬性值")
◇ 通過標籤名：$("標籤名")
◇ 通過CLASS屬性：$(".樣式名")
③ js物件出錯的顯示
沒有合理的提示資訊
例如：alert(document.getElementById(“usernameIDD”).value)
④ jQuery物件出錯的顯示
有合理的提示資訊，例如：undefined
例如：alert($("#usernameIDD").val())
<body>
<input type="text" id="usernameID" value="這就是jQuery庫" />
<div id="divID" class="oneClass">這是div標籤中的內容</div>
<script type="text/javascript">
//通過"#id"定位<input>
//alert( $("#usernameID").val() );
//通過"標籤名"定位<input><div>
//alert( $("input").val() );
//alert( $("div").html() );
//通過"樣式名"定位<div>
//alert( $(".oneClass").html() );
//js錯誤處理和jquery錯誤處理
//alert( document.getElementById("usernameTD").value );
alert( $("#usernameID").val() );
</script>
</body>
6、jQuery中常用方法 目的：通過方法，能操作web頁面（HTML/JSP）中的任何標籤 ① val()：獲取標籤的value屬性值，前提是該標籤有value屬性 ② html()：獲取標籤之間的內容，不能用運於xml檔案 ③ text()：獲取標籤之間的內容，可以用運於html/jsp和xml檔案【提倡】 ④ css()：加key-value形成的css樣式 ⑤ addClass()：加已經定義好的一個css樣式 ⑥ size()：獲取jQuery物件/陣列中元素的個數【提倡】 ⑦ length：獲取jQuery物件/陣列中元素的個數 注意：在寫jQuery程式碼時，不光可以使用jQuery的API，還能使用傳統JS的API
7、jQuery九類選擇器及應用【參見jQueryAPI.chm手冊】 目的：通過選擇器，能定位web頁面（HTML/JSP/XML）中的任何標籤 ① 基本選擇器
<script type="text/javascript">
//1)查詢ID為"div1ID"的元素個數
//alert( $("#div1ID").size() );
//2)查詢DIV元素的個數
//alert( $("div").length );
//3)查詢所有樣式是"myClass"的元素的個數
//alert( $(".myClass").size() );
//4)查詢所有DIV,SPAN,P元素的個數
//alert( $("DIV,span,p").size() );
//5)查詢所有ID為div1ID,CLASS為myClass,P元素的個數
alert( $("#div1ID,.myClass,p").size() );
</script>
② 層次選擇器
<script type="text/javascript">
//1)找到表單form裡所有的input元素的個數
//alert( $("form input").size() );
//2)找到表單form裡所有的子級input元素個數
//alert( $("form>input").size() );
//3)找到表單form同級第一個input元素的value屬性值
//alert( $("form+input").val() );
//4)找到所有與表單form同級的input元素個數
alert( $("form~input").size() );
</script>
③ 增強基本選擇器
<script type="text/javascript">
//1)查詢UL中第一個LI元素的內容
//html()要用於html/jsp，不能用在xml
//text()既能用於html/jsp，且能用於xml
//alert( $("ul li:first").text() );
//2)查詢UL中最後個元素的內容
//alert( $("ul li:last").text() );
//4)查詢表格的索引號為1、3、5...奇數行個數，索引號從0開始
//alert( $("table tr:odd").size() );
//5)查詢表格的索引號為2、4、6...偶數行個數，索引號從0開始
//alert( $("table tr:even").size() );
//6)查詢表格中第二行的內容，從索引號0開始，這是一種祖先 後代 的變化形式
//html()：強調的是標籤中的內容，即便標籤中的子標籤，也會顯示出來
//text()：強調的是標籤中的文字內容，即便標籤中的子標籤，也只會顯示出文字內容，不會顯示子標籤
//alert( $("table tr:eq(1)").text() );
//7)查詢表格中第二第三行的個數，即索引值是1和2，也就是比0大
//alert( $("table tr:gt(0)").size() );
//8)查詢表格中第一第二行的個數，即索引值是0和1，也就是比2小
//alert( $("table tr:lt(3)").size() );
//9)給頁面內所有標題<h1><h2><h3>加上紅色背景色，且文字加藍色
//$(":header").css("background-color","red").css("color","#ffff33");
//10)查詢所有[未]選中的input為checkbox的元素個數
alert( $(":checkbox:not(:checked)").size() );
</script>
④ 內容選擇器
<script type="text/javascript">
//1)查詢所有包含文字"John"的div元素的個數
//alert( $("div:contains('John')").size() );
//2)查詢所有p元素為空的元素個數
//alert( $("p:empty").size() );
//3)給所有包含p元素的div元素新增一個myClass樣式
//$("div:has(p)").addClass("myClass");
//4)查詢所有含有子元素或者文字的p元素個數,即p為父元素
alert( $("p:parent").size() );
</script>
⑤ 可見性選擇器
<script type="text/javascript">
//1)查詢隱藏的tr元素的個數
//alert( $("table tr:hidden").size() );
//2)查詢所有可見的tr元素的個數
//alert( $("table tr:NOT(:hidden)").size() );
alert( $("table tr:visible").size() );//提倡
</script>
⑥ 屬性選擇器
<script type="text/javascript">
//1)查詢所有含有id屬性的div元素個數
//alert( $('div[id]').size() );
//2)查詢所有name屬性是newsletter的input元素，並將其選中
//$("input[name='newsletter']").attr("checked","checked");
//3)查詢所有name屬性不是newsletter的input元素，並將其選中
//$("input[name!='newsletter']").attr("checked","true");
//4)查詢所有name屬性以'news'開頭的input元素，並將其選中
//$("input[name^='news']").attr("checked","checked");
//5)查詢所有name屬性以'letter'結尾的input元素，並將其選中
//$("input[name$='letter']").attr("checked","checked");
//6)查詢所有name屬性包含'news'的input元素，並將其選中
//$("input[name*='news']").attr("checked","checked");
//7)找到所有含有id屬性，並且它的name屬性是以"letter"結尾的input元素，並將其選中
$("input[id][name$='letter']").attr("checked","true");
</script>
⑦ 子元素選擇器
<script type="text/javascript">
/*用JS語法建立一個一維陣列，存入string型別的姓名，再迭代
var nameArray = new Array("哈哈","呵呵","嘻嘻");
for(var i=0;i<nameArray.length;i++){
document.write(nameArray[i]+"<br/>");
}*/
/*用JSON語法建立一個一維陣列，存入string型別的姓名，再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js物件
var $nameArray = $(nameArray);//jquery物件
$nameArray.each(function(){
this表示陣列中每一個元素，this屬性js物件，this代表string型別
alert(this);
});*/
//用JSON語法建立一個一維陣列，存入object型別的姓名和薪水，再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
var $nameArray = $(nameArray);
$nameArray.each(function(){
//this代表object型別
alert(this.name + ":"+this.sal);
});
</script>
<script type="text/javascript">
/*1)迭代[each]每個ul中第1個li元素中的內容,索引從1開始
$("ul li:first-child").each(function(){
alert( $(this).text() );
});
*/
/*2)迭代每個ul中最後1個li元素中的內容,索引從1開始
$("ul li:last-child").each(function(){
alert( $(this).text() );
});
*/
/*3)迭代每個ul中第2個li元素中的內容,索引從1開始
$("ul li:nth-child(2)").each(function(){
alert( $(this).text() );
});*/
//4)在ul中查詢是唯一子元素的li元素的內容
$("ul li:only-child").each(function(){
alert( $(this).text() );
});
</script>
⑧ 表單選擇器
<script type="text/javascript">
//1)查詢所有input元素的個數
//alert( $("input").size() );//10，找input標籤
//alert( $(":input").size() );//13，找input標籤和select/textarea/button
//2)查詢所有文字框的個數
//alert( $(":text").size() );
//3)查詢所有密碼框的個數
//alert( $(":password").size() );
//4)查詢所有單選按鈕的個數
//alert( $(":radio").size() );
//5)查詢所有複選框的個數
//alert( $(":checkbox").size() );
//6)查詢所有提交按鈕的個數
//alert( $(":submit").size() );
//7)匹配所有影象域的個數
//alert( $(":images").size() );
//8)查詢所有重置按鈕的個數
//alert( $(":reset").size() );
//9)查詢所有普通按鈕的個數
//alert( $(":button").size() );
//10)查詢所有檔案域的個數
//alert( $(":file").size() );
//11)查詢所有input元素為隱藏域的個數
//alert( $(":input:hidden").size() );
</script>
⑨ 表單物件屬性選擇器
<script type="text/javascript">
//1)查詢所有可用的input元素的個數
//alert( $("input:enabled").size() );
//2)查詢所有不可用的input元素的個數
//alert( $("input:disabled").size() );
//3)查詢所有選中的複選框元素的個數
//alert( $(":checkbox:checked").size() );
//4)查詢所有未選中的複選框元素的個數
//alert( $(":checkbox:NOT(:checked)").size() );
//5)查詢所有選中的選項元素的個數
//alert( $("select option:selected").size() );
alert( $("#provinceID option:NOT(:selected)").size() );
</script>
注意：專案中，通常是多種選擇器一起使用
8、jQuery常用Method-API 目的：對web頁面（HTML/JSP/XML）中的任何標籤，屬性，內容進行增刪改查 ① DOM簡述與分類 ◇ DOM是一種W3C官方標準規則，可訪問任何標籤語言的頁面（HTML/JSP/XML） ◇ DOM是跨平臺（window/linux/unix），跨語言（javascript/java）， 跨瀏覽器（ie/firefox/Chrome）的標準規則 ◇ 我們只需要按照DOM標準規則，針對主流瀏覽器（ie/firefox/Chrome）程式設計 ◇ JS/jQuery按照DOM的標準規則，既可以操作HTML/JSP，也能操作CSS ◇ DOM標準規則不是JS的專屬，其它語言，也能適用，例如：VBScript，Java語言等 ② DOM標準規則下的jQuery常用API，注意：以下方法均由jQuery物件呼叫
| 方法 | 解釋 |
|---|---|
| each() | 是jQuery中專用於迭代陣列的方法，引數為一個處理函式，this表示當前需要迭代的js物件 |
| append() | 追加到父元素之後 |
| prepend() | 追加到父元素之前 |
| after() | 追加到兄弟元素之後 |
| before() | 追加到兄弟元素之前 |
| attr(name) | 獲取屬性值 |
| attr(name,value) | 給符合條件的標籤新增key-value屬性對 |
| $(“HTML程式碼”) | 建立元素，屬性，文字 |
| remove() | 刪除自已及其後代節點 |
| val() | 獲取value屬性的值 |
| val("") | 設定value屬性值為""空串，相當於清空 |
| text() | 獲取HTML或XML標籤之間的值 |
| text("") | 設定HTML或XML標籤之間的值為""空串 |
| clone() | 只複製樣式，不復制行為 |
| clone(true) | 既複製樣式，又複製行為 |
| replaceWith() | 替代原來的節點 |
| removeAttr() | 刪除已存在的屬性 |
| addClass() | 增加已存在的樣式 |
| removeClass() | 刪除已存在的樣式 |
| hasClass() | 判斷標籤是否有指定的樣式，true表示有樣式，false表示無樣式 |
| toggleClass() | 如果標籤有樣式就刪除，否則增加樣式 |
| offset() | 獲取物件的left和top座標 |
| offset({top:100,left:200}) | 將物件直接定位到指定的left和top座標 |
| width() | 獲取物件的寬 |
| width(300) | 設定物件的寬 |
| height() | 獲取物件的高 |
| height(500) | 設定物件的高 |
| children() | 只查詢子節點，不含後代節點 |
| next() | 下一下兄弟節點 |
| prev() | 上一下兄弟節點 |
| siblings() | 上下兄弟節點 |
| show() | 顯示物件 |
| hide() | 隱藏物件 |
| fadeIn() | 淡入顯示物件 |
| fadeOut() | 淡出隱藏物件 |
| slideUp() | 向上滑動 |
| slideDown() | 向下滑動 |
| slideToggle() | 上下切換滑動，速度快點 |
<script type="text/javascript">
//DIV標籤插入到UL標籤之後(父子關係)
//$("ul").append( $("div") );
//DIV標籤插入到UL標籤之前(父子關係)
$("ul").prepend( $("div") );
//DIV標籤插入到UL標籤之後(兄弟關係)
//$("ul").after( $("div") );
//DIV標籤插入到UL標籤之前(兄弟關係)
$("ul").before( $("div") );
</script>
<script type="text/javascript">
//取得form裡第一個input元素的type屬性
//alert( $("form input:first").attr("type") );
//設定form裡最後個input元素的為只讀文字框
//$("form input:last").attr("readonly","readonly")
//$(":password").attr("readonly","readonly")
</script>
<script type="text/javascript">
//建立div元素，新增"哈哈"文字，ID屬性，並新增到文件中
//<body><div id="2015">哈哈</div></body>
/*js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);*/
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
//$("body").append( $div );
$(document.body).append( $div );
</script>
<script type="text/javascript">
//刪除ID為secondID的LI元素
//$("#secondID").remove();
//刪除所有LI元素
//$("#a li").remove();
//刪除UL元素
$("#b").remove();
</script>
<script type="text/javascript">
//取得<div>中的內容
//alert( $("div").text() );
//取得<option>的值和描述
var $option = $("#city option");
var value = $option.val();
var html = $option.text();
alert(value + ":" + html);
</script>
<script type="text/javascript">
//複製原input元素，新增到原input元素後，與其同級
var $old = $(":button");
var $new = $old.clone();
$new.val("新按鈕");
$old.after( $new );
//為原input元素動態新增單擊事件，且複製原input元素，
//var $old = $(":button");
//$old.click(function(){
// alert("動態事件");
//});
//新增到原input元素後，與其同級，且和原按鈕有一樣的行為
//var $new = $old.clone(true);
//$new.val("新按鈕");
//$old.after( $new );
</script>
<script type="text/javascript">
//雙擊<div>中的文字，用文字框替換文字
$("div").dblclick( function(){
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文字框替代div標籤
$(this).replaceWith( $text );
} );
</script>
<script type="text/javascript">
//為<table>元素新增屬性border/align/width
var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
//將<table>元素的align屬性刪除
$table.removeAttr("align");
</script>
<script type="text/javascript">
//為無樣式的DIV新增樣式
//$("div:first").addClass("myClass");
//為有樣式的DIV刪除樣式
//$("div:last").removeClass("myClass");
//切換樣式，即有樣式的變成無樣式，無樣式的變成有樣式
//$("div").toggleClass("myClass");
//最後一個DIV是否有樣式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有樣式":"無樣式");
</script>
<script type="text/javascript">
//獲取圖片的座標
//var offset = $("img").offset();
//var x = offset.left;
//var y = offset.top;
//alert(x+":"+y);
//設定圖片的座標
//$("img").offset({
// top:100,
// left:200
//});
//獲取圖片的寬高
//var w = $("img").width();
//var h = $("img").height();
//alert(w+":"+h);
//設定圖片的寬高
$("img").width(500);
$("img").height(600);
</script>
<script type="text/javascript">
//取得div元素的直接子元素內容，不含後代元素
//var $span = $("div").children();
//var content = $span.html();//包含子標籤
//var content = $span.text();//不包含子標籤
//alert(content);
//取得div元素的下一個同級的兄弟元素內容
//var $p = $("div").next();
//alert( $p.text() );
//取得div元素的上一個同級的兄弟元素內容
//alert( $("div").prev().text() );
//依次取得div元素的上下一個同級的所有兄弟元素的內容
var $all = $("div").siblings("p");
$all.each(function(){
alert( $(this).html() );
});
</script>
<script type="text/javascript">
//圖片隱蔽
$("img").hide(5000);
//休息3秒
window.setTimeout(function(){
//圖片顯示
$("img").show(5000);
},3000);
//淡入顯示圖片
$("img").fadeIn(3000);
//淡出隱蔽圖片
$("img").fadeOut(3000);
</script>
<script type="text/javascript">
//向上下滑動
$(":button").click(function(){
//div標標上下移動
$("div").slideToggle(100);
});
</script>
面試題：查詢指定的節點和多重each()迭【使用jquery彈出奇數的tr標籤下的td裡的值】）
<script type="text/javascript">
function myclick(){
//使用jquery彈出奇數的tr標籤下的td裡的值，即A1,A2,A3,C1,C2,C3
var $tr = $("table tr:NOT(:last):even");
//在每個tr標籤中查詢td標籤
$tr.each(function(){
//在tr標籤中查詢所有的td標籤
var $td = $(this).find("td");
//迭代
$td.each(function(){
var content = $(this).text();
alert(content);
});
});
}
//寫出另一種方式，比第一種更加easy
</script>
9、jQuery常用Event-API 目的：對web頁面（HTML/JSP）進行事件觸發，完成特殊效果的處理
| 方法 | 解釋 |
|---|---|
| window.onload | 在瀏覽器載入web頁面時觸發，可以寫多次onload事件，但後者覆蓋前者 |
| ready | 在瀏覽器載入web頁面時觸發，可以寫多次ready事件，不會後者覆蓋前者，依次從上向下執行，我們常用$(函式)簡化 |
| ready和onload同時存在時，二者都會觸發執行，ready快於onload | |
| change | 當內容改變時觸發 |
| focus | 焦點獲取 |
| select | 選中所有的文字值 |
| keyup/keydown/keypress | 演示在IE和Firefox中獲取event物件的不同 |
| mousemove | 在指定區域中不斷移動觸發 |
| mouseover | 滑鼠移入時觸發 |
| mouseout | 滑鼠移出時觸發 |
| submit | 在提交表單時觸發，true表示提交到後臺，false表示不提交到後臺 |
| click | 單擊觸發 |
| dblclick | 雙擊觸發 |
| blur | 焦點失去 |