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

转载于:https://www.cnblogs.com/zhanglee/archive/2012/05/03/2731555.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值