赵工的个人空间

jQuery的使用技巧

jQuery简化了JavaScript编程，提供了一种快速添加复杂交互的工具。

1.让编程更容易的方法：

1）$()：

$()等同于jQuery()。$()是jQuery()的别名，二者可以互换，使用$()让输入更简单，录入更快。
另一个Prototype库也使用$()，同时使用这两个库时，为了避免冲突，jQuery提供了一个特殊的函数.noConflict()。

2）将选择保存到变量：

有时会经常使用对某页面元素的选择，重复选择会使程序变慢，这时可以只运行一次选择，并把结果保存在一个变量中。示例：
var tooltip=$('#tooltip');
当使用这种方法时，很多程序员喜欢在变量前添加一个$，帮助提醒他们该变量存储了一个jQuery选择。示例：
var $tooltip=$('#tooltip');
在使用事件时，将一个选择存储到一个变量也很常见。比如，在一个事件函数中，$(this)引用了事件所应用的元素，但每次使用$(this)都调用jQuery函数会浪费资源，可以在事件函数开始处将$(this)存储到一个变量中，以后重复使用这个变量。示例：
$('a').click(function(){
   var $this=$(this);
   $this.css('outline','2px solid red');
   var href=$this.attr('href');
   window.open(href);
   return false;
});

3）尽可能少几次添加内容：

添加修改内容，允许在页面添加错误消息、弹出工具提示、插入提取内容，但要求浏览器做很多工作。多次更改内容，可能会显著影响到Web页面的性能。添加内容的量并没有关系，更改页面的次数会影响性能。减少必须修改DOM的次数，将会显著提升页面的性能。
可以通过构建工具提示HTML，将其存储到一个变量中，然后将该变量附加到页面，从而减少添加操作的次数。示例：
Var tooltip='<div id="tooltip"><h2>The tooltip title</h2><p>The tooltip contents here</p> </div>';
$('#elemForTooltip').append(tooltip);
上述代码中，创建了一个变量，其中包含了用于工具提示的所有HTML，并且将该HTML添加给了一个页面元素。这里只有一次添加操作，可能会比使用3次.append()函数快20倍。

4）优化选择器：

jQuery的灵活性可以使我们使用多种方法来达到同样的目的，例如可以使用多种方法选择一个页面元素，可以使用CSS选择器。使用如下方法会使得选择速度更快：
·尽可能使用id选择器：选择页面元素最快的方法是id选择器。
·先使用id作为子选择器的一部分：如果要选择多个元素，要让想要选择的元素都位于一个带有id的元素中，那么就可以使用带id的子选择器，这样会更快一些。示例：
$('#main a')
·使用.find()函数：该选择器在其他标记的内部查找标记，很多情况下比使用子选择器快。
$('#main').find('a');
·避免过多具体化：比如$('#main.sidebar.note ul.nav li a')，执行查询会比较慢，可以使用
$('.sidebar.nav a')或$('#main').find('.sidebar').find('.nav a')
5）检查缺失的图像：
如果浏览器中需要显示的图像缺失，将会显示一块空白或一个包含叉号的占位符，比较难看。如果要避免这种情况，及时发现并处理，可以使用：
$('img').error(function() {
   $(this).replaceWith('<img src="missing.png" alt="Could not load image">');
});
一般需要首先使用.each()函数在包含图像名称的数据中迭代，并创建image标记来填充div：
$.each(images,function(key,value) {
   html+='<img src="'+value+'"/>';
});
然后向img标记添加一个error()函数，将未能加载或src属性不正确时执行。error()函数将不存在的图像替换为选择的另一幅图像。

5）使用.subbmit()函数：

$('input:button').click(function() {
   $('#myForm').submit();
});
上述代码，向input按钮附加click事件处理函数，单击按钮时调用submit()方法提交表单。jQuery将浏览器原生的提交表单的方法包装到submit()函数中。
如果想不提交表单，二进行其他处理，可以使用：
$('#myForm').sunbmit(function() {
   return false;
});
禁止浏览器默认事件作也可以使用preventDefault()：
$('#myForm').sunbmit(function(event) {
   event.preventDefault();
});

6）复选框的处理：

将复选框勾选：
$('#checkbox1').attr('checked','true');
将复选框消除勾选：
$('#checkbox2').removeAttr('checked');
遍历所有已勾选的复选框：
$('.checkitem:checked').each();

7）创建键盘快捷键：

$(document).keydown(function(event) {
   if (event.witch==18) altPressed=true;
   if (altPressed) {
      switch (event.whitch) {
         case 83:
            $('div:first').slideToggle('slow');
            return false;
            break;
         case 71:
            $('div:last').slideToggle('slow');
            return false;
            break;
         case 66:
            $('div').slideToggle('slow');
            return false;
            break;
      }
   }
});
$(document).keyup(function(event) {
   if (event.witch==18) altPressed=false;
});
jQuery可以将一个event对象用于事件处理函数，其有一个属性which，提供按下键的编码，其中alt键的编码为18。上述代码使用了Alt键与其他键的组合，S键值83。

