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

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

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

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

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

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

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

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

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

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

語(yǔ)法：$(js對(duì)象)---->jQuery對(duì)象

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

Jquery提供了九個(gè)選擇器給我們用來(lái)定位HTML控件..

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

（1）基本選擇器

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

（2）層次選擇器

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

（3）增強(qiáng)基本選擇器

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

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

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

（5）可見(jiàn)性選擇器

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

（6）屬性選擇器

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

（7）子元素選擇器

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

（8）表單選擇器

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

（9）表單對(duì)象屬性選擇器

匹配表單屬性具體的值

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

show()：顯示對(duì)象

hide()：隱藏對(duì)象

fadeIn()：淡入顯示對(duì)象

fadeOut()：淡出隱藏對(duì)象

slideUp()：向上滑動(dòng)

slideDown()：向下滑動(dòng)

slideToggle()：上下切換滑動(dòng)，速度快點(diǎn)

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

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

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

width()：獲取對(duì)象的寬

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

height()：獲取對(duì)象的高

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

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屬性對(duì)

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

$("

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

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

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

replaceWith()：替代原來(lái)的節(jié)點(diǎn)

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

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

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

Jquery也對(duì)JavaScript事件進(jìn)行了封裝，我們看一下以下的API：

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

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

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

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

focus：焦點(diǎn)獲取

select：選中所有的文本值

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

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

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

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

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

click：?jiǎn)螕粲|發(fā)

dblclick：雙擊觸發(fā)

blur：焦點(diǎn)失去

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

我們?cè)陂_(kāi)始使用JavaScript學(xué)習(xí)AJAX的時(shí)候，創(chuàng)建異步對(duì)象時(shí)，需要根據(jù)不同的瀏覽器來(lái)創(chuàng)建不同的對(duì)象....裝載XML文件的時(shí)候，也有兼容性的問(wèn)題。

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

$.ajax([options])

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

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

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

serialize()

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

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

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

我來(lái)補(bǔ)充一下：

第一個(gè)參數(shù)：表示的是要請(qǐng)求的路徑

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

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

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

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

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

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

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

我們來(lái)使用這個(gè)方法來(lái)獲取當(dāng)前的時(shí)間，對(duì)這個(gè)方法熟悉一下：

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

如果帶參數(shù)就自動(dòng)使用post，不帶參數(shù)自動(dòng)使用get。

使用load方法時(shí)，自動(dòng)進(jìn)行編碼，無(wú)需手工編碼

<%--
  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)前時(shí)間是：

  

  


  

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

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

$.get(url, [data], [fn], [type])參數(shù)和load()是完全類似的，我們?cè)谏厦娴睦又性撘幌戮托辛恕?/strong>

      $.get(url, function (backData) {

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

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

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


    

        

            
用戶名：
            

        

        

            
密碼：
            

        

        

            

        
    
    

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);

    }
}

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

    


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

            
用戶名：
            

        

        

            
密碼：
            

        

        

            

        
    
    

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


    
    



<%--############前臺(tái)頁(yè)面##############################--%>

    請(qǐng)選擇省份
    廣東
    北京


    請(qǐng)選擇城市



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

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{

    //自動(dòng)封裝數(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("沒(méi)有你選擇的地區(qū)");

        }
        return "ok";
    }

}

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