直接隐藏/显示效果
hide()方法
如果想让一个页面中的元素不可见，可以修改css中display的值为none，但这样的修改只是改变了静态布局。
如果想在代码执行时有这样的效果，一般是用JS控制元素的style属性，jQuery中提供hide()方法来实现这样的效果。
$("element").hide(options)其中这个option参数，可以有也可以没有，但有的时候，这个方法会成为一个动画方法。.hide()方法会匹配元素的宽度、高度，以及不透明度，同时进行动画操作
有一种快捷参数：
.hide("fast/slow")这是一个动画设置的快捷方法,"fast"和"slow"分别代表200和600毫秒的延时，也就是元素会在200或者600毫秒之后隐藏。
注意：
jQuery在做hide()操作的时候，是会保存本身的元素的原始属性值，再之后通过对应的方法还原的时候还是初始值。
比如一个元素的display属性值为inline，那么隐藏再显示时，这个元素将再次显示inline。
所谓的隐藏就是一旦透明度达到0，display样式属性将被设置为none，这个元素将不再在页面中影响布局
<div id="demo1"></div>
<input class="btn1" type="button" value="直接隐藏">
<div id="demo2"></div>
<input class="btn2" type="button" value="动画隐藏">
<script>
$(".btn1").click(function(){
$("#demo1").hide();
});
$(".btn2").click(function(){
$("#demo2").hide(3000,function(){
alert("经历了3000毫秒终于隐藏了!")
});
})
</script>隐藏了元素也就需要把它在显示出来嘛
show()方法
这个方法和hide()用法一样的,
但有几点是需要注意的:
- show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
- 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式
- 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度
<div style="width: 200px;height: 50px;background: #aaa;"></div>
<input type="button" value="点击动画">
<script>
$("input").click(function(){
$("div").hide(3000).show(2500);
})
</script>hide()和show()方法是互斥的,对元素隐藏显示状态的切换操作时,通常应先对该元素的display值进行判断.如此一来就较为麻烦了.
toggle()方法
jQuery提供的toggle()方法可以便捷用于切换显示或隐藏匹配的元素
直接调用toggle()方法不带任何参数
这是最基本的操作,没有动画.通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，所以没有动画。
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline
提供参数:toggle([duration],[complete])
同样的提供了时间、动画结束的回调函数。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide结合起来的方法
<div style="width: 200px;height: 50px;background: #aaa;"></div>
<input type="button" value="点击动画">
<script>
$("input").click(function(){
$("div").toggle(2000);
})
</script>以上的代码例子实现的效果和hide()&show()一起使用得到的效果一样
元素显示时用的show()方法,只会匹配元素的宽度,高度,不透明度,这样改变的动画效果太单调了.
下拉上卷效果
slideDown()方法
slideDown()方法是一个新的显示方法.用滑过动画显示一个匹配元素
.slideDown([duration],[complete])持续时间（duration）是以毫秒为单位的，数值越大动画越慢。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。
需要注意的是:
- 下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none
- 如果提供回调函数参数，callback函数会在动画完成的时候调用。
- 将不同的动画串联在一起按顺序排列执行是非常有用的。
- 这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组动画整体才执行一次
<div style="width: 200px;height: 50px;background: #aaa;display: none;"></div>
<input type="button" value="点击动画">
<script>
$("input").click(function(){
$("div").slideDown(2000);
})
</script>同样隐藏动画的方法也太单调了
slideUp()方法
.slideUp( [duration ] ,[ easing ] ,[ complete ] )需要注意的是：因为动画是异步的，所以要在动画之后执行某些操作就必须要写到回调函数里面.
<div style="width: 200px;height: 50px;background: #aaa;"></div>
<input type="button" value="点击动画">
<script>
$("input").click(function(){
$("div").slideUp(2000);
})
</script>相同于hide()和show()方法，slideDown与slideUp也是一对互斥的方法，所以呢，也相同于toggle()方法，有一个slideToggle()方法用滑动动画显示或隐藏一个匹配元素
slideToggle()方法
.slideToggle( [duration ] ,[ complete ] )同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会完成动画，然后出发回调函数
- slideToggle("fast") //200毫秒
- slideToggle("slow") //600毫秒
注意：
- display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值
- 当一个隐藏动画后，高度值达到0时，display 样式属性被设置为none，以确保该元素不再影响页面布局
以上呢,对一个元素隐藏都是将其display值设为none,但别忘了之前还有一个办法就是设置透明度为0,以下呢,就是一些涉及到透明度改变的方法
淡入淡出效果
fadeOut()方法
fadeOut()方法用于隐藏所有匹配的元素，并带有淡出的过渡动画效果。透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。
.fadeOut([duration],[complete])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
<p>天王盖地虎</p>
<p>宝塔镇河妖</p>
<span>淡出的隐藏效果：</span>
<select id="animation">
<option value="1">fadeOut( )</option>
<option value="2">fadeOut("slow")</option>
<option value="3">fadeOut(3000)</option>
<option value="4">fadeOut(1000,complete)</option>
<option value="5">fadeOut(1000,"linear")</option>
<option value="6">fadeOut(options)</option>
</select>
<br/>
<input id="btnShow" type="button" value="显示" />
<input id="btnFadeOut" type="button" value="点击淡出隐藏" />
<script>
//【显示】按钮
$("#btnShow").click(function() {
$("p").show();
});
//【隐藏】按钮
$("#btnFadeOut").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeOut();
} else if (v == "2") {
$("p").fadeOut("slow");
} else if (v == "3") {
$("p").fadeOut(3000);
} else if (v == "4") {
$("p").fadeOut(2000, function() {
alert("经历了2000毫秒终于隐藏了!");
});
} else if (v == "5") {
$("p").fadeOut(1000, "linear");
} else if (v == "6") {
$("p").fadeOut({duration: 1000});
}
});
</script>显而易见,还有淡入效果
fadeIn()方法
fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果。
淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%。如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见
因为有了淡出效果fadeOut()和淡入效果fadeIn(),所以和之前一样也就有了fadeToggle()方法
fadeToggle()方法
fadeToggle()函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果.
fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)。
<div style="width: 200px;height: 50px;background: gold;"></div>
<input type="button" value="切换动画">
<script>
$("input").click(function(){
$("div").fadeToggle(2000,function(){
alert("切换完毕")
})
})
</script>至此学习了fadeOut&fadeIn,总结一下:
- fadeIn：淡入效果，内容显示，opacity是0到1
- fadeOut：淡出效果，内容隐藏，opacity是1到0
由此可见,透明度都是0-1之间变化的,要么0,要么1,但如果我想要让元素保持动画,执行到opacity=0.5时的效果该怎么办?
- 原生JS,可以通过定时器,在设定的事件内一点点修改opacity的值
- jQuery,提供fadeTo()方法,改变透明度一步到位
fadeTo()方法
.fadeTo( duration, opacity ,callback)- 必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
- fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
- 可选的 callback 参数是该函数完成后所执行的函数名称。
<p>天王盖地虎</p>
<p>宝塔镇河妖</p>
<span>透明度的设置效果：</span>
<select id="animation">
<option value="1">fadeTo( "slow" ,0.5 )</option>
<option value="2">fadeTo( 1000 ,0.2 )</option>
<option value="3">fadeTo( 1000 ,0.9 ,complete)</option>
</select>
<input id="btnFadeSwitch" type="button" value="点击切换显示/隐藏">
<script>
//【切换显示/隐藏】按钮
$("#btnFadeSwitch").click(function() {
var v = $("#animation").val();
if (v == "1") {
$("p").fadeTo("slow", 0.5);
} else if (v == "2") {
$("p").fadeTo(1000, 0.2);
} else if (v == "3") {
$("p").fadeTo(1000, 0.9, function() {
alert('完成')
});
}
});
</script>上面已经有三个切换动画的效果了,分别是toggle,slideToggle,fadeToggle,那它们之间有什么区别呢?
- toggle:切换显示与隐藏效果
- slideToggle:切换上下拉卷滚效果
- fadeToggle:切换淡入淡出效果
toggle和slideToggle细节区别:
- toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
- slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性
自定义动画
之前学习的10种方法，还不足以应付复杂的动画。这时就需要animate方法了。
animate()方法
譬如,操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别:
$("element").fadeOut(3000)
$("element").animate({
opacity:0
},3000)由此可见，animate方法更灵活.
.animate(properties,[duration],[easing],[complete])
.animate(properties,options)properties
两种语法用法差不多,唯一必要的属性properties,是一组css属性键值对.所谓一组就是一个或多个css属性的键值对所构成的Object对象。其中很关键的一点是所有用于动画的属性必须是数字的,譬如margin:10px;而不能是background-color:red。而且,设置css样式要使用DOM名称,而不能使用css名称,譬如fontSize,而不能是font-size
.animate({
left:50,
width:"50px",
opacity:"show",
fontSize:"10em",
},500);上例代码中，并不是全部数字，所以每个属性也能够使用"show","hide","toggle"。这些快捷方式容许定制隐藏和显示动画来控制元素的显示或隐藏。
.animate({
left:"+=50px"
},"slow")一个+=或者-=开始的值，意思就是以这个属性的当前值加上或减去给定的数字来计算的。
duration时间
动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。
easing动画运动的算法
jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件
complete回调
动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发
那么第二种语法设置有啥用呢?
在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，这种情况下就可以使用第二个语法传递一个对象参数，可以拿到动画执行状态一些通知。
options参数:
- duration - 设置动画执行的时间
- easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
- step：规定每个动画的每一步完成之后要执行的函数
- progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
- complete：动画完成回调
其中需要注意的是：如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次
stop()方法
动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止
语法：
.stop([clearQueue],[jumpToEnd])
.stop([queue],[clearQueue],[jumpToEnd])stop还有几个可选的参数，简单来说可以这3种情况
- .stop(); 停止当前动画，点击在暂停处继续开始
- .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
- .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值
譬如:
<div></div>
<input type="button" value="按钮">
<script>
$("input").click(function(){
$("div").animate({
height:300,
},3000)
$("div").animate({
width: 300
}, 5000)
$("div").animate({
opacity: 0.6
}, 2000)
});
</script>以上动画会顺序执行,假设将其动画停止
- stop()方法只会停止第一个动画,第二个和第三个会继续
- stop(true):停止第一份,第二个和第三个动画
- stop(true,true):停止动画,直接跳到第一二动画的最终状态
each()方法
jQuery中有个很重要的核心方法each，大部分jQuery方法在内部都会调用each，其主要的原因的就是jQuery的实例是一个元素合集。如下：找到所有的div，并且都设置样式，css只是一个方法，其实内部会调用each处理这个div的合集，给每个div都设置style属性。
$('div').css(...)jQuery的大部分方法都是针元素合集的操作，所以jQuery会提供$(selector).each()来遍历jQuery对象。.each只是处理jQuery对象的方法，jQuery还提供了一个通用的jQuery.each方法，用来处理对象和数组的遍历
语法
jQuery.each(array, callback )
jQuery.each( object, callback )第一个参数传递的就是一个对象或者数组，第二个是回调函数
$.each(["arr1", "arrn"], function(index, value) {
//index是索引,也就是数组的索引
//value就是数组中的值了
});each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同)
jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。
$.each(["arr1", "arrn"], function(index, value) {
return false; //停止迭代
});jQuery方法可以很方便的遍历一个数据，不需要考虑这个数据是对象还是数组
inArray()方法
判断元素是否存在数组中,该方法用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
jQuery.inArray( value, array ,[ fromIndex ] )传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始。如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断
页面中,通过input科技获取用户的输入值,譬如常见的登录信息的提交处理.用户的输入不一定标准,信息中可能存在空白符,换行符,制表符这样明显无意义的输入值
trim()方法
用于去除字符串两端的空白字符。移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）。如果这些空白字符在字符串中间时，它们将被保留，不会被移除
get()方法
jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到。
譬如:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>通过jQuery的$("li")获取到所有的 li 元素合集，如果想进一步具体获取到第二个li元素，则可以使用get方法
.get( [index ] )- get方法是获取的dom对象，也就是通过document.getElementById获取的对象
- get方法是从0开始索引
负索引值参数
get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1。同样是找到第二元素，可以传递 $(a).get(-2)
get方法是通过已知的索引在合集中找到对应的元素。如果反过来，已知元素如何在合集中找到对应的索引呢？
index()方法
从匹配的元素中搜索给定元素的索引值，从0开始计数。
.index()
.index( selector )
.index( element )- 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
- 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
- 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1
<ul>
<span></span>
<li id="test1">1</li>
<li id="test2">2</li>
<li id="test3">3</li>
</ul>$("li").index() 没有传递参数，反正的结果是1，它的意思是返回同辈的排列循序，第一个li之前有span元素，同辈元素是span开始为0，所以 li 的开始索引是1
如果要快速找到第二个 li 在列表中的索引，可以通过如下2种方式处理：
$("li").index(document.getElementById("test2")) //结果：1
$("li").index($("#test2")) //结果:1
扫一扫
1827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
