jquery6

作者: 星河入怀fd | 来源:发表于2019-06-17 08:41 被阅读0次

jquery特殊效果:

fadeIn() 淡入        fadeOut() 淡出

fadeToggle() 切换淡入淡出

hide() 隐藏元素         show() 显示元素

toggle() 依次展示或隐藏某个元素

slideDown() 向下展开    slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

例子: $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){

            alert('done!');

        });

    });

query动画:通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数

$('#div1').animate({

    width:300,

    height:300

},1000,swing,function(){

    alert('done!');

});

4.尺寸相关、滚动事件

1、获取和设置元素的尺寸 

width()、height()    获取元素width和height

innerWidth()、innerHeight()  包括padding的width和height 

outerWidth()、outerHeight()  包括padding和border的width和height 

outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置   offset()

3、获取可视区高度 $(window).height();

4、获取页面高度   $(document).height();

5、获取页面滚动距离  $(document).scrollTop()   $(document).scrollLeft();

6、页面滚动事件  $(window).scroll(function(){      ......})

循环

$(function(){

// //给全部的li设置内容和样式

// $('.list li').html('111');

// $('.list li').css({background:'gold'});

//第一个参数index是索引值

$('.list li').each(function(index) {

// alert(index);//弹出索引值

//$(this)是每一个li

$(this).html(index);

});

})

相关文章

  • jquery6

    jquery特殊效果: fadeIn() 淡入 fadeOut() 淡出 fadeToggle() 切换淡入...

网友评论

      本文标题:jquery6

      本文链接:https://www.haomeiwen.com/subject/sjrofctx.html