jQuery第十一章

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery第十一章相关的知识,希望对你有一定的参考价值。

第十一章

一、jQuery性能优化

1.使用最新版本的jQuery类库。

2.使用合适的选择器

(1)$(“#id”) :使用id来定位DOM元素是最佳提高性能的方式。

(2)$(“p”) :标签选择器的性能也不错。

(3)$(“.class”) :这种方法比较复杂

(4)$(“[attribute = value]”) :利用属性来定位DOM元素会使用DOM搜索的方式来达到效果。

(5)$(“ : hidden”) :利用伪选择器会带来较大的性能问题。

3.缓存对象。

4.循环DOM操作。

5.数组方式使用jQuery对象。

6.事件代理

7.将你的代码转化成jQuery插件

8.使用join()来拼接字符串

9.合理利用html5的Data属性

10.尽量使用原生的javascript方法。

二、jQuery技巧

1.禁用界面的右键菜单

$(document).ready(function(){

         $(document).bind("contextmenu",function(e){

                  return false;

         });

});

 

2.新窗口打开页面

$(document).ready(function(){

         //例子1:herf = "http://"的超链接将会在新窗口打开链接

         $(‘a[href^="http://"]‘).attr("target","_blank");

 

         //例子2:rel = "external"的超链接将会在新窗口打开链接

         $("a[rel$=‘external‘]").click(function(){

                  this.target = "_blank";

         });

});

//use

<a href = "http://www.cssrain.cn" rel = "external"> open link </a>

 

3.判断浏览器类型

$(document).ready(function(){

         //Firefox 2 and above

         if($.browser.mozila && $.browser.version >="1.8"){

                  // do something

         }

 

         //Safari

         if($.browser.safari){

                  // do something

         }

 

         // Chrome

         if($.browser.Chrome){

                  // do something

         }

 

         //Opera

         if ($.browser.opera) {

                  // do something

         }

 

         //IE6 and below

         if($.browser.msie && $.browser.version <= 6 ){

                  // do something

         }

 

         // anything above IE6

         if($.browser.msie && $.browser.version > 6){

                  // do something

         }

});

 

4.输入框文字获取和失去焦点

         $(document).ready(function(){

                  $("input.text1").val("Enter your search text here");

                  textFill($(‘input.text1‘));

         });

         function textFill(input){ //input focus text function

                  var originalvalue = input.val();

                  input.focus(function(){

                  if($.trim(input.val()) == originalvalue ){

                          input.val(‘‘);

                  }

                  }).blur( function(){

                          if($.trim(input.val()) == ‘‘ ){

                                   input.val(originalvalue);

                          }

                  });

         }

 

5.返回头部滑动动画

         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;

         });

 

6.获取鼠标位置

         $(document).ready(function(){

                  $(document).mousemove(function(){

                          $(‘#XY‘).html("X : " + e.pageX + "| Y : " + e.pageY);

                  });

         });

 

7.判断元素是否存在

         $(document).ready(function(){

                  if($("#id").length){

                          // do something

                  }

         });

 

8.点击div也可以跳转

         $("div").click(function(){

                  window.location = $(this).find("a").attr("href");

                  return false;

         });

         //use

         <div><a href = "index.html" >home</a></div>

 

9.根据浏览器的大小添加不同的样式

         $(document).ready(function(){

                  function checkWindowSize(){

                          if($(window).width()>1200){

                                   $("body").addClass("large");

                          }else{

                                   $("body").removeClass("large");

                          }

                  }

                  $(window).resize(checkWindowSize);

         });

 

10.设置div在屏幕中央

         $(document).ready(function(){

                  jQuery.fn.center = function(){

                          this.css("position","absolute");

                          this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+"px");

                           this.css("top",($(window).width()-this.width())/2+$(window).scrollLeft()+"px");

                          return this;

                  }

                  //use

                  $("#XY").center();

         });

 

11.创建自己的选择器

         $(document).ready(function(){

                  $.extend($.expr[‘:‘],{

                          moreThen500px:function(a){

                                   return $(a).width()>500;

                          }

                  });

                  $(‘.box:moreThen500px‘).click(function(){

                          //...

                  });

         });

 

12.关闭所有动画效果

         $(document).ready(function(){

                  jQuery.fx.off = true;

         });

 

13.检测鼠标的右键和左键

         $(document).ready(function(){

                  $("#XY").mousedown(function(e){

                          alert(e.which)  //1 = 鼠标左键;2 = 鼠标中键;3 = 鼠标右键

                  })

         });

 

14.回车提交表单

         $(document).ready(function(){

                  $("input").keyup(function(e){

                          if(e.which == ‘13‘){

                                   alert("回车提交!")

                          }

                  })

         });

 

15.设置全局Ajax参数

         $("#load").ajaxStart(function(){

                  showLoading();   //显示loading

                  disableButtons();

         });

         $("#load").ajaxComplete(function(){

                  hideLoading();   //隐藏loading

                  enableButtons();   //启用按钮

         });

 

