jQuery开发过程中的一些技巧
来源:互联网 发布:网络创世纪 stones 编辑:程序博客网 时间:2024/05/24 04:17
这里总结了一些jQuery开发过程中的一些技巧,希望对大家有所帮助。http://jafeney.com/2016/01/10/2016-01-10-jquery-q/
禁用页面的右击菜单
12345
$(function(){$(document).on('contextmenu',function(e){return false;});});
新窗口打开页面
123456789
$(function(){//例子1:href="http://"的超链接将会在新窗口打开链接$('a[href^="http://"]').attr('target','_blank');//例子2:rel="external"的超链接将会在新窗口打开链接$('#a[rel$="external"]').on('click',function(){this.target="_blank";});});
判断浏览器类型
1234567891011121314151617181920212223242526
$(function(){//Firefox 2 and aboveif($.support.mozilla && $.support.version>='1.8'){//do something}//Safariif($.support.safari){//do something}//Chromeif($.support.chrome){//do something}//Operaif($.support.opera){//do something}//IE6 and belowif($.support.msie && $.support.version<=6){//do something}//anything above IE6if($.support.msie && $.support.version>6){//do something}});
输入框文字获取和失去焦点
1234567891011121314151617
$(function(){$('input.text1').val("Enter your search text here");textFill($('input.text1'));});//input focus text functionfunction textFill(input){var originalvalue=input.val();input.focus(function(){if($.trim(input.val())===originalvalue){input.val();}}).blur(function(){if($.trim(input.val()==='')){input.val(originalvalue);}});}
返回头部滑动动画
12345678910
jQuery.fn.scrollTo=function(speed){var targetOffset=$(this).offset().top;$('html.body').stop().animate({scrollTop:targetOffset},speed);return this;}// use$('#goheader').click(function(){$('body').scrollTo(500);return false;});
获取鼠标位置
12345
$(document).ready(function(){$(document).mousemove(function(e){$('#XY').html("X:"+e.pageX+" | Y:"+e.pageY);});});
判断元素是否存在
12345
$(document).ready(function(){if($('#id').length){//do something}});
点击div也可以跳转
123456
$('div').click(function(){window.location=$(this).find('a').attr('href');return false;});// use<div><a href="#">home</a></div>
设置div在屏幕中央
1234567891011
$(document).ready(function(){jQuery.fn.center=function(){this.css({'position':’absolute‘,'top':($(window).height()-this.height())/2+$(window).scrollTop()+"px",'left':($(window).width()-this.width())/2+$(window).scrollLeft()+"px"});}//use$('#XY').center();});
根据浏览器的大小添加不同的样式
12345678910
$(function(){function checkWindowSize(){if($(window).width()>1200){$('body').addClass('large');}else{$('body').removeClass('large');}}$(window).resize(checkWindowSize);});
创建自己的选择器
12345678910
$(function(){$.extend($.expr[':'],{moreThen500px:function(a){return $(a).width()>500}});$('.box:moreThen500px').click(function(){//...});});
关闭所有的动画效果
123
$(function(){jQuery.fn.off=true;});
检测鼠标的右键还是左键
12345
$(function(){$('#XY').mousedown(function(e){alert(e.which) //1:左键 2:中键 3:右键});});
回车提交表单
1234567
$(function(){$('input').keyup(function(e){if(e.which==='13'){alert('回车提交!');}});});
设置全局Ajax参数
12345678910
$(function(){$('#load').ajaxStart(function(){showLoading(); //显示loadingdisableButtons(); //禁用按钮});$('#load').ajaxComplete(function(){hideLoading(); //隐藏 loadingenableButtons(); //启用按钮});});
获取选中的下拉框
12
$('#someElement').find('option:selected');$('#someElement option:selected');
切换复选框
12345
var tog=false;$('button').click(function(){$('input[type=checkbox]').attr('checked',!tog);tog=!tog;});
使用siblings()来选择同辈元素
123456789
//不这样做$('#nav li').click(function(){$('#nav li').removeClass('active');$(this).addClass('active');});//替代的做法$('#nav li').click(function(){$(this).addClass('active').siblings().removeClass('active');});
在一段时间之后自动隐藏或者关闭元素
1
$('div').slideUp(300).delay(3000).fadeIn(400);
使用Firefox和Firebug来记录事件日志
123456
jQuery.log=jQuery.fn.log=function(msg){if(console){console.log('%s:%o',msg,this);}return this;}
为任何与选择器相匹配的元素绑定事件
123
$('table').on('click','td',function(){$(this).toggleClass('hover');});
使用CSS钩子
12345678910
$.cssHooks['borderRadius']={get:function(elem,computed,extra){//depending on browser,read the value of -moz-,-webkit-,-o-...}set:function(elem,value){//set the appropriate css3 property}};//use$('#reset').css('borderRadius',5);
$.proxy()的使用
使用回调方法的缺点之一是当执行类库中的方法后,上下文对象this被设置到另外一个元素,而使用$.proxy()可以解决这个问题,代码如下:
1234567
$('#panel').fadeIn(function(){//Using $.proxy:$('#panel button').click($.proxy(function(){//this 指向 #panel$(this).fadeOut();},this));});
限制Text-Area域中的字符个数
123456789101112131415161718192021222324
jQuery.fn.maxLength=function(max){this.each(function(){var type=this.tagName.toLowerCase();var inputType=this.type?this.type.toLowerCase():null;if(type==="input" && inputType==="text" || inputType==="password"){//应用标准的maxLengththis.maxLength=max;e}else if(type==="textarea"){this.onkeypress=function(e){var ob=e||event;var keyCode=ob.keyCode;var hasSlection=document.selection?document.selection.createRange().text.length>0:this.selectionStart!==this.selectionEnd;return !(this.value.length>==max && (keyCode>50 || keyCode===32 || keyCode===0 || keyCode===13) && !ob.ctrlKey && !ob.altKey && !hasSlection);};this.onkeyup=function(){if(this.value.length>max){this.value=this.value.substring(0,max);}};}});};//use$('#mytextarea').maxLength(10);
本地存储
1
localStorage.someData="This is going to be saved";
解析json数据时报parseError错误
12345678910
//1.4之前版本,key没引号,这样没问题{key:"123",status:"0"}//升级成jQuery1.4之后,都必须加上双引号,格式如下:{"key":"123","status":"0"}
从元素中除去HTML
1234567891011
(function($){$.fn.stripHtml=function(){var regExp=/<("[^"]*"|'[^']*'|[^'">])*>/gi;this.each(function(){$(this).html($(this).html().replace(regExp,''));});return $(this);}})(jQuery);//use$('div').stripHtml();
拓展String对象的方法
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
$.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(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');},replaceAll:function(os,ns){return this.replace(new RegExp(os,"gm"),ns);},skipChar:function(ch){if(!this || this.length===0){return '';}if(this.charAt(0)===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=0,length=this.length;i<length;i++){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;}});//use$('input').val().isInteger();
0 0
- jQuery开发过程中的一些技巧
- Web OA开发过程中的一些技巧
- Flex开发过程中的一些小技巧
- 开发过程中的一些常用技巧
- Jquery中的一些技巧
- phone开发过程中的一些小技巧,小知识
- .NET开发中的一些技巧
- iOS开发中的一些技巧
- 开发过程中的小技巧
- 程序书写过程中的一些小技巧
- hadoop使用过程中的一些小技巧
- 程序书写过程中的一些小技巧
- freemarker使用过程中的一些小技巧
- php、yii2使用过程中的一些技巧
- iOS开发过程中的一些小技巧,绝对有你想要的
- iOS开发:开发中的一些小技巧
- .NET开发中的一些小技巧
- .NET开发中的一些小技巧
- 安全知识点
- LTspice introduction
- 【最小生成树】POJ 2421 Constructing Roads
- 贪心算法--阶乘之和
- [Leetcode] 103. Binary Tree Zigzag Level Order Traversal 解题报告
- jQuery开发过程中的一些技巧
- java.lang.OutOfMemoryError: PermGen space内存溢出解决方法
- Session实现防止会员下载资源被盗链
- JavaScript 的 join() 方法
- ubuntu软件安装 caffe相关软件安装 学习笔记
- NS2仿真分析无线网络的攻击防御(2)
- Android 自定义view基础(一)
- ISO-8859-1,ASCII,Unicode,UTF-8,UTF-16,GB2312,GBK,DBCS编码
- Java EE基础之JSP(二)