jQuery

Posted on Edited on In , Views:

jQuery就是JavaScript的一个库，它极大的简化了JS编程

例如：

1
2
3
4
5
6
7
8
document.getElementById()   //JS
$("#id") 				  //jQuery

document.getElementsByClassName() //JS
$(".class className")             //jQuery

document.getElementsByTagName() //JS
$("tagName")                    //jQuery

【获取jQuery】去官网，下载未压缩版jQuery库文件，将其粘贴到项目中，然后在要用到的JS文件中引入它即可。

第一个小实例，jQuery实现onload函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
     * 1. $()是一个函数，document是它的参数，$(document)将document对象变为jQuery对象
     * 2. ready是jQuery对象可以调用的一个函数，当页面加载完毕后会执行ready中定义的内容，相当于onload
     * 3. ready中定义匿名函数，该函数在页面加载完毕时会被调用
     */
   $(document).ready(function () {
            alert("hi jQuery")
       }
   )

/*上面是标准写法，可以简写为：*/
$(function(){
	alert("hi jQuery")
})

$(document).ready() 等价于 $(), jQuery(), window.jQuery()

1. dom对象和jQuery对象

var obj = document.getElementById("id"); 即使用javaScript创建的对象都是dom对象

var $obj = $("#id"); 使用jQuery语法创建的对象就是jQuery对象（jQuery对象相当于是一个容器，其中存放了多个dom对象，以及jQuery对象的方法）

一般在jQuery对象名称前加$来方便区分

1.1 dom对象转为jQuery对象

$(domObject)

1.2 jQuery对象转dom对象

jQuery对象是数组，每一个jQuery对象的第一个元素就是该jQuery对象对应的dom对象。

例如: var domObj = $("#id")[0]

2. 选择器

jQuery利用选择器（本质是一个字符串）定位dom对象，并将它转化为jQuery对象。

【id选择器】$("#id")

【class选择器】$(".class className")

【标签选择器】$("tagName")

【选取当前页面中的所有对象】$("*")

【组合选择器】$("[#id], [.class className], [tagName]") //即一次选中多个

【表单选择器】

$(":tag")

可以方便的选中input标签，比如文本框<input type="text">，单选框<input type="radio">等，在无<form>的情况下也可选择。

1
2
$(":text") //选取所有单行文本框
$(":radio") //选取所有单选框

实例

1
2
3
4
5
6
7
8
9
10
/*获取<input type="text">对象*/
var $obj = $(":text");
var v = $obj.val(); //$obj.val()相当于$obj[0].value

/*获取<input type="radio">对象，checkbox类似*/
var $obj = $(":radio");
for(var i = 0; i < $obj.length; i++){
	var obj = $obj[i]; //这里每一个obj都是个dom对象
    var v = obj.value;
}

3. 过滤器

过滤器必须跟选择器一起使用，选择器大多时候会选择到一组dom对象，过滤器的作用就是对这一组对象进行筛选。

【保留选择器选中的第一个对象】$("selector:first")

【保留选择器选中的最后一个对象】$("selector:last")

【选择选择器中中指定的对象】$("selector:eq(index)")

【选择选择器中小于指定索引的所有对象】$("selector:lt(index)") ，注意是LT不是IT

【选择选择器中大于指定索引的所有对象】$("selector:gt(index)")

【表单属性过滤器】根据表单(input标签对象)当前的属性值来过滤（比如复选框是否checked）

1
2
3
$("text:enabled")
$("checkbox:checked")
$("select>option:selected")  //下拉框过滤与其他不一样

4. 事件

使用jQuery给dom对象绑定事件。

$(selector).eventName( eventFunction )

其中eventName就是js中事件去掉on，比如onclick变为click。

1
2
3
$("#1").click(function () { //点击id=1的dom对象变成红色5
            alert("clicked");
        })

还有一种更加灵活的方式——使用on关键字：

1
2
3
4
5
6
7
8
9
10
11
12
$(":button").on({
    mouseenter:function () {
        $.each($("div"),function (index, element) {
            element.innerHTML = "changed"
        })
    },
    mouseleave:function () {
        $.each($("div"),function (index, element) {
            element.innerHTML = ""
        })
    }
})

5. jQuery函数

【val()】

无参，读取第一个dom对象的值

有参，对数组中所有dom对象value进行统一赋值

【text()】

无参，读取数组中所有dom对象的文本内容，以字符串拼接的方式返回

有参，对数组中所有dom对象的文本内容统一赋值

【attr()】

对dom对象value之外的属性进行操作。

attr(“attributeName”)，获取数组第一个dom对象的属性值

attr(“attributeName”, “value”)，给数组中所有dom对象的属性赋值

比如<input type="button" id="1"> ，那么$("#1").attr("type") 将会返回字符串”button”

【remove】

将数组中所有dom对象及其子对象删除。

【empty】

将数组中所有dom对象的子对象删除。

【append】

为数组中的所有dom对象添加子对象

【html】

无参，获取dom数第一个元素的innerHTML

