简述几个jQuery使用小技巧_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
4
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 2482 | 回复: 3   主题: 简述几个jQuery使用小技巧        下一篇 
    本主题由 koei123 于 2015-7-14 11:14:24 移动
xpisme
注册用户
等级:少校
经验:1117
发帖:65
精华:0
注册:2015-6-29
状态:离线
发送短消息息给xpisme 加好友    发送短消息息给xpisme 发消息
发表于: IP:您无权察看 2015-7-2 12:40:13 | [全部帖] [楼主帖] 楼主

更好地使用jQuery,这里总结了8个小技巧。

1、DOM遍历是昂贵的,将变量缓存起来。

//不推荐
var h = $('#ele').height();
$('#ele').css('height', h-20);
//推荐
var $ele = $('#ele');
var h = $ele.height();
$ele.css('height',h-20);


2、尽可能地合并函数。

//不推荐
$f.on("click", function(){
      $(this).css('border','1px solid red');
      $(this).css('color','blue');
});
//推荐
$f.on("click", function(){
      $(this).css({
            'border':'1px solid red',
            'color': 'blue'
      });
});


3、尽可能使用链式操作。

//不推荐
$ele.html();
$ele.on("click",function(){});
$ele.fadeIn('slow');
//推荐
$ele.on("click",function(){
})
.fadeIn('slow')
.animate({height:'12px'},500);


4、尽可能保持代码简洁。

//不推荐
if(arr.length > 0){}
//推荐   
if(arr.length){}


5、对DOM元素作大量操作,先分离在追加

//不推荐
var $container = $('#somecontainer');
var $ele = $container.first();


.......一系列复杂操作

//推荐
var $container = $('#somecontainer');
var $ele = $container.first().detach();


.......一系列复杂操作

$container.append($ele);


6、避免通用选择符。

//不推荐
$('.container > *')
//推荐
$('.container').children()


7、优化选择符。

//不推荐
$('div#myid')
//推荐
$('#myid')


8、避免隐式通用选择符。

//不推荐
$('.someclass :radio')
//推荐
$('.someclass input:radio')


该贴由koei123转至本版2015-7-14 11:14:24



赞(0)    操作        顶端 
westRing
注册用户
等级:少校
经验:1198
发帖:22
精华:0
注册:2015-4-9
状态:离线
发送短消息息给westRing 加好友    发送短消息息给westRing 发消息
发表于: IP:您无权察看 2015-7-2 14:43:01 | [全部帖] [楼主帖] 2  楼

jquery的用法很简单,原来也有这么多讲究,有时间可以试下



赞(0)    操作        顶端 
xpisme
注册用户
等级:少校
经验:1117
发帖:65
精华:0
注册:2015-6-29
状态:离线
发送短消息息给xpisme 加好友    发送短消息息给xpisme 发消息
发表于: IP:您无权察看 2015-7-2 15:10:03 | [全部帖] [楼主帖] 3  楼

北京联动北方科技有限公司



赞(0)    操作        顶端 
xueping.chen
注册用户
等级:少校
经验:1288
发帖:12
精华:0
注册:1970-1-1
状态:离线
发送短消息息给xueping.chen 加好友    发送短消息息给xueping.chen 发消息
发表于: IP:您无权察看 2015-7-2 17:00:35 | [全部帖] [楼主帖] 4  楼

北京联动北方科技有限公司



赞(0)    操作        顶端 
总帖数
4
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论