七、jQuery 常用小技巧

7-44 attr() - 動態增加 HTML 標籤屬性

img 的 title 屬性，當滑鼠移過去，會跑出提示字

$(document).ready(function () {

  // 修改 img 屬性
  $('img').attr('width', '50px');

});

7-45 remove() - 移除網頁標籤工具

把整個 Html 碼都刪掉 後端不會在意元素有沒有被隱藏，只在意在不在頁面上

• HW7-45 remove() - 移除網頁標籤工具 | jQuery @HexSchool

• An Anonymous Pen on CodePen

7-46 top 滑動效果

往上滾動，不希望太快

<style>
.top {
    position: fixed;
    bottom: 0;
    right: 0;
}
</style>
<script>

$(document).ready(function () {

  // 點擊後，往上有滾動效果
  $('.top a').click(function (e) { 
    e.preventDefault();
    $('html,body').animate( {
        scrollTop: 0
    }, 3000);
  });

});

</script>

向上滑只到 lorem就停止，怎麼找出scrollTop要設定多少?

• 可以使用 offset().top 的方法來取得物件的位置

• 以下範例供您參考～

  $('.gotop').click(function (event) {
        $('html, body').animate({
            scrollTop: $('.box').offset().top
        }, 2000);
    });

有點不懂為何要寫兩個(html, body)

• 這個原因在於少部分瀏覽器不支援其中一種此選取器方法

• 所以在這個地方會直接用兩個選取器來解決此問題

如果我想動畫跑到一半的時候中止，下次啟動再接續上一次結束效果的地方，我能怎麼做

• 這個問題很棒，我做一個範例給你參考

• http://codepen.io/Wcc723/pen/OWxYbo

• 你可以使用 stop() 來停止動畫中的物件

• 另外，你也可以用 .is(':animated') 來判斷目前元件是否在動畫中喔～

請問有一些網頁按下連結後會到網頁的某個區塊也是用這個功能的延伸嗎

• 有點類似，我這裡寫了一個範例給你，https://jsbin.com/qikiwivini/edit?html,css,js,output

• 但有用到一些 JS 小技巧，

• 差別在我在 JS裡面下了 var 去記錄我當下的位置 選單 ID名稱，

• 然後用了 jQuery 的 offset 與 top 語法，他能夠幫我們找出該 div 的位置的最上緣，

• 像是這個蛋黃哥的網站選單也是這樣做出來的 http://event.family.com.tw/2016_Gudetama/v1/index.html#Pinch

7-47 使用 fontAwesome 動態加入連結 icon

用 jQuery 控制 Font Awesome 的出現，自動判斷檔名，放上適當的 icon

• 會用偽元素 before 的方式插入 icon

• Icons | Font Awesome

範例是針對 doc、jpg、ZIP 有三個圖檔。是否有辦法同一圖檔 再多幾類。如doc、docx、ppt的副檔名都想要視為用同一張圖片，那檔案格式複數的判斷應該要怎麼寫呢

• 選取器也跟css一樣啊，可以選擇多個 ，像是右邊這樣的語法就可以做到嘍 $('class1,class2,class3')，

• 最後再讓他們選擇同個圖案就好哩 :D

用CSS reset 後，想讓 list 的 list-style 有效果出來 需要調整 ul 的 padding?

• CSS list-style-type 屬性

• HW7-47 使用 fontAwesome 動態加入連結 icon | jQuery @HexSchool

Quiz 6: 第六章測驗

第六章測驗