jQuery 的属性和方法

animate()动画方法
$("p").animate(JS对象, 动画时间, 回调函数/动画类型)

不同元素的动画效果能同时进行

  • 例如
    $("div:eq(0)").animate({"width":600},1000);
    $("div:eq(1)").animate({"height":600},1000);
eq()方法
$("p").eq(0)

获取第N个参数

index()方法
$(this).index()

搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

  • 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
  • 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
each()
$("p").each(function(i) {   })

遍历:方法规定为每个匹配元素规定运行的函数

length属性
$("p").length

输出元素对象中的数目

is() 方法
$("p").is(":animated")    当前元素是否在执行动画

判断当前jQuery对象所匹配的元素是否符合指定的表达式。只要其中有至少一个元素符合该表达式就返回true,否则返回false。
实例

get()方法
jQuery 对象 --> js元素对象\DOM对象

获得由选择器指定的 DOM 元素。

css()方法

设置样式

    $("p").css( { "width": 200} )

获取样式

    $("p").css( "width" )

css函数用来读取、设置元素的css样式。可以读取计算后的样式的。

动画相关方法
show()、hide()、toggle()方法

show()显示、hide()隐藏、toggle()切换

1   $("div").show();        //让一个本身是display:none;元素显示
2   $("div").hide();        //隐藏元素display:none;
3   $("div").toggle();      //切换显示状态。自行带有判断,如果可见,就隐藏;否则显示
slideDown()、slideUp()、slideToggle()方法

slideDown : 下滑展开
slideUp:上滑收回
slideToggle : 滑动切换

$("div").slideDown();

slideDown()的起点一定是display:none换句话说,只有display:none的元素,才能够调用slideDown()

fadeIn()、fadeOut()、fadeTo()、fadeToggle()方法

fadeIn()淡入
fadeOut()淡出
fadeTo() 淡到那个数
fadeToggle() 淡出入切换

  • fadeIn()的起点是display:none;换句话说,只有display:none的元素,才能执行fadeIn()
$("div").fadeIn(5000);
  • fadeTo有三个参数,第一个参数是动画的时间,第二个参数是要变到的透明度,第三个参数是回调函数。
 $("div").fadeTo(1000,0.3);

fadeTo的起点不一定是display:none;

stop()

停止当前的animate动画,但是不清除队列,立即执行后面的animate动画:

$("div").stop();   //等价于$(“div”).stop(false,false);

停止当前的animate动画,并且清除队列,盒子留在了此时的位置:

$("div").stop(true);   //等价于$(“div”).stop(true,false);

瞬间完成当前的animate动画,并且清除队列:

$("div").stop(true,true);

瞬间完成当前的animate动画,但是不清楚队列,立即执行后面的动画:

$("div").stop(false,true);
finish()

finish()瞬间完成所有动画队列!

$("div").finish();//相当于$("div").stop(true,true);
delay()

delay延迟,可以使用连续打点,必须放在运动语句之前。

$("div").delay(1000).animate({"left":500},1000);

$("div").delay(1000).slideUp();
    
$("div").delay(1000).hide(1);   //必须写1,写1了就是运动
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天我们来总结一下jQuery的一些属性和方法 1.animate ( ) animate(JS对象,动画时间,动...
    少寒丶阅读 2,732评论 1 1
  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
    老夫撩发少年狂阅读 4,751评论 0 2
  • (续jQuery基础(2)) 四、动画篇 第1章 动画基础隐藏和显示 (1)隐藏元素的hide方法 让页面上的元素...
    凛0_0阅读 3,247评论 0 6
  • jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。...
    阿r阿r阅读 4,878评论 0 4
  • 知乎上曾有过讨论:“独生子女不敢死不敢穷不敢远嫁,因为父母只有我。” 我是独生女,从小父母在外工作,聚少离多。环境...
    夏河马阅读 4,064评论 1 1