jQuery

1. jQuery是js庫，
　　庫：相當於java的工具類，庫是存放東西的， jQuery是存放js程式碼的地方， 放的用js程式碼寫的function

2. dom物件和jquery物件
　　dom物件，使用javascript的語法建立的物件叫做dom物件， 也就是js物件。
　　　　var obj= document.getElementById("txt1"); obj是dom物件，也叫做js物件
　　　　　 obj.value;

　　jquery物件： 使用jquery語法表示物件叫做jquery物件， 注意：jquery表示的物件都是陣列。
　　　　例如 var jobj = $("#txt1") , jobj就是使用jquery語法表示的物件。 也就是jquery物件。 它是一個數組。

dom物件可以和jquery物件相互的轉換。
　　dom物件可以轉為jquery ， 語法： $(dom物件)

1 function btnClick() {
2             var obj=document.getElementById("btn");
3             alert("使用dom物件獲取的屬性="+obj.value);
4             //把dom物件轉化為jQuery物件
5             var $jobj=$(obj);
 
6             //呼叫jQuery中的函式,獲取value值
7             alert("使用jQuery物件獲取的屬性="+$jobj.val())
8 
9         }

　　jquery物件也可以轉為dom物件， 語法： 從陣列中獲取第一個物件， 第一個物件就是dom物件， 使用[0]或者get{0).

1  function btnClick() {
2             //使用jQuery的語法,獲取頁面中的dom物件
3             var obj = $("#txt")[0]; //從陣列中獲取下標為0的dom物件,只有一個數據
4             //
 
var obj=$("#txt").get(0);
5             var num = obj.value;
6             obj.value = num * num;

為什麼要進行dom和jquery的轉換：目的是要使用物件的方法，或者方法。
當你的dom物件時，可以使用dom物件的屬性或者方法， 如果你要想使用jquery提供的函式，必須是jquery物件才可以。

3.選擇器： 就是一個字串， 用來定位dom物件的。定位了dom物件，就可以通過jquery的函式操作dom

常用的選擇器：

1） id選擇器， 語法： $("#dom物件的id值")
通過dom物件的id定位dom物件的。 通過id找物件， id在當前頁面中是唯一值。

2） class選擇器， 語法： $(".class樣式名)
class表示css中的樣式， 使用樣式的名稱定位dom物件的。

3） 標籤選擇器， 語法： $("標籤名稱")
使用標籤名稱定位dom物件的

　　4) 全部選擇器,語法： $("*")

　　5) 混合選擇器,語法： $("選擇器 名稱,選擇器 名稱")

4. 表單選擇器，
使用<input>標籤的type屬性值，定位dom物件的方式。
　　語法： $(":type屬性值")
例如： $(":text") ,選擇的是所有的單行文字框，
　　$(":button") ,選擇的是所有的按鈕。

5.過濾器：在定位了dom物件後，根據一些條件篩選dom物件。
過濾器有是一個字串，用來篩選dom物件的。
過濾器不能單獨使用， 必須和選擇器一起使用。

1）$("選擇器:first") : 第一個dom物件

2）$("選擇器:last"): 陣列中的最後一個dom物件

3）$("選擇器:eq(陣列的下標)") ：獲取指定下標的dom物件

4）$("選擇器:lt(下標)") ： 獲取小於下標的所有dom物件

5）$("選擇器:gt(下標)") ： 獲取大於下標的所有dom物件

6.表單屬性過濾器： 根據表單中dom物件的狀態情況，定位dom物件的。
　　啟用狀態， enabled ,

　　不可用狀態 disabled

　　選擇狀態 ， checked ， 例如radio， checkbox

7.each語法
　　1). 可以對 陣列， json ，dom陣列迴圈處理。 陣列， json中的每個成員都會呼叫一次處理函式。
　　　　var arr = { 1, 2, 3} //陣列
　　　　var json = {"name":"lisi","age":20 }
　　　　var obj = $(":text");

　　語法： $.each( 迴圈的內容， 處理函式 ) ：表示使用jquery的each，迴圈陣列，每個陣列成員，
都會執行後面的“處理函式”一次。

　　$: 相當於是java的一個類名
　　each:就是類中的靜態方法。
　　靜態方法呼叫，可以使用 類名.方法名稱

　　處理函式:function(index, emelent) :
　　　　index, element都是自定義的形參， 名稱自定義。
　　　　　　index：迴圈的索引
　　　　　　element：陣列中的成員

　　1)js迴圈陣列：
　　　　for(var i=0;i<arr.length;i++){
　　　　　　var item = arr[i]; //陣列成員
　　　　　　//運算元組成員
　　　　　　shuchu( i , item);
　　　　　　}

　　　　function shuchu(index, emlemnt){
　　　　輸出index ，element
　　　　}

　　2).迴圈jquery物件， jquery物件就是dom陣列
　　　　jquery物件.each( function(index,element) {} )　　

1 　　　　　　　　　　//迴圈普通陣列,非dom陣列
2                 var  arr=[1,2,3];
3                 $.each(arr,function (index,element) {
4                 alert("迴圈變數,"+index+"=========陣列成員:"+element);
5 
6                 });

1  　　　　　　　　//迴圈json
2                 var json={"name":"張三","age":20};
3                 $.each(json,function (i,n) {
4                     alert("i是key="+i+",n是value="+n)
5                 })

