读jQuery基础教程时的需要注意的1.1和1.2版的差别

2008年6月24日 – 00:50

jQuery基础教程这本书已经出版咯~
这本书可以用于快速入门，大大缩短jQuery入门所需要的时间（实际上就算没有这本书，看现有的资料，1个星期也足够入门了）。
但还是强烈建议购买此书，因为这能让你能达到看现在有资料好几个月也未必能达到的水平。
至少我现在依然能从上面学到不少东西！

最近书到手了，翻阅了一下
也知道由于译者比较忠于原著，所以未能对其中少部分过时的内容予以修订。
看到他写了不少的“译者注”，但对于1.2的更新是完全没有涉及。

已知的重大变更是：
（1），1.2以后中属性选择器均不需要@，但依然兼容1.1的选择器。
（2），第一章里提到了XPath选择符在1.2中因为不常用且影响效率而取消了，如需使用则需要兼容1.1中的XPath插件（http://plugins.jquery.com/project/xpath），同样第六章和第九章涉及XML解析等也无法使用XPath语法了。关于更多xml解析的问题，可以看http://shawphy.com/2008/01/load-xml-by-ajax-with-jquery-and-parse-it.html
（3），第五章，关于clone(false)的描述，在1.2中，已经整合了复制绑定事件的插件了，即增加了clone(true)功能用于连同元素绑定的事件一起复制。而取消了clone(false)这个只复制元素而不复制内容的方法。读者需要注意。可以用.clone().empty()代替。
（4），第七章中部分地方使用了已被废弃的gt()和lt()方法。可以使用slice代替，或者用:gt和:lt选择符代替。具体请参考文档。
（5），第十章，流行插件中，由于Dimensions插件过于流行，已经被整合进jQuery，所以你无需再另行导入。而Interface插件也已经更新换代，又官方重新编写后改名为jQuery UI。（http://ui.jquery.com）

Posted in jQuery | 1 Comment » | 261 views

位于p最开始的span设置text-indent影响p的整个第一行，反继承

2008年6月11日 – 11:08

今天遇到这个问题
描述起来也蛮麻烦的
搜也搜不到，所以问了群里的朋友，
感谢Robin还有$一揪就出来，
他俩对此问题进行了深入的讨论，
感谢他们细心解答，真相才得以水落石出。
最后本文采用了$一揪就出来的方法：

如下代码

  1. <style>
  2. span.imgblock{
  3.     height:16px;
  4.     width:16px;
  5.     display:inline-block;
  6.     background:#0099FF;
  7.     text-indent:5em;
  8.     overflow:hidden;
  9. }
  10. </style>
  11. <p><span class="imgblock">这里看不见，确可以复制到</span>选中前边的框子，然后复制吧。<br />你可以复制所有本文<p>

给最开始的span设置了text-indent属性之后，导致了整个父元素p的text-indent属性
IE6/7都确认有这个bug，可以说是一种反继承。

解决的方法是多一个标签,避开问题多多的text-indent，
设置内层标签的行高,以及padding-left。就能够大致解决问题了。
即保证了效果，也保证了文本的不丢失，为残障人士，搜索引擎，以及想要复制文章的人给予方便。
至少可以不用空格了，使用空格虽然可以轻松达到效果，无需使用text-indent了，但这显然不好。

  1. <style>
  2. span.imgblock{
  3.     height:16px;
  4.     width:16px;
  5.     display:inline-block;
  6.     background:#0099FF;
  7.     overflow:hidden;
  8. }
  9. strong.aaa{
  10.     display:inline-block;
  11.     padding-left:2000px;
  12. }
  13. </style>
  14. <p><span class="imgblock"><strong class="aaa">这里看不见，确可以复制到。</strong></span>选中前边的框子，然后复制吧<br />你可以复制所有本文<p>

Posted in CSS | 1 Comment » | 132 views

用闭包制作简单动画效果

2008年6月9日 – 21:42

