jQuery的常用小例子

Sunny Girl發表於2017-11-29
jQuery

1.文字/密碼禁輸入空格

$('input').keydown(function(e) { 
    if (e.keyCode == 32) {   
        return false; 
     }
});複製程式碼

2.檢測螢幕寬度

var width= $(window).width(); 
複製程式碼

3.替換html標籤

//用粗體文字替換每個段落
$(".btn1").click(function(){
   $("p").replaceWith("<b>Hello world!</b>");//規定替換被選元素的內容
});

//replaceWith() 方法用指定的 HTML 內容或元素替換被選元素。
//提示：replaceWith() 與 replaceAll() 作用相同。
//差異在於語法：內容和選擇器的位置，以及 replaceAll() 無法使用函式進行替換。

//使用函式來替換元素
$("p").replaceWith(function(){
  return "<p>Hello World!</p>";
});

//$(selector).replaceWith(function())//function()返回待替換被選元素的新內容的函式
複製程式碼

4.平滑滾動至頁面頂部

//回到頂部按鈕:利用jQuery裡的animate和scrollTop方法
$(".top").click(function(e) {
    e.preventDefault();   
    $("html, body").animate({ scrollTop: 0 }, 800);
    return false;
}); 

//某一元素始終處於頁面頂部
$(function(){
    var $win = $(window); 
    var $nav = $('.mytoolbar');
    var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;   
    var isFixed=0;  

      processScroll(); 
      $win.on('scroll', processScroll);

     function processScroll() {  
         var i, scrollTop = $win.scrollTop(); 
         if (scrollTop >= navTop && !isFixed) {  
             isFixed = 1 ;
             $nav.addClass('subnav-fixed');
         } else if (scrollTop <= navTop && isFixed) {   
            isFixed = 0;
            $nav.removeClass('subnav-fixed');
     }  
 }
複製程式碼

5.複製、貼上與剪下

$("span").bind('copy', function() { 
    $('span').text('copy');
});  

$("span").bind('paste', function() {   
    $('span').text('paste');
 });
  
$("span").bind('cut', function() { 
    $('span').text('cut')   
});複製程式碼

6.自動為外部連結新增target=“blank”屬性

var root = location.protocol + '//' + location.host; 

//當前連結是否指向外部，是則自動為其新增target="blank"屬性
$('a').not(':contains(root)').click(function(){ 
    this.target = "_blank";
});複製程式碼

原文標題：10 jQuery Snippets for Efficient Web Development

相關文章