link 的四種狀態

Q: a 跟 a:link的權重誰比較高？
A: a:link比較高
a /* specificity = 1 */
a:link /* specificity = 1,1 */

Q: a:link a:hover a:active a:visited 誰的權重比較高？
A: 都一樣高
a:link /* specificity = 1,1 */
a:hover /* specificity = 1,1 */
a:active /* specificity = 1,1 */
a:visited /* specificity = 1,1 */

Q: a:link 與 a:visited 有何不同？
A: a:link 指的是 unvisited link， a:visited 指的是 visited link，注意皆必須有 href 的屬性(a name="foobar" 不會apply這些屬性)。
比較詳細的定義如下

:link
Refers to any anchor that is a hyperlink (i.e., has an href attribute) and points to an address that has not been visited. Note that some browsers may incorrectly interpret :link to refer to any hyperlink, visited or unvisited.
:visited
Refers to any anchor that is a hyperlink to an already visited address.

Q: a{color:red} 與 a:link{color:red} 有何不同？
A: a{color:red}不僅 apply 到 <a href="foobar"> ，也會apply到 < a name="section4"> ，而 a:link{color:red} 只會apply到前者。

Q: 我有聽過 :link :visited :hover :active(LoVe HAte) 的順序，有什麼意義嗎？
A: 主要是因為這些 pseudo class有相同的權重，所以這個順序是依照一般事件發生的順序排列的，一般是一個 link，然後會 hover 過去，最後才是點擊發生的 active。假設今天順序寫成 a:hover{color:red} a:link, a:visited{color:blue}，當滑鼠移過去 link 的時候，這時候連結仍然會是藍色的，因為 a:hover 的屬性會被 a:link 或 a:visited 蓋過去。

另外，由於:link與:visited不會同時出現(要不是visited就是unvisited)，這個順序也可以換成:visited :link :hover :active，不過就沒有口訣了。

Reference: Eric Meyer: Link Specificity

JavaScript Empty link - JumbaWiki

JavaScript Empty link - JumbaWiki

<a href="javascript:;">Do nothing</a>
<a href="javascript:void(0);">Do nothing</a>

don't use new in Javascript

JavaScript, We Hardly new Ya » Yahoo! User Interface Blog

You never need to use new Object() in JavaScript. Use the object literal {} instead. Similarly, don’t use new Array(), use the array literal [] instead. Arrays in JavaScript work nothing like the arrays in Java, and use of the Java-like syntax will confuse you.

Do not use new Number, new String, or new Boolean. These forms produce unnecessary object wrappers. Just use simple literals instead.

So the rule is simple: The only time we should use the new operator is to invoke a pseudoclassical Constructor function. When calling a Constructor function, the use of new is mandatory.

Javascript: substring, substr

Tsung's Blog | JavaScript: substr() 負數的算法 IE, Firefox 不同

語法 string.substring(from, to)

• from: A nonnegative integer that specifies the position within string of the first character of the desired substring.
  
• the length of the returned substring is always equal to to-from.
  
• String.slice( ) and the nonstandard String.substr( ) can also extract substrings from a string. Unlike those methods, String.substring( ) does not accept negative arguments.

語法 string.substr(start, length)

• from: If this argument is negative, it specifies a position measured from the end of the string: -1 specifies the last character, -2 specifies the second-to-last character, and so on.
  
• Negative values for start do not work in IE 4 (this is fixed in later versions of IE). Instead of specifying a character position measured from the end of the string, they specify character position 0.

https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/Array/Slice

語法 array.slice: The slice() method selects a part of an array, and returns the new array. Note: The original array will not be changed.
* For object references (and not the actual object), slice copies object references into the new array. Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays.

* For strings and numbers (not String and Number objects), slice copies strings and numbers into the new array. Changes to the string or number in one array does not affect the other array.

javascript:alert('abcde'.slice(-3,-2)); // c


update: 測試的結果是IE 6的substr第一個參數不可為負數, 所以如果要cross browser的話, 不管是substring, substr 第一個參數皆不可為負

update2: ie6的slice 用在 string 上兩個參數都可以為負數

JavaScript event出現順序

1. mouse event
Javascript - Mouse Events

• single click: mouse down->mouse up->click
  
• double click: mouse down->mouse up->click->mouse down->mouse up->click->dobule click

2. keyboard event
JavaScript - Detecting keystrokes

• keydown->keypress->keyup

CSS2: outline

CSS2 introduces a last major piece of user interface styling: outlines. An outline is sort of a like a border, but there are two very important differences. First, outlines do not participate in the flow of the document like borders do, and thus don't trigger document reflow as they appear and disappear. If you give an element a 50-pixel outline, the outline will very likely overlap other elements. Second, outlines can be nonrectangular—but don't start leaping for joy just yet. This does not mean that you can create circular outlines. Instead, it means that an outline on an inline element may not act like a border would on that same element. With an outline, a user agent is allowed to "merge" the pieces of the outline to create a single continuous, but nonrectangular, shape. Figure 13-10 shows an example.

firefox idiom ie truebody

function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

http://blog.rexsong.com/?p=183

javascript idiom: attachevent+detachEvent vs. addEventListener+removeEventListener

if (target.addEventListener) target.addEventListener("mouseout", mouseout,
false); // DOM
else if (target.attachEvent) target.attachEvent("onmouseout", mouseout); // IE
else target.onmouseout = mouseout; // tradition

if (target.removeEventListener)
target.removeEventListener("mouseout", mouseout, false); // DOM
else if (target.detachEvent) target.detachEvent("onmouseout",mouseout); // IE
else target.onmouseout = null; // tradition

javascript idiom: stopPropagation+preventDefault vs. cancelBubble+returnValue

if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2
else event.cancelBubble = true; //IE

// prevent default action

if (event.preventDefault) event.preventDefault( ); // DOM Level 2
else event.returnValue = false; // IE

mouseover, mouseout專用: relatedTarget, fromElement, toElement

Refers to an Element that is related to the target node of the event. For mouseover events, it is the Element the mouse left when it moved over the target. For mouseout events, it is the Element the mouse entered when leaving the target. relatedTarget is undefined for other types of mouse events.

fromElement, toElement

fromElement specifies the document element that the mouse came from for mouseover events. toElement specifies the document element that the mouse has moved to for mouseout events. Comparable to the relatedTarget property of the DOM MouseEvent object.