jQuery JSON 简单demo

今日整了半天好不容易把json搞定。。。。
发帖留念一下。。。。
demo地址:http://shawphy.com/demo/json/json.html

估计是一开始json 格式没搞对,

[quote]{
"addressbook": {
"name":"peter",
"address":{
"city":"New York",
"street":"abc rd",
"no":"1"
}
}
}[/quote]

服务器端只管输出一个字符串即可,不用关心什么contentType啥的。

[quote] $(function() {
$("#gj").click(function() {
$.getJSON("json.asp",function(json) {
alert(json.addressbook.address.city);
})
});
$("#aj").click(function() {
$.ajax({
type:"post",
url:"json.asp",
dataType:"json",
data:{abc:"ab"},
success:function(json) {
alert(json.addressbook.name);
},
error:function() {
alert("error");
}
});
});
})
[/quote]

jQuery UI 1.5b4 发布

原文:
http://jquery.com/blog/2008/05/05/jquery-ui-15b4-featuring-effects-and-a-new-home/

近日1.5的b4发布了,看发布日志来看,貌似先发布了b3,结果发现恶性bug,于是没几个小时又发布了b4,跳过了b3了。
据声称,已经修复了50多个bug,还剩下5个主要的bug修复就好了。这个版本将是最后的测试版了,再过几天就能发布正式版了。

还有,jQuery Enchant 也会成为jQuery UI的一部分,提供了很多新的动画特效。据说要提供15种特效,包括了script.aculo.us中的一些(blind,bounce,drop,fold,slide …),还有些新的(transfer, explode. clip, scale)

同时,http://ui.jquery.com的页面也重新做过了。果然是比以前好看了不少,(虽然以前也不错)。不过,jQuery UI依然感觉不是很好用。。。而且也不是很漂亮。。。唉。。。。难道真的要用ext去么。。。

下载地址:http://code.google.com/p/jqueryjs/downloads/detail?name=jquery.ui-1.5b4.zip

jQuery的浏览器兼容性策略

之前写过一篇日志(http://shawphy.com/article.asp?id=34),说FF没有cancelBubble,所以要做兼容,其实多虑了,JQ已经为我们做好兼容性了。
也就是说,要阻止冒泡,直接使用
$("a").click(function(e) {
e.stopPropagation();
})
这样即可。
她还修正了preventDefault ,target ,relatedTarget,pageX/Y,event.which(确定按了键盘或者鼠标上的哪个按键。)

多的不说,大家自己看代码吧(jQuery 1.2.3 /line:2093-2149)

[quote] fix: function(event) {
// store a copy of the original event object
// and clone to set read-only properties
var originalEvent = event;
event = jQuery.extend({}, originalEvent);

// add preventDefault and stopPropagation since
// they will not work on the clone
event.preventDefault = function() {
// if preventDefault exists run it on the original event
if (originalEvent.preventDefault)
originalEvent.preventDefault();
// otherwise set the returnValue property of the original event to false (IE)
originalEvent.returnValue = false;
};
event.stopPropagation = function() {
// if stopPropagation exists run it on the original event
if (originalEvent.stopPropagation)
originalEvent.stopPropagation();
// otherwise set the cancelBubble property of the original event to true (IE)
originalEvent.cancelBubble = true;
};

// Fix target property, if necessary
if ( !event.target )
event.target = event.srcElement || document; // Fixes #1925 where srcElement might not be defined either

// check if target is a textnode (safari)
if ( event.target.nodeType == 3 )
event.target = originalEvent.target.parentNode;

// Add relatedTarget, if necessary
if ( !event.relatedTarget && event.fromElement )
event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) – (doc.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) – (doc.clientTop || 0);
}

// Add which for key events
if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) )
event.which = event.charCode || event.keyCode;

// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
if ( !event.metaKey && event.ctrlKey )
event.metaKey = event.ctrlKey;

// Add which for click: 1 == left; 2 == middle; 3 == right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button )
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));

return event;
},
[/quote]

标准化布局与实时切换CSS

今天花了点时间,彻底的写了一个两栏布局,IE6/7和FF下彻底完全一样了,另外两个OP和SF暂时不高兴管了。

同时写了一个切换CSS,即网站换肤功能。最近很流行的,一写才发现果然非常简单。
两三行搞定的。主要思想就是给link元素设定ID,然后用getElementId来获取后改变href值。超EASY
具体可以看这里的DEMO

http://shawphy.com/demo/changecss/changecss.html

唯一的缺憾是FF下对于未加载的样式会闪一下,当然他是对的……
因为我已经改变了样式,那老的自然应该消失,而新的没载入完,那自然还没呈现,所以有瞬间的闪一下。
不过虽然很正确,可惜少了点人性化……

 下次有空再测试IE8吧~

P.S. 今天更新一下,用了jQuery的读写Cookie的插件,现在可以保存设置到Cookie里了~本功能就此打住,不再更新


