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(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
},
tran:function(){
return this.replace(/</g,'<').replace(/>/g,'>').replace(/"/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第十一章的更多相关文章
- 第二十一章 Django的分页与cookie
第二十一章 Django的分页与cookie 第一课 模板 1.模板的继承 在Template目录下新建模板master.html <!DOCTYPE html> <html lan ...
- Flask 教程 第二十一章:用户通知
本文翻译自The Flask Mega-Tutorial Part XXI: User Notifications 这是Flask Mega-Tutorial系列的第二十一章,我将添加一个私有消息功能 ...
- CPrimerPlus第十一章中的“选择排序算法”学习
C Primer Plus第十一章字符串排序程序11.25中,涉及到“选择排序算法”,这也是找工作笔试或面试可能会遇到的题目,下面谈谈自己的理解. 举个例子:对数组num[5]={3,5,2,1,4} ...
- <构建之法>第十一章、十二章有感
十一章:软件设计与实现 工作时要懂得平衡进度和质量.我一直有一个困扰:像我们团队这次做 男神女神配 社区交友网,我负责主页的设计及内容模块,有个队友负责网站的注册和登录模块,有个队友负责搜索模块,有个 ...
- sql 入门经典(第五版) Ryan Stephens 学习笔记 (第六,七,八,九,十章,十一章,十二章)
第六章: 管理数据库事务 事务 是 由第五章 数据操作语言完成的 DML ,是对数据库锁做的一个操作或者修改. 所有事务都有开始和结束 事务可以被保存和撤销 如果事务在中途失败,事务中的任何部分都不 ...
- 第十一章 TClientDataSet
第十一章 TClientDataSet 与TTable.TQuery一样,TClientDataSet也是从TDataSet继承下来的,它通常用于多层体系结构的客户端.TClientDataSet最大 ...
- 第十一章、认识与学习BASH
第十一章.认识与学习 BASH 最近升级日期:2009/08/25 1. 认识 BASH 这个 Shell 1.1 硬件.核心与 Shell 1.2 为何要学文字接口的 shell 1.3 系统的合法 ...
- [Effective Java]第十一章 序列化
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- EFFECTIVE JAVA 第十一章 系列化
EFFECTIVE JAVA 第十一章 系列化(将一个对象编码成一个字节流) 74.谨慎地实现Serializable接口 *实现Serializable接口付出的代价就是大大降低了“改变这个类 ...
随机推荐
- sequekize
关于sequelize的准备工作这里不再赘述. 一.引入sequelize模块 var Sequelize = require('sequelize'); 二.连接数据库 var sequelize ...
- soa服务治理-dubbo
dubbo官网:http://dubbo.io/Home-zh.htm 学习点: 1. 日志的配置
- python 数据聚合与分组
前面讲完了字符处理,但对数据进行整体性的聚合运算以及分组操作也是数据分析的重要内容. 通过数据的聚合与分组,我们能更容易的发现隐藏在数据中的规律. 数据分组 数据的分组核心思想是:拆分-组织-合并 首 ...
- VMware安装ubuntu,通过/mnt/hgfs 挂载共享Windows系统文件夹
网上各种相关的配置说明,但是都没一个完整的,在这里楼主结合实战亲测,这一整套包含各种情况 1.安装VMware tools 2.解压到任意一个文件夹 tar -xzvf VMwareTools**** ...
- hdu1032
#include <iostream> using namespace std; int main() { int a,b,t,i,max; while(cin >> a &g ...
- ZentaoPHP
1.框架文档http://devel.cnezsoft.com/book/zentaophphelp/about-10.html zentaoPHP二次开发文档http://devel.cnezsof ...
- ASP.NET网站怎么发布 Web项目程序怎么发布部署(暂时收藏)
Web程序如何发布部署呢.网站项目做好了,需要发布出来,提交给客户,装上服务器.那怎么在ASP.NET开发环境中将网站程序发布出来呢 ^_^ 工具/原料 Visual Studio 2010 ( ...
- 去掉UItableview section headerview黏性
UITabelView在style为plain时,在上拉是section始终粘在最顶上而不是跟随滚动而消失或者出现 可以通过设置UIEdgeInsetsMake: - (void)scrollView ...
- java通过JDBC链接SQLServer2012 (含1433端口打通)
首先,在连接数据库之前必须保证SQL Server 2012是采用SQL Server身份验证方式而不是windows身份验证方式.如果在安装时选用了后者,则重新设置如下: http://blog.1 ...
- linux kernel module
#include <linux/init.h>#include <linux/module.h>#include <linux/kernel.h> static i ...