Javascript小技能总结(推荐)
废话不多说,直接上干货。。
具体代码如下所示:
/* @@截取字符串长度,汉字算2个字符 @@return[string]+'...' */ varsubString=function(str,len){ varnewLength=0; varnewStr=""; varchineseRegex=/[^\x00-\xff]/g; varsingleChar=""; varstrLength=str.replace(chineseRegex,"**").length; for(vari=0;i<strLength;i++){ singleChar=str.charAt(i).toString(); if(singleChar.match(chineseRegex)!=null){ newLength+=2; }else{ newLength++; } if(newLength>len){ break; } newStr+=singleChar; } if(strLength>len){ newStr+="..."; } returnnewStr; } -------------------------------------------------------------------------------- /* @@对可见元素进行隐藏 @@:visible判断是否为课件元素 */ functionclose_window(){ varflag=false; $(".dialog_con").each(function(){ if($(this).is(":visible")){ flag=true; } }) if(flag==true){ $(".dialog_con").hide(); $(".dialogbox").hide(); }else{ window.android.callAndroidFinish(); } } -------------------------------------------------------------------------------- /* @@对持有不同设备的设备引用不同的样式 @@if判断是否某种设备 */ <scripttype="text/javascript"> if(/(iPad|iPod|iOS)/i.test(navigator.userAgent)){ setActiveStyleSheet("pad.css"); }elseif(/(Android)/i.test(navigator.userAgent)){ setActiveStyleSheet("common.css"); }elseif(/(iPhone6)/i.test(navigator.userAgent)){ setActiveStyleSheet("iphone6.css"); } functionsetActiveStyleSheet(filename){ document.write("<linkhref="+filename+"rel=stylesheet>"); } </script> -------------------------------------------------------------------------------- /* @@回到顶部动画 @@ */ $('a.top').click(function(e){ e.preventDefault(); $(document.body).animate({scrollTop:0},800); }); -------------------------------------------------------------------------------- /* @@检查图片是否加载完毕 @@有时你或许要检查图片是否完全加载完毕,才能在脚本中进行后续操作: @@你也可以通过把img标签替换成ID或class,来检查特定图片是否加载完成。 */ $('img').load(function(){ console.log('imageloadsuccessful'); }); -------------------------------------------------------------------------------- /* @@动修复损坏的图片 @@如果你发现自己网站的图片链接挂了,一个一个替换很麻烦。这段简单的代码可以帮上大忙; @@即使你没有任何损坏的链接,增加这段代码也不会有什么影响。 */ $('img').on('error',function(){ $(this).prop('src','img/broken.png'); }); -------------------------------------------------------------------------------- /* @@Hover上的Class切换 @@如果用户的鼠标悬停在页面上某个可点击元素时,你想要改变这个元素的视觉表现。可以使用下面这段代码,当用户悬停时,为该元素增加一个class;当用户鼠标离开后移除这个class: */ $('.btn').hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); -----------或--------- $('.btn').hover(function(){ $(this).toggleClass('hover'); }); -------------------------------------------------------------------------------- /* @@禁用input字段 @@有时你也许想让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认“我已经阅读该条款”的复选框)。增加disabledattribute到你的input,就可以实现自己想要的效果 */ $('input[type="submit"]').prop('disabled',true); $('input[type="submit"]').prop('disabled',false); -------------------------------------------------------------------------------- /* @@停止链接加载 @@有时你不想链接跳转到某个页面或重加载该页面,而希望可以做一些其他事情,比如触发其他脚本。下面的代码是禁止默认行为的一个小诀窍 */ $('a.no-link').click(function(e){ e.preventDefault(); }); -------------------------------------------------------------------------------- /* @@淡入淡出/滑动开关 @@淡入淡出与滑动是我们经常使用jQuery做成的动画效果。或许你只是想在用户点击某物时展现一个元素,使用fadeIn和slideDown都很棒。但如果想让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成 */ //Fade $('.btn').click(function(){ $('.element').fadeToggle('slow'); }); //Toggle $('.btn').click(function(){ $('.element').slideToggle('slow'); }); -------------------------------------------------------------------------------- /* @@简单的手风琴效果 @@这是一个快速实现手风琴效果的简单方法 */ //Closeallpanels $('#accordion').find('.content').hide(); //Accordion $('#accordion').find('.accordion-header').click(function(){ varnext=$(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); returnfalse; }); -------------------------------------------------------------------------------- /* @@使两个Div高度一样 @@有时你也许想让两个div拥有同样高度,不管它们里面有什么内容: */ $('.div').css('min-height',$('.main-div').height()); 该例设置了min-height,意味着它可以比主要div更大,但永远不能更小。但有一个更加灵活的方法是遍历一组元素的设置,然后将高度设为元素中的最高值: var$columns=$('.column'); varheight=0; $columns.each(function(){ if($(this).height()>height){ height=$(this).height(); } }); $columns.height(height); 如果你想让所有列都有相同高度: var$rows=$('.same-height-columns'); $rows.each(function(){ $(this).find('.column').height($(this).height()); }); -------------------------------------------------------------------------------- /* @@在新标签/窗口打开站外链接 @@在一个新标签或者新窗口中打开外置链接,并确保站内链接会在相同的标签或窗口中打开: */ $('a[href^="http"]').attr('target','_blank'); $('a[href^="//"]').attr('target','_blank'); $('a[href^="'+window.location.origin+'"]').attr('target','_self'); -------------------------------------------------------------------------------- /* @@通过文本找到元素 @@通过使用jQuery中的contains()选择器,你可以找到某个元素中的文本。如果文本不存在,该元素将会隐藏: */ varsearch=$('#search').val(); $('div:not(:contains("'+search+'"))').hide(); -------------------------------------------------------------------------------- /* @@视觉改变触发 @@当用户焦点在另外一个标签上,或重新回到标签时,触发JavaScript: */ $(document).on('visibilitychange',function(e){ if(e.target.visibilityState==="visible"){ console.log('Tabisnowinview!'); }elseif(e.target.visibilityState==="hidden"){ console.log('Tabisnowhidden!'); } }); -------------------------------------------------------------------------------- /* @@Ajax调用的错误处理 @@当某次Ajax调用返回404或500错误,就会执行错误处理。但如果没有定义该处理,其他jQuery代码或许会停止工作。可以通过下面这段代码定义一个全局Ajax错误处理 */ $(document).ajaxError(function(e,xhr,settings,error){ console.log(error); }); -------------------------------------------------------------------------------- /* @@插件链式调用 @@jQuery支持链式调用插件,以减缓反复查询DOM,并创建多个jQuery对象。看下面示例代码 */ $('#elem').show(); $('#elem').html('bla'); $('#elem').otherStuff(); 上面这段代码,可以通过链式操作大大改进: $('#elem').show().html('bla').otherStuff(); 还有另外一种方法,把元素缓存在变量中(前缀是$): var$elem=$('#elem'); $elem.hide(); $elem.html('bla'); $elem.otherStuff(); -------------------------------------------------------------------------------- /* @@Jq遍历全选全不选反选 @@ */ //全选全不选 $('#checkAll').click(function(){ //判断是否被选中 varbischecked=$('#checkAll').is(':checked'); varfruit=$('input[name="check"]'); bischecked?fruit.attr('checked',true):fruit.attr('checked',false); }); //反选遍历checkbox如果当前为选中就设置为不选中反之相同 $("#tabVouchListtr").each(function(){ if($("td:eq(0)input[name='check']",$(this)).is(':checked')){ $(this).attr('checked',false); }else{ $(this).attr('checked',true); } });
以上所述是小编给大家提供的js小技巧总结,希望对大家有所帮助!