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();