用JQurey語法創建的對象叫做JQuery對象

Jquery對象只能調用Jquery對象的API

JavaScript對象只能調用JavaScript對象的API

JQuery對象與JavaScript對象是可以互相轉化的，一般地，由于Jquery用起來更加方便，我們都是將JavaScript對象轉化成Jquery對象

在Jquery中對象都是當成是數組的。因此Jquery轉成JavaScript對象語法如下：獲取數組的下標，出來的結果就是JavaScript對象了。

jQuery對象[下標，從0開始]

jQuery對象.get(下標，從0開始)

再次重申：Jquery對象只能調用Jquery對象的API，JavaScript對象只能調用JavaScript對象的API

值得注意的是：在JavaScript腳本內，this是代表JavaScript對象的。

JavaScript對象轉成Jquery對象語法也非常簡單：在${}內寫上JavaScript對象，就變成了JQuery對象了。

語法：$(js對象)---->jQuery對象

一般地，我們習慣在Jquery對象的變量前面寫上$，表示這是JQuery對象

Jquery提供了九個選擇器給我們用來定位HTML控件..

目的：通過九類選擇器，能定位web頁面（HTML/JSP/XML）中的任何標簽

（1）基本選擇器

直接定位id、類修修飾器、標簽

（2）層次選擇器

有父子，兄弟關系的標簽

（3）增強基本選擇器

大于、小于、等于、奇偶數的標簽

（4）內容選擇器

定義內容為XXX、內容中是否有標簽器、含有子元素或者文本的標簽

（5）可見性選擇器

可見或不可見的標簽

（6）屬性選擇器

與屬性的值相關

（7）子元素選擇器

匹配父標簽下的子標簽

（8）表單選擇器

匹配表單對應的控件屬性

（9）表單對象屬性選擇器

匹配表單屬性具體的值

通過這九種的選擇器，我們基本可以能獲取HTML中任何位置的標簽。

前面使用Jquery的選擇器來獲取到了HTML標簽，單純得到標簽是沒有用的。我們要對其進行增刪改，這樣在網頁上才能做出“動態”的效果...

JavaScript的DOM能夠操作CSS,HTML從而在網頁上做出動態的效果..

Jquery是對JavaScript的封裝，那么Jquery在得到HTML標簽后，也有對應的方法來獲取標簽的內容，動態創建、刪除、修改標簽。從而在網頁上做出動態的效果

append()：追加到父元素之后

prepend()：追加到父元素之前

after()：追加到兄弟元素之后

before()：追加到兄弟元素之前

我們發現在選擇器上就有層次關系的選擇器，在API上也有層次關系的方法。一般地，我們用方法來定位到對應的控件比較多。

children()：只查詢子節點，不含后代節點

next()：下一下兄弟節點

prev()：上一下兄弟節點

siblings()：上下兄弟節點

addClass()：增加已存在的樣式

removeClass()：刪除已存在的樣式

hasClass()：判斷標簽是否有指定的樣式，true表示有樣式，false表示無樣式

toggleClass()：如果標簽有樣式就刪除，否則增加樣式

往這些方法下設置參數，那么就可以控制它的隱藏、顯示時間

show()：顯示對象

hide()：隱藏對象

fadeIn()：淡入顯示對象

fadeOut()：淡出隱藏對象

slideUp()：向上滑動

slideDown()：向下滑動

slideToggle()：上下切換滑動，速度快點

直接調用無參就是獲取，給指定的參數就是修改

offset()：獲取對象的left和top坐標

offset({top:100,left:200})：將對象直接定位到指定的left和top坐標

width()：獲取對象的寬

width(300)：設置對象的寬

height()：獲取對象的高

height(500)：設置對象的高

val()：獲取value屬性的值

val("")：設置value屬性值為""空串，相當于清空

text()：獲取HTML或XML標簽之間的值

text("")：設置HTML或XML標簽之間的值為""空串

html()：得到標簽下HTML的值

attr(name,value)：給符合條件的標簽添加key-value屬性對

removeAttr()：刪除已存在的屬性

$("

remove()：刪除自已及其后代節點

clone()：只復制樣式，不復制行為

clone(true)：既復制樣式，又復制行為

replaceWith()：替代原來的節點

由于Jquery對象都是被看成是一個數組，each()方法就是專門用來操作數組的。

each()：是jQuery中專用于迭代數組的方法，參數為一個處理函數，this表示當前需要迭代的js對象

JavaScript一大特性就是事件驅動，當用戶用了執行了某些動作以后，JavaScript就會響應事件，在事件的方法上，我們就可以對用戶的動作“回饋”一些信息給用戶！

Jquery也對JavaScript事件進行了封裝，我們看一下以下的API：

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：焦點失去

值得注意的是：當用戶執行動作的時候，瀏覽器會自動創建事件對象，傳遞進去給響應事件的方法【類似與監聽器的原理】，那么我們在響應方法上就可以獲取一些屬性：

我們在開始使用JavaScript學習AJAX的時候，創建異步對象時，需要根據不同的瀏覽器來創建不同的對象....裝載XML文件的時候，也有兼容性的問題。

Jquery就很好地屏蔽了瀏覽器不同的問題，不需要考慮瀏覽器兼容的問題，這是非常非常方便我們開發的。

$.ajax([options])

load(url, [data], [callback])

$.get(url, [data], [fn], [type])

$post(url, [data], [callback], [type])

serialize()

前4個方法的功能都是差不多的，都是向服務器發送請求，得到服務器返回的數據。

最后一個是對表單的數據進行封裝，將表單的數據封裝成JSON格式

首先，我們來使用一下load()這個方法吧。在文檔中對它的解釋是這樣子的。

我來補充一下：

第一個參數：表示的是要請求的路徑

第二個參數：要把哪些參數帶過去給服務器端，需要的是JSON格式的

第三個參數：回調方法，服務器返回給異步對象的時候，會調用該方法

回調方法也有三個參數：

回調函數中參數一：backData表示返回的數據，它是js對象

回調函數中參數二：textStatus表示返回狀態的文本描述，例如：success，error，

回調函數中參數三：xmlHttpRequest表示ajax中的核心對象

一般地，我們只需要用到第一個參數！

我們來使用這個方法來獲取當前的時間，對這個方法熟悉一下：

調用load方法的jquery對象，返回結果自動添加到jQuery對象代表的標簽中間

如果帶參數就自動使用post，不帶參數自動使用get。

使用load方法時，自動進行編碼，無需手工編碼

<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


  
    

    

  
  
  當前時間是：

  

  


  

Servlet代碼：

    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String date = dateFormat.format(new Date());

        PrintWriter writer = response.getWriter();
        writer.write(date);

        writer.flush();
        writer.close();

    }

