jQuery代码的14条改善技巧[译](3)
作者:暴风彬彬 来源:彬Go 时间:2009-12-02 10:02:00
6.在FireBug控制台记录jQuery
FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于 记录你的JavaScript代码 也得到支持。
写入FireBug控制台的最简单方式如下:
console.log("hello world")
你也可以按照你希望的方式写一些参数:
console.log(2,4,6,8,"foo",bar)
你也可以编写一个小扩展来记录jQuery对象到控制台:
jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};
对于这个扩展,你可以直接使用.log()方法来记录当前对象到控制台。
$('#some_div').find('li.source > input:checkbox')
.log("sources to uncheck")
.removeAttr("checked");
7.尽可能使用ID选择器
在使用jQuery之后,你会发现利用class属性来选择DOM元素变得相当简单。尽管如此,还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。而ID选择器更快是因为DOM本身就有”天然的”getElementById这个方法,而class并没有。所以如果使用class选择器的话,浏览器会遍历整个DOM,如果你的网页DOM结构足够复杂,这些class选择器足矣把页面拖得越来越慢。让我们看看这段简单的HTML代码:
<div id="main">
<form method="post" action="/">
<h2>Selectors in jQuery</h2>
...
...
<input class="button" id="main_button" type="submit" value="Submit" />
</form>
</div>
//使用class来调用submit按钮要比使用绝对的ID选择器慢很多
var main_button = $('#main .button');
var main_button = $('#main_button');
8.善于利用jQuery链
jQuery链不但允许以简洁的方式写出强大的操作,而且提高了开发效率,因为它能够把多个命令应用到包装集,而不必重新计算包装集。从而你不用再这样写了:
<li>Description: <input type="text" name="description" value="" /></li>
$('#shopping_cart_items input.text').css('border', '3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color', 'red');
$('#shopping_cart_items input.text').val("text updated");
取而代之你可以使用jQuery链来完成简便的操作:
var input_text = $('#shopping_cart_items input.text');
input_text.css('border', '3px dashed yellow');
input_text.css('background-color', 'red');
input_text.val("text updated");
//same with chaining:
var input_text = $('#shopping_cart_items input.text');
input_text
.css('border', '3px dashed yellow')
.css('background-color', 'red')
.val("text updated");
标签:jQuery,优化,代码,技巧,选择器
0
投稿
猜你喜欢
MS SQL2000 数据库自动备份方法
2010-07-22 19:52:00
Pytorch转tflite方式
2023-08-10 03:47:29
一个JSP页面导致的tomcat内存溢出的解决方法
2023-06-30 04:14:41
MySQL通配符与正则表达式搜过滤数据详解
2024-01-23 03:12:54
Python调用Windows API函数编写录音机和音乐播放器功能
2021-06-13 19:03:55
一个有趣的SQL命题 用一条语句切换BIT型的真假值
2024-01-24 04:57:38
浅析vue-router原理
2023-07-02 17:09:19
python中使用iterrows()对dataframe进行遍历的实例
2023-12-29 13:43:02
Python将脚本程序转变为可执行程序的实现
2022-03-02 16:30:49
纯ASP结合VML生成完美图-柱图
2010-05-11 16:48:00
CSS系统默认颜色
2009-01-04 16:53:00
设计较好付款流程的12个建议
2009-06-08 12:45:00
ASP函数过滤数组重复数据代码
2010-01-02 20:36:00
js游戏 俄罗斯方块 源代码
2008-01-24 13:14:00
PHP伪静态页面函数附使用方法
2023-11-22 06:25:42
MySQL错误TIMESTAMP column with CURRENT_TIMESTAMP的解决方法
2024-01-25 20:47:47
Python3日期与时间戳转换的几种方法详解
2021-03-10 03:57:17
丰富段落里的标签
2008-03-16 14:11:00
一文详解Golang中net/http包的实现原理
2024-05-28 15:23:08
详解TensorFlow2实现线性回归
2022-11-10 15:35:13