jquery常用小功能总结讲解.docx
- 文档编号:26247221
- 上传时间:2023-06-17
- 格式:DOCX
- 页数:5
- 大小:17.09KB
jquery常用小功能总结讲解.docx
《jquery常用小功能总结讲解.docx》由会员分享,可在线阅读,更多相关《jquery常用小功能总结讲解.docx(5页珍藏版)》请在冰豆网上搜索。
jquery常用小功能总结讲解
1.禁止右键点击
$(document).ready(function(){$(document).bind("contextmenu",function(e){returnfalse;});});
2.隐藏搜索文本框文字
点击时隐藏搜索栏中的文字
$(document).ready(function(){$("input.text1").val("Enteryoursearchtexthere");textFill($('input.text1'));});functiontextFill(input){//inputfocustextfunctionvaroriginalvalue=input.val();input.focus(function(){if($.trim(input.val())==originalvalue){input.val('');}});input.blur(function(){if($.trim(input.val())==''){input.val(originalvalue);}});}
3.在新窗口中打开链接
页面中所有链接都在新窗口中打开
$(document).ready(function(){//Example1:
Everylinkwillopeninanewwindow$('a[href^="http:
//"]').attr("target","_blank");//Example2:
Linkswiththerel="external"attributewillonlyopeninanewwindow$('a[@rel$='external']').click(function(){this.target="_blank";});});//howtouse
4.检测浏览器
检测客户端使用的什么浏览器
$(document).ready(function(){//TargetFirefox2andaboveif($.browser.mozilla&&$.browser.version>="1.8"){//dosomething}//TargetSafariif($.browser.safari){//dosomething}//TargetChromeif($.browser.chrome){//dosomething}//TargetCaminoif($.browser.camino){//dosomething}//TargetOperaif($.browser.opera){//dosomething}//TargetIE6andbelowif($.browser.msie&&$.browser.version<=6){//dosomething}//TargetanythingaboveIE6if($.browser.msie&&$.browser.version>6){//dosomething}});
5.预加载图片
预加载图片,适用网站图片很多的网站
$(document).ready(function(){jQuery.preloadImages=function(){for(vari=0;i ").attr("src",arguments[i]);}}//howtouse$.preloadImages("image1.jpg");}); 6.页面样式切换 $(document).ready(function(){$("a.Styleswitcher").click(function(){//swicththeLINKRELattributewiththevalueinARELattribute$('link[rel=stylesheet]').attr('href',$(this).attr('rel'));});//howtouse//placethisinyourheader 7.列高度相同 如果使用了两个CSS列,使用此种方式可以是两列的高度相同。 $(document).ready(function(){functionequalHeight(group){tallest=0;group.each(function(){thisHeight=$(this).height();if(thisHeight>tallest){tallest=thisHeight;}});group.height(tallest);}//howtouse$(document).ready(function(){equalHeight($(".left"));equalHeight($(".right"));});}); 8.动态控制页面字体大小 用户可以改变页面字体大小 $(document).ready(function(){//Resetthefontsize(backtodefault)varoriginalFontSize=$('html').css('font-size');$(".resetFont").click(function(){$('html').css('font-size',originalFontSize);});//Increasethefontsize(biggerfont0$(".increaseFont").click(function(){varcurrentFontSize=$('html').css('font-size');varcurrentFontSizeNum=parseFloat(currentFontSize,10);varnewFontSize=currentFontSizeNum*1.2;$('html').css('font-size',newFontSize);returnfalse;});//Decreasethefontsize(smallerfont)$(".decreaseFont").click(function(){varcurrentFontSize=$('html').css('font-size');varcurrentFontSizeNum=parseFloat(currentFontSize,10);varnewFontSize=currentFontSizeNum*0.8;$('html').css('font-size',newFontSize);returnfalse;});}); 9.返回页面顶部功能 网站很常用的功能,增强用户体验 $(document).ready(function(){$('a[href*=#]').click(function(){if(location.pathname.replace(/^\//,'')==this.pathname.replace(/^\//,'')&&location.hostname==this.hostname){var$target=$(this.hash);$target=$target.length&&$target||$('[name='+this.hash.slice (1)+']');if($target.length){vartargetOffset=$target.offset().top;$('html,body').animate({scrollTop: targetOffset},900);returnfalse;}}});//howtouse//placethiswhereyouwanttoscrollto 11.获得鼠标指针XY值 $(document).ready(function(){$().mousemove(function(e){//displaythexandyaxisvaluesinsidethedivwiththeidXY$('#XY').html("XAxis: "+e.pageX+"|YAxis"+e.pageY);});//howtouse
12.验证元素是否为空
$(document).ready(function(){if($('#id').html()){//dosomething}});
13.替换元素
$(document).ready(function(){$('#id').replaceWith('
14.jQuery延时加载功能
$(document).ready(function(){window.setTimeout(function(){//dosomething},1000);});
15.移除单词功能
$(document).ready(function(){varel=$('#id');el.html(el.html().replace(/word/ig,""));});
16.验证元素是否存在于jquery对象集合中
$(document).ready(function(){if($('#id').length){//dosomething}});
17.使整个DIV可点击
$(document).ready(function(){$("div").click(function(){//gettheurlfromhrefattributeandlaunchtheurlwindow.location=$(this).find("a").attr("href");returnfalse;});//howtouse
18.ID与Class之间转换.
当改变Window大小时,在ID与Class之间切换
$(document).ready(function(){functioncheckWindowSize(){if($(window).width()>1200){$('body').addClass('large');}else{$('body').removeClass('large');}}$(window).resize(checkWindowSize);});
19.克隆对象
$(document).ready(function(){varcloned=$('#id').clone();//howtouse
20.使元素居屏幕中间位置
$(document).ready(function(){jQuery.fn.center=function(){this.css("position","absolute");this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+"px");this.css("left",($(window).width()-this.width())/2+$(window).scrollLeft()+"px");returnthis;}$("#id").center();});
21.写自己的选择器
$(document).ready(function(){$.extend($.expr[':
'],{moreThen1000px:
function(a){return$(a).width()>1000;}});$('.box:
moreThen1000px').click(function(){//creatingasimplejsalertboxalert('Theelementthatyouhaveclickedisover1000pixelswide');});});
22.统计元素个数
$(document).ready(function(){$("p").size();});
23.使用自己的Bullets
$(document).ready(function(){$("ul").addClass("Replaced");$("ul>li").prepend("‒");//howtouseul.Replaced{list-style:
none;}});
24.引用Google主机上的Jquery类库
//Example1 (thebestandfastestway) 25.禁用Jquery(动画)效果 $(document).ready(function(){jQuery.fx.off=true;}); 26.与其他Javascript类库冲突解决方案 $(document).ready(function(){var$jq=jQuery.noConflict();$jq('#id').show();});
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 常用 功能 总结 讲解