@media all and (min-width: 0px){ }opera和safari都支持
@media screen and (-webkit-min-device-pixel-ratio:0){}
这个只支持safari，以前做表单统一样式的时候研究过。
如果想区分opera和safari的话先写
@media all and (min-width: 0px){
}
然后写
@media screen and (-webkit-min-device-pixel-ratio:0){}
就OK了

div{ width:100px; height:200px;}
@media all and (min-width: 0px){ div{ background:red} }
@media screen and (-webkit-min-device-pixel-ratio:0){div{background:#000}}

可以试下

2、cap_first 将字符串中的第一个单词的首字母变为大写。
${‘str’？cap_first}à结果为Str
3、uncap_first将字符串中的第一个单词的首字母变为小写。
${‘Str’？cap_first}à结果为str
4、 capitalize将字符串中的所有单词的首字母变为大写
${‘str’？ capitalize}à结果为STR

5、 date,time，datetime将字符串转换为日期
例如：
<#assign date1=”2009-10-12”?date(“yyyy-MM-dd”)>
<#assign date2=”9:28:20”?time(“HH:mm:ss”)>
<#assign date3=” 2009-10-12 9:28:20”?time(“HH:mm:ss”)>
${date1}à结果为2009-10-12
${date2}à结果为9:28:20
${date3}à结果为2009-10-12 9:28:20
注意：如果指定的字符串格式不正确将引发错误。

6、ends_with 判断某个字符串是否由某个子串结尾，返回布尔值。
${“string”?ends_with(“ing”)?string} 返回结果为true
注意：布尔值必须转换为字符串才能输出

7、html 用于将字符串中的<、>、&和“替换为对应得&lt;&gt;&quot:&amp

8、index_of（substring,start）在字符串中查找某个子串，返回找到子串的第一个字符的索引，如果没有找到子串，则返回-1。
Start参数用于指定从字符串的那个索引处开始搜索，start为数字值。
如果start大于字符串长度，则start取值等于字符串长度，如果start小于0， 则start取值为0。
${“string”?index_of(“in”) à结果为3
${“string”?index_of(“ab”) à结果为-1

9、length返回字符串的长度 ${“string”?length}à结果为6

10、lower_case将字符串转为小写
${“STRING”?lower_case}à结果为string

11、upper_case将字符串转为大写
${“string”?upper_case}à结果为STRING

12、contains 判断字符中是否包含某个子串。返回布尔值
${“string”?contains(“ing”)?string} à结果为true
注意：布尔值必须转换为字符串才能输出

13、number将字符串转换为数字
${“111.11”?number}à结果为111.11

14、replace用于将字符串中的一部分从左到右替换为另外的字符串。
${“strabg”?replace(“ab”,”in”)} à结果为string

15、split使用指定的分隔符将一个字符串拆分为一组字符串

<#list “This|is|split”?split(“|”) as s>
${s}
</#list>
结果为:
This
is
split

16、 trim 删除字符串首尾空格 ${“ String ”?trim} à结果为String

如果本文对您有帮助并且要鼓励我的话，请扫描如下二维码支持本人的劳动成果，多谢了！

YUI的Dom方法一共有45个，在这里谈一下我学习过程遇到的问题和经验，先介绍17个寻找节点类型的Dom方法。

get(el)：记得初学JavaScript的时候，最先认识的两个方法就是getElementById和 getElementsByTagName，这两个东东也基本上能够找到大多数你需要找的东西啦。YUI里的get方法跟getElementById类 似，但是它的能力却要强很多了，el可以是String、HTMLElement或者Array。

getElementsBy ( method , tag , root , apply , o , overrides )：这个会和getElementsByTagName比较像一点点吧，但是功能差好远，基本上getElementsBy应该可以找到一切你想找的元 素，method是定义一个校验目标元素的方法，返回一个boolean值，tag是目标元素的nodeName，root是指在哪个元素中进行寻找，也 可以说成是一个范围吧。apply，我必须要说下它。。当初它困扰我了半天，YUI给出的解释是“A function to apply to each element when found ”，可以理解为一个回调函数吧，再看看YUI的代码，其中有这么一段：

if (apply) {

Y.Dom.batch(nodes, apply, o, overrides);

}

我当时的理解是，因为最终返回的是一个节点的数组嘛，我就以为执行完前边的校验后得到的结果再在apply中进行一次，也就是我在apply中再对 结果元素进行下一步的节点寻找，那么最后返回的应该是apply执行后得到的所有节点集合。。。可是无论我怎么试，最终返回的都是通过method方法所 得到数组，并没有再次通过apply获得更多的元素，嘿嘿，不要见笑哈，当时就是这么想的。。。后来发现，实际上不是这样子，我理解错误的原因只要就在那 个batch上，当时的错误在于，我把batch放进getElementsBy里了，那么在batch里边return后应该不会再继续执行 return nodes了，但是实际上这里的Y.Dom.batch(nodes, apply, o, overrides)只是一个最终的结果而已，所以return nodes还是会执行的。那么这个apply的作用在何处呢？其实作用就是执行一次回调嘛哈，它是可以实现我之前的想法的，但是不是直接返回的，举个例 子：

var uls = YAHOO.util.Dom.getElementsBy(function(el){

return el.className === 'J_tab';

},'ul','content');

这是寻找id为content的容器下className为J_tab的节点，那么如果我同时还需要获取每个ul下的所有li节点该怎么做呢，总不能再来一次循环吧，当然也可以啦，不过要好好利用下YUI吧，那就是让它获取ul的同时获取li：

var lis = [];

function getli(obj) {

lis.push(obj.getElementsByTagName('li'));

}

var uls = YAHOO.util.Dom.getElementsBy(function(el){

return el.className === 'J_tab';

},'ul','content',getli);

OK，这样子就一举两得了哈~后边的作用域和上下文就不多说啦，关于batch的神奇，下次再说哈，真的很神奇。。。

getElementBy ( method , tag , root )：这个就是通过method校验的第一个元素。

getElementsByClassName ( className , tag , root , apply , o , overrides )：是通过className进行元素寻找，其实这个方法是getElementsBy的一个特殊方法。

getChildren ( node )：这个与Dom中的childNode类似。

getChildrenBy ( node , method )：通过method方法过滤子元素，注意参数的顺序以及node不可为id。

getFirstChild ( node )：寻找第一个子元素，跟Dom中的firstChild有些类似。

getFirstChildBy ( node , method )：寻找第一个通过method校验的子元素，注意参数的顺序以及node不可为id。其实这个等同于getChildrenBy得到的第一个元素。

getLastChild ( node )：寻找最后一个子元素，与Dom中的lastChild有些类似。

getLastChildBy ( node , method )：与getFirstChildBy相反，倒着寻找。

getAncestorBy ( node , method )：寻找父节点，可以无限的往上级寻找，直到找到为止，node不能为id，跟Dom中的parentNode类似，不过这里不用反复的parentNode啦。

getAncestorByClassName ( node , className )：通过className寻找父节点，是getAncestorBy的一个特殊方法。

getAncestorByTagName ( node , tagName )：通过tagName寻找父节点，是getAncestorBy的一个特殊方法。

getNextSibling ( node )：寻找紧挨的下一个同级非文本节点的节点，与Dom中的nextSibling类似，省去了判断文本节点麻烦。

getNextSiblingBy ( node , method )：无限的往下找直到找到通过method校验的同级非文本节点，node不能为id，有了这个方法就不用无限的nextSibling啦。

getPreviousSibling ( node )：寻找紧挨的上一个同级非文本节点的节点，与Dom中的previousSibling类似，可以省去判断文本节点的麻烦。

getPreviousSiblingBy ( node , method )：无限的往前找直到找到通过method校验的同级非文本节点，node不能为id。

Here is a piece of my code:

http.open("GET", fullURL, true);
http.onreadystatechange = handleHttpResponse;

the handleHttpResponse is the function that processes the returned data.

If I wanted to pass a string in to handleHttpResponse, I use:

= handleHttpResponse(user_name);

function handleHttpResponse_remtrip(string) {
alert(string);
.. other code ..
}

This generates a "Type mismatch" error. What gives?

http.onreadystatechange = handleHttpResponse(user_name);

then you are assigning the returned value of handleHttpResponse and not the function itself.

You could try this:

http.onreadystatechange = createFunc(user_name);

function createFunc(v) {
return function() {
alert(v);
}
}

这里是些学习笔记：

================连接类==================
1- YUI connect:
var callback =
{
success: function(res) {}, //正常返回处理函数
failure: function(res) {}, //出错返回处理函数
argument: [argument1, argument2, argument3] //可以在success函数和failure函数中访

问的变量
}
var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback,

null);

2- 发送表单：
YAHOO.util.Connect.setForm(formId);
var cObj = YAHOO.util.Connect.asyncRequest(’POST’, ‘http://www.yahoo.com’,

callback);

查看请求是否已经处理完
var cObj = YAHOO.util.Connect.asyncRequest(’

GET’,''http://www.yahoo.com’,callback);
var callStatus = YAHOO.util.Connect.isCallInProgress(cObj);

超时取消请求

var cObj = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback);
setTimeout(”YAHOO.util.Connect.abort(cObj)”,10000);

================事件类==================
3- 事件侦听
YAHOO.util.Event.addListener(element,eventType,fn,obj,override)
参数：
element：为绑定事件的元素id，可以是一个数组，以支持批量操作
eventType：为事件类型
fn：为事件响应的回调函数
obj：当override为true时，为回调函数传入的参数对象；当override为false时，该参数被

忽略。
override：
返回值类型：Boolean
功能：给指定的element绑定事件响应函数

4- 删除事件侦听
YAHOO.util.Event.removeListener:function(element,eventType,fn)
参数：
element：为绑定事件的元素id,
eventType：事件类型
fn：为事件响应函数
返回值类型：Boolean
功能：给指定的element解除绑定事件

5- 侦听装载完成
YAHOO.util.Event.onContentReady ( p_id , p_fn , p_obj , p_override )
参数：
p_id：为绑定事件的元素id,
p_fn：为事件响应函数
p_obj：同addListener的obj参数
p_override：同addListener的override参数
返回值类型：无
功能：与onAvailable类似，但不同的是事件响应函数是等到element可以安全的修改的时候

才响应。

6- 侦听DOM第一次可用时执行响应函数
YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )
参数：
p_fn：为事件响应函数
p_obj：同addListener的obj参数
p_scope：同addListener的override参数
返回值类型：无
功能：当DOM第一次可用时执行响应函数。

7- 返回侦听对象
YAHOO.util.Event.getListeners ( el , sType )
参数：
el：HTML element
sType：事件类型，String类型
返回值类型：Object{
type：事件类型
 fn：addListener添加的事件响应函数
 obj：提供给事件响应函数的参数对象
 adjust：否获取缺省的事件监听器
 index：UI事件监听器列表中的位置
}

8- 获取事件发生时的时间
YAHOO.util.Event.getTime( event)
参数：
event：事件对象
返回值类型：Date对象

9- 获取事件发生时的页面标签。对于IE即window.event.srcElement
YAHOO.util.Event.getTarget(ev , resolveTextNode)
参数：
evt：事件对象
resolveTextNode：
返回值类型： HTML element

10- 创建和使用自定义的事件
A.使用CustomerEvent对象创建自己的事件
function TestObj(name) {
this.name = name;
this.event1 = new YAHOO.util.CustomEvent(”event1〃, this);
}
YAHOO.util.CustomEvent = function(type, oScope);
type表示事件类型的字符串
B.注册对自定义事件的响应函数
function Consumer(name, testObj) {
this.name = name;
this.testObj = testObj;
this.testObj.event1.subscribe(this.onEvent1, this);
}
C.响应函数
Consumer.prototype.onEvent1 = function(type, args, me) {
alert(” this: ” + this +
“"n this.name: ” + this.name +
“"n type: ” + type +
“"n args[0].data: ” + args[0].data +
“"n me.name: ” + me.name);
}

11- 当。。。时处理
YAHOO.util.Event.on("toolbar", "focusin", function(e) {  
   YAHOO.log("target: " + e.target.id);  
});  
或者：
YAHOO.util.Event.on("btn", "click", move);
var move = function(e){...};
<button id="btn">确认</button>

12- 获取当前鼠标位置
var move=function(e){
   YAHOO.util.Dom.setXY('foo', YAHOO.util.Event.getXY(e));
};

============YAHOO.lang工具===========
包含了语言工具

============YAHOO.widget组件工具===========
包含了很多小的工具，如月历，菜单，表格，对话框，进度条，文本编辑框，树型表，

Uploader等等。（类似于flash的组件）
1- YAHOO.widget.Button
2- YAHOO.widget.ButtonGroup
3- YAHOO.widget.AutoComplete//自动填写表单，将数据或远程数据写入数组
4- YAHOO.widget.Calendar//日历
5- YAHOO.widget.Carousel//图片预览显示
6- YAHOO.widget.ColorPicker
7- YAHOO.widget.Container//包含Module, Overlay, Panel, Tooltip, Dialog,

SimpleDialog)
8- YAHOO.widget.DataTable//类似EXCEL的数据表格
9- YAHOO.widget.ImageCropper//图像裁剪器
10- YAHOO.widget.LayoutManager
11- YAHOO.widget.Menu
12- YAHOO.widget.Paginator//分页显示器
13- YAHOO.widget.ProgressBar
14- YAHOO.widget.Editor/SimpleEditor//可以做成网页编辑器，功能很多
15- YAHOO.widget.Slider
16- YAHOO.widget.Tab//标签页
17- YAHOO.widget.TreeView
18- YAHOO.widget.Uploader//文件上传组件，要和swf一起使用
19- YAHOO.widget.Charts//图表，生成flash图表

============YAHOO.lang.JSON工具===========

============YAHOO.util.Element工具===========
1- 新建元素
var el = new YAHOO.util.Element('foo');//新建一个id为foo的元件
el.setStyle("color", "#f00");//设置style
el.on('click', function(e){alert(e.target.getStyle('color'));});//设置事件侦听
el.get('id');//获取id属性
el.get('childNodes');//获取子节点数目
el.get('firstChild');//获取第一个节点
el.hasChildNodes();//检测是否有子节点
el.removeChild(el.get('firstChild'));//删除第一个子节点
el.appendChild(child);//增加节点
el.getElementsByTageName(tag);//获取tagName为tag的所有元素
el.insertBefore(element,before);//在元素before前插入element
el.replaceChild(newNode,oldNode);//替换节点

============YAHOO.util.Dom工具===========
//----元素访问----
YAHOO.util.Dom.get(element);//==document.getElementById(element);
YAHOO.util.Dom.getElementsBy(method,tagName,[rootNode]);//在指定子节点下，通过指

定的方式method找元素
YAHOO.util.Dom.getElementsByClassName(className, tagName, [rootNode]);//根据

class和id找元素
YAHOO.util.Dom.inDocument(el);//判断元素是否在当前DOM中
//----class样式访问和控制-----
YAHOO.util.Dom.hasClass(element, className);//判断element上是否使用了className的

class
YAHOO.util.Dom.addClass(element, className);//给指定element增加class
YAHOO.util.Dom.removeClass(element,className);//删除element上名为className的

class
YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName);//更新
YAHOO.util.Dom.getStyle(element, property);//获取element的style中指定的属性值
YAHOO.util.Dom.setStyle(element, property, value);//设定属性值
//----元素位置访问和控制----
YAHOO.util.Dom.setX('element', value);
YAHOO.util.Dom.setY
YAHOO.util.Dom.setXY('element', point:Point);
YAHOO.util.Dom.getX
YAHOO.util.Dom.getXY('element');//返回Point对象
YAHOO.util.Dom.getRegin;//获取Region对象{left,top,right,bottom}
YAHOO.util.Dom.getClientWidth;//获取页面可视面积的高度和宽度
YAHOO.util.Dom.getClientHeight;//
YAHOO.util.Dom.getDocumentWidth;//获取文档的高度和宽度
YAHOO.util.Dom.getDocumentHeight;//
YAHOO.util.Dom.getViewportHeight;//获取页面可视区域的高度和宽度（不含滚动条）
YAHOO.util.Dom.getViewportWidth;
//----Regin对象----
YAHOO.util.Region.contains(region);//判断是否包含了region区域
YAHOO.util.Region.getArea;//计算面积
YAHOO.util.Region.intersect(region);//计算相交区域
YAHOO.util.Region.union(region);//计算两个区域并集
//----Point对象{x,y}----
可以使用数组一次性操作多个元素，如：
YAHOO.util.Dom.setStyle(['el1','el2'],'opacity',0.5);

============YAHOO.util.Resize尺寸变化工具===========

Source from http://blog.sina.com.cn/s/blog_5d41b3800100gmap.html

因为li中加入图片，会导致line-height失效如:
当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 同时以上元素的行高可能×2：

受 影响的浏览器： Microsoft Internet Explorer 5.01 / Windows  Microsoft Internet Explorer 5.5 / Windows  Microsoft Internet Explorer 6&nbsp;

解决方法：
对和文字相连接的img、input、textarea、select、object等元素加以属性

margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;
 下面是源代码可直接复制下到本地演示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css">
<style>
.hh li{ line-height:50px; }
.hh li img{margin:20px 0;vertical-align:middle; } <!--所属line-height-自身img,input,select,object高度)/2px -->

</style>
<title>布丁足迹</title>
</head>

Inline Hack for IE

* (star) can be used as the inline hack for both ie6 and ie7.

For Example:

Syntax: .selector{*property:value;}

.logo{*margin-left:10px;}

IE6 browser inline Hack

_ (underscore) can be using only for ie6

For Example:

Syntax: .selector{_property:value;}

.logo{_margin-left:10px;}

Firefox inline style

content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style

Use * html for ie6 and *+html hack for ie7

For Example:

Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6

* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack

Use html>body hack for ie7 and firefox.

For Example:

Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack

Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:

Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below

Use html:first-child {} for opera browser. Also you use

Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:

@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack

Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:

Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack

Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:

body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack

Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:

body:first-of-type .logo{margin-top:10px;} only for safari.