8.jQuery中各种宽和高以及setoff,scroll

1. jQuery中的各种宽高

• width()和height() 就是获取纯粹的宽和高
  设置的就是纯粹的宽和高

• innerWidth() 和 innerHeight() 获取带padding的宽和高
  设置多少，最终得到的是减掉padding的宽和高

• outWidth() 和 outerHeight() 获取带padding和边框的宽和高
  设置多少，最终得到是减掉padding和边框的宽和高
  以上获取的都是不带单位的宽度和高度
  2.offset()和padding()

• offset()： 获取的是盒子到document的left和top距离
  得到的是一个对象，对象里有left和top两个属性
  也是设置到document的距离
  设置的时候，传入一个对象，对象里2个属性一个left一个top

1. position():
   简单来说就是获取自身的left和top值
   得到的也是一个对象，对象里有left和top
   以上获取的都是不带单位的数字

   console.log($('.box').offset());

        $('.box').offset({
            left:200,
            top:40
        });


        // console.log( $('.box').position() );

        // 只能获取，不能设置
        // $('.box').position({
        //     left:30000,
        //     top:40
        // })

        // 带单位的字符串
        console.log( $('.box').css('left') );
        
        

3. scrollLeft()和scrollTop()
JS原生：
scrollLeft和scrollTop 获取往左和往上滚出去的距离
jQuery里也有，而且写法一毛一样，但是jQuery里面是方法，所以要加括号
作用都是一样的
如果要用动画效果设置滚出去距离用animate
但是要记住，不带动画控制滚动条。直接用window
要带动画控制页面滚动，要写死 ‘html,body’

  $('#get').click(function(){

            console.log($('.box').scrollLeft(), $('.box').scrollTop());
            
        })

        $('#set').click(function(){
            // 设置滚出去的距离
            // $('.box').scrollLeft(1000);
            // $('.box').scrollTop(5000);

            // $('.box').animate({
            //     scrollLeft:1000,
            //     scrollTop:5000
            // },1000);

            // 跟页面有关的滚动条找window就行了
            // $(window).scrollTop(1000);

            // 如果要让页面滚动用动画，必须写死 html,body
            $('html,body').animate({
                scrollTop:3000
            },1000);
        })