jQuery对象与DOM对象

转换：

//将jQuery对象转为DOM对象
var $p = $('.p');

//1，[index]方法
var p = $p.get(0);

//2，get(index)方法
p = $p[0];

//将DOM对象转为jQuery对象
//$(DOM对象), $()函数
$p = $(p);

判断jQuery对象的元素是否存在于网页

``` //$("p")获取的是对象，无论元素是否存在 //根据长度判断 if ($(".p").length > 0) { //do something } //转换为DOM对象判断 if ($(".p")[0]) { //do something }

$(html)

$(html)会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

var $li = $("<li></li>");

事件冒泡

<body>
    <div>
        <p></p>
    </div>
</body>

p元素被嵌套在div元素里，假设p, div, body都绑定了click事件，点击p元素，则click事件会按照DOM树自下而上地相应click事件到最顶端。p->div->body
停止事件冒泡事件对象.stopProPagation() : 停止事件冒泡可以阻止父元素处理函数的执行，

//div,body的click处理函数不再执行
$("p").click(function (event) {
        console.log('click p ');
        event.stopPropagation();
});

事件对象的属性

1. event.type
2. event.preventDefault()
3. event.stopPropagation()
4. event.target 获取到触发事件的元素
5. event.relatedTarget对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
6. event.pageX和event.pageY获取到光标对于页面的x,y坐标
7. event.which键位序号或鼠标序号
8. event.mateKey获取‘ctrl’键

阻止默认行为

网页中的元素有自己的默认行为。
jQuery提供了preventDefault()方法来阻止元素的默认行为。
使用：在事件处理函数中，事件对象.preventDefault();

在事件处理函数中,返回值只有false,true。在事件函数中return false。是在事件对象上同时调用方法stopPrapagation()和preventDefault();

停止元素的动画

stop( [clearQueue ] [, jumpToEnd ] )

clearQueue
类型: Boolean
一个布尔值，指示是否取消以列队动画(清空未执行完的动画队列)。默认 false.
jumpToEnd
类型: Boolean
一个布尔值指示是否当前动画立即完成。默认false.

当一个元素调用.stop()，当前正在运行的动画（如果有的话）立即停止。并立即执行队列中的下一个动画.

判断元素是否处于动画状态

避免动画队列累积

if (! $(element).is(".animated")) {
        //当前没有动画执行

Ajax

Ajax的核心是XMLHttpRequest对象，发送异步请求，接受响应及执行回调都是通过他来完成的。
JavaScript实现的Ajax例子
（1）定义一个函数来异步获取信息

function Ajax() {
    ...
}

（2）获得XMLHttpRequest对象

if (window.XMLHttpRequest) {
    xmlHttpReq = new XMLHttpRequest();
} else {
    //IE5,IE6以ActiveXObject的方式引入XMLHttpRequest对象
    xmlHttpReq = new ActiveXObject('Microsoft.XMLHTTP');
}

(3)实例化成功后使用open()方法初始化XMLHttpRequest对象

    //第三个参数async默认true
    xmlHttpReq.open("GET", "/api/categories", true);

(4)设置onreadystatechange的回调函数，当XMLHttpRequest对象的readyState值改变时，就会触发 onreadystatechange 事件。

xmlHttpReq.onreadystatechange = function () {
        if (xmlHttpReq.readyState === 4) { // 成功完成

            // 判断响应结果:
            if (xmlHttpReq.status === 200) {

                // 成功，通过responseText拿到响应的文本:
                return success(xmlHttpReq.responseText);
            } else {

                // 失败，根据响应码判断失败原因:
                return fail(xmlHttpReq.status);
            }
        } else {
            // HTTP请求还在继续...
        }
    }

（5)使用send()方法发送请求

xmlHttpReq.send();

jQuery中的Ajax

（1）load()方法
load( url [, data ] [, callback ] )

url
类型: String
一个包含发送请求的URL字符串，"url selector"，筛选HTML文档

data
类型: PlainObject, String
向服务器发送请求的Key/value参数，例如{name:"",age:23}

callback
类型: Function()
当请求成功后执行的回调函数。
complete(responseText, textStatus, XMLHttpRequest)

描述: 从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中，通常用来从服务器获得静态数据文件

根据data参数指定消息传递方式

没有data参数提供，默认使用 GET 方式 ，
如果data参数提供一个对象，那么使用 POST 方式。

回调参数

只要请求完成后(complete)后，回调函数(callback)就被触发。
有3个参数，complete(responseText, textStatus, XMLHttpRequest) 
    responseText，响应内容
    textStatus，请求状态:success, error, notmodified, timeout
    XMLHttpRequest，XMLHttpRequest对象

(2）$.get()和$.post()
$.get()和$.post()是jQuery中的全局函数
$.get()
$..get( url [, data ] [, callback ] [, dataType ] )

url
类型: String
一个包含发送请求的URL字符串

data
类型: Object
发送给服务器的字符串或Key/value键值对。

callback
类型: Function()
当请求成功后(当Response的返回状态为success)执行的回调函数。
success(data, textStatus, jqXHR)

dataType
类型: String
从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）。

$post
结构和使用方式和$.get相同

$.getScript()和$.getJson()
1.$.getScript()
直接加载js文件
getScript( url [, success(script, textStatus, jqXHR) ] )

url
类型: String
一个包含发送请求的URL字符串。
success(script, textStatus, jqXHR)
类型: Function()
当请求成功后执行的回调函数。

2.$.getJSON
用于加载JSON文件，与$.getScript()方法的用法相同

$.ajax
$.ajax是jQuery最底层的Ajax实现
$.load(),$.get(),$.post(),$.getScript(),$.getJSON()都是基于$.ajax()方法构建的。

.ajax( url [, settings ] )

url
类型: String
一个用来包含发送请求的URL字符串。
settings
类型: PlainObject
一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。

settings:
    data
    dataType
    beforeSend
    complete
    success
    error
    global
    更多
    https://www.jquery123.com/jQuery.ajax/

序列化元素

1.serialze()
作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax请求
1.serialzeArray()
作用于一个jQuery对象，它能够将DOM元素内容序列化后，返回JSON格式数据
3.$.param()
serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化