8）得到文本的位置信息：

$('.button').click(function() {
   var positions=getPositions();
   if (positions.start==positions.end) return false;
   var tag=$(this).val();
   var textOnPage=$('#selectable').val();
   var startString=textOnPage.substr(0, position.start);
   var targetString=textOnPage.substr(position.start,position.end-position.start);
   var formattedString='<>'+tag+'>'+targetString+'</'+tag+'>';
   var endString=textOnPage.substr(position.end);
   $('selectable').text(startString+formattedString+endString);
});
jQuery使用getPositions()函数获取所选文本的位置，这在不同的浏览器中使用的方式不同，比如IE中使用document.selection，而在Mozilla类似浏览器中使用window.getSelection。

9）页面上拖动元素：

var mousex=0,mousey=0;
var divLeft,divTop;
$('.dragme').mousedown(function() {
   var offset=$(this).offset();
   divLeft=parseInt(offset.left,10);
   divTop=parseInt(offset.top,10);
   mousey=e.pageY;
   mousex=e.pageX;
   $(this).bind('mousemove',dragElement);
});
function dragElement(event) {
   var left=divLeft+(event.pageX-mousex);
   var top=divTop+(event.pageY-mousey);
   $(this).css({'top':top+'px','left':left+'px','position':'absolute'});
   return false;
}
$(document).mouseup(function() {
   $('.dragme').unbind('mousemove');
});
向class为dragme的div元素添加两个事件处理函数mousedown和mouseup。注意，需要用css将div的位置设为绝对位置absolute。

2.使用jQuery文档：

jQuery Web站点提供了针对jQuery的非常详细的文档（http://docs.jquery.com）。该站点最为重要的部分是介绍jQuery API，表示允许使用的一组函数，主要的分类包括：

1）jQuery Core：

这些函数中的大部分是不需要访问的高级函数，主函数jQuery()也在其中，这是jQuery的核心。

2）Selectors：

提供了对一些最有用的jQuery函数的访问，列出了使用jQuery选择页面元素的多种不同方式。

3）Attributes：

获取和设置HTML元素的属性的各种jQuery函数，如为标记添加一个类、找到或设置一个属性的值等。

4）Traversing：

指用来操作一组页面元素的函数，包括遍历HTML元素的很多函数。例如，find()函数。

5）Manipulation：

列出了可以用来修改页面的众多函数，如html()、text()等。

6）CSS页面：

列出了用来读取和设置元素上的CSS相关属性的jQuery函数，包括添加和删除类、直接设置CSS属性等。

7）Events：

页面上有众多事件相关的jQuery函数的列表，用来响应用户交互。

8）通过Effects页面：

可以访问与jQuery的效果相关的函数信息，比如.slideDown()、fadeIn()、.animate()等。

9）Ajax：

列出与Ajax相关的函数，根据向Web服务器发送信息或者从Web服务器获取的信息动态更新页面。

10）Utilities：

用来简化常见编程任务的函数，例如在一个数组中查找一个元素、在数组或对象中的每一项上执行操作（each()函数）等。

11）Data分类：

列出了与向页面元素添加数据相关的函数，如.data()函数向一个元素添加数据。

12）Deferred对象：

这是个串联的工具对象，可以将多个回调注册到回调队列中，并且传递任何同步或异步函数的成功或失败状态。比如，帮助排列函数以控制运行的顺序。

13）Dimensions：

引用确定对象的宽度和高度的函数，这些函数也在CSS分类下列出。

14）Forms分类：

列出了与表单相关的函数，主要是一些事件，但也包括用来读取和设置一个表单字段的值的.val()函数，以及使用Ajax提交表单的几个函数。

15）Internals：

是一组不同用途的函数，如.jquery属性，返回页面上使用的jQuery的版本。一般不会使用。

15）Offset分类：

列出了与确定一个对象相对于屏幕或相对于其父元素的位置的函数。当设置或获取页面上的一个元素的位置时使用。

3.遍历DOM：

想要给一个元素添加一个事件，随后想要对另一个元素做一些事情，经常需要遍历DOM。示例：
$('#gallery').click(function(){
   $(this).find('img').fadeTo(500,.3).fadeTo(250,1);
});
上述代码，对id为gallery的div标记内的一系列img缩略图进行操作，在0.5秒内将图像淡出到30%，然后0.25秒内淡入到100%。
遍历DOM很常见，jQuery提供了很多函数来帮助选择元素：

1）find()：找到当前选择的特定元素。

$('#mainDiv').click(function(){
   $(this).find('div').show().css('outline','red 2px solid');
});

2）children()：类似与find()，但将其选择限制在当前选择的直接孩子上。

$('#mainDiv').click(function(){
   $(this).children('div').show().css('outline','red 2px solid');
});

3）parent()：找到当前标记的父标记。

