Jquery就是這麼簡單
什麼是Jquery？
Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操做javascript
就是封裝了JavaScript，可以簡化咱們寫代碼的一個JavaScript庫css
爲何要使用Jquery？
我以爲很是重要的理由就是：它可以兼容市面上主流的瀏覽器，咱們學習AJAX就知道了，IE和FireFox獲取異步對象的方式是不同的，而Jquery可以屏蔽掉這些不兼容的東西...html
- （1）寫少代碼,作多事情【write less do more】
- （2）免費，開源且輕量級的js庫，容量很小
- 注意：項目中，提倡引用min版的js庫 - （3）兼容市面上主流瀏覽器，例如 IE，Firefox，Chrome
- 注意：jQuery不是將全部JS所有封裝，只是有選擇的封裝 - （4）可以處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供異步AJAX功能
- （5）文檔手冊很全，很詳細
- （6）成熟的插件可供選擇
- （7）提倡對主要的html標籤提供一個id屬性，但不是必須的
- （8）出錯後，有必定的提示信息
- （9）不用再在html裏面經過
<script>標籤插入一大堆js來調用命令了
回顧javascript
JavaScript定位到HTML的控件有三種基本的方式：java
- （A）經過ID屬性：document.getElementById()
- （B）經過NAME屬性：document.getElementsByName()
- （C）經過標籤名：document.getElementsByTagName()
咱們發現，JavaScript的方法名太長了，不易於書寫代碼......jquery
封裝優化
這些方法名太長了，獲取ID屬性、NAME屬性、標籤名屬性的控件也用不着三個方法，咱們定義下規則就行了web
- 傳入的參數是"#"號開頭的字符串，那麼就是id屬性
- 傳入的參數是沒有"#"號開頭的字符串，也沒有前綴修飾的字符串就是標籤名屬性
到這裏，咱們就能夠根據傳入的參數判斷它是獲取ID屬性的控件仍是標籤名的控件了。在內部仍是調用document.getElementById()這些方法。咱們真正在使用的時候直接寫上咱們自定義規則的字符串就能夠獲取對應的控件了。ajax
<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>
JQuery對象與JavaScript對象之間的關係
- 用JavaScript語法建立的對象叫作JavaScript對象
- 用JQurey語法建立的對象叫作JQuery對象
- Jquery對象只能調用Jquery對象的API
- JavaScript對象只能調用JavaScript對象的API
- Jquery對象只能調用Jquery對象的API
JQuery對象與JavaScript對象是能夠互相轉化的，通常地，因爲Jquery用起來更加方便，咱們都是將JavaScript對象轉化成Jquery對象apache
Jquery轉成JavaScript對象
在Jquery中對象都是當成是數組的。所以Jquery轉成JavaScript對象語法以下：獲取數組的下標，出來的結果就是JavaScript對象了。json
- jQuery對象[下標，從0開始]
- jQuery對象.get(下標，從0開始)
再次重申：Jquery對象只能調用Jquery對象的API，JavaScript對象只能調用JavaScript對象的APIapi
JavaScript對象轉成Jquery
值得注意的是：在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）表單對象屬性選擇器
- 匹配表單屬性具體的值
- （1）基本選擇器
經過這九種的選擇器，咱們基本能夠能獲取HTML中任何位置的標籤。
Jquery關於DOM的API
前面使用Jquery的選擇器來獲取到了HTML標籤，單純獲得標籤是沒有用的。咱們要對其進行增刪改，這樣在網頁上才能作出「動態」的效果...
JavaScript的DOM可以操做CSS,HTML從而在網頁上作出動態的效果..
Jquery是對JavaScript的封裝，那麼Jquery在獲得HTML標籤後，也有對應的方法來獲取標籤的內容，動態建立、刪除、修改標籤。從而在網頁上作出動態的效果
追加
- append()：追加到父元素以後
- prepend()：追加到父元素以前
- after()：追加到兄弟元素以後
- before()：追加到兄弟元素以前
查詢層次關係
咱們發如今選擇器上就有層次關係的選擇器，在API上也有層次關係的方法。通常地，咱們用方法來定位到對應的控件比較多。
- children()：只查詢子節點，不含後代節點
- next()：下一下兄弟節點
- prev()：上一下兄弟節點
- siblings()：上下兄弟節點
css樣式
- addClass()：增長已存在的樣式
- removeClass()：刪除已存在的樣式
- hasClass()：判斷標籤是否有指定的樣式，true表示有樣式，false表示無樣式
- toggleClass()：若是標籤有樣式就刪除，不然增長樣式
動畫效果
往這些方法下設置參數，那麼就能夠控制它的隱藏、顯示時間
- show()：顯示對象
- hide()：隱藏對象
- fadeIn()：淡入顯示對象
- fadeOut()：淡出隱藏對象
- slideUp()：向上滑動
- slideDown()：向下滑動
- slideToggle()：上下切換滑動，速度快點
CSS尺寸屬性
直接調用無參就是獲取，給指定的參數就是修改
- 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()：刪除已存在的屬性
增刪改標籤
$("<div id='xxID'>HTML代碼</div>")：建立元素，屬性，文本
- remove()：刪除自已及其後代節點
- clone()：只複製樣式，不復制行爲
- clone(true)：既複製樣式，又複製行爲
- replaceWith()：替代原來的節點
迭代
因爲Jquery對象都是被當作是一個數組，each()方法就是專門用來操做數組的。
- each()：是jQuery中專用於迭代數組的方法，參數爲一個處理函數，this表示當前須要迭代的js對象
Jquery事件API
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：焦點失去
值得注意的是：當用戶執行動做的時候，瀏覽器會自動建立事件對象，傳遞進去給響應事件的方法【相似與監聽器的原理】，那麼咱們在響應方法上就能夠獲取一些屬性：
Jquery對ajax經常使用的API
咱們在開始使用JavaScript學習AJAX的時候，建立異步對象時，須要根據不一樣的瀏覽器來建立不一樣的對象....裝載XML文件的時候，也有兼容性的問題。
Jquery就很好地屏蔽了瀏覽器不一樣的問題，不須要考慮瀏覽器兼容的問題，這是很是很是方便咱們開發的。
- $.ajax([options])
- load(url, [data], [callback])
- $.get(url, [data], [fn], [type])
- $post(url, [data], [callback], [type])
- serialize()
前4個方法的功能都是差很少的，都是向服務器發送請求，獲得服務器返回的數據。
最後一個是對錶單的數據進行封裝，將表單的數據封裝成JSON格式
load()
首先，咱們來使用一下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" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
當前時間是：<span id="time"></span><br>
<input type="button" id="button" value="獲取當前時間">
<script type="text/javascript">
$("#button").click(function () {
//請求服務器端的路徑
var url = "${pageContext.request.contextPath}/TimeServlet?time?" + new Date().getTime();
//沒有要參數要帶過去
//var sendData = null;
/*
* function方法的三個參數：
* 第一個參數表示服務器端帶回來的數據，是JS對象
* 第二個參數表示的是返回狀態的文字描述【用處不大】
* 第三個參數表示的是異步對象，通常咱們用來看服務器端返回的JSON的值是什麼【用處還行】
* 由於第一個參數返回的是JS對象，所以咱們是看不見具體JSON的值是什麼，因此有的時候要用第三個參數
*
* 值得注意的是：
* 要想使用第三個參數，就必須把前兩個參數給寫上！
* 調用load方法的jquery對象，返回結果自動添加到jQuery對象表明的標籤中間
* */
$("#time").load(url);
});
</script>
</body>
</html>
- 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();
}
- 效果：
$.get()
上面的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()
$.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" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<%--使用異步操做，表單的form和method都不是必須的，若是指定了，仍是會根據後面Jquery的方法和參數來決定--%>
<form>
<table>
<tr>
<td>用戶名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password"></td>
</tr>
<tr>
<td><input type="button" value="檢查"></td>
</tr>
</table>
<span id="backData"></span>
</form>
<script type="text/javascript">
$(":button").click(function () {
var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();
//要傳送過去的數據必須是JSON格式的
var sendData = {
username: $(":text").val(),
password: $(":password").val()
};
$.post(url, sendData, function (backData) {
//獲得返回的數據，填充到相對應的位置
$("#backData").text(backData);
});
});
</script>
</body>
</html>
- 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);
}
}
serialize()
上面在介紹參數的時候已經說了，發送給服務器端的參數是須要JSON格式的，可是呢，若是我在表單中有不少不少的參數呢？？？那不是要我本身一個一個地去拼接？？？？
因而乎，Jquery也提供了serialize()這麼一個方法，給咱們自動把表單中的數據封裝成JSON格式的數據
使用以前要注意的是：
- 爲每一個jQuery對象設置一個name屬性，由於name屬性會被認爲請求參數名
- 必須在
<form>標籤元素以內
根據上面的例子，咱們來使用一下，咱們調用serialize()方法，不本身去拼接JSON
<%--
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" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<%--使用異步操做，表單的form和method都不是必須的，若是指定了，仍是會根據後面Jquery的方法和參數來決定--%>
<form>
<table>
<%--要想使用serialize這個方法，就必須在表單以內，而且給上對應的name屬性--%>
<tr>
<td>用戶名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="button" value="檢查"></td>
</tr>
</table>
<span id="backData"></span>
</form>
<script type="text/javascript">
$(":button").click(function () {
var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();
//要傳送過去的數據必須是JSON格式的
/* var sendData = {
username: $(":text").val(),
password: $(":password").val()
};*/
var sendData = $("form").serialize();
$.post(url, sendData, function (backData) {
//獲得返回的數據，填充到相對應的位置
$("#backData").text(backData);
});
});
</script>
</body>
</html>
- 效果：
$.ajax()
對於這個方法，咱們又使用二級聯動這個案例來說解吧。咱們曾經使用過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" %>
<html>
<head>
<title>省份-城市，基於jQuery的AJAX二級聯動</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<%--############前臺頁面##############################--%>
<select name="province" id="provinceId">
<option>請選擇省份</option>
<option>廣東</option>
<option>北京</option>
</select>
<select name="city" id="cityId">
<option>請選擇城市</option>
</select>
<%--############監聽省份##############################--%>
<script type="text/javascript">
$("#provinceId").change( function() {
//每次調用的時候，把城市的值清空，除了第一項
$("#cityId option:gt(0)").remove();
//獲得具體選擇的值，講道理這裏應該是test的，但是test()沒反應，要用val()
var province = $("#provinceId option:selected").val();
//若是不是「請選擇省份」，才觸發事件
if ("請選擇省份" != province) {
//它接收的是一個JSON類型的數據
$.ajax(
{
type: "POST",
url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(),
data: {"province": province},
success: function (backData, aaa, ajax) {
//看下服務器帶過來的數據是什麼樣的，而後再對JSON進行解析
//alert(ajax.responseText);
//獲得服務器返回的數據,是一個JSON格式數據
var array = backData.city;
for(var i=0;i<array.length;i++) {
//動態建立option節點，添加到城市下拉框中
var $option = $("<option>" + array[i] + "</option>");
$("#cityId").append($option);
}
}
}
);
}
});
</script>
- 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<String> city = new ArrayList<>();
public List<String> 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配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<package name="province" extends="json-default" namespace="/">
<global-results>
<result name="ok" type="json"></result>
</global-results>
<action name="findCityByProvince" class="ProvinceAction" method="findCityByProvince">
</action>
</package>
</struts>
- 效果：
總結
- load()方法是使用Jquery的對象來進行調用的，獲得服務器的結果自動會把結果嵌套到所在的標籤中。
- get()方法不是使用Jquery對象來調用，所以須要手動把結果放在想要放的位置
- post()方法是用來把參數帶過去給服務器的，所以咱們須要在Servlet上手動設置編碼。用法與get()方法同樣
- serialize()是很是好用的一個方法，不須要咱們手動去拼接參數，會自動把form表單的參數封裝成JSON格式的數據。
- 至於$.ajax()方法，實際上就是集合了get()和post()方法。
若是文章有錯的地方歡迎指正，你們互相交流。習慣在微信看技術文章，想要獲取更多的Java資源的同窗，能夠關注微信公衆號:Java3y
相關文章
- 1. Jquery就是這麼簡單
- 2. WebService就是這麼簡單
- 3. WebSocket就是這麼簡單
- 4. Maven就是這麼簡單
- 5. Tomcat就是這麼簡單
- 6. HTTP就是這麼簡單
- 7. XML就是這麼簡單
- 8. Activiti就是這麼簡單
- 9. ThreadLocal就是這麼簡單
- 10. SVN就是這麼簡單
- 更多相關文章...
- • Hibernate是什麼 - Hibernate教程
- • MyBatis是什麼 - MyBatis教程
- • Github 簡明教程
- • 再有人問你分佈式事務，把這篇扔給他
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Jquery就是這麼簡單
- 2. WebService就是這麼簡單
- 3. WebSocket就是這麼簡單
- 4. Maven就是這麼簡單
- 5. Tomcat就是這麼簡單
- 6. HTTP就是這麼簡單
- 7. XML就是這麼簡單
- 8. Activiti就是這麼簡單
- 9. ThreadLocal就是這麼簡單
- 10. SVN就是這麼簡單