jQuery（四）——動態(tài)操作

（一）jQuery操作元素的尺寸

1.width和height

設(shè)置語法：jQuery對象.width(數(shù)字);
獲取語法：jQuery對象.width();
得到的只是內(nèi)容的大小。

代碼舉栗：

    <style>
        div {
            width: 500px;
            height: 500px;
            padding: 10px;
            border: 10px solid;
        }
    </style>
<body>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var w = $('div').width(); //返回的是一個number
        console.log(w); //500
        $('div').width(300); //把div設(shè)置為300px
    </script>
</body>

2.innerWidth和innerHeight

設(shè)置語法：jQuery對象.innerWidth(數(shù)字);
獲取語法：jQuery對象.innerWidth();
得到的是內(nèi)容部分大小 + padding的大小。
設(shè)置時padding固定不變，內(nèi)容部分自動適應(yīng)變化。

代碼舉栗：

    <style>
        div {
            width: 500px;
            height: 500px;
            padding: 10px;
            border: 10px solid;
        }
    </style>
<body>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var w = $('div').innerwidth(); //返回的是一個number
        console.log(w); //520。width+padding
        $('div').innerwidth(300); //div設(shè)置為300-20=280px，padding占有20px
    </script>
</body>

3.outerWidth和outerHeight

設(shè)置語法：jQuery對象.outerWidth(數(shù)字);
獲取語法：jQuery對象.outerWidth();
得到的是內(nèi)容部分大小 + padding + border的大小。
設(shè)置時padding和邊框border固定不變，內(nèi)容部分自動適應(yīng)變化。

代碼舉栗：

    <style>
        div {
            width: 500px;
            height: 500px;
            padding: 10px;
            border: 10px solid;
        }
    </style>
<body>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var w = $('div').outerwidth(); //返回的是一個number
        console.log(w); //540。width+padding+border
        //div設(shè)置為300-20-20=260px，padding占有20px，border占有20px
        $('div').outerwidth(300); 
    </script>
</body>

（二）jQuery操作元素的位置

1.獲取元素距離文檔的位置

語法：jQuery對象.offset();
返回的是一個對象，對象中包含了元素的位置。（相對于文檔的位置）
位置和定位無關(guān)。若元素加了（子絕父相）定位后也依然參照文檔的位置。不論元素是否定位。

代碼舉栗：

    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: red;
        }
        p {
            height: 600px;
        }
    </style>
<body>
    <p></p>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var o = $('div').offset();
        console.log(o); //得到一個對象，其中包含top:632, left:574.5
        //設(shè)置時傳參傳的是對象。位置依然參照文檔，和定位無關(guān)。
        var s = $('div').offset({top:0,left:0}); 
        console.log(s); //div變到頁面左上角
    </script>
</body>

一般不會用到設(shè)置。
在DOM對象中，元素.offsetLeft和元素.offsetTop是只讀的。

2.獲取元素距離定位元素的位置

語法：**jQuery對象.position(); **
和定位有關(guān)系。返回一個包含left和top的對象。
但是position不能設(shè)置。

