您的位置：首页 > Web前端 > JQuery

实践jquery 高级编程（续集一）

2014-01-13 15:41 495 查看

// 下面的代码可不是抄袭的哟，买了本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]*';

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航