什么是Jquery？
Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操纵
就是封装了JavaScript，能够简化我们写代码的一个JavaScript库
为何要运用Jquery？
我以为异常重要的来由就是：它能够兼容市面上主流的浏览器，我们进修AJAX就知道了，IE和FireFox猎取异步对象的体式格局是不一样的，而Jquery能够屏障掉这些不兼容的东西…
- （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的控件有三种基础的体式格局：
- （A）经由过程ID属性：document.getElementById()
- （B）经由过程NAME属性：document.getElementsByName()
- （C）经由过程标署名：document.getElementsByTagName()
我们发明，JavaScript的要领名太长了，不易于誊写代码……
封装优化
这些要领名太长了，猎取ID属性、NAME属性、标署名属性的控件也用不着三个要领，我们定义下划定规矩就好了
- 传入的参数是”#”号开首的字符串，那末就是id属性
- 传入的参数是没有”#”号开首的字符串，也没有前缀润饰的字符串就是标署名属性
到这里，我们就能够依据传入的参数推断它是猎取ID属性的控件照样标署名的控件了。在内部照样挪用document.getElementById()这些要领。我们真正在运用的时刻直接写上我们自定义划定规矩的字符串就能够猎取对应的控件了。
<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对象与JavaScript对象是能够相互转化的，平常地，由于Jquery用起来越发轻易，我们都是将JavaScript对象转化成Jquery对象
Jquery转成JavaScript对象
在Jquery中对象都是当做是数组的。因而Jquery转成JavaScript对象语法以下：猎取数组的下标，出来的效果就是JavaScript对象了。
- jQuery对象[下标，从0最先]
- jQuery对象.get(下标，从0最先)
再次重申：Jquery对象只能挪用Jquery对象的API，JavaScript对象只能挪用JavaScript对象的API
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）表单对象属性挑选器
- 婚配表单属性详细的值
经由过程这九种的挑选器，我们基础能够能猎取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
