项目进度太赶，天天公司加班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对象的方法 正则表单提交
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(/</g, '<').replace(/>/g,'>').replace(/"/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>