分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

几条经验让jQuery用的更漂亮

发布时间:2023-09-06 01:31责任编辑:董明明关键词:jQuery

  新手使用jQuery写代码时往往侧重实现功能,功能逻辑不太复杂的页面也不会太考虑性能问题,随着对jQuery的亲切问候,发现jQuery越来越简单,越是简单越是想把它用漂亮。下面总结几条常见常用又是又是经常忽略的小经验,有几条是明明知道确是看了别人的文章才发现自己常用的是糟糕的方法。

1、在</body>前引用jQuery后无需再用$(function(){})去等待DOM结构的加载了。

2、$(‘.class‘)效率是最低的,可以添加条件使用find()方法

$(‘#id‘).find(‘.class‘)

3、ID选择符是唯一的,避免使用多个ID选择符。

4、避免使用隐式通配符

$(‘.class :radio‘)//不建议$(‘.class input:radio‘)//建议

5、为选择器指定上下文

$(‘.class #id‘)//限定搜索范围,性能高于$(‘.class‘)

6*、超过一次用到的jQuery 可考虑缓存来提高性能 $element表明jquery对象

$element = $(‘#element‘);h = $element.height();$element.css(‘height‘,h+5);

7*、正确使用时间委托

html

<ul id="list"> ???<li>234</li> ???<li>234</li> ???<li>234</li> ???<li>234</li></ul>

相比

$(‘#list‘).find(‘li‘).on(‘click‘,function(){ ???console.log(23);})

这个

$(‘#list‘).on(‘click‘,‘li‘,function(){ ???console.log(23);})

性能要高很多,学习使用这种方法。

8、采用链式操作。

9、链式操作维持代码的可读性

$(‘#id‘) ???.on(‘click‘,function(){ alert(‘hello everybody‘);}) ???.fadeIn(‘slow‘) ???.animate({height:‘120px‘},500);

好了,简单总结这几个,后续加油!

几条经验让jQuery用的更漂亮

原文地址:http://www.cnblogs.com/bella-lin/p/8085973.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved