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


Posted in Javascript onFebruary 10, 2012

了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2.测试jQuery包装集是否包含某些元素

如果你想测试一下某个jQuery包装集中是否包含某些元素,你首先可以尝试使用验证首个元素是否存在:

if($(selector)[0]){...} 
// 或者这样 
if($(selector).length){...}

来看看这个例子:
//例子.如果你的页面有以下html代码 
<ul id="shopping_cart_items"> 
<li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li> 
<li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li> 
<li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li> 
</ul> 
<pre escaped="true" lang="javascript">... 
//这个if条件将返回true,因为我们有两个 
// input域匹配了选择器,所以<statement>代码将会执行 
if($('#shopping_cart_items input.in_stock')[0]){<statement>}

3.从jquery.org读取jQuery最新版本
你可以使用这句代码读取jQuery的最新版本的代码文件。

<script src="http://code.jquery.com/jquery-latest.js"></script>
你可以使用这个方法来调用最近版本的jQuery框架,当然,你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
4.存储数据

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据:

$('selector').attr('alt', 'data being stored'); 
//之后可以这样读取数据: 
$('selector').attr('alt');

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的,我们可以使用jQuery的data方法来为页面中的某个元素存储数据:

$('selector').data('参数名', '要存储的数据'); 
//之后这样取得数据: 
$('selector').data('参数');

这个data方法能让你自己明明数据的参数,更语义更灵活,你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍,可以看看jQuery官方讲解

这个方法的经典应用是给input域一个默认值,然后在聚焦的时候清空它:
HTML部分:

<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技巧来提高你的代码(个人觉得那个jquery的手册很不错)
6.在FireBug控制台记录jQuery

FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于记录你的JavaScript代码也得到支持。

写入FireBug控制台的最简单方式如下:
console.log("hello world")

了解jQuery技巧来提高你的代码(个人觉得那个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代码:

<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"); 
[html] 
9.绑定jQuery函数到$(window).load事件 

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

10.使用jQuery链来限定选择器,让你的代码更简洁更优雅

由于JavaScript支持链结构而且支持断行,所以你的代码可以写成下面这样,这个例子先在元素上移除一个class然后在同一个元素上添加另一个class:

$('#shopping_cart_items input.in_stock') 
.removeClass('in_stock') 
.addClass('3-5_days');

如果想让它更简单实用,你可以创建一个支持链结构的jQuery函数:
$.fn.makeNotInStock = function() { 
return $(this).removeClass('in_stock').addClass('3-5_days'); 
} 
$('#shopping_cart_items input.in_stock').makeNotInStock().log();

11.使用回调函数同步效果

如果你想确保某个事件或动画效果要在另一个事件运行之后再调用,那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函 数:slideDown( speed, [回调] ) ie. $(‘#sliding').slideDown(‘slow', function(){… 点击这里预览这个例子.

<style> 
div.button { background:#cfd; margin:3px; width:50px; 
text-align:center; float:left; cursor:pointer; 
border:2px outset black; font-weight:bolder; } 
#sliding { display:none; } 
</style>$(document).ready(function(){ 
// 使用jQuery的click事件改变视觉效果,并开启滑动效果 
$("div.button").click(function () { 
//div.button 现在看上去是按下的效果 
$(this).css({ borderStyle:"inset", cursor:"wait" }); 
//#sliding 现在将渐隐并在完成动作之后开启渐显效果 
//slideup once it completes 
$('#sliding').slideDown('slow', function(){ 
$('#sliding').slideUp('slow', function(){ 
//渐显效果完成后将会改变按钮的CSS属性 
$('div.button').css({ borderStyle:"outset", cursor:"auto" }); 
}); 
}); 
}); 
});

12.学会使用自定义选择器

jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁:

$.expr[':'].mycustomselector= function(element, index, meta, stack){ 
// element- DOM元素 
// index - 堆栈中当前遍历的索引值 
// meta - 关于你的选择器的数据元 
// stack - 用于遍历所有元素的堆栈 // 包含当前元素则返回true 
// 不包含当前元素则返回false 
}; 
// 自定义选择器的应用: 
$('.someClasses:test').doSomething();

下面让我们来看看一个小例子,我们通过使用自定义选择器来锁定含有”rel”属性的元素集:
$.expr[':'].withRel = function(element){ 
var $this = $(element); 
//仅返回rel属性不为空的元素 
return ($this.attr('rel') != ''); 
}; $(document).ready(function(){ 
//自定义选择器的使用很简单,它和其他选择器一样,返回一个元素包装集 
//你可以为他使用格式方法,比如下面这样修改它的css样式 
$('a:withRel').css('background-color', 'green'); 
});<ul> 
<li> 
<a href="#">without rel</a> 
</li> 
<li> 
<a rel="somerel" href="#">with rel</a> 
</li> 
<li> 
<a rel="" href="#">without rel</a> 
</li> 
<li> 
<a rel="nofollow" href="#">a link with rel</a> 
</li> 
</ul>

13.预加载图片
通常使用JavaScript来预加载图片是个相当不错的方法:
//定义预加载图片列表的函数(有参数) 
jQuery.preloadImages = function(){ 
//遍历图片 
for(var i = 0; i<arguments.length; i++){ 
jQuery("<img>").attr("src", arguments[i]); } 
} 
// 你可以这样使用预加载函数 
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

14.将你的代码测试完好

jQuery有一个名为QUnit单元测试框架。编写测试很容易,它能让您可以放心地修改您的代码,并确保它仍然按预期工作。下面是如何工作的:

//将测试分成若干模块. 
module("Module B"); test("some other test", function() { 
//指定多少个判断语句需要加入测试中. 
expect(2); 
equals( true, false, "failing test" ); 
equals( true, true, "passing test" ); 
});
Javascript 相关文章推荐
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
js实现时钟定时器
Mar 26 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 #Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 #Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 #Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 #Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 #Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 #Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 #Javascript
You might like
PHP使用数组实现队列
2012/02/05 PHP
php 获取本地IP代码
2013/06/23 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python的中异常处理机制
2018/08/30 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python 实现倒排索引的方法
2018/12/25 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Python如何输出整数
2020/06/07 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2019求职信大礼包
2019/05/15 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
python中print格式化输出的问题
2021/04/16 Python
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Python 中面向接口编程
2022/05/20 Python