3.5-jQuery方法

jQuery方法

1 noConflict()

防止jquery標識（$ === jQuery）和自己封裝的函數衝突，可以通過noConflict()方法起別名

var jq = jQuery.noConflict();

2 extend() 對象拷貝

淺層拷貝：原對象的複雜數據類型地址拷貝給目標對象

深層拷貝：

//原對象
var sourceObj = {
     name: 'along',
     age: 33,
     birthday: {
          month: 9
     }
};
//目標對象
var tObj = {
     name: 'lily', // 將來會被源對象相同的屬性覆蓋
     qq: '382867197' // 源對象沒有的屬性會保留
};

//淺層拷貝 原對象的複雜數據類型地址拷貝給目標對象
 $.extend(tObj,sourceObj);
 console.log(tObj);
 tObj.birthday.month = 10;
 console.log(sourceObj.birthday.month);
//引用類型改變目標值，原對象的值也會被改變  對象爲引用類型

//深層拷貝需要在方法中添加true屬性
 jq.extend(true, tObj, sourceObj);
 tObj.birthday.month = 10;
 console.log(sourceObj.birthday.month);

3 width & height

//width() & height() 設置或獲取width和height
alert($('.box').width()); // 200
alert($('.box').height());  
$('.box').width(300)  //設置

// innerWidth() & innerHeight() 獲取設置 width+padding或height+padding
alert($('.box').innerWidth()); // 220

// outerWidth() & outerHeight() 獲取設置 width+padding+border或height+padding+border
alert($('.box').outerWidth());

// outerWidth(true) & outerHeight(true) 獲取設置 width+padding+border+margin或height+padding+border+margin
alert($('.box').outerWidth(true));

4 offset&position&scroll

4.1 offset() 獲取設置距離文檔的位置

獲取的值是一個對象，有top & left 屬性，沒有單位

console.log(($('.son').offset())); // {top: 100 , left:100}

$('.son').offset({
     left: 300,
     top: 200
});

4.2 position()

獲取距離帶有定位的並且最近的父級偏移 假如沒有定位的祖先 則以文檔爲準

該方法可以獲取不能設置

console.log(($('.son').position()));   // {top: 100 , left:100}

4.3 scroll()

返回頁面捲曲的高度，有scrollTop() & scrollLeft()

            // scrollTop() scrollLeft()
            var boxTop = $('.container').offset().top;
            $(window).scroll(function() {
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $('.goBack').fadeIn();
                } else {
                    $('.goBack').fadeOut();
                }
            });
            $('.goBack').on('click', function() {
                //$(document).scrollTop(0); 可以返回頂部 不能實現動畫 元素才能夠做動畫
                //$('html,body').scrollTop(100);
                $('html,body').stop().animate({
                     scrollTop: 0
                });
            });