第十一章

一、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第十一章的更多相关文章

  1. 第二十一章 Django的分页与cookie

    第二十一章 Django的分页与cookie 第一课 模板 1.模板的继承 在Template目录下新建模板master.html <!DOCTYPE html> <html lan ...

  2. Flask 教程 第二十一章:用户通知

    本文翻译自The Flask Mega-Tutorial Part XXI: User Notifications 这是Flask Mega-Tutorial系列的第二十一章,我将添加一个私有消息功能 ...

  3. CPrimerPlus第十一章中的“选择排序算法”学习

    C Primer Plus第十一章字符串排序程序11.25中,涉及到“选择排序算法”,这也是找工作笔试或面试可能会遇到的题目,下面谈谈自己的理解. 举个例子:对数组num[5]={3,5,2,1,4} ...

  4. <构建之法>第十一章、十二章有感

    十一章:软件设计与实现 工作时要懂得平衡进度和质量.我一直有一个困扰:像我们团队这次做 男神女神配 社区交友网,我负责主页的设计及内容模块,有个队友负责网站的注册和登录模块,有个队友负责搜索模块,有个 ...

  5. sql 入门经典(第五版) Ryan Stephens 学习笔记 (第六,七,八,九,十章,十一章,十二章)

    第六章: 管理数据库事务 事务 是 由第五章 数据操作语言完成的  DML ,是对数据库锁做的一个操作或者修改. 所有事务都有开始和结束 事务可以被保存和撤销 如果事务在中途失败,事务中的任何部分都不 ...

  6. 第十一章 TClientDataSet

    第十一章 TClientDataSet 与TTable.TQuery一样,TClientDataSet也是从TDataSet继承下来的,它通常用于多层体系结构的客户端.TClientDataSet最大 ...

  7. 第十一章、认识与学习BASH

    第十一章.认识与学习 BASH 最近升级日期:2009/08/25 1. 认识 BASH 这个 Shell 1.1 硬件.核心与 Shell 1.2 为何要学文字接口的 shell 1.3 系统的合法 ...

  8. [Effective Java]第十一章 序列化

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. EFFECTIVE JAVA 第十一章 系列化

    EFFECTIVE  JAVA  第十一章  系列化(将一个对象编码成一个字节流) 74.谨慎地实现Serializable接口 *实现Serializable接口付出的代价就是大大降低了“改变这个类 ...

随机推荐

  1. 认识div在排版中的作用

    在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器. 语法: <div>-</div&g ...

  2. 百度的hao123.com篡改浏览器首页,解决办法

    快捷方式右键找到chrome.exe, 把chorme.exe修改成别的名字例如 chromeFuckHao123.exe 就OK了. hao123是用病毒的形式查找chrome.exe然后进程注入的 ...

  3. windows 下安装Python

    一.下载 官网地址:https://www.python.org/,64位的版本 二.安装 32位和64位的版本安装起来没有区别,双击打开后,第一步要记得勾上add python to Path 选项 ...

  4. C# 中 重载,重写,隐藏的区别

    重载: 就是写多个同名方法,参数个数不同或类型不同或返回值不同 重写:子类中实现的方法必须加override关键词   普通非抽象父类需要virtual 抽象类里面抽象方法abstract 接口的实现 ...

  5. 【angular】angular实现简单的tab切换

    html: <div class="list-group" ng-repeat="tab in menuList"> <a href=&quo ...

  6. asp.net mvc + mysql + ef6

    1.通过NuGet包管理器安装:EntityFramework6.1.3.MySql.Data.Entity6.9.9 2.添加新建项→ADO.NET实体对象模型(命名MyContext)→空Code ...

  7. hibernate内部测试题总结

    在Hibernate中,关于脏检查和刷新缓存说法正确的是(ab ). A.当事务提交时,会发生脏检查 B.Session的flush( )方法是刷新缓存的方法 C.在执行Session的commit( ...

  8. BZOJ 1303 【CQOI2009】中位数图

    baidu了一下bzoj水题列表...找到这道题.   题目大意:给定一个数t,在给定的一段包含1-n的序列中找出多少个长度为奇数子序列的中位数为t. 第一眼没看数据范围,于是开心的打了一个O(n^3 ...

  9. laravel-1 安装.配置

    听说laravel一直是一个很牛B的框架,之前接触过tp ci 也还只是一个小白,具体的核心没搞过,但对于我来说,框架都是拿来用的,会用即可. 以下内容为观看视频和自己查看资料后的整理,方便大家和自己 ...

  10. javascriptDOM对象之scrollTo()方法,滚动到页面指定位置

    scrollTo是一个神奇的方法,常用于篇幅过长的页面,制作一个回顶部的按钮,我这里简单的实现以下 当然没有一个过渡的js效果 scrollTo(xpos,ypos) 参数 描述 xpos 必需.要在 ...