刚才用书上看来的写了一下，貌似还蛮好玩的
http://shawphy.com/demo/closure/animate.html
大家看那个小红方框
ie6请点上面链接查看效果,或者弹开后刷新一下看效果

  1. function tipUpdown(obj){
  2.     var objorg=obj.css("top").replace(/px/,"")-0;
  3.     for(var i=0;i<10;i++){
  4.         (function(){
  5.             var b=i;
  6.             setTimeout(function(){
  7.                 obj.css({"top":b*1+objorg+"px"})
  8.             },b*20);
  9.             setTimeout(function(){
  10.                 obj.css({"top&":b*1+objorg+"px"})
  11.             },400-b*20);
  12.         })();
  13.     };
  14. };
  15.  
  16. setInterval("tipUpdown($('#ab'))",1000)

Posted in jQuery | No Comments » | 134 views

jQuery UI 1.5 正式版发布

2008年6月9日 – 18:14

原文：
http://jquery.com/blog/2008/06/09/jquery-ui-v15-released-focus-on-consistent-api-and-effects/
实在太长，懒得翻译了……

总体来说，蛮好用的看上去。官方的文档还没有完全跟上，只有老的一些了。
等下回官网的文档好了，我也一并更新下吧。

主要是统一了API

* $(”div”).draggable() creates a draggable
* $(”div”).draggable(”destroy”) destroys it
* $(”div”).draggable(”method”) calls another method on the plugin.

修正了N多的BUG

增加了http://script.aculo.us/这里很多特效

http://ui.jquery.com/themeroller
这里可以做自己的主题

http://ui.jquery.com/download
这里可以下载到最新版

http://docs.jquery.com/UI
这里是文档

记得datepicker吧，里边的简体中文部分是cloudream翻译的~

Posted in jQuery | 2 Comments » | 172 views

Firebug 1.2b3 中文版

2008年6月9日 – 02:06

本来我不想发这个篇文章的，只在上次那文章里改 一下就好

不过考虑到可能有些人是通过RSS订阅的，如果我这不发帖子他们不知道更新了。。。
所以就再发一次

firebug 1.2b3
点击下载firebug 1.2b3
下载的文件如Fx不识别，则下载完后在资源管理器中把文件拖进Fx即可开始安装

Posted in 其他 | 2 Comments » | 111 views

适用于firefox 3 的fierbug 和 web developer 中文版

2008年6月6日 – 02:34

两个版本都更新了一些东西，强烈推荐下载适用
这回两个都不是我翻译的。web developer 可能是基于我先前1.1.5翻译的，不管了，反正有中文版就是好的。
firebug我这个只是启用了简体中文版，我增加了一点点之前没翻译的

web developer 1.1.6
http://downloads.chrispederick.com/work/web-developer/web-developer-localized.xpi
firebug 1.2b3
点击下载firebug 1.2b3
firebug 1.2.0b6
https://addons.mozilla.org/zh-CN/firefox/addon/1843
下载的文件如FF不识别，则下载完后在资源管理器中把文件拖进FF即可开始安装

Posted in 其他 | 2 Comments » | 223 views

jQuery 1.2.6 发布信息

2008年6月4日 – 02:23

姗姗来迟的1.2.6的发布信息，其实本来是1.2.4的，结果扯出点小事来。
这回jq文件97.8K，直逼100K大关啦。估计下个版本就破了。
其实pack版破30也是很早以前的事情了
好了，多的不说了

主要是性能更新，
可以看这里：
http://spreadsheets.google.com/pub?key=pFIHldY_CksyThxfgx6krfA

没有IE6，被无视咯~

事件处理快了103% ——快了很多啊

CSS选择器快了13%——非常好，这个最重要了，越快越好。不过受限于正则的速度。。。是由于jQuery.map() 提升866% 还有 jQuery.extend() 19% 提升速度，所以导致整个都快了

.offset() 21%

.css() 25%

然后是新特性
Dimensions插件彻底融入jquery内核。这个上次已经说过了。

.attr()重写了，解决了１５项ｂｕｇ

.toggle() 能接受更多函数了
比如：
$("div").toggle(function(){
$(this).removeClass("three").addClass("one");
}, function(){
$(this).removeClass("one").addClass("two");
}, function(){
$(this).removeClass("two").addClass("three");
});

.index() 支持jQuery集合了
var test = $("div.test");
$("div").index( test ) == 3

jQuery.makeArray可以把任何东西弄成数组了
jQuery.makeArray( document.getElementsByTagName("div") )
// => [ div, div, div ]

jQuery.makeArray( true )
// => [ true ]

jQuery.makeArray()
// => []

beforeSend 能取消Ajax调用了
$.ajax({
beforeSend: function(){
return $("#input").val() == "";
},
url: "test.php"
});

从上面代码上看，就是在beforeSend里，return true，就是取消请求。跟一般的return false不太一样。

动画的速度可以自己设置fast slow normal的值了。
jQuery.fx.speeds.slow = 1000;
$("#test").slideDown("slow");

总体来说，更新就这些了。

Posted in jQuery | No Comments » | 79 views

jQuery UI 1.5 RC 发布

2008年6月3日 – 11:44

这回算是出RC了，把已知BUG都修正了，
并且决定在6月8日发布正式版。
到时候文档之类的都会跟上的。

大家可以去下载测试：
http://ui.jquery.com/download

Posted in jQuery | No Comments » | 49 views

jQuery 1.2.6的更新内容，以及文档5.29日重要更新

2008年5月29日 – 02:57

文档又更新了
但愿大家别烦，饶恕我这几天忙没办法一次性更新。只能更新点放出点。

2008-05-29 16:36:07 +0800
+ 核心 部分 数据缓存
+ 工具inArray函数
* noConflict注释

另外看到1.2.6中有上一版1.2.3里没有的几个函数，官网文档还没跟上，我就自己随手写点。不放进中文文档了。

感谢Cloudream 提醒~~失误了，这个就是Dimensions插件里的，1.2.3里只提供了offset，再加上早先的height,width,到现在已经完全把这个插件加进来了。
Dimensions插件已然融入jquery了：

offsetParent
用于检测对应元素实际的相对偏移的父对象
返回值：jQuery
示例：
<div id=”p” style=”position:relative”>
<div>
<div id=”c” style=”position:absolute;left:30px”>dd</div>
</div>
</div>
$(”#c”).offsetParent()[0].id    // p

position
用于检测实际的相对偏移，相对于上面那个函数所取得的对象。
返回值{top:xxx,left:xxx}
示例：
$(”#c”).position().left //30

scrollTop,scrollLeft
用于元素内部的滚动条，比如一个textarea，可以用来滚动
JQ传统咯，即可以设置也获取值

innerHeight, innerWidth
用来获取元素实际内部大小
innerHeight=height+paddingTop+paddingBottom

outerHeight,outerWidth
用于获取元素实际外部大小。

如果使用outerHeight()则返回值为
height+borderTop+borderBottom

如果使用outerHeight(true)，则返回值为
height+borderTop+borderBottom+marginTop+marginBottom

好了，基本就这些了。暂时感觉没啥用处，实际项目的时候可以把这些删除掉，然后再用packer打包。

Posted in jQuery | 4 Comments » | 44 views

jQuery 中文文档AJAX部分再度更新

2008年5月27日 – 22:44

发现官网更新了，我这也更新一下。
之前下过离线版的可以再下载一下。
更新了AJAX部分
修正了scroll的示例代码

在线查看地址：http://shawphy.com/jqueryapi/
离线版下载：http://shawphy.com/jqueryapi/jqueryapi12.zip

有空的朋友可以一起来SVN维护
svn checkout http://jquery-api-zh-cn.googlecode.com/svn/trunk/ jquery-api-zh-cn-read-only

Posted in jQuery | No Comments » | 44 views

Page 2 of 7«12345»...Last »
本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"Shawphy.Com", 保留原始链接, 此外还必须标注原文标题和链接.
走走停停看看 is proudly powered by WordPress Entries (RSS) and Comments (RSS). Theme by Bob