50個必備的實用jQuery代碼段（2）

33. 如何把一個元素放在屏幕的中心位置：

jQuery.fn.center = function () {  　　return this.each(function(){ 　　　　$(this).css({ 　　　　　　position:'absolute', 　　　　　　top, ( $(window).height() - this.height() ) / 2 + $(window).scrollTop() + 'px',  　　　　　　left, ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + 'px' 　　　　}); 　　}); }//這樣來使用上面的函數：   $(element).center();

34. 如何把有着某個特定名稱的全部元素的值都放到一個數組中：

var arrInputValues = new Array();  $("input[name='xxx']").each(function(){  　　arrInputValues.push($(this).val()); });

35. 如何從元素中除去HTML

(function($) {  $.fn.stripHtml = function() {  　　var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;  　　this.each(function() {  　　　　$(this).html( $(this).html().replace(regexp,'') );  　　}); 　　return $(this);  }  })(jQuery); //用法：  $('p').stripHtml();

36. 如何使用closest來取得父元素：

$('#searchBox').closest('div');

37. 如何使用Firebug和Firefox來記錄jQuery事件日誌：

// 容許鏈式日誌記錄 jQuery.log = jQuery.fn.log = function (msg) { 　　if (console){  　　　　console.log("%s: %o", msg, this);  　　}　　return this;  };// 用法：  $('#someDiv').hide().log('div hidden').addClass('someClass');

38. 如何強制在彈出窗口中打開連接：

$('a.popup').live('click', function(){  　　var newwindow = window.open($(this).attr('href'),'','height=200,width=150');  　　if (window.focus) {  　　　　newwindow.focus();  　　}  　　return false; });

39. 如何強制在新的選項卡中打開連接：

$('a.newTab').live('click', function(){  　　var newwindow=window.open(this.href);  　　$(this).target = "_blank";  　　return false;  });

40. 在jQuery中如何使用.siblings()來選擇同輩元素

// 不這樣作  $('#nav li').click(function(){  　　$('#nav li').removeClass('active');  　　$(this).addClass('active');  });//替代作法是  $('#nav li').click(function(){  　　$(this).addClass('active').siblings().removeClass('active');  });

41. 如何切換頁面上的全部複選框：

var tog = false; // 或者爲true，若是它們在加載時爲被選中狀態的話  $('a').click(function() {  　　$("input[type=checkbox]").attr("checked",!tog);  　　tog = !tog; });

42. 如何基於一些輸入文原本過濾一個元素列表：

//若是元素的值和輸入的文本相匹配的話,該元素將被返回  $('.someClass').filter(function() {  　　return $(this).attr('value') == $('input#someId').val();  })

43. 如何得到鼠標墊光標位置x和y

$(document).ready(function() {  　　$(document).mousemove(function(e){  　　　　$(’#XY’).html(」X Axis : 」 + e.pageX + 」 | Y Axis 」 + e.pageY);  　　}); });

44. 如何擴展String對象的方法

$.extend(String.prototype, {         isPositiveInteger:function(){             return (new RegExp(/^[1-9]\d*$/).test(this));         },         isInteger:function(){             return (new RegExp(/^\d+$/).test(this));         },         isNumber: function(value, element) {             return (new RegExp(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/).test(this));         },         trim:function(){             return this.replace(/(^\s*)|(\s*$)|\r|\n/g, "");         },         trans:function() {             return this.replace(/&lt;/g, '<').replace(/&gt;/g,'>').replace(/&quot;/g, '"');         },         replaceAll:function(os, ns) {             return this.replace(new RegExp(os,"gm"),ns);         },         skipChar:function(ch) {             if (!this || this.length===) {return '';}             if (this.charAt()===ch) {return this.substring(1).skipChar(ch);}             return this;         },         isValidPwd:function() {             return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));          },         isValidMail:function(){             return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(this.trim()));         },         isSpaces:function() {             for(var i=; i<this.length; i+=1) {                 var ch = this.charAt(i);                 if (ch!=' '&& ch!="\n" && ch!="\t" && ch!="\r") {return false;}             }             return true;         },         isPhone:function() {             return (new RegExp(/(^([0-9]{3,4}[-])?\d{3,8}(-\d{1,6})?$)|(^\([0-9]{3,4}\)\d{3,8}(\(\d{1,6}\))?$)|(^\d{3,8}$)/).test(this));         },         isUrl:function(){             return (new RegExp(/^[a-zA-z]+:\/\/([a-zA-Z0-9\-\.]+)([-\w .\/?%&=:]*)$/).test(this));         },         isExternalUrl:function(){             return this.isUrl() && this.indexOf("://"+document.domain) == -1;         }     });

45. 如何規範化寫jQuery插件：

(function($){     $.fn.extend({         pluginOne: function(){             return this.each(function(){                 // my code             });         },         pluginTwo: function(){             return this.each(function(){                 // my code             });         }     }); })(jQuery);

46. 如何檢查圖像是否已經被徹底加載進來

$('#theImage').attr('src', 'image.jpg').load(function() {  　　alert('This Image Has Been Loaded');  });

47. 如何使用jQuery來爲事件指定命名空間：

//事件能夠這樣綁定命名空間  $('input').bind('blur.validation', function(e){ 　　// ...  }); //data方法也接受命名空間  $('input').data('validation.isValid', true);

48. 如何檢查cookie是否啓用

var dt = new Date();  dt.setSeconds(dt.getSeconds() + 60);  document.cookie = "cookietest=1; expires=" + dt.toGMTString(); var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; if(!cookiesEnabled) {  　　//沒有啓用cookie  }

49. 如何讓cookie過時：

var date = new Date();  date.setTime(date.getTime() + (x * 60 * 1000));  $.cookie('example', 'foo', { expires: date });

50. 如何使用一個可點擊的連接來替換頁面中任何的URL

$.fn.replaceUrl = function() { 　　var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi; 　　return this.each(function() {  　　　　$(this).html(  　　　　　　$(this).html().replace(regexp,'<a href="$1">$1</a>') 　　　　);  　　}); }  //用法　  $('p').replaceUrl();