search

七、jQuery 常用小技巧

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

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

$(document).ready(function () {

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

});

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

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

hashtag
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 的方法來取得物件的位置

  • 以下範例供您參考～

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

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

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

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

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

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

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

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

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

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

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

hashtag
Quiz 6: 第六章測驗

第六章測驗
Previous六、教你如何操控網頁元素Next八、第三方Plugin

Last updated