实践jquery 高级编程（续集一）
// 下面的代码可不是抄袭的哟，买了本jquery权威指南的书，一步一步敲上去的哟！都是在本地运行过的，请指正拍砖
// 使用data()方法json格式数据
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
body{font-size:13px}
</style>
<script type="text/javascript">
$(function(){
$("p").data("tmpDate");
$("#divTip").append($("p").data("tmpData") == null ? "初始时：null" : $("p").data("tmpData"));
$("p").data("tmpData",{name:"李建洲",sex:"女",score:"80"});
$("#divTip").append("<br>赋值后：" + $("p").data("tmpData").name + "/"+$("p").data("tmpData").sex + "/" + $("p").data("tmpData").score); //
$("p").removeData("tmpData");
$("#divTip").append($("p").data("tmpData") == null ? "<br>移除时：null":$("p").data("tmpData"));
});
</script>
</head>
<body>
<p><b>数据状态</b></p>
<div id="divTip"></div>
</body>
// jquery 循环遍历数组
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
body{font-size:13px}
#ulFrame{padding:0px;margin:0px; list-style-type:none;width:200px}
ul li{border-bottom:dashed 1px #ccc;padding:5px}
</style>
<script type="text/javascript">
$(function(){
var arrList = ["list0","list1","list2","list3","list4","list5"];
var strList = "";
$.each(arrList,function(index){
strList += "<li>" + arrList[index] + "</li>";
});
$("#ulFrame").append(strList);
});
</script>
</head>
<body>
<ul id="ulFrame"></ul>
</body>
// jquery 性能优化( php性能优化 mysql性能优化)：
1. 常用优化策略(372页)：优先使用ID和标记选择器；使用jquery对象缓存；正确使用选择器；使用最新的jquery库；避免过度使用jquery对象(因为每个对象都含有很多属性和方法：val,)；更过的使用链式写法；
使用jquery对象缓存：
1).使用jquery对象时尽量使用变量先保存对象名，然后通过变量进行相应的方法操作
如: var objTmp = $("#divTip"); ==> objTmp.bind(function(){ ...}); objTmp.css("width","200px");
2). 设置全局变量： 使用定义的变量 在其他的函数中也能被调用
window.$objPub = { // 在全局范围中 定义一个window对象
$objTmp:$("#divTip")
}
调用 ：$objPub.$objTmp.bind("click",function(){ ... });
// 正确处理元素间的父子关系
var $p = $("#parent"); var $c = $(".child");
第一种 ：$p.find($c); // 这种方法最快(自动调用浏览器原生方法 比如：getElementById)
第二种 ：$("#parent .child"); // 第二种和第三种速度最慢 先右后左，先获取子元素在与多个父级元素匹配
第三种 ：$($p > $c);
// 正确使用循环 尽量使用原生的for或while 而不是each 循环10000次 for:1ms each:10ms
// jquery 工具函数：
// $.browser 判断浏览器的类型和版本
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
body{font-size:13px}
#ulFrame{padding:0px;margin:0px; list-style-type:none;width:200px}
div{margin:5px;padding:10px;border:solid }
</style>
<script type="text/javascript">
$(function(){
var strTmp = "你的浏览器名称是：";
if($.browser.msie){
strTmp += 'IE';
}else if($.browser.mozilla){
strTmp += 'FireFox';
}
strTmp += "版本号："+$.browser.version;
$("#divTip").html(strTmp);
});
</script>
</head>
<body>
<div id="divTip"></div>
</body>
// $.support.boxModel 判断是否是标准的W3C盒子模型
// $.each() 循环遍历
// $.grep() 帅选数组元素
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
body{font-size:13px}
#ulFrame{padding:0px;margin:0px; list-style-type:none;width:200px}
div{margin:5px;padding:10px;border:solid }
</style>
<script type="text/javascript">
$(function(){
var strTmp = "帅选前的数据：";
var arrNum = [2,8,3,7,4,9,3,10,9,7,21];
var arrGet = $.grep(arrNum,function(ele,index){
return ele >5 && index <8;
});
strTmp += arrNum.join();
strTmp += "<br><br>帅选后的数据：";
strTmp += arrGet.join();
$("#divTip").append(strTmp); // 帅选前的数据：2,8,3,7,4,9,3,10,,9,7,21 帅选后的数据：8,7,9,10
});
</script>
</head>
<body>
<div id="divTip"></div>
</body>
// $.map() 变更数组元素(和$.grep一样)
// $.inArray() 搜索元素返回元素的位置
// 字符串操作：$.trim()
// 测试操作： $.isArray(obj); $.isFunction(obj); $.isEmptyObject(obj); $.contains(container,contained);
$.extend()拓展工具函数：
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
body{font-size:13px}
div{margin:5px;padding:10px;border:solid 1px #666;background-color:#eee;width:260px}
</style>
<script type="text/javascript">
;(function($){
$.extend({
"MaxNum":function(p1,p2){
return (p1 > p2) ? p1 : p2;
}
});
})(jQuery);
;(function($){
$.extend({
"MinNum":function(p1,p2){
return (p1 > p2) ? p2 : p1;
}
});
})(jQuery);
$(function(){
var strTmp = "5和6中最大的数是："; // 5和6中最大的数是：6
strTmp += $.MaxNum(5,6);
strTmp += "<br/><br>7与8最小的数是："; // 7与8最小的数是：7
strTmp += $.MinNum(7,8);
$("#divTip").html(strTmp);
});
</script>
</head>
<body>
<div id="divTip"></div>
</body>
// jquery正则表达式(338')
email :'\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*';
telphone:'(\\(\\d{3,4}\\)|\\d{3,4}-|\\s)?\\d(7,8)';
mobile:'(86)*0*1[3,5]\\d{9}';
postcode:'^\\d{6}$';
number:'^-?[0,9]\\d*$';
zh_cn:'[\\u4e00-\\u9fa5]';
url:'[a-zA-Z]+://[^\\s]*';