美文网首页
jquery链式调用 jquery动画 尺寸相关、滚动事件

jquery链式调用 jquery动画 尺寸相关、滚动事件

作者: 上心心上 | 来源:发表于2018-12-06 15:53 被阅读0次

    链式调用

    jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

    $('#div1') // id为div1的元素
    .children('ul') //该元素下面的ul子元素
    .slideDown('fast') //高度从零变到实际高度来显示ul元素
    .parent() //跳到ul的父元素,也就是id为div1的元素
    .siblings() //跳到div1元素平级的所有兄弟元素
    .children('ul') //这些兄弟元素中的ul子元素
    .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素

    动画

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

    $('#div1').animate({
    width:300,
    height:300
    },1000,swing,function(){
    alert('done!');
    });

    参数可以写成数字表达式:

    $('#div1').animate({
    width:'+=100',
    height:300
    },1000,swing,function(){
    alert('done!');
    });

    尺寸相关、滚动事件

    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、获取元素相对页面的绝对位置

    offse()

    3、获取可视区高度

    $(window).height();

    4、获取页面高度

    $(document).height();

    5、获取页面滚动距离

    (document).scrollTop();(document).scrollLeft();

    6、页面滚动事件

    $(window).scroll(function(){
    ......
    })

    相关文章

      网友评论

          本文标题:jquery链式调用 jquery动画 尺寸相关、滚动事件

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