了解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 (壁纸版)

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");
[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" );
});

(0)

相关推荐

  • 关于jQuery UI 使用心得及技巧

    1 jQuery UI 2 为我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 实现打开多个标签 2.2.3 Accordion的嵌套 3 给插件应用主题--Theme Roller 3.1 更改配色 3.2 更改图标 4 相关连接 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行jQuery代

  • jQuery前端开发35个小技巧

    废话不说 直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu

  • jquery操作复选框(checkbox)的12个小技巧总结

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

  • 分享15个大家都熟知的jquery小技巧

    帮助提高你jQuery应用的15个大家都熟知的jquery小技巧,分享给大家 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简单的手风琴 使两个DIV同等高度 在浏览器标签/新窗口打开外部链接 根据文本获取元素 可见变化的触发 Ajax调用错误处理 链式操作 1.回到顶部按钮 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. //

  • jquery性能优化高级技巧

    有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题. 因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷.更流畅的运行效果. jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍: 1.通过CDN(Content Delivery Network)引入jQuery库 2.减少DOM操作 3.适当使用原生JS 4.选择器优化 5.缓

  • jQuery提交多个表单的小技巧

    <script type="text/javascript"> $(function(){ $("#btnSubmit").click(function(){ $("form[name='form1']").submit(); $("form[name='form2']").submit(); }) }) </script> <form name = "form1" actio

  • 关于jQuery新的事件绑定机制on()的使用技巧

    今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

  • 编写高效jQuery代码的4个原则和5个技巧

    jQuery的编写原则: 一.不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大.所以有原生方法可以使用的场合,尽量避免使用jQuery. 复制代码 代码如下: $("a").click(function(){    alert($(this).attr("id"));});//改良后↓$("a").click(function(){    alert(t

  • jquery中EasyUI使用技巧小结

    combobox组件 一.禁用combobox里面的输入框 复制代码 代码如下: $("选择器").combo('textbox').attr("readonly", "readonly"); $('选择器').combobox({ editable:false ,     panelheight:300 }); 二.禁用 复制代码 代码如下: $('选择器').combobox('disable'); 三.获取选项文本和值 复制代码 代码如下:

  • jquery的选择器的使用技巧之如何选择input框

    下面的方法是选择name是redthree的 并且选中了的input 里面的 title属性的内容 <input name="redTrdd" title='xiaoming'> 复制代码 代码如下: xtest = $(":input[name='radThree'][checked]").attr("title");

随机推荐