jQuery现在已经非常流行,百度新首页中也已经开始使用jQuery,今天总结下怎么书写更好的jQuery代码使jQuery代码更好、更快的执行,希望本篇jQuery教程一改大家以前不合理的做法。
1.正确引用jQuery
尽量在body结束前才引入jQuery,而不是在head中(解释:因为jquery文件比较大,script标签是阻塞加载)
借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。
如果在</body>前引入script文件的话,就不用写document.ready了,因为这时执行js代码时DOM已经加载完毕了。
<body> <script src="http://lib.sinaapp.com/js/jquery11/1.8/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script> </body>
2.优化jQuery选择器
高效正确的使用jQuery选择器是熟练使用jQuery的基础,而掌握jQuery选择器需要一定的时间积累,我们开始学习jQuery时就应该注意选择器的使用。
<div id="nav" class="nav"> <a class="home" href="http://www.webkfa.com">web开发</a> <a class="articles" href="http://www.webkfa.com/">web开发</a> </div>
如果我们选择class为home的a元素时,可以使用下边代码:
$('.home'); //1 $('#nav a.home'); //2 $('#nav').find('a.home'); //3
方法1会使jQuery在整个DOM中查找class为home的a元素,性能可想而知。
方法2为要查找的元素添加了上下文,在这里变为查找id为nav的子元素,查找性能得到了很大提升。
方法3使用了find方法,它的速度更快,所以方法三最好。
关于jQuery选择器的性能优先级,ID选择器快于元素选择器,元素选择器快于class选择器。因为ID选择器和元素选择器是原生的JavaScript操作,而类选择器不是,大家顺便可以看下find context 区别,find() children区别。
3.缓存jQuery对象
缓存jQuery对象可以减少不必要的DOM查找,关于这点大家可以参考下缓存jQuery对象来提高性能。
4.正确使用事件委托
事件委托可以使事件更好的执行,在动态添加的元素上绑定事件也需要委托来实现,在新版本的jQuery中推荐大家使用on来给元素绑定一个或多个事件的处理函数。
<table id="t"> <tr> <td>我是单元格</td> </tr> </table>
比如我们要在上边的单元格上绑定一个单击事件,不注意的朋友可能随手写成下边的样子:
$('#t').find('td').on('click', function () { $(this).css({ 'color': 'red', 'background': 'yellow' }); });
5.精简jQuery代码
如在上述代码中我们对jQuery代码进行了适当的合并,类似的还有.attr()方法等,我们没有写成下边的方式:
$('#t').on('click', 'td', function () { $(this).css('color', 'red').css('background', 'yellow'); });
6.减少DOM操作
刚开始使用jQuery时可能会频繁的操作DOM,这是相当耗费性能的。如我们要在body中动态输出一个表格,一些朋友会这样写:
var $t = $('body'); $t.append('<table>'); $t.append('<tr><td>1</td></tr>'); $t.append('</table>');
好的做法:
$('body').append('<table><tr><td>1</td></tr></table>');
这样在拼接完table串后再添加到body中,对DOM的操作只需一次。群里以前有朋友就因为这个导致在IE下输出时出现问题,而关于字符串的拼接可以参考下最快创建字符串的方法。
7.不使用jQuery
原生函数总是最快的,这点不难理解,在代码书写中我们不应该忘记原生JS。
就先总结这几条吧,每条建议并不难理解,但总结全面的话还是要花费不少时间的。如在减少代码段中,如果需要根据条件从数组中得到新数组时,可以使用$.grep() 方法,如果你在使用jQuery时有自己心得的话,欢迎在留言中和大家分享!
相关推荐
【标题】:“第三章_使用jQuery快速高效制作网页交互特效_” 在网页设计与开发中,jQuery是一个极其重要的工具,它极大地简化了JavaScript代码,使得创建动态和交互性丰富的网页变得更为便捷。本章节将深入探讨如何...
jQuery作为一款广泛使用的JavaScript库,极大地简化了网页中的DOM操作、事件处理、动画制作等任务。然而,随着网站复杂性的增加,优化jQuery代码以提高页面加载速度和用户体验变得至关重要。以下是一些关于jQuery...
5. 移动端适配:jQuery Mobile是专为移动设备优化的版本,提供触控友好的界面和流畅的动画效果。 总结,jQuery以其易用性和强大的功能,极大地推动了Web开发的效率。无论是初学者还是经验丰富的开发者,掌握jQuery...
课后作业则设计了一些挑战性的任务,可能包括使用jQuery实现复杂的数据交互、优化性能以及解决兼容性问题等。通过完成作业,学员将更好地理解jQuery在实际项目中的应用,并能灵活应对各种前端开发需求。 总的来说,...
同时,课程也会强调代码的优化和性能考虑,避免过度使用jQuery可能导致的性能问题。 总之,jQuery为开发者提供了强大的工具,使得网页交互的实现变得简单易懂。通过熟练掌握jQuery,不仅可以提高开发效率,还能为...
在Java程序中使用jQuery进行网页抓取可以极大地提高效率,因为jQuery是一个强大的JavaScript库,它提供了丰富的DOM操作和事件处理功能,使得我们可以更方便地解析和操作HTML文档。 在Java中实现jQuery的集成,我们...
10. **性能优化**:通过合理使用jQuery的选择器、事件委托和缓存DOM对象,可以提高页面性能,避免不必要的DOM操作和内存泄漏。 这个资源对于初学者来说是很好的学习材料,通过实践这些代码,可以加深对jQuery的理解...
总之,"Jquery网页排版插件"是前端开发中的一个重要工具,它利用jQuery库简化和优化了网页的布局和文本格式化。配合Java后端和MyEclipse这样的开发环境,可以构建出高效、互动性强的Web应用。具体到“davatron5000-...
《jQuery制作网页表格数据优化插件详解》 在网页开发中,数据展示是不可或缺的一环,尤其是对于数据量较大的表格,如何高效、美观地呈现这些信息成为了一个挑战。jQuery作为一个强大的JavaScript库,提供了丰富的...
这个压缩包包含了三个重要的教科书式参考资料:ASP.chm、JQuery1.4.chm和网页设计教材.chm,涵盖了ASP编程和jQuery库的详细教程,以及更广泛的网页设计原理。 首先,ASP(Active Server Pages)是微软推出的一种...
jQuery制作网页表格数据优化插件
6. **优化性能**:在使用jQuery进行部分内容加载时,需要注意避免不必要的DOM操作和重绘,使用`$(document).ready()`和`$(window).load()`确保在正确的时间执行脚本,同时考虑利用缓存和CDN服务进一步提升加载速度。...
同时,了解jQuery的性能优化技巧也很重要,例如合理使用$(document).ready()和$(window).load(),避免在DOM未完全加载时执行脚本,以及利用$(document).on()替代早期的直接事件绑定,提高事件处理的灵活性和性能。...
**jQuery实现的网页小游戏详解** 在网页开发领域,jQuery是一个非常流行和强大的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作等任务。本篇文章将深入探讨如何利用jQuery来实现一系列有趣的网页小游戏...
网页编程中的JQuery是一个强大的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画设计和...在学习和使用过程中,不仅要理解JQuery的基本用法,还要关注性能优化、安全实践等方面的知识,以提升整体开发水平。
9. **性能优化**:理解如何优化jQuery代码,减少DOM操作,合理使用缓存,避免不必要的动画,可以使你的网页运行更加流畅。 10. **跨浏览器兼容性**:jQuery的一大优势在于其良好的跨浏览器兼容性,但仍然需要注意...
**jQuery网页滚动图片广告特效详解** 在网页设计中,动态滚动的图片广告是吸引用户注意力、展示产品或服务的有效手段。jQuery,一个轻量级、高性能的JavaScript库,提供了丰富的API和工具,使得创建这样的效果变得...
8. **性能优化**:探讨如何减少DOM操作,优化选择器性能,以及使用`.delegate()`或`.on()`提高事件处理性能,确保网页交互既美观又流畅。 9. **课后习题与上机实践**:提供课后习题和上机实践环节,帮助巩固所学...
在网页设计中,jQuery是一种广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得创建交互式的网页变得更为轻松。本资源"jquery优化完整的切页展示资源"专注于提供一种主流的、具有完美切页体验的解决...