[转]14条关于jQuery的知识

Bell — Mon, 27 Sep 2010 02:24:38 +0000

以下是译文

如果说jQuery也有缺点，那就是它太容易上手了，所以吸引了大量没有任何JavaScript的新手来使用。一方面来说，这真的很神奇。另一方面，这也导致了一大堆糟糕的代码诞生（有一些是出自我手！）

但是没关系，糟糕的代码是你的成年礼，关键是要越过这道坎，这就是今天要讨论的内容。

1.一些方法会返回jQuery对象

大多数方法会返回jQuery对象。这是很棒的特性，使得我们的代码可以像锁链一样从头到尾链起来。

$someDiv
.attr('class', 'someClass')
.hide()
.html('new stuff');

这样做的好处是：1.代码更加简洁 2.减少了我们必须遍历整个DOM来寻找这个元素的时间

2.The Find Selector

只要你的选择符不要烂的跟屎一样，jQuery都能帮你方便地找到需要的元素，你不需要操心细节。但是有一些细节你可以注意一下，以此来提高你的JavaScript执行性能。

其中之一就是，只要有可能，就使用.find()方法。主要原因就是：如果不是必不得已，那就不要让jQuery使用它的Sizzle引擎。当然，也会有些情况不能用find()方法，那也没有关系，只要知道有这个区别就好。

// 在现代浏览器上都可以正常运行，但是却是通过Sizzle引擎来完成的
$('#someDiv p.someClass').hide();

// 一样正常运行，原生浏览器支持，效率更高
$('#someDiv').find('p.someClass').hide();

除IE6/7的现代浏览器都有QuerySelectorAll支持，能允许你传递一个像一样的CSS选择器，而不需要用到jQuery的内部代码。jQuery会在使用自己的引擎之前检查是否存在这个函数。

但对于IE6/IE7而言，就会需要jQuery使用Sizzle引擎，这是一套十分强大的引擎，但非常复杂。简单的说，jQuery会把你的选择器转化成一个数组，并且通过从后往前的方法来迭代匹配。

// 数组
 ['#someDiv, 'p'];

它会从右到左，通过正则表达式匹配页面每一个元素，也就是说，你的选择器最右边一定要尽可能的明确，比如ID或者标签名。

底线是：

1.保持代码简单

2.使用find()方法，这样的话，我们就能够使用浏览器的原生查找函数

3.当使用Sizzle的时候，尽可能地把最右边的部分指明，比如ID或者标签名

3.不要滥用$(this)

如果不了解基本的DOM属性和方法的话，很容易滥用jQuery对象。例如

$('#someAnchor').click(function() {
	// 又生成了一次jQuery对象
	alert( $(this).attr('href') );
});

如果只是为了获取某a的href属性可以简单地用以下代码：


$('#someAnchor').click(function() {
	// 没有jQuery对象
	alert( this.href );
});

4.jQuery的快速ready方法

原生的ready方法是这样的

$(document).ready(function() {
	// let's get up in heeya
});

而jQuery的方法是这样的：

$(function() {
	// let's get up in heeya
});

看上去有点困扰+不放心？别担心，看看jQuery的源码：


// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
	return rootjQuery.ready( selector );
}

完全一样的哦

5.代码安全

如果希望代码能和其他人协同工作的话，一定要确保不要命名冲突。万一在你的脚本之后导入了其他人的代码，对方用到了$变量，那该怎么办呢？

第一种方法，noConflict()方法：

var j = jQuery.noConflict();
// Now, instead of $, we use j.
j('#someDiv').hide();

// The line below will reference some other library's $ function.
$('someDiv').style.display = 'none';

第二种方法，把你的代码放在一个匿名函数里面，然后把jQuery作为参数传递给它，那么在这个函数体中的$是不会影响外面或者被外面影响的。

(function($) {
	// Within this function, $ will always refer to jQuery
})(jQuery);

第三种方法，

jQuery(document).ready(function($) {
 // $ refers to jQuery
});

// $ is either undefined, or refers to some other library's function.

6.写聪明的代码

someDivs.each(function() {
	$('#anotherDiv')[0].innerHTML += $(this).text();
});

以上代码的糟糕之处在于：
1.在每一次遍历循环中都会搜寻anotherDiv 这个ID的元素
2.两次获取innerHTML属性
3.创建了一个jQuery对象，只是为了获取元素的text属性

var someDivs = $('#container').find('.someDivs'),
      contents = [];

