50个必备的实用jQuery代码段.docx
- 文档编号:16646394
- 上传时间:2023-07-16
- 格式:DOCX
- 页数:15
- 大小:22.08KB
50个必备的实用jQuery代码段.docx
《50个必备的实用jQuery代码段.docx》由会员分享,可在线阅读,更多相关《50个必备的实用jQuery代码段.docx(15页珍藏版)》请在冰点文库上搜索。
50个必备的实用jQuery代码段
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。
其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成。
如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!
1.如何修改jQuery默认编码(例如默认UTF-8改成改GB2312):
$.ajaxSetup({
ajaxSettings:
{contentType:
"application/x-www-form-urlencoded;chartset=GB2312"}
});
复制代码
2.解决jQuery,prototype共存,$全局变量冲突问题:
jQuery.noConflict(); 复制代码 注意: 一定要先引入prototype.js再引入jquery.js,先后顺序不可错。 3.jQuery判断元素上是否绑定了事件 //jQueryevent封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var$events=$("#foo").data("events"); if($events&&$events["click"]){ //yourcode } 复制代码 4.如何使用jQuery来切换样式表 //找出你希望切换的媒体类型(media-type),然后把href设置成新的样式表。 $('link[media='screen']').attr('href','alternative.css'); 复制代码 5.如何限制选择范围(基于优化目的): //尽可能使用标签名来作为类名的前缀, //这样jQuery就不需要花费更多的时间来搜索 //你想要的元素。 还要记住的一点是, //针对于你的页面上的元素的操作越具体化, //就越能降低执行和搜索的时间。 varin_stock=$('#shopping_cart_itemsinput.is_in_stock');
复制代码
6.如何正确地使用toggleClass:
//切换(toggle)类允许你根据某个类的
//是否存在来添加或是删除该类。
//这种情况下有些开发者使用:
a.hasClass('blueButton')?
a.removeClass('blueButton'):
a.addClass('blueButton');
//toggleClass允许你使用下面的语句来很容易地做到这一点
a.toggleClass('blueButton');
复制代码
7.如何设置IE特有的功能:
if($.browser.msie){
//InternetExplorer就是个虐待狂
}
复制代码
8.如何使用jQuery来代替一个元素:
$('#thatdiv').replaceWith('fnuh');
9.如何验证某个元素是否为空:
//方法一
if(!
$('#keks').html()){
//什么都没有找到;
}
//方法二
if($('#keks').is(":
empty")){
//什么都没有找到;
}
复制代码
10.如何从一个未排序的集合中找出某个元素的索引号
$("ul>li").click(function(){
varindex=$(this).prevAll().length;//prevAll([expr]):
查找当前元素之前所有的同辈元素
});
复制代码
11.如何把函数绑定到事件上:
//方法一
$('#foo').click(function(event){
alert('Userclickedon"foo."');
});
//方法二,支持动态传参
$('#foo').bind('click',{test1:
"abc",test2:
"123"},function(event){
alert('Userclickedon"foo."'+event.data.test1+event.data.test2);
});
复制代码
12.如何追加或是添加html到元素中:
$('#lal').append('sometext');
13.在创建元素时,如何使用对象字面量(literal)来定义属性
vare=$("",{href:
"#",class:
"a-classanother-class",title:
"..."});
14.如何使用多个属性来进行过滤
//在使用许多相类似的有着不同类型的input元素时,
//这种基于精确度的方法很有用
varelements=$('#someidinput[type=sometype][value=somevalue]').get();
复制代码
15.如何使用jQuery来预加载图像:
jQuery.preloadImages=function(){
for(vari=0;i $("").attr('src',arguments[i]); } }; //用法 $.preloadImages('image1.gif','/path/to/image2.png','some/image3.jpg'); 复制代码 16.如何为任何与选择器相匹配的元素设置事件处理程序: $('button.someClass').live('click',someFunction); //注意,在jQuery1.4.2中,delegate和undelegate选项 //被引入代替live,因为它们提供了更好的上下文支持 //例如,就table来说,以前你会用 $("table").each(function(){ $("td",this).live("hover",function(){ $(this).toggleClass("hover"); }); }); //现在用 $("table").delegate("td","hover",function(){ $(this).toggleClass("hover"); }); 复制代码 17.如何找到一个已经被选中的option元素: $('#someElement').find('option: selected'); 18.如何隐藏一个包含了某个值文本的元素: $("p.value: contains('thetextvalue')").hide(); 19.如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分。 在这种情况下, //查询删除了任何没(: not)有(: has) //包含class为“selected”(.selected)的子节点。 .filter(": not(: has(.selected))") 复制代码 20.如何检测各种浏览器: 检测Safari(if($.browser.safari)), 检测IE6及之后版本(if($.browser.msie&&$.browser.version>6)), 检测IE6及之前版本(if($.browser.msie&&$.browser.version<=6)), 检测FireFox2及之后版本(if($.browser.mozilla&&$.browser.version>='1.8')) 21.任何使用has()来检查某个元素是否包含某个类或是元素: //jQuery1.4.*包含了对这一has方法的支持。 //该方法找出某个元素是否包含了其他另一个元素类或是其他任何的你正在查找并要在其之上进行操作的东东。 $("input").has(".email").addClass("email_icon"); 复制代码 22.如何禁用右键单击上下文菜单: $(document).bind('contextmenu',function(e){ returnfalse; }); 复制代码 23.如何定义一个定制的选择器 $.expr[': '].mycustomselector=function(element,index,meta,stack){ //element-一个DOM元素 //index–栈中的当前循环索引 //meta–有关选择器的元数据 //stack–要循环的所有元素的栈 //如果包含了当前元素就返回true //如果不包含当前元素就返回false}; //定制选择器的用法: $('.someClasses: test').doSomething(); 复制代码 24.如何检查某个元素是否存在 if($('#someDiv').length){ //万岁! ! ! 它存在…… } 复制代码 25.如何使用jQuery来检测右键和左键的鼠标单击两种情况: $("#someelement").live('click',function(e){ if((! $.browser.msie&&e.button==0)||($.browser.msie&&e.button==1)){ alert("LeftMouseButtonClicked"); }elseif(e.button==2){ alert("RightMouseButtonClicked"); } }); 复制代码 26.如何替换串中的词 varel=$('#id'); el.html(el.html().replace(/word/ig,'')); 复制代码 27.如何在一段时间之后自动隐藏或关闭元素(支持1.4版本): //这是1.3.2中我们使用setTimeout来实现的方式 setTimeout(function(){ $('.mydiv').hide('blind',{},500) },5000); //而这是在1.4中可以使用delay()这一功能来实现的方式(这很像是休眠) $(".mydiv").delay(5000).hide('blind',{},500); 复制代码 28.如何把已创建的元素动态地添加到DOM中: varnewDiv=$('
newDiv.attr('id','myNewDiv').appendTo('body');
复制代码
29.如何限制“Text-Area”域中的字符的个数:
jQuery.fn.maxLength=function(max){
returnthis.each(function(){
vartype=this.tagName.toLowerCase();
varinputType=this.type?
this.type.toLowerCase():
null;
if(type=="input"&&inputType=="text"||inputType=="password"){
//ApplythestandardmaxLength
this.maxLength=max;
}elseif(type=="textarea"){
this.onkeypress=function(e){
varob=e||event;
varkeyCode=ob.keyCode;
varhasSelection=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&&!
hasSelection);
};
this.onkeyup=function(){
if(this.value.length>max){
this.value=this.value.substring(0,max);
}
};
}
});
};
//用法
$('#mytextarea').maxLength(500);
复制代码
30.如何jQuery注册和禁用jQuery全局事件
//jQuery注册ajax全局事件ajaxStart,ajaxStop:
$(document).ajaxStart(function(){
$("#background,#progressBar").show();
}).ajaxStop(function(){
$("#background,#progressBar").hide();
});
//ajax请求禁用全局事件:
$.ajax()有个参数global(默认:
true)是否触发全局AJAX事件.设置为false将不会触发全局AJAX事件,如ajaxStart或ajaxStop可用于控制不同的Ajax事件。
复制代码
31.如何在jQuery中克隆一个元素:
varcloned=$('#somediv').clone();
32.在jQuery中如何测试某个元素是否可见
if($(element).is(':
visible')){
//该元素是可见的
}
复制代码
33.如何把一个元素放在屏幕的中心位置:
jQuery.fn.center=function(){
returnthis.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.如何把有着某个特定名称的所有元素的值都放到一个数组中:
vararrInputValues=newArray();
$("input[name='xxx']").each(function(){
arrInputValues.push($(this).val());
});
复制代码
35.如何从元素中除去HTML
(function($){
$.fn.stripHtml=function(){
varregexp=/<("[^"]*"|'[^']*'|[^'">])*>/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);
}
returnthis;
};
//用法:
$('#someDiv').hide().log('divhidden').addClass('someClass');
复制代码
38.如何强制在弹出窗口中打开链接:
$('a.popup').live('click',function(){
varnewwindow=window.open($(this).attr('href'),'','height=200,width=150');
if(window.focus){
newwindow.focus();
}
returnfalse;
});
复制代码
39.如何强制在新的选项卡中打开链接:
$('a.newTab').live('click',function(){
varnewwindow=window.open(this.href);
$(this).target="_blank";
returnfalse;
});
复制代码
40.在jQuery中如何使用.siblings()来选择同辈元素
//不这样做
$('#navli').click(function(){
$('#navli').removeClass('active');
$(this).addClass('active');
});
//替代做法是
$('#navli').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
复制代码
41.如何切换页面上的所有复选框:
vartog=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(”XAxis:
”+e.pageX+”|YAxis”+e.pageY);
});
});
复制代码
44.如何扩展String对象的方法
$.extend(String.prototype,{
isPositiveInteger:
function(){
return(newRegExp(/^[1-9]\d*$/).test(this));
},
isInteger:
function(){
return(newRegExp(/^\d+$/).test(this));
},
isNumber:
function(value,element){
return(newRegExp(/^-?
(?
:
\d+|\d{1,3}(?
:
\d{3})+)(?
:
\.\d+)?
$/).test(this));
},
trim:
function(){
returnthis.replace(/(^\s*)|(\s*$)|\r|\n/g,"");
},
trans:
function(){
returnthis.replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
},
replaceAll:
function(os,ns){
returnthis.replace(newRegExp(os,"gm"),ns);
},
skipChar:
function(ch){
if(!
this||this.length===0){return'';}
if(this.charAt(0)===ch){returnthis.substring
(1).skipChar(ch);}
returnthis;
},
isValidPwd:
function(){
return(newRegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this));
},
isValidMail:
function(){
return(newRegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 50 必备 实用 jQuery 代码