简介
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示： 除此之外，Jquery还提供了大量的插件。
配置
本地配置
1.下载jquery文件 www.jquery.com
2.<script type="text/javascript" src="jquery.js"></script>
远程方式
<script src="http://www.wzwyuxi.cn/js/jquery.js"></script>
检测配置是否安装成功
alert($) $是jquery对象的简写
alert(jQuery)
查找元素
通过id查找元素
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
格式：$('#id')
1 $(document).ready(function(){ 2 $("button").click(function(){ 3 $("#test").hide(); 4 }); 5 });
通过标签名或者元素
jQuery 元素选择器基于元素名选取元素。
格式：$('div')
1 $(document).ready(function(){ 2 $("button").click(function(){ 3 $("p").hide(); 4 }); 5 });
通过class属性获取
jQuery 类选择器可以通过指定的 class 查找元素。
格式：$('.class')
1 $(document).ready(function(){ 2 $("button").click(function(){ 3 $(".test").hide(); 4 }); 5 });
逗号并列获取
$('#id,.class')
空格层级获取
$('#id .class')
过滤获取
获取第一个元素
$('li:first')
获取最后一个元素
$('li:last')
获取指定索引的元素
$('li:eq(5)') $('li').eq(5)
获取包含指定文本的元素
$('li:contains("国")')
通过属性查找元素
$('input[name=username]') 通过单个属性名和属性值查找
$('input[type=text][name=phone]') 通过多个属性名和属性值查找
父子节点获取
获取所有的子元素
$('ul').children()
获取第一个子元素
$('ul li:first-child')
获取最后一个子元素
$('ul li:last-child')
获取指定顺序第几个元素
$('ul li:nth-child(1)')
获取下一个元素
$('#id').next()
获取上一个元素
$('#id').prev()
获取父级元素
$('#id').parent()
获取先辈元素
$('#id').parents('tr')
获取同辈元素
$('#id').siblings()
在父级元素中查找元素
$('ul').find('.class')
元素的操作
属性操作
attr()：
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
语法
返回属性的值： $(selector).attr(attribute) 设置属性和值： $(selector).attr(attribute,value) 使用函数设置属性和值： $(selector).attr(attribute,function(index,currentvalue)) 设置多个属性和值： $(selector).attr({attribute:value, attribute:value,...})
1 $("button").click(function(){ 2 $("img").attr("width","500"); 3 });
removeAttr()：removeAttr() 方法从被选元素移除一个或多个属性。
语法
$(selector).removeAttr(attribute)
1 $("button").click(function(){ 2 $("p").removeAttr("style"); 3 });
样式操作
css()
addClass()：
addClass() 方法向被选元素添加一个或多个类名。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
语法
$(selector).addClass(classname,function(index,oldclass))
1 $("button").click(function(){ 2 $("p:first").addClass("intro"); 3 });
removeClass()：
removeClass() 方法从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
语法
$(selector).removeClass(classname,function(index,currentclass))
从所有的 <p> 元素移除 "intro" 类：
$("button").click(function(){
$("p").removeClass("intro");
});
文本操作
text()：
text() 方法设置或返回被选元素的文本内容。
当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如需设置或返回被选元素的 innerHTML（文本 + HTML 标记）请使用 html() 方法
语法
返回文本内容：
设置文本内容：
使用函数设置文本内容：
设置所有 <p> 元素的文本内容：
$("button").click(function(){ $("p").text("Hello world!"); });
html()：
html() 方法设置或返回被选元素的内容（innerHTML）。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。
语法
返回内容： $(selector).html() 设置内容： $(selector).html(content) 使用函数设置内容： $(selector).html(function(index,currentcontent))
改变所有 <p> 元素的内容：
$("button").click(function(){
$("p").html("Hello <b>world</b>!");
});
form表单控件值操作
获取 $(element).val()
设置 $(element).val('iloveyou')
val() 方法返回或设置被选元素的 value 属性。
当用于返回值时：
该方法返回第一个匹配元素的 value 属性的值。
当用于设置值时：
该方法设置所有匹配元素的 value 属性的值。
注意：val() 方法通常与 HTML 表单元素一起使用。
语法
返回 value 属性： $(selector).val() 设置 value 属性： $(selector).val(value) 通过函数设置 value 属性： $(selector).val(function(index,currentvalue))
其他
获取相对于文档的偏移量
offset()：
offset() 方法设置或返回被选元素相对于文档的偏移坐标。
当用于返回偏移时：
该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
当用于设置偏移时：
该方法设置所有匹配元素的偏移坐标。
语法
返回偏移坐标： $(selector).offset() 设置偏移坐标： $(selector).offset({top:value,left:value}) 使用函数设置偏移坐标： $(selector).offset(function(index,currentoffset))
返回 <p> 元素的偏移坐标：
$("button").click(function(){
var x=$("p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});
获取元素相对于父级的偏移量
position():
position() 方法返回第一个匹配元素的位置（相对于它的父元素）。
该方法返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
语法
$(selector).position()
返回 <p> 元素的 top 和 left 位置：
$("button").click(function(){
x=$("p").position();
alert("Top: " + x.top + " Left: " + x.left);
});
宽度和高度
width
获取可视区域的宽度
$(window).width()
获取整个文当的宽度
$(document).width()
获取元素本身的宽度
$('#id').width()
width() 方法设置或返回被选元素的宽度。
当该方法用于返回宽度时， 则返回第一个匹配元素的宽度。
当该方法用于设置宽度时，则设置所有匹配元素的宽度。
该方法不包含 padding、border 或 margin。
语法
返回宽度： $(selector).width() 设置宽度： $(selector).width(value) 使用函数设置宽度： $(selector).width(function(index,currentwidth))
返回 <div> 元素的宽度：
$("button").click(function(){
alert($("div").width());
});
height
获取可视区域的高度
$(window).height()
获取整个文档的高度
$(document).height()
获取元素本身的高度
$('#id').height()
height() 方法设置或返回被选元素的高度。
当该方法用于返回高度时， 则返回第一个匹配元素的高度。
当该方法用于设置高度时，则设置所有匹配元素的高度。
如下面的图像所示，该方法不包含 padding、border 或 margin。
返回高度： $(selector).height() 设置高度： $(selector).height(value) 使用函数设置高度： $(selector).height(function(index,currentheight))
返回 <div> 元素的高度：
$("button").click(function(){
alert($("div").height());
});
返回相应元素的索引值
index()
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注意：如果未找到元素，index() 将返回 -1。
$(selector).index()
$(selector).index(element)
获得被点击的 <li> 元素相对于它的同级元素的 index：
$("li").click(function(){
alert($(this).index());
});
创建元素节点
$('<div></div>')
$('<div class='cur'><span>hello world</span></div>')
jquery 动态创建 DIV 方法一： var creatediv= function(){ var parentdiv=$('<div></div>'); //创建一个父div parentdiv.attr('id','parent'); //给父div设置id parentdiv.addclass('parentdiv'); //添加css样式 var childdiv=$('<div></div>'); //创建一个子div childdiv.attr('id','child'); //给子div设置id childdiv.addclass('childdiv'); //添加css样式 childdiv.appendto(parentdiv); //将子div添加到父div中 parentdiv.appendto('body'); //将父div添加到body中 } 方法二： var boarddiv = "<div style='background:white;width:100%;height:100%;z-index:999;position:absolute;top:0;margin-top:100px;'>加载中...</div>"; $(window).load(function(){ //window.alert("ok"); $(document.body).append(boarddiv); });
插入节点
添加新的 HTML 内容
内部尾部添加
$(parent).append(newNode)： jQuery append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。
newNode.appendTo(parent)
$("p").append("追加文本");
内部头部添加 $(parent).prepend(newNode) newNode.prependTo(parent)：jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("在开头追加文本");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
function appendText() { var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }
元素外部之后添加$(element).after(newNode) newNode.insertAfter(element)
元素外部之前添加$(element).before(newNode) newNode.insertBefore(element)
Query after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
function afterText() { var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 }
删除节点
$(element).remove() 删除当前节点
$(element).empty() 清空节点
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
$("#div1").remove(); - empty() - 从被选元素中删除子元素
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");
替换节点
$(element).replaceWith(newNode) replaceWith() 方法把被选元素替换为新的内容
语法
$(selector).replaceWith(content,function(index))
把第一个 <p> 元素替换为新的文本：
$("button").click(function(){
$("p:first").replaceWith("Hello world!");
});
克隆节点
$(element).clone(true) clone() 方法生成被选元素的副本，包含子节点、文本和属性。
语法
$(selector).clone(true|false)
克隆所有的 <p> 元素，并插入到 <body> 元素的结尾：
$("button").click(function(){
$("p").clone().appendTo("body");
});
包裹元素
$(element).wrap('<div></div>') 当前的元素被其他的元素包裹 wrap() 方法使用指定的 HTML 元素来包裹每个被选元素。
语法：
$(selector).wrap(wrappingElement,function(index))
在 <div> 元素中包裹每个 <p> 元素：
$("button").click(function(){
$("p").wrap("<div></div>");
});
$(element).unwrap() 解除包裹 unwrap() 方法移除被选元素的父元素。
语法
$(selector).unwrap()
移除所有 <p> 元素的父元素：
$("button").click(function(){
$("p").unwrap();
});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
$("p").click(function(){
$(this).hide();
});
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
方法绑定
$(element).bind('click',function(){}) bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。
语法
$(selector).bind(event,data,function,map)
向 <p> 元素添加一个单击事件：
$("p").bind("click",function(){
alert("这个段落被点击了。");
});
$(element).unbind() unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
该方法也可以通过 event 对象取消绑定的事件处理程序。该方法也用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。
注意：如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。
注意：unbind() 方法适用于任意由 jQuery 添加的事件处理程序。
自 jQuery 版本 1.7 起，on() 和 off() 方法是在元素上添加和移除事件处理程序的首选方法。
语法
$(selector).unbind(event,function,eventObj)
移除所有 <p> 元素的事件处理程序：
$("button").click(function(){
$("p").unbind();
});
事件触发
$(element).trigger('click')
trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。
该方法与 triggerHandler() 方法类似，不同的是 triggerHandler() 不触发事件的默认行为。
与 triggerHandler() 方法相比的不同之处:
- 它不会引起事件（比如表单提交）的默认行为
- .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
- 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
触发 <input> 元素的 select 事件：
$("button").click(function(){
$("input").trigger("select");
});
阻止事件冒泡和默认行为
return false
获取当前鼠标坐标的位置
$(element).click(function(e){
var cx = e.clientX
var cy = e.clientY
var px = e.pageX
var py = e.pageY
})
ajax
$.get('1.php',{a=100&b=200},function(data){})
$.post('1.php',{num=10$id=10},function(data){})
$.ajax({ url: '1.php', url请求的脚本 data: 'id=100&page=10', data发送的数据 dataType: 'json', dataType数据的类型 type: 'GET', type请求的类型 get或post success: function(data){}, success成功的执行代码 error: function(){}, error失败的执行代码 timeout:3000, timeout 超时时间 async: false async是否异步 })
JQuery中$.ajax()方法参数详解
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和
delete也可以使用，但仅部分浏览器支持。
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设
置。
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等
待请求完成才可以执行。
cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。
设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格
式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格
式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同
值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime
信息返回responseXML或responseText，并作为回调函数参数传递。
可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求
时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个
“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义
HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参
数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。
参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错
误信息、捕获的错误对象(可选)。
ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认
为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。
提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的
dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局
ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。
服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。
该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如
{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。
processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度
来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM
树信息或者其他不希望转换的信息，请设置为false。
scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时
才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
jQuery效果
隐藏和显示
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
语法:
$( selector).show( speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
$("button").click(function(){
$("p").hide(1000);
});
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
$("p").toggle();
});
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
jQuery slideDown() 方法用于向下滑动元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
$("#flip").click(function(){
$("#panel").slideUp();
});
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：
$("#flip").click(function(){
$("#panel").slideToggle();
});
淡入淡出
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法用于淡出可见元素。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Query fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：
$("button").click(function(){
$("div").animate({left:'250px'});
});
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
$("#stop").click(function(){
$("#panel").stop();
});
delay() 方法
定义和用法
delay() 方法对队列中的下一项的执行设置延迟。
语法
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
75
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