jQuery(function() {

	//读取cookie
	$("#changecss").attr("href","css/"+$.cookie("style")+".css");
	$("#sidebar>ul>li>a").click(function() {

		//设置link元素的href属性
		$("#changecss").attr("href","css/"+$.trim($(this).text())+".css");
		$("#headerMain").html($(this).text());

		//写入cookie,1年过期
		$.cookie("style",$.trim($(this).text()),{ expires: 365})

		//去除a上难看的虚线框
		this.blur();

		//不触发默认鼠标事件
		return false;
	}).css({"width":"220px","display":"block"});
});

jQuery 再度大修

之前有过些小修小补的,今天抽空统一再校对一下,修正如下

全文替换1.1遗留下的@符号
jQuery(callback)  未翻译的翻译一下
slice(start,[end])  未翻译的翻译一下
parent(expr)   例子中删除个body
append(content)   C要
css(name)   删除多余的<hr />
unbind([type],[data])  代码注释翻译
change(fn)   未翻译的翻译一下
click(fn)   常用的事件->几个事件的顺序
dblclick(fn)   未翻译的翻译一下
focus()    未翻译的翻译一下
scroll(fn   修正
submit(fn)   select->submit
toggle()   删除多余的<hr />
stop()    代码注释翻译

 

朋友可以再次下载一下离线版。
现在基本上注释也都翻译了。少量实在2B的就不翻了……

点击div之外的地方div消失







click here to show a div.





暂时没有找到纯JQ的方法,只能采用事件处理机制来阻止冒泡。
可以在这里看效果 http://shawphy.com/demo/closediv/closediv.html

===================================
事后发现其实JQ已经为此做了兼容性,具体可以参考http://shawphy.com/40.html

&&|| vs ?:

前些天,群里小鱼问
<input name="checkbox" type="checkbox" onclick="$(this).is(‘:checked’) &&$(‘#checked’).slideDown(‘slow’) || $(‘#checked’).slideUp(‘slow’);" />

<p id="checked" style="display: none; " >content </p>;
为什么可以这样写

这个是因为JS等语言的对于&&||之类的运算符截断的作用
即如果&&前第一项为假,后边不用计算就知道整个表达式是假,所以就截断,不进行后面的第二项,再跟||后第三项进行或运算,这样就收起来了
如果第一项为真,那么就执行第二步,第二项返回是JQ对象,也是真,那么又截断,因为对于||或来说,只要有一个真,那整个表达式就肯定是真了。

刚看到的时候觉得好,原来还能这样做啊。但实际上分析下来,也没觉得有多好其实这种运算等同于?:运算,那何必再用这种看似很玄乎的方式呢?

进一步用代码测试
var b;
var a=new Date();
for (var i=0; i<1000000; i++) {
1&&(b=1)||(b=2);
}
alert(new Date().getTime()-a.getTime());

==============================
var b;
var a=new Date();
a=new Date();
for (var i=0; i<1000000; i++) {
1?(b=1):(b=2);
}
alert(new Date().getTime()-a.getTime());

我在IE6下,平均时间的话,用&&||花事件一般在1150毫秒左右,而用?:花1050左右
可见性能上更优,语义上更能理解的用法摆在面前,不用而故弄玄虚,何苦呢~
此文献给“叫我小鱼/;f”~

jQuery UI 冲刺 3月14-15日,2008

原文地址:
http://jquery.com/blog/2008/03/07/jquery-ui-worldwide-sprint-march-14-15/

号召大家能够在那两天一起参与活动,测试,编写文档,制作DEMO,修复BUG等等。以便能够进一步将jQuery UI的1.5从alpha ,beta到正式版。

活动方式是,大家可以通过

  • irc: #jquery-sprint on http://freenode.net/
  • wiki: http://docs.jquery.com/JQuerySprint
  • trac: http://dev.jquery.com/

参与

日程安排

  • Kick-off Meeting: March 14th, 9:00 am EDT / 14:00 GMT+1
  • Status Meeting: March 15th, 9:00 am EDT / 14:00 GMT+1
  • Wrap-Up Meeting: March 15th, 6:00 pm EDT / 23:00 GMT+1

我是新人,能帮上忙么?
Absolutely!绝对可以帮忙!如果你以前想参与jQuery或是jQueryUI的贡献,但始终找不到机会,那这次及时最完美的时机。如果你是新手,我们将协助你用你喜欢的方式帮我们。测试,编写文档,制作DEMO,修复BUG,或仅仅是与我们的工作人员交流,提供反馈意见。我们保证能够兼容所有浏览器,包括你的~

活动WIKI:http://docs.jquery.com/JQuerySprint

无论你是新手还是老鸟,只要感兴趣那两天就能参与哦!

注:北京时间是GMT + 8,所以三次会议时间将会在北京时间14日晚上21点,15日晚21点还有16日早上6点HOHO~~最后一场大家都睡觉了吧~~

一起来参与吧~~