用JQurey語法創(chuàng)建的對象叫做JQuery對象

Jquery對象只能調(diào)用Jquery對象的API

JavaScript對象只能調(diào)用JavaScript對象的API

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

在Jquery中對象都是當(dāng)成是數(shù)組的。因此Jquery轉(zhuǎn)成JavaScript對象語法如下：獲取數(shù)組的下標(biāo)，出來的結(jié)果就是JavaScript對象了。

jQuery對象[下標(biāo)，從0開始]

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

再次重申：Jquery對象只能調(diào)用Jquery對象的API，JavaScript對象只能調(diào)用JavaScript對象的API

值得注意的是：在JavaScript腳本內(nèi)，this是代表JavaScript對象的。

JavaScript對象轉(zhuǎn)成Jquery對象語法也非常簡單：在${}內(nèi)寫上JavaScript對象，就變成了JQuery對象了。

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

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

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

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

（1）基本選擇器

直接定位id、類修修飾器、標(biāo)簽

（2）層次選擇器

有父子，兄弟關(guān)系的標(biāo)簽

（3）增強基本選擇器

大于、小于、等于、奇偶數(shù)的標(biāo)簽

（4）內(nèi)容選擇器

定義內(nèi)容為XXX、內(nèi)容中是否有標(biāo)簽器、含有子元素或者文本的標(biāo)簽

（5）可見性選擇器

可見或不可見的標(biāo)簽

（6）屬性選擇器

與屬性的值相關(guān)

（7）子元素選擇器

匹配父標(biāo)簽下的子標(biāo)簽

（8）表單選擇器

匹配表單對應(yīng)的控件屬性

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

匹配表單屬性具體的值

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

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

JavaScript的DOM能夠操作CSS,HTML從而在網(wǎng)頁上做出動態(tài)的效果..

Jquery是對JavaScript的封裝，那么Jquery在得到HTML標(biāo)簽后，也有對應(yīng)的方法來獲取標(biāo)簽的內(nèi)容，動態(tài)創(chuàng)建、刪除、修改標(biāo)簽。從而在網(wǎng)頁上做出動態(tài)的效果

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

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

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

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

我們發(fā)現(xiàn)在選擇器上就有層次關(guān)系的選擇器，在API上也有層次關(guān)系的方法。一般地，我們用方法來定位到對應(yīng)的控件比較多。

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

next()：下一下兄弟節(jié)點

prev()：上一下兄弟節(jié)點

siblings()：上下兄弟節(jié)點

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

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

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

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

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

show()：顯示對象

hide()：隱藏對象

fadeIn()：淡入顯示對象

fadeOut()：淡出隱藏對象

slideUp()：向上滑動

slideDown()：向下滑動

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

直接調(diào)用無參就是獲取，給指定的參數(shù)就是修改

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

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

width()：獲取對象的寬

width(300)：設(shè)置對象的寬

height()：獲取對象的高

height(500)：設(shè)置對象的高

val()：獲取value屬性的值

val("")：設(shè)置value屬性值為""空串，相當(dāng)于清空

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

text("")：設(shè)置HTML或XML標(biāo)簽之間的值為""空串

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

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

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

$("

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

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

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

replaceWith()：替代原來的節(jié)點

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

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

JavaScript一大特性就是事件驅(qū)動，當(dāng)用戶用了執(zhí)行了某些動作以后，JavaScript就會響應(yīng)事件，在事件的方法上，我們就可以對用戶的動作“回饋”一些信息給用戶！

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

window.onload：在瀏覽器加載web頁面時觸發(fā)，可以寫多次onload事件，但后者覆蓋前者

ready：在瀏覽器加載web頁面時觸發(fā)，可以寫多次ready事件，不會后者覆蓋前者，依次從上向下執(zhí)行，我們常用$(函數(shù))簡化

ready和onload同時存在時，二者都會觸發(fā)執(zhí)行，ready快于onload

change：當(dāng)內(nèi)容改變時觸發(fā)

focus：焦點獲取

select：選中所有的文本值

keyup/keydown/keypress：演示在IE和Firefox中獲取event對象的不同

mousemove：在指定區(qū)域中不斷移動觸發(fā)

mouseover：鼠標(biāo)移入時觸發(fā)

mouseout：鼠標(biāo)移出時觸發(fā)

submit：在提交表單時觸發(fā)，true表示提交到后臺，false表示不提交到后臺

click：單擊觸發(fā)

dblclick：雙擊觸發(fā)

blur：焦點失去

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

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

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

$.ajax([options])

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

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

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

serialize()

前4個方法的功能都是差不多的，都是向服務(wù)器發(fā)送請求，得到服務(wù)器返回的數(shù)據(jù)。

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

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

我來補充一下：

第一個參數(shù)：表示的是要請求的路徑

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

第三個參數(shù)：回調(diào)方法，服務(wù)器返回給異步對象的時候，會調(diào)用該方法

回調(diào)方法也有三個參數(shù)：

回調(diào)函數(shù)中參數(shù)一：backData表示返回的數(shù)據(jù)，它是js對象

回調(diào)函數(shù)中參數(shù)二：textStatus表示返回狀態(tài)的文本描述，例如：success，error，

回調(diào)函數(shù)中參數(shù)三：xmlHttpRequest表示ajax中的核心對象

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

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

調(diào)用load方法的jquery對象，返回結(jié)果自動添加到j(luò)Query對象代表的標(biāo)簽中間

如果帶參數(shù)就自動使用post，不帶參數(shù)自動使用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" %>


  
    

    

  
  
  當(dāng)前時間是：

  

  


  

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()方法，當(dāng)我們帶參數(shù)給服務(wù)器的時候，就自動轉(zhuǎn)化成post、不帶參數(shù)的時候就轉(zhuǎn)換成get。$.get()就是指定是get方法

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

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

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

      $.get(url, function (backData) {

        //得到客戶端返回的數(shù)據(jù)【JS對象】

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

效果：

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

使用$.post()方法是需要設(shè)定編碼的，它和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都不是必須的，如果指定了，還是會根據(jù)后面Jquery的方法和參數(shù)來決定--%>


    

        

            
用戶名：
            

        

        

            
密碼：
            

        

        

            

        
    
    

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 {

        //設(shè)定編碼
        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);

    }
}

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

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

使用之前要注意的是：

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

必須在

<%--
  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都不是必須的，如果指定了，還是會根據(jù)后面Jquery的方法和參數(shù)來決定--%>

    


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

            
用戶名：
            

        

        

            
密碼：
            

        

        

            

        
    
    

效果：

對于這個方法，我們又使用二級聯(lián)動這個案例來講解吧。我們曾經(jīng)使用過JavaScript來解析XML、JSON來實現(xiàn)二級聯(lián)動。這次我使用Jquery+Struts2+JSON來實現(xiàn)二級聯(lián)動。

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

type【請求類型】

url【請求路徑】

data【發(fā)送給服務(wù)器的數(shù)據(jù)，也是一個JSON類型】

success【回調(diào)函數(shù)】

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

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


    
    



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

    請選擇省份
    廣東
    北京


    請選擇城市



<%--############監(jiān)聽省份##############################--%>

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{

    //自動封裝數(shù)據(jù)
    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("一環(huán)");
            city.add("二環(huán)");
            city.add("三環(huán)");
            city.add("四環(huán)");

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

        }
        return "ok";
    }

}

Struts.xml配置文件

效果：

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

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

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

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

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

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