$('#mainDiv a').hover(function(){
   $(this).css('outline','red 2px solid');
   $(this).parent().css('backgroundColor','white');
},function(){
   $(this).css('outline','');
   $(this).parent().css('backgroundColor','');
});
上述代码，在一个链接上悬停鼠标光标，就会在该链接周围添加一个边框，并对该元素的父元素应用一种背景颜色；当鼠标离开该链接时，将会删除边框和背景颜色。

4）.closest()：找到和一个特定选择器匹配的最近的祖先元素。

$('#mainDiv img').click(function(){
   $(this).css('outline','red 2px solid');
   $(this).closest('div').css('backgroundColor','white');
});

5）.siblings()：选择与当前选择相同级别的一个元素

$('#gallery a').click(function(){
   $(this).siblings().fadeTo(500,.3).fadeTo(250,1);
});
上述代码，当访问者单击一个链接，可以让所有其他的链接都慢慢地淡出并淡入视线。
.siblings()函数还接收一个参数，限定为某种类型的标记。示例：
   $(this).siblings('a').fadeTo(500,.3).fadeTo(250,1);

6）.next()：找到当前选择的下一个兄弟元素。

7）.prev()：选择的是紧邻的前一个兄弟元素。

4.用于操作HTML的更多函数：

常常需要动态地添加、删除和修改一个页面的HTML。

1）.text()：使用参数来替换一个选择中的文本

$('#error').text('You must supply an e-mail address');

2）.html()：允许插入HTML标记，而不仅仅是文本

$('#tooltip').html('<h2>Esquif Avalon</h2><p>Designed for canoe camping.</p>');

3）.append()：允许在元素末尾添加HTML

4）.prepend()：允许在元素开始处添加HTML

5）.before()：在选择之前添加内容

6）.after()：内容添加到选择之后

7）.replaceWith()：使用传递给函数的任何内容来完全替换选择，包括标记

$(':submit').replaceWith('<p>processing...</p>');

8）.remove()：从DOM删除选中，实际上是从页面删除

$('#error').remove();

9）.wrap()：将一个选择中的每个元素包围到一对HTML标记中

$('img').each(function(){
   var $this=$(this);
   var caption=$this.attr('alt');
   $this.wrap('<div class="figure"></div>').after('<p>'+caption+'</p>');
});
上述代码，先选择页面上所有图像，然后使用.each()函数遍历图像列表，从图像获取alt属性，将图像包围到一个div标记中，然后使用.after()函数在图像后添加一个标题。
将一组完整的标记传递给.wrap()函数，甚至可以传递下面的一组嵌套标记：
$('#example').wrap('<div id="outer"><div id="inner"></div></div>');
上述代码得到的HTML为：
<div id="outer">
   <div id="inner">
      <div id="example">This is the original code on the page</div>
   </div>
</div>

10）.wrapInner()：将选择中的每个元素的内容包含到HTML标记中

$('#outer').wrapInner(<div id="inner"></div>)
上述代码得到的HTML为：
<div id="outer">
   <div id="inner">
      <p>This is the contents of outer</p>
   </div>
</div>

11）.unwrap()：直接将包围选择的父标记删除

对于HTML代码：
<div><p>a paragraph</p></div>
运行代码$('p').unwrap()，得到的HTML代码为：
<p>a paragraph</p>

12）.empty()：删除一个选择的所有内容，但保留选择不动

$('#messageBox').empty();

5.高级事件处理：

jQuery提供了函数用于反馈不同的事件，比如.submit()、mouseout()函数，所有这些函数都是.bind()函数的快捷方式。.bind()函数接收几个参数，事件类型以及发生该事件时运行的一个函数。
所有上述函数，都只适用于页面当前的HTML，HTML载入，浏览器对该HTML应用事件监听器，并且一个用户与该页面交互。如果使用jQuery对Web页面的内容动态更新，已有的那些事件处理函数不适用与随后添加的HTML。
jQuery提供了.delegate()函数，即使新的元素添加到页面的时候，仍然保持活跃，只需要在程序中使用一次，将能对随后添加到页面的元素的事件做出响应。基本语法：
$('#container').delegate('selector','event',function(){
   //code
});  //end delegate
使用时，首先要选择一个容器，选择的元素包含了想要对其添加事件的元素。如果要给一个id为siderbar的div中的所有列表项添加click事件，要使用$('#sidebar')；如果想对页面上所有的链接a应用一个mouseover事件，要选择body，用$('body')。
调用delegate()函数，要传递3个参数，要添加事件的选择器、事件的名称、响应该事件的函数。示例：
$('#sidebar').delegate('li','click',function(){
   //code
});  //end delegate
上述代码，对id为siderbar的div中的所有列表项添加click事件。而对页面上所有的链接a应用一个mouseover事件的代码为：
$('body').delegate('a','mouseover',function(){
   //code
});  //end delegate
还有一个.live()函数，对函数运行之后添加的页面元素应用事件处理程序，但比.delegate()慢很多。