HTML5先行者高级交流群

html5先行者

欢迎加入学习讨论

专注前端，专注网页设计制作及网站开发项目 - (低价承接网站开发项目) QQ：370158739加入收藏RSS

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

更高效的使用JQuery 这里总结了8个小技巧_jquery_

2016-04-14 09:12:42 [小大] 已经帮助：人解决问题

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

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//不推荐3VSHTML5中文学习网 - HTML5先行者学习网
var h = $('#ele').height();3VSHTML5中文学习网 - HTML5先行者学习网
$('#ele').css('height', h-20);3VSHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//推荐3VSHTML5中文学习网 - HTML5先行者学习网
var $ele = $('#ele');3VSHTML5中文学习网 - HTML5先行者学习网
var h = $ele.height();3VSHTML5中文学习网 - HTML5先行者学习网
$ele.css('height',h-20);3VSHTML5中文学习网 - HTML5先行者学习网

2、优化选择符。

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//不推荐3VSHTML5中文学习网 - HTML5先行者学习网
$('div#myid')3VSHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//推荐3VSHTML5中文学习网 - HTML5先行者学习网
$('#myid')3VSHTML5中文学习网 - HTML5先行者学习网

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

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//不推荐3VSHTML5中文学习网 - HTML5先行者学习网
$('.someclass :radio')3VSHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//推荐3VSHTML5中文学习网 - HTML5先行者学习网
$('.someclass input:radio')3VSHTML5中文学习网 - HTML5先行者学习网

4、避免通用选择符。

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//不推荐3VSHTML5中文学习网 - HTML5先行者学习网
$('.container > *')3VSHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//推荐3VSHTML5中文学习网 - HTML5先行者学习网
$('.container').children()3VSHTML5中文学习网 - HTML5先行者学习网

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

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//不推荐3VSHTML5中文学习网 - HTML5先行者学习网
if(arr.length > 0){}3VSHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//推荐   3VSHTML5中文学习网 - HTML5先行者学习网
if(arr.length){}3VSHTML5中文学习网 - HTML5先行者学习网

6、尽可能地合并函数。

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//不推荐3VSHTML5中文学习网 - HTML5先行者学习网
$f.on("click", function(){3VSHTML5中文学习网 - HTML5先行者学习网
    $(this).css('border','1px solid red');3VSHTML5中文学习网 - HTML5先行者学习网
    $(this).css('color','blue');3VSHTML5中文学习网 - HTML5先行者学习网
});3VSHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//推荐3VSHTML5中文学习网 - HTML5先行者学习网
$f.on("click", function(){3VSHTML5中文学习网 - HTML5先行者学习网
    $(this).css({3VSHTML5中文学习网 - HTML5先行者学习网
        'border':'1px solid red',3VSHTML5中文学习网 - HTML5先行者学习网
        'color': 'blue'3VSHTML5中文学习网 - HTML5先行者学习网
    });3VSHTML5中文学习网 - HTML5先行者学习网
});3VSHTML5中文学习网 - HTML5先行者学习网

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

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//不推荐3VSHTML5中文学习网 - HTML5先行者学习网
$ele.html();3VSHTML5中文学习网 - HTML5先行者学习网
$ele.on("click",function(){});3VSHTML5中文学习网 - HTML5先行者学习网
$ele.fadeIn('slow');3VSHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//推荐3VSHTML5中文学习网 - HTML5先行者学习网
$ele.on("click",function(){3VSHTML5中文学习网 - HTML5先行者学习网
   3VSHTML5中文学习网 - HTML5先行者学习网
}).fadeIn('slow').animate({height:'12px'},500);3VSHTML5中文学习网 - HTML5先行者学习网

8、对DOM元素作大量操作，先分离在追加

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//不推荐3VSHTML5中文学习网 - HTML5先行者学习网
var $container = $('#somecontainer');3VSHTML5中文学习网 - HTML5先行者学习网
var $ele = $container.first();3VSHTML5中文学习网 - HTML5先行者学习网
.......一系列复杂操作3VSHTML5中文学习网 - HTML5先行者学习网

复制代码代码如下:

3VSHTML5中文学习网 - HTML5先行者学习网
//推荐3VSHTML5中文学习网 - HTML5先行者学习网
var $container = $('#somecontainer');3VSHTML5中文学习网 - HTML5先行者学习网
var $ele = $container.first().detach();3VSHTML5中文学习网 - HTML5先行者学习网
.......一系列复杂操作3VSHTML5中文学习网 - HTML5先行者学习网
$container.append($ele);3VSHTML5中文学习网 - HTML5先行者学习网

（责任编辑：）

推荐书籍

推荐资讯

html5及css3做的3D小房子

html5及css3做的3D小

html5视频应用

html5视频应用

友情链接:联系人：QQ370158739

关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助