16.获取选中的下拉框

         $(‘#someElement‘).find(‘option : selected‘);

         $(‘#someElement option : selected‘);

 

17.切换复选框

         var tog = false;

         $(‘button‘).click(function(){

                  $("input[type=checkbox]").attr("checked",!tog);

                  tog = !tog;

         });

 

18.使用siblis()来选择同辈元素

         //不这样做

         $("#nav li").click(function(){

                  $("#nav li").removeClass("active");

                  $(this).addClass("active");

         });

         //替代做法是

         $("#nav li").click(function(){

                  $(this).addClass("active").siblings().removeClass("active");

         });

 

19.个性化链接

         $(document).ready(function(){

                  $("a[href$=‘pdf‘]").addClass(‘pdf‘);

                  $("a[href$=‘zip‘]").addClass(‘zip‘);

                  $("a[href$=‘psd‘]").addClass(‘psd‘);

         });

 

20.在一段时间之后都自动隐藏或关闭元素

         //这是1.3.2中我们使用setTimeout来实现的方式

         setTimeout(function(){

                  $("div").fadeIn(400)

         },3000);

         //而在1.4之后的版本可以使用delay()这一功能来实现的方式

         $("div").slideUp(300).delay(3000).fadeIn(400);

 

21.使用Firefox和Firebug来记录事件日志

         // $("$someDiv").log(‘div‘);

         jQuery.log = jQuery.fn.log = function(msg){

                  if(console){

                          console.log("%s: %o",msg,this);

                  }

                  return this;

         };

 

22.为任何与选择器相匹配的元素绑定事件

         //为table里面的td元素绑定click事件,不管td元素是一直存在还是动态创建的

         //jQuery 1.4.2之前使用的方式

         $("table").each(function(){

                  $("td",this).live("click",function(){

                          $(this).toggleClass("hover");

                  });

         });

         // jQuery 1.4.2使用的方式

         $("table").delegate("td","click",function(){

                  $(this).toggleClass("hover");

         });

         //jQuery1.7.1使用的方式

         $("table").on("click","td",function(){

                  $(this).toggleClass("hover");

         });

23.使用css钩子

         jQuery.cssHooks是1.4.3新增的方法,当你定义新的CSS Hooks时实际上定义的是getter和setter方法,比如,border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器,需要增加属性前缀,比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSS Hooks将其封装成统一的接口borderRadius,而不是一一设置CSS属性。代码如下:

         $cssHooks[‘borderRadius‘] = {

                  get:function(elem,computed,extra){

                          //Depending on the browser , read the value of

                          //-moz-border-radius, -webkit-border-radius or border-raidus

                  },

                  set:function(elem,value){

                          //set the appropriate CSS3 property

                  }

         };

         //use;

         $("#rect").css("borderRadius",5);

 

24.$.(proxy)的使用

         使用回调方法的缺点之一就是当执行类库中的方法后,上下文对象被设置到另外一个元素,比如:

         <div id = "panel" style = "display:none">

                  <button>Close</button>

         </div>

         执行下面的代码:

         $("#panel").fadeIn(function(){

                  $("#panel button").click(function(){

                          $(this).fadeOut();

                  });

         });

         你将遇到问题,button元素会消失,而不是panel元素。可以使用$.proxy方法解决这个问题,代码如下:

         $("#panel").fadeIn(function(){

                  //using $.proxy :

                  $("#panle button").click($.proxy(function(){

                          //this指向#panel

                          $(this).fadeOut();

                  },this));

         });

 

25.限制Text-Area域中的字符的个数

         jQuery.fn.maxLength = function(){

                  this.each(function(){

                          var type = this.tagName.toLowerCase();

                          var inputType = this.type?this.type.toLowerCase():null;

                          if(type == "input" && inputType == "text" || inputType == "password"){

                                   //应用标准的maxLength

                                   this.maxLength = max;

                          } else if(type = "textarea"){

                                   this.onkeypress = function(e){

                                            var ob = e||event;

                                            var keyCode = ob.keyCode;

                                            var hasSelection = 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 && !ob.altKey && !hasSelection);                       

                                   };

                                   this.onkeyup = function(){

                                            if(this.value.length > max){

                                                     this.value = this.value.substring(0,max);

                                            }

                                   };

                          }

                  });

         };

         //use

         $("#mytextarea").maxLength(10);

 

26.本地存储

         本地存储是HTML 5 提供的特性之一。它提供了非常简单的API接口,便于添加你的数据到localStorage全局属性之中,代码如下:

         localStorage.someData = "this is going to be saved";

 

27.解析json数据时报parseError错误

         jQuery在1.4版本后,采用了更为严格的json解析方式,即所有内容都必须要有双引号,如果升级jQuery之后,ajax加载json报错,有可能就是这个原因。比如:

         //1.4之前的版本,key 没引号,这样没问题

         {

                  key:"28CATEGORY",

                  status :"0"

         }      

         但升级成jQuery1.4后,都必须加上双引号,格式如下:

         {

                  "key":"28CATEGORY",

                  "status":"0"

         }

 

28.从元素中除去HTML

         (function($){

         $.fn.stripHtml = function(){

                  var regexp = /<("[^"]*"|‘[^‘]*‘|[^‘">])*>/gi;

                  this.each(function(){

                          $(this).html($(this).html().replace(regexp,‘‘));

                  });

                  return $(this);

         }

         })(jQuery);

         //用法:

         $(‘div‘).stripHtml();

 

29.扩展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(/&lt;/g,‘<‘).replace(/&gt;/g,‘>‘).replace(/&quot;/g,‘"‘);

                  },

                  tran: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===0){return ‘‘;}

                          if(this.charAt(0)===ch){return this.substring(1).skipChar(ch);}

                          return this;

                  },

                  isValidMail: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; 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;

                  }

         });

         // use

         $("input").val().isInteger();

以上是关于jQuery第十一章的主要内容,如果未能解决你的问题,请参考以下文章

python全栈开发学习目录

第十一章

第十一章 网络编程

java类包第十一章

HTML 第十一章总结

第十一章 线程