元素的尺寸

width() height()
innerWidth() innerHeight()
outerWidth() outerHeight()
參數(shù)的作用(設(shè)置寬高)
與原生JS的區(qū)別

<div id="div1" style="width: 100px; padding: 10px; border: 5px solid #111; margin: 20px;"></div>
<script>
$('#div1').width();//width 100
$('#div1').innerWidth();// width + padding  = 120
$('#div1').outerWidth();//width + padding + border = 130
$('#div1').outerWidth(true);//width + padding + border + margin =170
</script>

參數(shù)的作用(設(shè)置寬高)

<div id="div1" style="width: 100px; padding: 10px; border: 5px solid #111; margin: 20px;"></div>
<script>
$('#div1').width(200);// width = 200
$('#div1').innerWidth(200);//width: 200 - padding
$('#div1').outerWidth(200);//width: 200 - padding - border
$('#div').outerWidth(200, true);//width: 200 - padding -border - margin
</script>

實(shí)際都是改變的是width值

與原生JS的區(qū)別

<div id="div1" style="width: 100px;"></div>
<script>

var oDiv = document.getElementById('div1');
alert(oDiv.offsetWidth);//100
</script>

當(dāng)我們隱藏div之后(display: none) 我們就不能獲取到div的值了

<div id="div1" style="display: none;width: 100px;"></div>
<script>

var oDiv = document.getElementById('div1');
alert(oDiv.offsetWidth);//0
alert( $('#div1').width() );//100 jquery是可以獲取到隱藏元素的寬高的
</script>

JQ實(shí)戰(zhàn)小技巧

可視區(qū)的尺寸(可以理解為窗口的尺寸)
頁面的尺寸(可以理解為文檔的尺寸)

$(window).width();//可視區(qū)的尺寸
$(document).width();//頁面的尺寸

滾動(dòng)距離

scrollTop()
scrollLeft()

$(document).click(function(){
    alert( $(document).scrollTop() );
})

一個(gè)公式當(dāng)滾動(dòng)到底部的時(shí)候滾動(dòng)距離 + 可視區(qū)高度 = 頁面的高度

$(document).scrollTop()+$(window).height() === $(document).height();//true

元素距離

offset()

元素相對(duì)于整個(gè)頁面的距離

返回一個(gè)對(duì)象包含left和top屬性

<style>
*{ 
    margin:0; 
    padding:0;
}
#div1{ 
    width:200px; 
    height:200px; 
    background:red; 
    margin:200px;
}
#div2{ 
    width:100px; 
    height:100px; 
    background:yellow; 
    margin: 50px;
}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

<script>
alert( $('#div2').offset().top );//250
</script>

position()

相對(duì)與最近的父級(jí)定位元素的距離

注意: position() 是計(jì)算的margin的頂點(diǎn)到父級(jí)定位元素的距離, 其他跟位置相關(guān)的函數(shù)或?qū)傩远际且詁order的頂點(diǎn)為參考點(diǎn)

<style>
*{ 
    margin:0; 
    padding:0;
}
#div1{  
    margin: 30px;
    border: 20px solid #111;
    padding: 10px;
    background:red;
    position: relative;

   
}
#div2{ 
    width:100px; 
    height:100px;
    margin: 30px;
    border: 20px solid #111;
    padding: 10px; 
    background:yellow;
}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

<script>
alert( $('#div2').position().left );//10 
alert( $('#div2').offset().left );//90
alert($('#div2').get(0).offsetLeft);//40
</script>

<style>
*{ 
    margin:0; 
    padding:0;
}
#div1{  
    margin: 30px;
    border: 20px solid #111;
    background:red;
    position: relative;

   
}
#div2{ 
    width:100px; 
    height:100px;
    margin: 30px;
    background:yellow;
}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

<script>
alert( $('#div2').position().left );//0 
</script>

例子 : 懶加載頁面中的圖片

<style>
div{ 
    margin-top:300px; 
    width:470px; 
    height:150px; 
    border:1px #000 solid;
}
</style>
<div><img _src="img/1.jpg"></div>
<div><img _src="img/2.jpg"></div>
<div><img _src="img/3.jpg"></div>
<div><img _src="img/4.jpg"></div>
<div><img _src="img/5.jpg"></div>
<script>
toChange();//頁面第一屏
$(window).scroll(toChange);
function toChange(){
        
    $('img').each(function(i,elem){
        
        if( $(elem).offset().top < $(window).height() + $(window).scrollTop() ){
            
            $(elem).attr('src',$(elem).attr('_src'));
            
        }
        
    });
    
}
</script>

JQ的事件

on()
off()
- JQ中都是綁定的形式
- 支持多事件寫法
- click()寫法，也是采用off()取消