someDivs.each(function() {
	contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

这样，在每一个遍历循环中所做的操作仅仅是把元素放进一个数组中。这一条tip更适用于所有的JavaScript代码，而不仅仅是jQuery。

说到这儿，就不得不提一下Document编程（Document Fragments），基本上也是说，用原生的js对象，而不是jQuery对象，更有效率。

var someDivs = $('#container').find('.someDivs'),
      contents = [];

someDivs.each(function() {
	contents.push( this.innerHTML );
});
$('#anotherDiv').html( contents.join('') );

越久使用jQuery和JavaScript，你就会发现你更喜欢用js完成某些简单任务，多好！

jQuery提供了一个很高的抽象程度，但这不意味着我们应该停止学习如何使用原生的js方法，例如上面的代码中我们就用了jQuery的each方法。

7.Ajax方法

一个新手开始学习jQuery和Ajax的时候，它提供的诸多接口可能让你困扰。其实很多方法都是helper method（译者注：我专门查了下helper method和jQuery UI里helper的区别，下一篇post详细地说一下）。我们经常用到的方法不过以下几种：

get
getJSON
post
ajax

以下是getJSON的调用语法

$.getJSON('path/to/json', function(results) {
	// callback
	// results contains the returned data object
});

这是实现代码：

getJSON: function( url, data, callback ) {
	return jQuery.get(url, data, callback, "json");
}

进入下一层梦境：

get: function( url, data, callback, type ) {
	// shift arguments if data argument was omited
	if ( jQuery.isFunction( data ) ) {
		type = type || callback;
		callback = data;
		data = null;
	}

	return jQuery.ajax({
		type: "GET",
		url: url,
		data: data,
		success: callback,
		dataType: type
	});
}

最终，还是通过ajax()方法来执行这么多的操作，它是保证跨浏览器操作的基础。

也就是说你可以直接使用ajax()方法来完成所有的ajax操作，而不是一大堆的helper method。

原来是这样的代码：

$.getJSON('path/to/json', function(results) {
	// callback
	// results contains the returned data object
});

更高效（并且接口统一）的代码：

$.ajax({
	type: 'GET',
	url : 'path/to/json',
	data : yourData,
	dataType : 'json',
	success : function( results ) {
		console.log('success');
	})
});

8.获取原生js属性和方法

从之前的例子中我们学到我们可以直接取得元素比如a标签的属性：

var anchor = document.getElementById('someAnchor');
//anchor.id
// anchor.href
// anchor.title
// .etc

但是当你想通过jQuery取得DOM元素的时候，是不能通过这种方法来取得属性的：

// Fails
var id = $('#someAnchor').id;

所以，当你需要获取href属性或者其他属性的是，你需要使用其他方法，方法很多：

// OPTION 1 - Use jQuery
var id = $('#someAnchor').attr('id');

// OPTION 2 - 取到DOM元素再取值
var id = $('#someAnchor')[0].id;

// OPTION 3 - 用jQuery的get方法
var id = $('#someAnchor').get(0).id;

// OPTION 3b - 用不带参数的get
anchorsArray = $('.someAnchors').get();
var thirdId = anchorsArray[2].id;

get()方法十分有效，它能把jQuery对象集合转化成一个数组。

9.用PHP检测Ajax请求

事实是，在我们的大多数项目中不能依赖js来完成所有工作比如验证或者Ajax，假如js被禁用了怎么办呢？一个通用的解决办法是使用服务器端程序验证Ajax请求是否被发起。

jQuery使得这一做法变得很简单，可以通过$.ajax方法很方便地设置请求的头部。

// 设置头部，这样接受请求的服务器端语言知道这是一个XMLHttpRequest
// Only send the header if it's not a remote XHR
if ( !remote ) {
	xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
}

设置了这个头部之后，我们可以用PHP（或者其他服务器编程语言）来检查这个头部，然后相应地做出反应。用PHP的话，可以通过$_SERVER['HTTP_X_REQUESTED_WITH']来判断。

function isXhr() {
  return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}

10.jQuery和$

知道为什么jQuery和$可以互换么？看看jQuery的源码：

window.jQuery = window.$ = jQuery;

由于jQuery本身运行在一个很大的function中，这样做的好处是能最大程度地避免全局变量的出现。但也因为如此$在外面是undefined的，为了解决这个问题，把jQuery裸露给全局变量window，同时还给它一个别名$。

11.根据条件载入jQuery

我们都喜欢CDN，特别是Google的免费CDN，可是让我们不使用googleapi提供的CDN的一个阻挠就是大陆功夫墙的不可预知性。但是可以这么写，是HTML5 Boilerplate提供的方法：

相当直观，如果window.jQuery是未定义的，那就是说下载js文件出了问题，这时候&&右边的句子就会为ture，所以就会插入一个本地版本的jQuery。Really brillant, isn’t it?

12.jQuery Filters


	$('p:first').data('info', 'value'); // 填充 $的data对象，下文展示用 

	$.extend(
		jQuery.expr[":"], {
			block: function(elem) {
				return $(elem).css("display") === "block";
			},

			hasData : function(elem) {
				return !$.isEmptyObject( $(elem).data() );
			}
		}
	);

	$("p:hasData").text("has data"); // 可以获取所有有data属性的元素
	$("p:block").text("are block level"); // 获取所有拥有display:block属性的元素

jQuery.expr[':']是jQuery.expr.filters的别名，上面的代码用$.extend扩展了jQuery的:也就是filter。

13.单参数的hover方法

在jQuery1.4之前，hover必须接受两个参数，分别显示in和out时候的handler function，而现在hover可以只接受一个参数了，每当产生mouseenter和mouseout事件的时候就会用这个function参数（一般是匿名的）来处理，如果处理得当的话，可以用一个function就完成两个function的效果，可以节省字符。

官方APIhttp://api.jquery.com/hover/上有很好的例子。

14.属性对象作参数

之前

$('')
  .attr({
    id : 'someId',
    className : 'someClass',
    href : 'somePath.html'
  });

现在

$('', {
    id : 'someId',
    className : 'someClass',
    href : 'somePath.html'
});

jQuery1.4以后，可以在新建DOM元素的时候给它传递一个（通常是匿名的）对象作为第二个参数，这样代码更加清晰简单，我们设置可以给这个对象里面传递一些jQuery特有的属性和事件，比如click和text。

原文地址：http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

本文地址：http://yuguo.us/weblog/14-jquery-notes-2/

jQuery图片放大预览插件 cloud-zoom

Bell — Fri, 11 Jun 2010 08:27:03 +0000

分享一个jquery的图片放大预览插件:cloud-zoom.

cloud-zoom DEMO

部署步骤:

1.加载jquery-1.4.js 和 cloud-zoom.1.0.2.min.js

2.加入样式表(DEMO中

IInterest » jQuery