jQuery 是一个JavaScript函数库。支持HTML元素选取和操作、CSS操作、JS特效与动画、DOM处理、Ajax等。
导入jQuery就像导入一段外部js代码一样简单,可以使用MS或Google的CDN进行加载。
1 jQuery基础
jQuery采用了CSS选择器的语法来选择HTML元素,基础语法为$(selector).action()
示例 $(document).ready(function(){
//当文档加载完毕后执行...
});
选择器使用了CSS的各种选择器,如元素选择器、类选择器、ID选择器、属性选择器。
在选择到元素后设置CSS只需要使用css()方法即可。
jQuery专门为事件处理进行了封装,只需要调用选择器上定义的事件方法即可。示例
${"#id"}.click(function() {...})
除此以处,jQuery定义了一系列方法对浏览器进行抽象,对各种常用操作进行封装。
2 jQuery效果
2.1 隐藏与显示
hide(speed,callback) 隐藏一个元素,speed为slow,fast或毫秒
show(speed,callback) 显示一个元素
toggle(speed,callack) 让元素在隐藏与显示之间切换
2.2 淡入淡出
fadeIn(speed,callback) 设置隐藏元素淡入
fadeOut(speed,callback) 设置显示元素淡出
fadeToggle(speed,callback) 设置元素自动切换淡入淡出
fadeTo(speed,opacity,callback) 设置元素渐变为给定的不透明度,值在0-1间
2.3 滑入滑出
slideDown()
slideUp()
slideToggle()
2.4 动画
animate({params},speed,callback) 设置动画,参数设置形成动画的CSS属性,其中可以设置多个属性。
jQuery提供针对动画的队列功能,对于编写的多个animate调用,jQuery会创建包含这些方法调用的内容队列,然后逐一执行。
示例1: div.animate({left:'100px'},"slow");
示例2:
$("button").click(function(){
$("div").animate({
height:'+=150px',
width:'+=150px'
});
});
stop(all,toEnd) 用于停止相应的变化。all表示清除动画队列,默认为FALSE,toEnd规定是否完成当前动画,默认为False。
2.5 杂项
如果想在变化完成后执行操作,则应该定义callback函数,而不能在执行动作之后,接着执行那个操作,这种情况下,有可能会先执行变化后的动作,而不是先执行变化。
如果对一个元素要执行多个操作,jQuery支持链式语法,可以节约每都查找元素的开销。示例:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
3 jQuery操作HTML
3.1 获取与设置元素相关文本与属性
text() 获取或设置选择元素的文本,会将其中的html标签删除,当无参数时为获取,有参数时为设置
html() 获取或设置选择元素的文本,可以包含html标签
val() 获取或设置表单字段的值
attr(key) 获取指定属性的值。可以一次设置多个值。放到一个json对象中即可。
上面4个函数,也可以传递一个函数来进行新值的设定,回调函数有两个参数,选定元素在当前选择集合中的索引下标,以及旧值。新值通过函数返回值返回。示例:
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
3.2 添加
append(str) 在被选中元素结尾插入内容,块内插入。
after(str) 在被选中元素后插入内容,块外插入。
prepend(str) 在被选中元素头前插入内容,块内插入。
before(str) 在被选中元素前插入内容,块外插入。
示例:$("p").append("Some appended text.");
3.3 删除
remove() 删除被选元素及子元素,允许接收一个选择器,进行过滤删除
empty() 删除被选元素的子元素
示例:$("div").remove(".italic");
3.4 操作类
addClass() 向选中元素添加类,可多个
removeClass() 从选中元素删除类,可多个
toggleClass() 对被中元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
3.5 css()方法
css(key) 获取选择元素的指定css属性
css(key,value) 设置选择元素指定的css属性,可多个
$("p").css({"background-color":"yellow","font-size":"200%"});
3.6 尺寸
width() 设置或返回元素的宽度,不包括内边距、边框和外边距
height()
innerHeight() 返回元素的宽度,包含内边距
innerWidth()
outerWidth() 返回元素的宽度,包含内边距和边框
outerHeight()
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)
4 jQuery遍历DOM
最常用的遍历是利用DOM的树形结构来进行。
parent() 返回元素的直接父元素
parents() 返回元素的所有父辈元素,参数可以指定元素的标签名以过滤
parentsUntil(tag) 返回元素的父辈元素,同时是tag的后辈的元素
示例:
$(document).ready(function(){
$("span").parents("ul");
});
children() 返回元素的所有后代元素,参数也可以指定过滤器
find(tag) 查找元素的所有后代元素,参数也可以指定过滤器
示例:
$(document).ready(function(){
$("div").children("p.1");
});
siblings() 返回元素的所有兄弟元素,参数可使用过滤器
next() 返回元素的下一个兄弟元素
nextAll() 返回元素的所有后续兄弟元素
nextUntil()
prev()
prevAll()
prevUntil()
first() 返回选中元素集中第1个
last() 返回选中元素集中第-1个
eq(n) 返回选中元素中索引位置为n的元素
filter() 对选中元素进行过滤,返回匹配的元素
$(document).ready(function(){
$("p").filter(".intro");
});
not() filter的反义方法,返回不匹配的元素
5 jQuery for Ajax
5.1 基本ajax
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
准备状态有5个值,分别为 0:请求未初始化,1:服务器已经连接 2:请求已接收 3:请求处理中 4:请求已经完成响应就绪
5.2 使用jQuery的Ajax
load(url,data,callback) 用于异步加载数据,可设置回调函数,callback(resp,status,xhr)
$.get(url,callback) 用于异步发送get请求,回调函数:callback(data,status)
$.post(url,data,callback) 用于异步发送post请求,回调函数:callback(data,status)
示例:
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
6 杂项
$变量表示jQuery对象,如果遇到命名冲突,noConflict()方法用于释放对$符号的占用。
但依然可以使用jQuery全名来使用jQuery库,同时可以创建自己的简写。如var jq = $.noConflict();