【锋利的Jquery】读书笔记十一
项目进度太赶,天天公司加班12小时,没时间看书充电。2016年再更新一篇吧。现在凌晨2点36分。
2017加油哦
jquery合适的选择器
$("#id")
无疑是最佳提高性能的方法
如果不能直接找到你要的元素
那么可以考虑find()
$("p").find("a")
之外还有
标签选择器 $("p")
属性选择器$("[attr=value]");
$(":hidden")建议大家不要使用 性能不好,
如果要用可以这样
$("#div").find(":hidden");
缓存对象
$("#traffic_light input.on").bind()
$("#traffic_light input.on").css()
$("#traffic_light input.on").fadeIn()
导致jquery每次都要创建一个选择器 查找DOM 创建多个jqeury对象
建议
var $traffic = $("#traffic_light input.on");缓存对象
$traffic.bind().css().fadeIn();
进阶用法:
如果缓存到全局环境中
window.$my={
head:$("head"),
traffic:$("#traffic_light input.on"),
traffic_button:$("#traffic_button")
}
function do_something(){
var script = document.createElement("script");
$my.head.append(script);
$my.cool_result = $("#some_ul li");
$my.traffic_button.css("border-color","aquamarine");
}
记住永远不要让相同的选择器再你的代码中出现多次;
循环时的DOM操作
var top = [] 假如有100个独一无二的字符串
$mylist =$("#mylist");
for (var i = 0 l=top_lenght ; i <l; i++) {
top += "<li>"+top_list[i]+"</li>"
}
$mylist.append(html);
append不可以放for循环里面 top应该提前创建好
数组方式用jqeury对象
建议使用for 或 while处理 比 $.each()效果更好
var array = new Array()
for (var i = 0; i < array.length; i++) {
array[i] = i;
}
另外检测数组长度用
if($("#div").length);返回true 或false;
事件代理
动态绑定事件
$("#myTable").on("click","td",function(){
$(this).css("background","royalblue")
})
讲你的代码转换成jquery插件
(function(){
jQuery.fn.youPlug=function(){
//do smoething
return this;
}
})(jQuery)
使用join拼接字符串
var top = [] 假如有100个独一无二的字符串
$mylist =$("#mylist");
for (var i = 0 l=top_lenght ; i <l; i++) {
top[i] = "<li>"+top_list[i]+"</li>"
}
$mylist.append(top.join(""));
合理利用HTML5的Data属性
<body>
<div id="dl" data-role="page" data-last-value="43" data-options='{"name":"jack"}'></div>
<script type="text/javascript">
$("#dl").data("role") //page
</script>
</body>
扩展string对象的方法 正则表单提交
<div>
<input type="text" /><button >check</button>
</div>
<script>
$.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(/(^\s*)|(\s*$)|\r|\n/g, "");
},
trans: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;
},
isValidPwd: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;
}
}); $("button").click(function(){
alert( $("input").val().isInteger() );
});
</script>
【锋利的Jquery】读书笔记十一的更多相关文章
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- <锋利的jQuery>读书笔记
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
随机推荐
- 利用Matlab生成一个网格化的三维三轴椭球面(生成直角坐标)
代码很简单,a,b,c分别为椭球的三轴轴长,a=b=c时得到的是三维球面,a=b!=c时得到的是三维椭球面,a!=b且a!=c且b!=c时得到的是三维旋转椭球面 %生成一个笛卡尔坐标系下三轴椭球表面的 ...
- 分页存储过程实现-SqlServer
一个通用的分页存储过程实现-SqlServer(附上sql源码,一键执行即刻搭建运行环境) 使用前提 查询表必须有ID字段,且该字段不能重复,建议为自增主键 背景 如果使用ADO.NET进行开发,在查 ...
- lex与yacc快速入门
lex与yacc快速入门 [原创] 声明:原创文章,转载注明出处http://www.cnblogs.com/lucasysfeng/ 联系作者:lucasysfeng@gmail.com 第一节.l ...
- javascript设计模式系列
javascript设计模式系列 创建型: 1.抽象工厂模式(Abstract Factory) 2.构建者模式(Builder) 3.工厂方法模式(Factory Method) 4.原型模式( ...
- iOS基础 - Modal制作控制器
1.modal 1.modal推出控制器的代码 2.modal关闭当前控制器的代码 3.modal推出的动画效果 4.modal在ipad中应用 2.如何给控制器加上导航栏 3.modal和导航控制器 ...
- Intellij Idea/Webstorm/Phpstorm
Intellij Idea/Webstorm/Phpstorm 的高效快捷键 1. shift + F6可以理解为F2的豪华重量版,不但可以重命名文件名,而且可以命名函数名,函数名可以搜索引用的文 ...
- Windows Serer 2003 配置手册 – 创建Active Dictionary域
域与工作组的关系 实际上我们可以把域和工作组联系起来理解,在工作组上你一切的设置在本机上进行包括各种策略,用户登录也是登录在本机的,密码是放在本机的数据库来验证的.而如果你的计算机加入域的话,各种策略 ...
- Linux环境进程间通信(二):信号(下)
linux下进程间通信的几种主要手段: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...
- web-worker计数器,根据输入时间统计次数
1.用web-worker实现:另起一个线程,将计数工作运行在后台的JavaScript文件,并返回累加后的结果. 该js文件运行于后台,独立于其他脚本,不会影响页面的性能.html页面可以继续做任何 ...
- A2D规则引擎
A2D规则引擎 写了个简单的规则引擎,普通情况够用了: 比如2家公司有各自的利率计算规则,如下: 在C#方面,没有写在C#的业务逻辑代码中,而是移到了外部规则文件中,如(ACompanyRatePol ...