JQ中的事件綁定可以使用相應(yīng)的事件函數(shù)比如說

click() mouseover() mousermove()..

也可以使用on()方法

$('div').on('click', function(){
    alert(1);
})

其實(shí)click()等函數(shù)內(nèi)部也是調(diào)用的是on()方法

支持多事件寫法:

$('#div1').on('click mouseover',function(){
    alert(123);
});

通過on方法添加的事件, 可以通過off方法移除

function fn1(){
    alert(1)
}
function fn2(){
    alert(2)
}

$('#div1').on('click',fn1);
$('#div1').on('click',fn2);

$('#div1').off('click',fn1);//移除click事件的某一個(gè)函數(shù)

function fn1(){
    alert(1)
}
function fn2(){
    alert(2)
}

$('#div1').on('click',fn1);
$('#div1').on('click',fn2);

$('#div1').off('click');//移除click事件的所有函數(shù)

function fn1(){
    alert(1)
}
function fn2(){
    alert(2)
}

$('#div1').on('click mouseover',fn1);
$('#div1').on('click mouseover',fn2);


$('#div1').off();//刪除所有的事件操作

click()寫法，也是采用off()取消

function fn1(){
    alert(1)
}

$('#div1').click(fn1);
$('#div1').off('click', fn1);

事件主動(dòng)觸發(fā)

trigger()
- 比 click()形式更強(qiáng)大
事件的命名空間
例子 : 主動(dòng)觸發(fā)的添加內(nèi)容

什么叫主動(dòng)觸發(fā), 比如說我們給一div綁定一個(gè)點(diǎn)擊事件, 我點(diǎn)擊該div會(huì)觸發(fā)

我們也可以通過程序, 不用點(diǎn)擊div來觸發(fā), 這就是主動(dòng)觸發(fā)

$('#div1').click(function(){
    alert(123);
});

$('#div1').trigger('click');

事件的命名空間

$('#div1').on('click',function(){
    alert(1);
});

$('#div1').on('click', function(){
    alert(2)
});

$('#div1').trigger('click');

1和2都會(huì)被彈出, 如果我們只想彈1 , 我們可以使用事件的命名空間

$('#div1').on('click.abc',function(){
    alert(1);
});

$('#div1').on('click', function(){
    alert(2)
});

//$('#div1').trigger('click');1和2還是會(huì)彈出

$('#div1').trigger('click.abc');//只彈1

事件命名空間類似css的類，我們在事件類型的后面通過點(diǎn)加名稱的方式來給事件添加命名空間

jquery現(xiàn)在的事件API：on，off，trigger支持帶命名空間的事件

click.a.b 命名空間的名稱分別是.a和.b，而不是a和a.b 注意命名空間的名稱前面一定要帶點(diǎn)，這個(gè)名稱在off的時(shí)候可以用到

例子 : 主動(dòng)觸發(fā)的添加內(nèi)容

我們可以點(diǎn)擊添加按鈕和按回車來添加內(nèi)容

<input id="input1" type="button" value="添加"><input id="input2" type="text">
<ul>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
</ul>
<script>
$('ul').delegate('li','click',function(ev){
        $(this).css('background','red');
    });
    
$('#input1').click(function(){
    var $li = $('<li>'+ $('#input2').val() +'</li>');
    $('ul').append( $li );
});

$('#input2').keydown(function(ev){
    if( ev.which == 13 ){
        //用函數(shù)也可以, 但這里主動(dòng)觸發(fā)要簡單一些
        $('#input1').trigger('click');
        
    }
});
</script>

例子:　拖拽

<div id="div1">div</div>
<script>
var disX = 0;
var disY = 0;
var $div = $('#div1');

$div.on('mousedown',function(ev){
    
    disX = ev.pageX - $(this).offset().left;
    disY = ev.pageY - $(this).offset().top;
    
    $(document).on('mousemove.drag',function(ev){
        
        $div.css('left',ev.pageX - disX);
        $div.css('top',ev.pageY - disY);
        
    });
    
    $(document).on('mouseup.drag',function(){
        
        $(this).off('.drag');//加了命名空間，　不會(huì)誤取消，其他加在document上的事件
        
    });
    
    return false;
    
});
</script>

工具方法

我們之前見到的方法：

$().css(); $().html(); $().click();　都需要獲取元素　　都是針對(duì)JQ對(duì)象的

像下面這種形式的：

$.xxx() $.yyy() $.ccc()

我們稱為工具方法，　可以直接調(diào)用的

$.type()
- 比原生typeof更強(qiáng)大
$.isFunction()
$.isNumeric()
$.isArray()
$.isWindow()
$.isEmptyObject()
$.isPlainObject()

$.type()

$.type('abc');//"string"

