jQuery 1.3 with PHP(2)

Quick Tricks第2章笔记
越来越多的代码转移到了客户端，如何使用PHP/HTML/jQuery来做更多的输出工作。（ to do part of the rendering on the client）

Dynamic select boxes动态选择菜单
例子：选择菜单根据国家改变相应的城市。
传统做法：（Add an event watcher）当整个form的状态改变了，就把观察到的值传给服务器，然后产生新的页面显示城市。
jQuery:    使用Ajax
Client-side code

1.在javacript中.字符同PHP中的->是一样的，代表了对象的方法或属性。
2.在jQuery中$这个字符是一个对象($ is an object)，而在PHP中是暗示（indicatea）后面跟的字符串为变量。
3.$(document)将整个页面为参数，返回的是jQuery自身对象的实例。
4.setup_country_change()在页面准备好的时候调用。在PHP中没有"准备好"(when something is ready to do sth. )这种说法，要么根本不执行，要么现在就在执行（either things happen now, or don't happen at all），代码返回了值后才执行下一行。而javacript可以等几秒后才返回，因此会有异步事件。
5.jQuery或者说$,通常会在调用时候使用一个参数，来选择操作的元素。返回的是一个数组，即使只有一个返回，要注意这点。
6.var country=$('#country').attr('value');attr返回取得的第一个元素的值，即使$('#country')返回的不只一个元素。
7.$('#cities').html(res);返回值不是特殊的格式，所以直接贴进去。
Server-side code
1.这个例子中PHP返回的是HTML.将html和"成功/失败"封装进一个数组或对象，是很有用的。下个例子将用到。

Quick deletes快速删除
传统的做法是在用户点击删除链接，然后php确认并删除后，再发送另外一个完整的页面。WordPress博客系统中删除垃圾留言的时候却可以不必刷新整个页面（does not reload）。来看一个删除用户档案的例子
jQuery:  Ajax

1.取得subscribers列表的，每一个列表项的第一个链接
2.如果对象的方法返回的是自身的引用(a reference to the object itself)可以使用链式写法(Chaining)简洁代码。
3.在javacript中事件和Ajax调用是异步的，你可以调用一个函数（这个函数将返回结果传给callback函数），然后做其他事情，callback函数无需知道是谁调用的它。高级点的也可以用闭包来记住上下文。而在php中没有闭包。
注意:这个例子中的id操作:取得和改变。
Server-side code
注意:返回的JOSN中的内容

Contextual help上下文帮助
我们不必把所有的帮助文档都塞进html中，会使得帮助文档比内容本身还大，并且占带宽。如果帮助文档是从数据库来的话也会浪费数据库的资源。所以只传送用户需要的文档就可以了。
这里使用了外联的javacript 好处是
1.节省带宽。2.易读，易维护，易调试。3.SEO （因为在狗狗抓取的时候前面只抓一定数量）
(Sanakan:在css-tricks.com中，什么是优美的HTML代码：http://css-tricks.com/what-beautiful-html-code-looks-like/中可以看到
jQuery是放在最下面的，不过好像放在head的最后浏览器也可以处理的更好？）

(作者的字符串操作：正则表达式和echo以及jQuery选择器的字符串拼接，都厉害，而且这个例子他用的是
  -moz-border-radius;配合display:inline-block;或者height:20px;，配合text-align:center;产生一个圆形。不过他的表单用table的比较多。div或li要好些,另外他的函数用_链接的单词，相对驼峰看起来还不错）
（看完这个例子有一点点感觉toggle多余。另外是不是用data( name, value ),要好点。关于data有个疑问，使用data和使用元素的属性来存，差别在哪里？）


Inline editing内联文本编辑
（这个时候用table就是在线excel了。）
注意：在管理员页面可以使用javacript来简化操作，你可以期望他开启了的，而对于客户才需要渐进增强(progressively enhance)。

$.getJSON中$没有特定的目标（being run with no particular target
in mind).这同在类中使用静态方法类似。因为在javacript中，函数和类本质上是一样的，函数可以有子函数。
（这个是什么虾米，我有点晕了。）

小贴士：
这段代码中,如何取id的
<td class="edit"><a href="edit.php?id=6">edit</a></td>

id=$(this).closest('tr')[0].id.replace(/.*_/,'');
什么是closest？
closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
closest对于处理事件委派非常有用。
附加小贴士
什么是queue?
[/url]
怎么使用Filter & Find？
[url=http://screenr.com/IdB]http://screenr.com/IdB


[/url]
[url=http://jqueryfordesigners.com/media/find-vs-filter.flv]
(怎么都是苹果,口水啊!）

看完这章我有3个疑问请教一下大家
1.这个echo究竟怎么读的？引号的有点晕
echo '{"name":"'.addslashes($name).'","help":"'.addslashes($help).'"}';
2.在Inline editing内联文本编辑这一节中
$('<input>')
.attr('value',str)
.blur(inline_editing_save)
.keypress(inline_editing_key_pressed)
.css('width',w)
.appendTo(this)
.focus();
前面四个什么顺序好？另外一个问题就是，考虑到用户体验，特别是在Ajax中keyup ,keydown,keypress都很讲究的。比如自动补完的输入提示框好像也是keypress？
3.上面有提到，javacript放在html最后好还是head最后好？http://developer.yahoo.com/performance/rules.html#js_bottom

吐糟：看来作者确实是把php当数据库用了，是奇数就让你success为0，偶数为就让你success为1.

话说大家有没有PHP中文教程！！

书店有中文版，人民邮电，机械工业，电子工业等几个出版社的多翻译的。人邮的Apress的还有机械的O.r的