纳金网

标题: 了解jQuery技巧来提高你的代码质量(2) [打印本页]

作者: 奇 时间: 2012-1-13 10:25
标题: 了解jQuery技巧来提高你的代码质量(2)

jQuery之所以如此流行并被从大公司到个人博客，几乎每个人都广泛使用，是因为它上手和使用相当简单，而且为我们提供了一些人都不知道的相当棒的特性，下面给大家介绍一些实用的jQuery技巧，希望对您有所帮助。
AD：

5.jQuery手册常备身边　　
大多数人都很难记住所有的编程细节，即使再好的程序员也会有对某个程序语言的疏忽大意，所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。

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");
9.绑定jQuery函数到$(window).load事件
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。
$(window).load(function(){ // 将你希望在页面完全就绪之后运行的代码放在这里  });

作者: 奇 时间: 2012-2-3 23:21
真是不错啊

作者: 奇 时间: 2012-3-21 23:25
呵呵，很好，方便罗。

作者: tc 时间: 2012-3-27 23:23
佩服，好多阿，哈哈

作者: 菜刀吻电线 时间: 2012-5-1 23:20
沙发不解释

作者: 晃晃 时间: 2012-5-6 23:26
人过留名!

作者: C.R.CAN 时间: 2012-5-24 23:23
不错不错，收藏了

作者: 菜刀吻电线 时间: 2012-5-30 23:25
加精、加亮滴铁子，尤其要多丁页丁页

作者: tc 时间: 2012-8-24 00:12
谢谢楼主，真是太实用了

作者: C.R.CAN 时间: 2012-10-14 23:20
先垫一块，再说鸟

作者: 奇 时间: 2012-11-3 23:25
我看看就走，你们聊！

作者: 菜刀吻电线 时间: 2012-12-3 23:26
凡系斑竹滴话要听；凡系朋友滴帖要顶

作者: C.R.CAN 时间: 2013-3-3 00:14
呵呵，很好，方便罗。

欢迎光临纳金网 (http://wwww.narkii.com/club/)