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进行序列化