温故而知新---jquery（jq）进阶篇

1：操作DOM

创建 var $div = $(‘html标签’)

内部插入操作：
append(content|fn)：向每个匹配的元素内部追加内容。
prepend(content)：向每个匹配的元素内部前置内容。
外部插入操作：
after(content|fn)：在每个匹配的元素之后插入内容。
before(content|fn)：在每个匹配的元素之前插入内容。
包裹操作：
wrap(html|element|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap()：这个方法将移出元素的父元素。
替换操作：
replaceWith(content|fn)：将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素。
删除操作：
empty()：删除匹配的元素集合中所有的子节点。
remove([expr])：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach([expr])：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
复制操作：
clone(Even])：克隆匹配的DOM元素并且选中这些克隆的副本。
even：一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

2：事件

页面载入事件：
ready(fn)：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。
绑定事件：
on(events,[selector],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数。
off(events,[selector],[fn])：在选择元素上移除一个或多个事件的事件处理函数。
bind(type,[data],fn)：为每个匹配元素的特定事件绑定事件处理函数。
unbind(type,[data|fn]])：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。
one(type,[data],fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
hover([over,]out)：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
click([[data],fn])：触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
注：其他事件方法使用方式一样。例如：mouseover、mouseout、dblclick、change、blur、focus、keydown、keyup、keypress、mousedown、mouseup、mousemove、mouseenter、mouseleave、resize、scroll、select、submit、unload等。

3：ajax

jQuery.ajax(url, [settings])：通过HTTP请求加载远程数据，返回其创建的XHR对象。
url：请求地址，settings也有url配置选项，如果同时设置，则以外面的url为基准。如果都不设置，则默认请求的是当前发起请求的页面。
Settings:
async：Boolean类型。默认为true（异步）。
contentType：string类型。默认为application/x-www-form-urlencoded，发送信息至服务器时内容编码类型。
timeout：设置请求超时时间（毫秒）。
type：请求方式（GET或POST），默认为GET。
url：默认当前页地址，发送请求的地址。
data：object/string类型。发送到服务器的数据。

回调函数：
beforeSend：在发送请求之前调用，并且传入XHR作为参数。
error：在请求出错时调用。传入XHR对象，描述错误类型的字符串，以及异常对象（如果存在的话）。
success：当请求成功之后调用，传入返回后的数据，以及包含成功代码的字符串。
complete：当请求完成后调用这个函数，无论成功或失败。传入XHR对象，以及包含成功或错误代码的字符串。
beforeSend：function(xhr, ajax){}
success：function(data, sInfo, xhr){}
complete：function(xhr, sInfo){}
error：function(xhr, sInfo[, exception]){}
成功执行顺序：beforeSend、dataFilter、success、complete
失败执行顺序：beforeSend、error、complete
示例：
Get 请求

var url = 'https://api.readhub.me/topic?lastCursor=7544&pageSize=10'$.ajax({url:url,type:'get',success:function (res) {console.log(obj)},error:function (error) {console.log(error);}})

Get请求

 var data = {lastCursor:7544,pageSize:10}var url = 'https://api.readhub.me/topic'$.ajax({url:url,type:'get',data:data ,//设置参数success:function (res) {console.log(obj)},error:function (error) {console.log(error);}});;

Post 请求

 var data = {lastCursor:7544,pageSize:10}var url = 'https://api.readhub.me/topic'$.ajax({url:url,type:'post',data:data ,//设置参数success:function (res) {//console.log(res);console.log(obj)},error:function (error) {console.log(error);}});

Jsonp请求

           var url1 = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=n'//jsonp 接口 必须 两个字段  dataType:'jsonp'， jsonp:cb（回调函数字段）
//jq会自动生成回调函数   //&cb=jQuery1102045621865612995216_1498111113677$.ajax({url:url1,dataType:'jsonp',jsonp:'cb',success:function (res) {console.log(res)},error:function (error) {console.log(error)}})

快捷请求函数
.get(url,[data],[callback],[type])：通过HTTPGET请求获取数据。这是一个简单的GET请求取代复杂的.get(url, [data], [callback], [type])：通过HTTP GET请求获取数据。这是一个简单的GET请求取代复杂的.get(url,[data],[callback],[type])：通过HTTPGET请求获取数据。这是一个简单的GET请求取代复杂的.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，则使用$.ajax。
type值：_default。HTML或者XML取决于返回值。
.post(url,[data],[callback],[type])：通过HTTPPOST请求获取数据。这是一个简单的POST请求取代复杂的.post(url, [data], [callback], [type])：通过HTTP POST请求获取数据。这是一个简单的POST请求取代复杂的.post(url,[data],[callback],[type])：通过HTTPPOST请求获取数据。这是一个简单的POST请求取代复杂的.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，则使用$.ajax。
type值：_default。HTML或者XML取决于返回值。
$.getJSON(url, [data], [callback])：通过HTTP GET请求获取JSON数据。可以通过使用JSONP形式的回调函数来加载其他网站的数据。如：”myulr?cb=?”，jQuery会自动替换 ? 为正确的函数名，以执行回调函数。
$.getScript(url, [callback])：通过HTTP GET请求载入并执行一个JS文件。

$.grtJson(url)$.get(url,data,function (res) {var obj = JSON.parse(res);console.log(obj);})

$.post(url,data,function (res) {var obj = JSON.parse(res);console.log(obj);})

var data = {lastCursor:7544,pageSize:10}var url = 'https://api.readhub.me/topic'$.getJSON(url,data,function (res) {console.log(res);})

//jsonp 请求，注意cb=？，？号，jq会自动生成回调函数

        $.getJSON('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=n&cb=?',function (res) {console.log(res,'jsonp');})

load(url, [data], [callback])：载入服务器HTML文件代码并插入至DOM中

$('.h1').load('header.html',function () {console.log('数据请求成功')})

4：核心

$(“.box”).each()

对象访问：
each(callback)：以每一个匹配的元素作为上下文来执行一个函数。回调函数有两个参数，第一个参数代表索引，第二个参数代表当前遍历到的DOM对象。return true则跳至下一个循环(就像在普通循环中使用continue)，return false则终止循环（就像在普通循环中使用break）。
size()： jQuery 对象中元素的个数。
get([index])：取得其中一个匹配的元素。 index表示取得第几个匹配的元素。与$(this)[0]等价。
index([selector|element])：搜索匹配的元素，并返回相应元素的索引值，从0开始计数。如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。如果不传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

数据缓存：
data([key],[value]) ：在元素上存放数据,返回jQuery对象。
removeData([name|list])：在元素上移除存放的数据。

多库共存：
jQuery.noConflict()：运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
jQuery(“.box”)

5：工具函数

$.each()

jQuery.each(object, [callback])：通用例遍方法，可用于例遍对象和数组。此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。
jQuery.grep(array, callback, [invert])：使用过滤函数过滤数组元素。此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。如果 “invert” 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。
jQuery.map(arr|obj,callback)：将一个数组中的元素转换到另一个数组中。
jQuery.inArray(value,array,[fromIndex])：确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
jQuery.toArray()：把jQuery集合中所有DOM元素恢复成一个数组。
jQuery.merge(first,second)：合并两个数组。
jQuery.unique(array)：删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。
jQuery.parseJSON(json)：接受一个JSON字符串，返回解析后的对象。传入一个畸形的JSON字符串会抛出一个异常。
jQuery.trim(str)：去掉字符串起始和结尾的空格。
jQuery.contains(container,contained)：一个DOM节点是否包含另一个DOM节点。
jQuery.type(obj)：检测obj的数据类型。
jQuery.isArray(obj)：测试对象是否为数组。
jQuery.isFunction(obj)：测试对象是否为函数。