大酱汤

购入G11几个星期了,本来想每个周末研究一道菜,还是懒懒的。第一道菜上镜了,韩国料理大酱汤。不是我崇洋媚外,只是对于不常吃的菜还是比较感兴趣。

准备食材是件很麻烦的事,需要很多种,但每一种需要的量并不多。为了省事,我充分发挥了主观能动性,去掉不少食材。所以,主要的食材就是娃娃菜、洋葱、大蒜、冬菇、黄瓜、豆腐、花颌。其实,大酱汤的口感在于豆酱,超市都有买的。所以这道菜并没有太大的技术含量。

IMG_0043

成果图,好像没有那么好看,不过味道还不错。

IMG_0047

Pastoral

换了主题,对原来的主题(pastoral)做个纪念。

pastoral

JS获取元素尺寸和位置

获取元素尺寸的方法

1.通过clientWidth, offsetWidth, scrollWidth.

clientWidht, clientLeft, clientX, offsetWidth, scrollWidth等具体的含义看DOM

clientWidth=width+padding相当jQuery的innerWidth();

offsetWidth=width+padding+border相当于jQuery的outerWidth(),outerWidth(true) 则包括margin;

scrollWidth是元素的滚动宽度,包括padding.

clientWidth, offsetWidth, scrollWidth获取的是纯数字的值,但不能用于display:none;的元素,可用于visibility:hidden;的元素。

获取窗口的尺寸会有些不同,这涉及到渲染模式。

…盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在不声明Doctype的情况下,浏览器默认是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

当页面是怪异模式时,IE无法识别document.documentElement,所以var height = document.compatMode==”CSS1Compat”?document.documentElement.clientHeight : document.body.clientHeight;或者可以通过下面的函数直接获取尺寸。

function getWindowSize(){
 var w=document.documentElement.clientWidth||document.body.clientWidth;
 var h=document.documentElement.clientHeight||document.body.clientHeight;
 return{'w':w,'h':h};
}

其实也可以通过window.innerWidth和window.outerWidth获取屏幕的尺寸,不过IE并不支持。

获取文档的尺寸时,当页面是标准模式下,document.body.clientHeight则是文档的高度。而document.body.offsetHeight, document.body.scrollHeight, document.documentElement.offsetHeight,  document.documentElement.scrollHeight也是文档的高度,但在IE下document.documentElement.offsetHeight则是窗口的高度,很奇怪,自己也有点晕了。

2. 通过document.defaultView.getComputedStyle

IE并不支持这个方法,IE可以通过currentStyle方法。不过,两者在细节上据说还是有所区别的,document.defaultView.getComputedStyle获得的是绝对值,即em单位会转换成px,但currentStyle则不会。

function getStyle(obj,pro){
 return obj.currentStyle ?
 obj.currentStyle[pro] :
 document.defaultView.getComputedStyle(obj,null)[pro];
}

getStyle()函数获取的是带单位的值,可用于display:none;的元素,但此时无法获得未在样式中显示定义的属性,例如高度是自适应的元素,获得的值就是auto。如果元素未定义display:none;即使高度自适应,也可以获得实际的高度值。getStyle()获得的是计算后的样式值。

PS: 那如何获得隐藏的自适应元素的尺寸呢,js获取隐藏元素(display:none)的尺寸有解说。

PS: 如果用该方法获得float和opacity属性值,getStyle()函数则要做一些变动,可以参考prototype的getStyle()函数。

3. obj.style.width

obj.style.width获取的是带单位的值,但只能获取获取内嵌的样式,即<code>&lt;div style=”width:100px; height:100px”&gt;</code>这种形式的属性值,内部样式和外部样式中的属性值都无法获得。如果没有内联样式,获取的值就是空。通常也是通过obj.style来设置尺寸,不过要记得带单位。

获取元素位置的方法

1. getBoundingClientRect()

function getPos(obj){
 return {
   top:document.documentElement.scrollTop+obj.getBoundingClientRect().top,
   left:document.documentElement.scrollLeft+obj.getBoundingClientRect().left
 };
}

2. offsetTop和offsetLeft

function getPos(obj){
 var pos = {"top":0, "left":0};
 if (obj.offsetParent){
   while (obj.offsetParent){
     pos.top += obj.offsetTop;
     pos.left += obj.offsetLeft;
     obj = obj.offsetParent;
   }
 }else if(obj.x){
   pos.left += obj.x;
 }else if(obj.x){
   pos.top += obj.y;
 }
 return pos;
}

方法一的效率比较高,但是safari并不支持方法一,如果需要兼容safari还是得要方法二。

Location 对象

location

location

hash 设置或返回从井号 (#) 开始的 URL(锚)。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL(查询部分)。

2009年总结

2009年过去了这么久,才写总结,有点汗颜。

年初的转折

2009年初,人生轨迹有了一点转折,离开学校,开始自己的第一份工作。来到广州,纯属意外,缘分吧。其实,自己觉得有点遗憾,没有好好和校园生活告别。和舍友的毕业旅行,还是让我有点欣慰,四个人都玩的很开心。然而正如我们当初所不愿的,我们还是在四个不同的城市,希望以后偶尔还能聚聚。

工作

工作了一段时间后,我还是庆幸自己当初选择了工作,而不是继续学习。呵呵,人还是不要后悔自己的选择会比较开心一点。

工作中的学习。Q3主要学习了HTML, CSS,Q4主要学习了JS。

对于HTML,CSS,在开始的时候,我的热情还是比较大的,但慢慢发现他们没有JS好玩,而且有时候发现某些问题实在是无理取闹,没有根据可言,有点沮丧。最近,对HTML,CSS,也比较麻木了。创新的东东才能给人激情。今天又看了N人写的代码,觉得自己麻木的根本原因是缺乏创新。虽然工作中需要模板,但还是可以不断改进旧的模板,引进新的模板,继续保持“玩”的精神才能使自己更有激情。嗯,激情很重要!

对于JS,我应该处在瓶颈阶段。自己认为JS应该有三个阶段:初级、中级、高级。初级也就是入门的阶段,了解基本的语法,能够实现一些简单的页面效果。自己应该算是入门了,但是同样的效果,高手和新手的写法还是有很大的区别,自己在效率方面也考虑的比较少。而且JS中还有很多地方没有深入研究,比如prototype, constructor,闭包等都理解得不够透彻。由于自己主要是制作页面,后台部分接触的较少,数据的部分、ajax的部分,这些JS关键的地方都没有机会深入。希望2010年,自己能够尽量向中级靠拢。 高级的部分……自己觉得应该还是有这个阶段,至于怎么定义,我想等我到了中级的阶段应该会比较清晰吧。或许,高级就是那种抛开语言本身所剩的东东。

生活

注重心灵的修养。活了20多年,居然没有注意到这方面,确实对自己很讶异。看了《遇见未知的自己》,觉得还不错,值得一读。2010,做个诚实、快乐的修行者。

2010的小开头

2010,本命年,呜呜,民间说法“本命年犯太岁,太岁当头坐,无喜必有祸”,那改信上帝,会不会好一点?嗯,开年就遇到很多麻烦事,不过希望自己能够静下心,一件一件慢慢解决(“人的恐惧一般都是对未知的恐惧”)。希望2010上半年的愿望可以实现。