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

chenhaibo0806999

浏览: 125863 次
性别:
来自: 上海

最近访客更多访客>>

wy_wyang

njdccy

banchengp

ghh2003124new

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

实践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() 帅选数组元素

// $.map() 变更数组元素(和$.grep一样)
// $.inArray() 搜索元素返回元素的位置
// 字符串操作：$.trim()
// 测试操作： $.isArray(obj); $.isFunction(obj); $.isEmptyObject(obj); $.contains(container,contained);
$.extend()拓展工具函数：