yangdongxing

近日发现一老外写了一个 类似lightbox的jquey插件，facebox，用起来很简单，自己拿过来修改了一些，修改了一些bug，准备用在bindNews.com，专门用来做提示性的信息。

• 优化原有，png图片边框，ie6失去透明度的兼容性bug。
• 优化：把原有的六张图片，用一张图片来替代，然后用css背景定位来定位图片。减少了浏览器请求服务器的次数，快速载入背景元素，增加用户体验。
• 在优化过程中也发现了一个问题，就是 在 firefox浏览器中，popUp框会使原本可见的区域失去获得焦点的能力，有望改进。
• popUp for bindNews.com 预览链接（将在新窗口打开）

感觉应该理性的管理下自己的时间，上班的时间，下班后的时间，上班除了工作还应该去学习什么东西，下班在家除了休息，娱乐，应该看哪些方面的书。之所以会想这些，觉得自己的时间管理太混乱啦。工作，娱乐，学习都放到一起，会出现很多的不便，比如说：现在是工作时间，可是我确因为很关注一种技术，而把工作推辞到晚上再做，但是到了晚上，又会以第二天要上班为借口提前睡觉。结果工作的任务就没有完成。第二天一上班，老板就会问：这件事处理的怎么样啦？………………….. 恶性的蝴蝶效应来啦。So ，管理我的时间，从现在开始。

接着记录学习笔记：

1. css( name )

$(”p”).css(”color”);To access the color style of the first paragraph:取得这个p节点的颜色属性值。

2. css( properties )

$(”p”).css({ color: “#ff0011″, background: “blue” });
$(”p”).css({ “margin-left”: “10px”, “background-color”: “blue” });
$(”p”).css(”color”,”red”);

分别列举出来，用.css属性来给节点添加样式的方法， 包括添加一个样式和多个样式的方法，可以看出，添加一个方法，位css(”属性” , “属性值”)。多个方法为：css({”属性1″:”属性值1″ , “属性2″:”属性值2″,…})这里要注意两点。1，这里的样式属性，直接可以用 “ - ” 来连接，不同于javascript给定的方法。2，多个属性同时调用时，应该在所有属性外面添加个大括号。

3. offset( )

Get the current offset of the first matched element relative to the viewport.The returned object contains two Integer properties, top and left. The method works only with visible elements.获取第一个匹配相对于使窗口的节点的偏移量。返回的是两个整数的属性值，距离浏览器窗口的上面的距离和左面的距离。这个方法只能工作在可视元素上。
var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );
return :left: 0, top: 50

4. height( )

$(”p”).height(); Get the current computed, pixel, height of the first matched element.In jQuery 1.2, this method is able to find the height of the window and document.获取目前匹配节点的高度，以像素位单位的。在1.2版本当中的此方法，可以检索到window和document节点的高度。

5. height( val )

$(”p”).height(20); Set the CSS height of every matched element.If no explicit unit was specified (like ‘em’ or ‘%’) then “px” is concatenated to the value.与上面的方法基本相同，用来设置匹配节点的高度。

6. width() width(val)

与上面的获取和设置高度的方法完全相同。 只不过换成了宽度。1.2版本也可以获取window和document节点的宽度。

1. jQuery(expression , [content]);

例子：$(”input:radio”, document.forms[0]); expression == “input:radio”;通过选择器选择大概的节点数组。 [content] == document.forms[0]；再通过content筛选出一个范围；最后的是，选择这个[content]中包含的”input:radio”的节点，并返回一个数组。

2. jQuery(”div > p”);

Finds all p elements that are children of a div element.选择div下所有的p标签的节点，并返回一个数组。

3. jQuery(”<div/>”).appendTo(”body”);

$(”<div><p>Hello</p></div>”).appendTo(”body”);Creates a div element (and all of its contents) dynamically, and appends it to the body element. Internally, an element is created and its innerHTML property set to the given markup. It is therefore both quite flexible and limited.动态的创建一个 div 元素，然后把它放到body元素的最后面。很类似IE的私有属性innerHTML（但现在已经被几乎所有的浏览器所支持）方法。

4. jQuery(elements);

$(document.body).css(”backgroundColor”,”red”);Sets the background color of the page to black.设置网页的北京颜色为红色。通过$(document.body)来检索元素。

5. jQuery(callback);

$(function(){/* Document is ready */}); 这是$(document).ready();方法的简写。Executes the function when the DOM is ready to be used.当文档的DOM樹建立完成时执行注释的内容。个人不喜欢这样写，从可读性的角度来看，这样写并不可读。

6. each(callback);

选取的节点.each(); each()方法相当于传统的for(var i=0,i++,i<10){callback} 的循环执行方式。好像一个批量处理函数。

7. size() ， length;

$(”img”).size(); $(”img”).length; The number of elements in the jQuery object.This returns the same number as the ‘length‘ property of the jQuery object.相当于length属性，获得jQuery元素的数目。

8. get();  get(index);

$(”img”).get().reverse();This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.  get()方法，用于把选择的节点们转换成数组。 get（0）是获得这个数组的第一个元素。

9. Core 里面还有5个方法没有写出来，主要是没有看懂，尤其是 index();方法。jQuery.fn.extend(object),jQuery.extend(object),jQuery.noConflict,jQuery.onConflict(extreme),这四个方法跟下周的培训没有关系。先放一放吧。嘿嘿， 那位兄弟知道index()方法是干什么的，麻烦留言相告。谢谢！！！！