【锋利的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属性

扩展string对象的方法正则表单提交

 1 <div>
 2 <input type="text" /><button >check</button>
 3 </div>
 4 <script>
 5 $.extend(String.prototype, {
 6 isPositiveInteger:function(){
 7     return (new RegExp(/^[1-9]d*$/).test(this));
 8 },
 9 isInteger:function(){
10     return (new RegExp(/^d+$/).test(this));
11 },
12 isNumber: function(value, element) {
13     return (new RegExp(/^-?(?:d+|d{1,3}(?:,d{3})+)(?:.d+)?$/).test(this));
14 },
15 trim:function(){
16     return this.replace(/(^s*)|(s*$)|
|
/g, "");
17 },
18 trans:function() {
19     return this.replace(/&lt;/g, '<').replace(/&gt;/g,'>').replace(/&quot;/g, '"');
20 },
21 replaceAll:function(os, ns) {
22     return this.replace(new RegExp(os,"gm"),ns);
23 },
24 skipChar:function(ch) {
25     if (!this || this.length===0) {return '';}
26     if (this.charAt(0)===ch) {return this.substring(1).skipChar(ch);}
27     return this;
28 },
29 isValidPwd:function() {
30     return (new RegExp(/^([_]|[a-zA-Z0-9]){6,32}$/).test(this)); 
31 },
32 isValidMail:function(){
33     return(new RegExp(/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/).test(this.trim()));
34 },
35 isSpaces:function() {
36     for(var i=0; i<this.length; i+=1) {
37     var ch = this.charAt(i);
38     if (ch!=' '&& ch!="
" && ch!="	" && ch!="
") {return false;}
39     }
40     return true;
41 },
42 isPhone:function() {
43     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));
44 },
45 isUrl:function(){
46     return (new RegExp(/^[a-zA-z]+://([a-zA-Z0-9-.]+)([-w ./?%&=:]*)$/).test(this));
47 },
48 isExternalUrl:function(){
49     return this.isUrl() && this.indexOf("://"+document.domain) == -1;
50 }
51 });
52 
53 $("button").click(function(){
54     alert(   $("input").val().isInteger()  );
55 });
56 </script>