《jQuery基础教程》的Q&A
近来，有几位购买了我翻译的《jQuery基础教程》的读者朋友来信，询问了一些问题。本着有信必复的原则，同时也避免“重复劳动”，我把问题和答复放在这里，供广大读者朋友参考。
目前的主要问题有3个：
Q1：关于DOM文档。查看
这个问题是读者对JavaScript与DOM的关系理解不透造成的。
Q2：关于XPath选择符。查看
这个问题是因为jQuery1.2之后不再内置支持XPath选择符造成的。
Q3：jQuery版本。查看
这个问题与Q2类似，因为《jQuery基础教程》基于jQuery1.1，而很多读者下载的则是更高版本。
Q3：jQuery版本
读者hcq989 ：我是您的读者，在运行随书的源代码时，发现第四章节的代码有问题，在单击Style Switcher时不能实现报控制文字大小的两个按钮向右移动！
错误提示：行5044
Char:5
错误：参数无效
译者： 根据“错误提示：行5044”，我判断是jQuery版本造成的问题。因为只有jQuery源文件才可能有那么多行。《jQuery基础教程》出版时jQuery的版本是1.1，因此如果要运行书中的例子，请读者下载jQuery 1.1。
Q2：关于XPath选择符
读者jamsonwoo：我有一问题请教，请帮看一下哪里错了.<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>Sort</title>
<script src=”../js/jquery.js” language=”javascript”></script>
<script language=”javascript”>
<!–
$(function(){
alert($(”table tr:not([th]))”).length);
$(”table tr:not([th])”).each(function(){
alert($(this).html());
});
});
//–>
</script>
</head>
<body>
<table>
<tr><th>A</th></tr>
<tr><td>B</td></tr>
<tr><th>C</th></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
</table>
</body>
</html>
最后输出的是 5 而不是 3 。 为什么? 谢谢！
但是：
alert($(”table tr:not(:has(’th’))”).length);
这样可以正确的筛选。输出 3
您的书中P134页底部的代码是怎样做的哦？？？
$(”table.striped tbody tr:not([th]):odd”).addClass(”odd”);
$(”table.striped tbody tr:not([th]):even”).addClass(”even”);
:not([th]) 为什么我用无效？？
译者：这个问题的原因是jQuery 1.2之后不再内置支持XPath选择符；如果在1.2及以上版本中使用XPath选择符，需要下载插件：http://plugins.jquery.com/project/xpath（使用方法如下面代码所示）。
1.2版和1.1版（本书）的区别，请参考：http://www.douban.com/review/1418465/（我在china-pub上面发过）
从插件代码中可见，XPath选择符的确依赖:has()和find()。
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>Sort</title>
<script src=”jquery-1.2.6.min.js” language=”javascript”></script>
<script language=”javascript”>
(function(jQuery){
var find = jQuery.find;
jQuery.find = function(selector, context){
// Convert the root / into a different context
if ( !selector.indexOf(”/”) ) {
context = context.documentElement;
selector = selector.replace(/^\/\w*/, “”);
if ( !selector )
return [ context ];
}
// Convert // to ” ”
selector = selector.replace(/\/\//g, ” “);
// Convert / to >
selector = selector.replace(/\//g, “>”);
// Naively convert [elem] into :has(elem)
selector = selector.replace(/\[([^@].*?)\]/g, function(m, selector){
return “:has(” + selector + “)”;
});
// Naively convert /.. into a new set of expressions
if ( selector.indexOf(”>..”) >= 0 ) {
var parts = selector.split(/>\.\.>?/g);
var cur = jQuery(parts[0], context);
for ( var i = 1; i < parts.length; i++ )
cur = cur.parent(parts[i]);
return cur.get();
}
return find(selector, context);
};
})(jQuery);
$(function(){
alert($(”table tr:not([th])”).length);
//alert($(”table tr:not([th]))”).length); 此行多了一个)。
// $(”table tr:not([th])”).each(function(){
// alert($(this).html());
// });
});
</script>
</head>
<body>
<table>
<tr class=”not”><th>A</th></tr>
<tr><td>B</td></tr>
<tr><th>C</th></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
</table>
</body>
</html>
读者jamsonwoo：在您的译著《jQuery基础教程》第9章\9.1.2节（即 P212页）上部代码中 $(’/rss//item’，data) 作何解释？特别不理解 / 的用法。望解答。
读者moluyingxing：你好,在买了一本jQuery基础教程的时候,遇见一个问题,请高手不惜赐教:书的212页里面,有个$(’/rss//item’,data),这个是不是有问题哟,反正我在运行这个例子的时候,数据没有显示出来.而且我加载的还是本地的那个feed.xml文件,没有用服务器的XML,请解释,谢谢!
译者：$(’/rss//item’，data)中的/rss//item是一个XPath选择符，/rss中的/表示rss必须是根元素，//item表示 item元素不一定是rss的子元素（反之，如果这里仍然是/，就表示item必须是rss的子元素）。也就是说，这个XPath选择符选择data中的 以rss为根元素的所有标签名为item的后代元素。
Q1：关于DOM文档
读者jamsonwoo：近期我在仔细阅读您的译著《jQuery基础教程》，收益非浅。谢谢您。我有一下一个简单问题，百思不得其解，望解答。 问题如下：
<script src=”js/jquery.js” type=”text/javascript”> </script>
<script language=”javascript”>
<!–
var s1=”<s><name>1</name><name>2</name></s>”;
var s2=”<c><name>1</name><name>2</name></c>”;
$(function(){
alert($(s1).find(”name”).length);
alert($(s2).find(”name”).length);
});
//–>
</script>
这个结果为什么打印出
2
0
而且在firefox里的答案和ie6中的不一样，这是为什么啊，难道不垮浏览器？随便问一下，有没有jQuery更深层次的书籍阅读？
译者：这个问题很简单，原因是HTML中没有<c>这个标签，但有<s>标签（参考http://www.w3schools.com/tags/default.asp）。不知你为什么要这样自定义标签。另外，IE7和FF2结果是一致的。
据 我所知，《jQuery in Action》大概要算一本更深层次的书。该书正在翻译中（不是我，呵呵）。另据悉，人民邮电出版社还引进了一本《Practical jQuery Projects》（原著尚未出版）。（参考http://numenzq.javaeye.com/blog/202354）
读者jamsonwoo：非常高兴看到您的及时回答。谢谢。您说<c>不是html中的标签。难道jQuery只能处理html标签的文档，那xml文档就不能用jQuery处理了？您书中的第6章 （Ajax－让网站与时俱进）6.1.3加载XML文档，P92页底部，也用了find(”entry”),难道entry也是html标签？难道xml 文档都只能用html标签？
译者：抱歉刚才没有说清这一点。简单解释一下：
首先，必须知道jQuery直接操作的目标是DOM元素，而不是XHTML或XML标签——虽然 结果可能会反映在XHTML或XML标签上。在你试验的例子中，由于当前文档是XHTML文档，因此，jQuery必须先将标签集通过浏览器转换为对应的 DOM，才能完成后续操作——find(…)。但是，XHTML规范中没有<c></c>标签，因此浏览器无法创建与该标签 对应的DOM元素，也就不能将你的标签集转换为DOM。简而言之，JavaScript操作的并不是XHTML或XML，而是与XHTML或XML对等的 DOM。建议花时间阅读一篇文章，了解浏览器中对等模型的概念：
http://www.sproutcore.com/2008/05/28/understanding-the-ie-dom/
《jQuery基础教程》第6章讲Ajax时为什么能直接操作XML文档呢？事实上，虽然书中展示了一个XML文档，但jQuery也没有直接操作那个XML文档。jQuery操作的是由服务器返回的与该XML文档对应的DOM。这是因为服务器在HTTP头部信息中将返回数据的MIME类型设置成了application/xhtml+xml，所以，jQuery在客户端接收到的响应是DOM，而不是XML文档。
不知道上述解释你能否理解。另外，还可以在IE中试验下面的例子：
<script language=”javascript”>
<!–
/* sample.xml的内容如下：
<?xml version=”1.0″ encoding=”gb2312″?>
<c>
<name>1</name>
<name>2</name>
<name>3</name>
<name>4</name>
</c>
*/
var xmlDoc;
xmlDoc = new ActiveXObject(”Microsoft.XMLDOM”);
xmlDoc.async=false;
xmlDoc.load(”sample.xml”);
$(function(){
alert($(xmlDoc).find(”name”).length);
});
//–>
</script>
最后，可以再参考下面的文章：
http://www.cnbruce.com/BLOG/showlog.asp?log_id=970&cat_id=34
读者jamsonwoo：仔细阅读了您的耐心讲解后，明白了其中的一些缘由。
还有以下一个问题不理解， 您的书中的第82页底部代码
$.get(’d.xml’, function(data) {
$(data).find(’entry’).each(function(){
……
});
});
这里的d.xml中的标签 ‘entry’ 也不是html标签吧。这里怎么能find()操作的呢？我用刚才的例子改动了一下：
var xmlDoc;
xmlDoc = new ActiveXObject(”Microsoft.XMLDOM”);
xmlDoc.async=false;
xmlDoc.load(”sample.xml”);
$(function(){
alert($(xmlDoc).find(”name”).length);
});
$(function(){
$.get(’sample.xml’, function(xmlDoc) {
alert($(xmlDoc).find(”name”).length);
});
});
第一个输出 4 我能理解。但第二个输出 0 就不理解了 ，这个和您的例子一样啊，只是xml文档不一样，请问您的是怎样取到find(’entry’)的？望告之！
译者：原因还是一样。
第一种情况使用xmlDoc = new ActiveXObject(”Microsoft.XMLDOM”);在本地创建了DOM树；而第二种情况仍然没有创建DOM。你可以看看：
$(function(){
$.get(’sample.xml’, function(xmlDoc) {
alert(xmlDoc);
});
});
将显示XML文档的源代码！
再试试下面这个例子：
$(function(){
$.get(’http://www.cn-cuckoo.com/sample.xml‘, function(xmlDoc) {
alert($(xmlDoc).find(’name’).length);
});
})
此时，xmlDoc才是通过服务器返回的DOM树。顺便说一下，$(xmlDoc)的作用是创建jQuery对象，以便调用find等jQuery库的函数。
记得书中有一段如下：
这次，帮助我们完成任务的是$.get()函数。通常，这个函数只是简单地取得由URL指定的文件，然后将纯文本格式的数据提供给回调函数。但是，在根据服务器提供的MIME类型知道响应的是XML的情况下，提供给回调函数的将是XML DOM树。
关于jQuery版本
您说的是jQuery版本要用1.1，下载下来的代码引用的../scripts/jquery.js,请问这个版本不是1.1的，还要到官方重新下？
hcq989：
请到这里下载1.1版本
http://code.google.com/p/jqueryjs/downloads/list
我是您的读者，在运行随书的源代码时，发现第四章节的代码有问题，在firefox浏览器下正常运行，在ie6不能实现正常的效果，请解答。
请dymyz参考本书在线示例（下载的代码也不排除有错误）：
http://book.learningjquery.com/2509_04_code/gettysburg.html
我是您的读者，在运行随书的源代码时，发现第8章节验证表单输入是否有错误的提示文字中，假如将提示文字换成是中文，在firefox浏览器下不能正常运行，在ie6下正常。请解答。
第四章节的升级jquery后运行正常，请大家注意了，但第八章的还不正常
@dymyz
请把charset=utf-8，修改为charset=gb2312，再试试！
对于第八章，已经改了charset=gb2312如下所示，但是还是不行，请解答。
另外，对于第八章购物车代码中，美元符号$换成人民币￥符号，在firefox浏览器下不能正常显示，在ie6下正常。请解答。
你好，在第九章中图像传送带中，发现jq版本更换为jq1.2.6后无法正常，请给予解决办法，1.2.6版本无法使用unbind（）移除hover定义的函数。谢谢
@dymyz
关于版本升级的问题，请你参考上述Q2。在jQuery1.2版后，许多API都发生了变化。既然你使用的是新版本，就应该将示例中用到的旧版方法替换成新版中的等价特性。比如，1.2版删除了.lt().gt()方法及对XPath选择符的默认支持。另外，网上有同学翻译了jQuery1.2的API文档，你可以搜索一下，会有帮助。