有参，设置dom数组中所有元素的innerHTML

【each】

该函数可用于遍历:

  1. dom数组。

  2. 普通数组。

  3. json

对每一个遍历到的成员都会调用内部定义的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.each(ObjectToTraverse,function(index, element) {...}) //index代表当前遍历到的下标，element代表当前下标位置上的元素

/*1. 遍历普通数组*/
var arr = [1,2,3,4]
$.each(arr,function (index, element) {
    alert(element);
})
                                                  
/*2. 遍历json*/
var json = {"name":"tom","age":18};
$.each(json,function (index, element) {
    alert(index+" "+element);
})          
                                                  
/*3. 遍历jQuery对象（dom数组）*/
$.each($("div"),function (index, element) { //这里获取到的element是dom对象
    element.innerHTML = "changed"
})

6. ajax

6.1 ajax介绍

一些时候用户点击了网页上某个部件后只需要更新一小部分页面内容，其余内容不变，这时如果使用全局刷新就会让用户感受到明显的延迟，降低用户体验。这时就可以采用AJAX来实现页面的局部刷新，也就是异步刷新。

AJAX(Asynchronous JavaScript and XML)技术实现异步刷新的原理：一个浏览器中可以生成多个 异步对象（XMLHttpRequest），当用户在页面上触发某个事件只涉及到页面局部内容改变时，就可以相应地生成一个异步对象，每一个异步对象都可以独立的向服务器发出页面请求，然后服务器将结果通过JS写入到当前页面，实现局部刷新。

JS在ajax中负责创建异步对象，发送HttpRequest；xml是ajax中的数据传输的格式，现在已经被JSON替代。

【JavaScript中使用ajax】

  1. 通过JS创建异步对象

    1
    var xmlHttp = new XMLHttpRequest();

  2. 给异步对象绑定事件（当异步对象的状态发生改变时，就会触发onreadystatechange事件）

    异步对象的【状态】（readyState）有5种，分别用1个整数表示：

    0：创建异步对象 var xmlHttp = new XMLHttpRequest();

    1：初始化异步请求对象 xmlHttp.open(requestMethod, requestUrl, true)

    2：异步对象向服务器发出请求 xmlHttp.send()

    3：异步对象接收到服务器发来的数据，并在XMLHttpRequest内部自动开始解析

    4：异步对象将服务器发来的数据解析完毕。这时才可以开始读取数据，并用这些数据更新当前页面

    异步对象的【属性】（status），表示网络请求状况，200（HTTP状态码）代表请求成功

    1
    2
    3
    xmlHttp.onreadystatechange = function(){
    	if(xmlHttp.readState == 4 && xmlHttp.status == 200) //如果异步对象xmlHttp已经获取到服务器的响应数据，且解析完毕，并且响应数据中状态码表示此次请求数据成功。现在用这些数据来更新当前页面了。
    }

  3. 初始化异步请求对象

    xmlHttp.open(请求方式get|post, url, true异步(默认)|false同步)

    比如xmlHttp.open("post", "loginServlet?name=tom&pwd=123", true);

    异步相当于不需要等当前请求执行完毕（接收到服务器结果），就可以再次向服务器发送本请求。

    同步则要求当前请求完毕接收到服务器的响应数据后才能再次向服务器发送本请求。

  4. 使用异步对象向服务器发送请求

    xmlHttp.send();

  5. 异步对象接收服务器的响应数据（在第二步的基础上）

    1
    2
    3
    4
    5
    6
    xmlHttp.onreadystatechange = function(){
    	if(xmlHttp.readState == 4 && xmlHttp.status == 200) {
        	var data = xmlHttp.responseText; //请求成功并拿到数据后，异步对象的responseText中保存了服务器的响应数据
            document.getElementById("name").value = data; //将数据更新到当前页面
        }
    }

超过3步一般就要封装，上述步骤在jQuery中将被简化。

然后后端处理前端发来的请求，将请求结果以JSON字符串的格式响应给前端即可。

6.2 jQuery中使用ajax函数

$.ajax() 的参数类似于json，是以键值对的形式传入的。

参数列表如下：

参数 作用
async 为true（默认）表示异步处理
contentType 发送给服务器的数据类型，例如application/json
data 要发送的数据
dataType 期望从服务器接收的数据类型
error() 请求失败时运行的函数
success(data) 请求成功时运行的函数，相当于老方法中的当if(xmlHttp.readState == 4 && xmlHttp.status == 200)时，执行if块里面的语句。其参数data是服务器端返回的已经被解析完毕的数据
type post/get，默认为get
url 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
        async:true,
        contentType:"application/json",
        data:{name:"tom",age:20},
        dataType:"json",
        error:function () {
            //execute codes here if failed to send ajax request or receive correct data
        },
        success:function (responseText) {
            //successfully received and parsed data would be stored in responseText
        },
        url:"www.google.com",
        type:"get"
    })

另外还有单独的$.get()和$.post()方法可以更方便的发起ajax请求。