了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错

2020-05-17 06:21:29易采站长站整理


<form id=”testform”>
<input type=”text” class=”clear” value=”Always cleared” />
<input type=”text” class=”clear once” value=”Cleared only once” />
<input type=”text” value=”Normal text” />
</form>

JavaSript部分:

$(function() {
//取出有clear类的input域
//(注: “clear once” 是两个class clear 和 once)
$(‘#testform input.clear’).each(function(){
//使用data方法存储数据
$(this).data( “txt”, $.trim($(this).val()) );
}).focus(function(){
// 获得焦点时判断域内的值是否和默认值相同,如果相同则清空
if ( $.trim($(this).val()) === $(this).data(“txt”) ) {
$(this).val(“”);
}
}).blur(function(){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( $.trim($(this).val()) === “” && !$(this).hasClass(“once”) ) {
//Restore saved data
$(this).val( $(this).data(“txt”) );
}
});
});

5.jQuery手册常备身边
  大多数人都很难记住所有的编程细节,即使再好的程序员也会有对某个程序语言的疏忽大意,所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
oscarotero jquery 1.3 (壁纸版)
jQuery手册
6.在FireBug控制台记录jQuery
  FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于记录你的JavaScript代码也得到支持。
写入FireBug控制台的最简单方式如下:
console.log(“hello world”)

firebug-jquery-控制台
你也可以按照你希望的方式写一些参数:
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代码: