Jquery就是这么简单
什么是Jquery？
Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操做javascript
就是封装了JavaScript，可以简化咱们写代码的一个JavaScript库php
为何要使用Jquery？
我以为很是重要的理由就是：它可以兼容市面上主流的浏览器，咱们学习AJAX就知道了，IE和FireFox获取异步对象的方式是不同的，而Jquery可以屏蔽掉这些不兼容的东西...css
- （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的控件有三种基本的方式：html
- （A）经过ID属性：document.getElementById()
- （B）经过NAME属性：document.getElementsByName()
- （C）经过标签名：document.getElementsByTagName()
咱们发现，JavaScript的方法名太长了，不易于书写代码......java
封装优化
这些方法名太长了，获取ID属性、NAME属性、标签名属性的控件也用不着三个方法，咱们定义下规则就行了jquery
- 传入的参数是"#"号开头的字符串，那么就是id属性
- 传入的参数是没有"#"号开头的字符串，也没有前缀修饰的字符串就是标签名属性
到这里，咱们就能够根据传入的参数判断它是获取ID属性的控件仍是标签名的控件了。在内部仍是调用document.getElementById()这些方法。咱们真正在使用的时候直接写上咱们自定义规则的字符串就能够获取对应的控件了。web
<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对象ajax
Jquery转成JavaScript对象
在Jquery中对象都是当成是数组的。所以Jquery转成JavaScript对象语法以下：获取数组的下标，出来的结果就是JavaScript对象了。apache
- jQuery对象[下标，从0开始]
- jQuery对象.get(下标，从0开始)
再次重申：Jquery对象只能调用Jquery对象的API，JavaScript对象只能调用JavaScript对象的APIjson
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()
.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