用來獲取JavaScript數(shù)據(jù)類型

使用typeof可以判斷基礎(chǔ)類型，　不能判斷復(fù)合類型

typeof 'aa';//"string"
typeof 11;//"number"
typeof false;//"boolean"
typeof function(){};//"function"
typeof {};//"object"
typeof [];//"object"
typeof new Date();//"object"

console.log( $.type('aa') )//"string"
console.log( $.type(11) )//"number"
console.log( $.type(false) )//"boolean"
console.log( $.type(function(){}) )//"function"
console.log( $.type({}) )//"object"
console.log( $.type([]) )//"array"
console.log( $.type(new Date()) );//"date"

$.isEmptyObject()

判斷是否為空對(duì)象, 也可以判斷數(shù)組

alert($.isEmptyObject({}) )//true
alert($.isEmptyObject({name: 11}) )//false
alert($.isEmptyObject([]) );//true

$.isPlainObject()

測試對(duì)象是否是純粹的對(duì)象（通過 "{}" 或者 "new Object" 創(chuàng)建的）

我們知道，　這種形式{}數(shù)據(jù)類型的我們成為對(duì)象，也叫做對(duì)象字面量，也叫做json對(duì)象
數(shù)組，　函數(shù)，new Date() 等等通過構(gòu)造函數(shù)生成的我們也稱為對(duì)象

var obj1 = {};
var obj2 = {name: 1};
var obj3 = [];
var obj4 = new Date();

alert( $.isPlainObject(obj1) );//true
alert( $.isPlainObject(obj2) );//true
alert( $.isPlainObject(obj3) );//false
alert( $.isPlainObject(obj4) );//false

工具方法

$.extend()
- 深拷貝操作

$.extend()

var o1 = {name: 'hello'};
var o2 = o1;
o2.name = 'Hi';
alert(o1.name);//Hi

改變o2會(huì)影響到o1

如果想改變o2不影響o1, 我們需要拷貝，　使用for in 可以實(shí)現(xiàn)

var o1 = {name: 'hello'};
for(var key in o1){
    o2[key] = o1[key];
}
o2.name = 'Hi';
alert(o1.name);//hello

使用$.extend也可以辦到

它的作用是將第二個(gè)對(duì)象中的屬性復(fù)制到第一個(gè)對(duì)象中

var o1 = {name: 'hello'};
var o2 = {};
$.extend(o2, o1);
o2.name = 'Hi';
alert(o1.name);//hello

上面的操作我們稱為對(duì)象的淺拷貝

下面來講什么是深拷貝

//如果對(duì)象屬性的值不是簡單的數(shù)據(jù)類型，　而是一個(gè)對(duì)象
var o1 = {
    name: {
        first: 'hello'
    }
}

var o2 = {};
$.extend(o2, o1);
o2.name.first = 'Hi';
alert(o1.name.first);//Hi

如果對(duì)象屬性的值不是簡單的數(shù)據(jù)類型，　而是一個(gè)對(duì)象，我們依然會(huì)改變到o1

這是淺拷貝，　深拷貝是將所有為對(duì)象的都拷貝一次，在$.extend()函數(shù)中，　我們只需要將第一個(gè)函數(shù)設(shè)為true就為深拷貝

var o1 = {
    name: {
        first: 'hello'
    }
}

var o2 = {};
$.extend(true, o2, o1);
o2.name.first = 'Hi';
alert(o1.name.first);//hello

$.extend也將多個(gè)對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象。

var o1 = {};
var o2 = {name: 1};
var o3 = {age: 2};

$.extend(o1, o2, o3);
o1;//{name: 1, age:2}

后寫的對(duì)象中的屬性會(huì)覆蓋前面的對(duì)象中的屬性

var o1 = {};
var o2 = {name: 1};
var o3 = {name: 2};

$.extend(o1, o2, o3);
o1;//{name: 2}

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

第三課

第三課

元素的尺寸

參數(shù)的作用(設(shè)置寬高)

與原生JS的區(qū)別

JQ實(shí)戰(zhàn)小技巧

滾動(dòng)距離

元素距離

offset()

position()

JQ的事件

事件主動(dòng)觸發(fā)

事件的命名空間

工具方法

$.type()

$.isEmptyObject()

$.isPlainObject()

工具方法

$.extend()

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

第三課

元素的尺寸

參數(shù)的作用(設(shè)置寬高)

與原生JS的區(qū)別

JQ實(shí)戰(zhàn)小技巧

滾動(dòng)距離

元素距離

offset()

position()

JQ的事件

事件主動(dòng)觸發(fā)

事件的命名空間

工具方法

$.type()

$.isEmptyObject()

$.isPlainObject()

工具方法

$.extend()

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频