1 　　　　　　　　　//迴圈dom陣列
2                 var domArray=$(":text"); //dom陣列
3                 $.each(domArray,function (i,n) {
4                 alert("i="+i+"  ,n="+n.value);
5                 });

1  　　　　　　　　//迴圈jQuery物件
2                 $(":text").each(function (i,n) {
3                     alert("i="+i+",n="+n.value);
4                 });

8. jquery中給dom物件繫結事件
　　1） $(選擇器).事件名稱( 事件的處理函式)
$(選擇器)：定位dom物件， dom物件可以有多個， 這些dom物件都繫結事件了
事件名稱：就是js中事件去掉on的部分， 例如 js中的單擊事件 onclick(),
jquery中的事件名稱，就是click，都是小寫的。
事件的處理函式：就是一個function ，當事件發生時，執行這個函式的內容。

例如給id是btn的按鈕繫結單擊事件
　　$("#btn").click(funtion(){
　　　　alert("btn按鈕單擊了")
　　})

　　2) on 事件繫結
$(選擇器).on( 事件名稱 , 事件的處理函式)

　　事件名稱： 就是js事件中去掉on的部分， 例如js中onclick ,這裡就是click
　　事件的處理函式： function 定義。

　　例如， <input type="button" id="btn">
　　　　$("#btn").on("click", function() { 處理按鈕單擊 } )

1   　　　　　　$("#btn1").click(function () {
2              //使用append增加一個dom物件
3                 $("#mydiv").append("<input type='button' id='newBtn' value='我是新加入的按鈕'/>")
4                 //使用on給按鈕繫結事件
5                 $("#newBtn").on("click",function () {
6                     alert("新新增的按鈕被點選了")
7                 })
8 
9             });

9. 使用jquery的函式，實現ajax請求的處理。
沒有jquery之前，使用XMLHttpRequest做ajax ， 有4個步驟。 jquery簡化了ajax請求的處理。
使用三個函式可以實現ajax請求的處理。

　　1） $.ajax() : jquery中實現ajax的核心函式。
　　2） $.post() : 使用post方式做ajax請求。
　　3） $.get() : 使用get方式傳送ajax請求。

　　　　$.post()和$.get() 他們在內部都是呼叫的 $.ajax()

介紹 $.ajax函式的使用， 函式的引數表示請求的url， 請求的方式，引數值等資訊。
$.ajax()引數是一個json的結構。

例如： $.ajax( {名稱:值， 名稱1:值1..... } )

例如： $.ajax( { async:true ,
　　　　contentType:"application/json" ,
　　　　data: {name:"lisi",age:20 },
　　　　dataType:"json",
　　　　error:function(){
　　　　　　請求出現錯誤時，執行的函式
　　　　},
　　　　success:function( data ) {
　　　　　　// data 就是responseText, 是jquery處理後的資料。

　　　　},
　　　　url:"bmiAjax",
　　　　type:"get"
　　} )

json結構的引數說明：

　　1)async:是一個boolean型別的值， 預設是true ，表示非同步請求的。可以不寫async這個配置項
xmlHttp.open(get,url,true),第三個引數一樣的意思。
　　2)contentType: 一個字串，表示從瀏覽器傳送伺服器的引數的型別。 可以不寫。
例如你想表示請求的引數是json格式的， 可以寫application/json
　　3)data: 可以是字串，陣列，json，表示請求的引數和引數值。 常用的是json格式的資料
　　4)dataType: 表示期望從伺服器端返回的資料格式，可選的有： xml ， html ，text ，json
當我們使用$.ajax()傳送請求時， 會把dataType的值傳送給伺服器， 那我們的servlet能夠
讀取到dataType的值，就知道你的瀏覽器需要的是 json或者xml的資料，那麼伺服器就可以
返回你需要的資料格式。
　　5)error: 一個function ，表示當請求發生錯誤時，執行的函式。
　　　　error:function() { 發生錯誤時執行 }

　　6)sucess:一個function , 請求成功了，從伺服器端返回了資料，會執行success指定函式
之前使用XMLHttpRequest物件， 當readyState==4 && status==200的時候。

　　7)url:請求的地址
　　8)type:請求方式，get或者post， 不用區分大小寫。 預設是get方式。

主要使用的是 url , data ,dataType, success .

相關程式碼:

 1 <script type="text/javascript">
 2 $(function () {
 3    $("#btn").click(function () {
 4        //獲取dom的value值
 5        var proid =$("#proid").val();
 6        //發起ajax請求
 7        $.ajax({
 8            url:"queryjson",
 9            data:{
10                "proid":proid
11            },
12            dataType:"json",
13            success:function (resp) {
14                //alert(resp);
15                $("#proname").val(resp.name);
16                $("#projiancheng").val(resp.jiancheng);
17                $("#proshenghui").val(resp.shenghui);
18            }
19        })
20    })
21 });
22 </script>

關於優化:可以封裝執行函式程式碼,使程式碼簡潔,乾淨

post請求例子:

 　　 //發請求獲取資料 post方式
          $.post("querycity",{proid:provinceId},callback,"json")
        })

callback為封裝後的執行程式碼

　　//定義一個處理返回資料的函式
      function callback(resp) {
          // alert(resp)
          $("#city").empty();
          $.each(resp,function (i,n) {
            $("#city").append("<option value='"+n.id+"'>"+n.name+"</option>");
          })
      }