代碼舉栗：

    <style>
        .f {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: red;
            position: relative;
        }
        .son {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
        p {
            height: 600px;
        }
    </style>
<body>
    <p></p>
    <div class="f">
        <div class="son"></div>
    </div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var o = $('.son').position();
        console.log(o); //得到一個對象，其中包含top:0, left:0
        //position方法只能獲取元素的位置不能傳參設(shè)置位置
        $('.son').position({left:50, top:50});
    </script>
</body>

3.操作卷去的頁面間距

獲取語法：jQuery對象.scrollTop();
設(shè)置語法：jQuery對象.scrollTop(數(shù)字);

代碼舉栗：

    <style>
        body {
            text-align: center;
        }
        div {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid;
            overflow: auto;
        }
    </style>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        //入口函數(shù)
        $(function () {
            //給div注冊滾動條滾動事件
            $('div').scroll(function(){ 
                var v = $(this).scrollTop();
                console.log(v);
            });
            //回到頂部
            $('button').click(function(){
                $('div').scrollTop(0);
            });
        });
    </script>
<body>
    <div>
        <p></p>*100
    </div>
    <button>回到頂部</button>
</body>

在jQuery中可以使用$(window)直接獲取頁面卷去的間距，但是在原生方法中不可以。
不加動畫時，可以直接使用$(window).scrollTop(數(shù)字)來直接設(shè)置值，但是在原生中不可以。

4.固定導(dǎo)航和回到頂部案例

<body>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var _top = $('.box2').offset().top;
        $(window).scroll(function () {
            var v = $('window').scrollTop();
            if (v >= _top) {
                //給固定導(dǎo)航設(shè)置定位
                $('.box2').addClass('active');
                //設(shè)置回到頂部按鈕顯示
                $('.top').show();
            }
            else {
                $('.box2').removeClass('active');
                $('.top').hide();
            }
        });
        $('.top').click(function () {
            //動畫中動的必須是元素（即標(biāo)簽）。
            $('html,body').animate({ scrollTop: 0 }, 500);
        })
    </script>
</body>

（三）jQuery事件操作

1.注冊事件

語法：jQuery對象.事件名(事件處理程序);
在jQuery中事件的底層就是事件監(jiān)聽，可以實現(xiàn)事件疊加。

2.on方法注冊事件

注冊簡單事件語法：jQuery對象.on('事件名',事件處理程序);

代碼舉栗：

<body>
    <button>click</button>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('button').on('click',function(){
            console.log(1);
        });
        $('button').on('click',function(){
            console.log(2);  //輸出1 2。事件疊加
        });
    </script>
</body>

事件委托語法：jQuery對象.on('事件名','選擇器',事件處理程序);
選擇器：子孫元素
在事件處理程序中，this代表的是子孫元素（所點最先觸發(fā)的）

3.off方法移除事件

移除簡單事件語法：jQuery對象.off('click',事件處理程序名稱);
移除事件委托的事件語法：jQuery對象.off('click',‘選擇器’,事件處理程序名稱);
不傳參數(shù)的話會移除所有事件類型。
移除事件的底層也是事件監(jiān)聽（removeEventListener）。

代碼舉栗：

<script>
    // 解綁按鈕的事件處理程序：fn1和fn2
    $('button').off('click',fn1);
    $('button').off('click',fn2);

    // 解綁通過事件委托給p注冊的事件處理程序 fn2
    $('div').off('click','p',fn2);
</script>

4.觸發(fā)事件

語法：jQuery對象.trigger('事件名');

5.事件對象

1）鼠標(biāo)事件對象相關(guān)的屬性
事件對象.clientX/Y 參照瀏覽器
事件對象.pageX/Y 參照文檔
事件對象.offsetX/Y 參照元素
2）鍵盤事件對象相關(guān)的屬性
事件對象.keyCode 返回鍵碼數(shù)字
事件對象.alt/shift/ctrlKey 返回是布爾值。 檢測是否按下（true）
3）公共的屬性或方法
屬性：事件對象.target;
方法：
事件對象.preventDefault(); 阻止默認(rèn)行為
事件對象.stopPropagation(); 阻止事件冒泡

（四）鏈?zhǔn)骄幊?/h1>

可以用連續(xù)點點方式調(diào)用其他方法。
css方法只能jQuery對象調(diào)用

1.end方法

在鏈?zhǔn)缴峡梢苑祷氐缴弦粋€jQuery對象

代碼舉栗：

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('ul li').eq(0).css('color','red') //返回索引為0的li的jQuery對象
        .parent().css('border','1px solid blue') //返回ul這個jQuery對象
        .end().css('background','gold');  //返回了索引為0的li的jQuery對象
    </script>
</body>

2.星級評級案例

    <style>
        span {
            font: bold 100px '宋體';
            float: left;
            color: gold;
            cursor: pointer;
        }
    </style>
<body>
    <div>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
    </div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('span').mouseenter(function () {
            $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
        });
        $('span').mouseleave(function () {
            $('span').text('☆');
            $('.active').text('★').prevAll().text('★').end().nextAll().text('☆');
        });
        $('span').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        });
    </script>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 通過jQuery，您可以選?。ú樵?，query）HTML元素，并對它們執(zhí)行“操作”（actions）。 jQuer...
    枇杷樹8824閱讀 719評論 0贊 3
  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,800評論 0贊 3
  • 請記得在進行JQuery類庫的運用時，加入JQuery類庫，并且要保證先寫文檔就緒函數(shù) $(document).r...
    Sunshinemm閱讀 3,029評論 1贊 40
  • 一、樣式篇 第1章 初識jQuery （1）環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,665評論 0贊 44
  • JQuery 1、JQuery特點 (1)輕量級(2)鏈?zhǔn)秸Z法(3)簡單(4)寫的更少，做的更多 2、本地調(diào)用： ...
    Lizzy95閱讀 304評論 0贊 1

友情鏈接更多精彩內(nèi)容