效果：

上面的load()方法，當我們帶參數給服務器的時候，就自動轉化成post、不帶參數的時候就轉換成get。$.get()就是指定是get方法

load()方法是使用Jquery對象來調用的，并且調用過后，會把數據自動填充到Jquery對象的標簽中間，而$.get()并不是特定的Jquery對象來調用！

$.get(url, [data], [fn], [type])參數和load()是完全類似的，我們在上面的例子中該一下就行了。

由于$.get()是沒有將返回的數據自動填充到標簽之中，因此需要手動地添加到指定的標簽之中！

      $.get(url, function (backData) {

        //得到客戶端返回的數據【JS對象】

        $("#time").append(backData);
      });

效果：

$.post()和$.get()是十分類似的，只不過是把請求方式改變了，一般情況下，我們有參數傳遞給服務器的時候，都是用post方式的。

使用$.post()方法是需要設定編碼的，它和load()方法是不一樣的！

下面使用檢查用戶名和密碼是否合法的案例來說明這兩個方法：

<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>



    

    




<%--使用異步操作，表單的form和method都不是必須的，如果指定了，還是會根據后面Jquery的方法和參數來決定--%>


    

        

            
用戶名：
            

        

        

            
密碼：
            

        

        

            

        
    
    

Servlet代碼：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by ozc on 2017/5/21.
 */
@WebServlet(name = "UserServlet",urlPatterns = "/UserServlet")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //設定編碼
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        String backData = "用戶名和密碼合法";
        if ("哈哈".equals(username) && "123".equals(password)) {

            backData = "用戶名或密碼不合法";
        }

        response.getWriter().write(backData);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        this.doPost(request, response);

    }
}

上面在介紹參數的時候已經說了，發送給服務器端的參數是需要JSON格式的，但是呢，如果我在表單中有很多很多的參數呢？？？那不是要我自己一個一個地去拼接？？？？

于是乎，Jquery也提供了serialize()這么一個方法，給我們自動把表單中的數據封裝成JSON格式的數據

使用之前要注意的是：

為每個jQuery對象設置一個name屬性，因為name屬性會被認為請求參數名

必須在

<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>



    

    




<%--使用異步操作，表單的form和method都不是必須的，如果指定了，還是會根據后面Jquery的方法和參數來決定--%>

    


        <%--要想使用serialize這個方法，就必須在表單之內，并且給上對應的name屬性--%>
        

            
用戶名：
            

        

        

            
密碼：
            

        

        

            

        
    
    

效果：

對于這個方法，我們又使用二級聯動這個案例來講解吧。我們曾經使用過JavaScript來解析XML、JSON來實現二級聯動。這次我使用Jquery+Struts2+JSON來實現二級聯動。

$.ajax()這個方法接收的參數是一個JSON類型，JSON里面有幾個參數：

type【請求類型】

url【請求路徑】

data【發送給服務器的數據，也是一個JSON類型】

success【回調函數】

這里遇到的問題：動態獲取選擇下拉框的值時候，調用的是val()而不是text()....

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    



<%--############前臺頁面##############################--%>

    請選擇省份
    廣東
    北京


    請選擇城市



<%--############監聽省份##############################--%>

Action

import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ozc on 2017/5/18.
 */
public class ProvinceAction  extends ActionSupport{

    //自動封裝數據
    private String province;

    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    
    //封裝城市的集合
    private List city = new ArrayList<>();
    public List getCity() {
        return city;
    }


    public String findCityByProvince() throws Exception {

        if ("廣東".equals(province)) {
            city.add("廣州");
            city.add("珠海");
            city.add("從化");
        } else if ("北京".equals(province)) {
            city.add("一環");
            city.add("二環");
            city.add("三環");
            city.add("四環");

        } else {
            System.out.println("沒有你選擇的地區");

        }
        return "ok";
    }

}

Struts.xml配置文件

效果：

load()方法是使用Jquery的對象來進行調用的，得到服務器的結果自動會把結果嵌套到所在的標簽中。

get()方法不是使用Jquery對象來調用，因此需要手動把結果放在想要放的位置

post()方法是用來把參數帶過去給服務器的，因此我們需要在Servlet上手動設置編碼。用法與get()方法一樣

serialize()是非常好用的一個方法，不需要我們手動去拼接參數，會自動把form表單的參數封裝成JSON格式的數據。

至于$.ajax()方法，實際上就是集合了get()和post()方法。

如果文章有錯的地方歡迎指正，大家互相交流。習慣在微信看技術文章，想要獲取更多的Java資源的同學，可以關注微信公眾號:Java3y