WEB前端开发工程师的随记–黑妞HAHA

——专注web前端开发，关注用户体验

Monthly Archives: 5月 2010

IE与FF实现纯英文纯数字字符自动换行

2条评论 Posted by 于 5月 20, 2010

IE css code:

#test{
  width:135px;
  table-layout:fixed;
  word-break: break-all;//只对IE浏览器有效
  overflow:hidden;
}

FF js code:

<!Doctype html>
<html>
<body>
<div  id="test" style=";border-width:1px;border-color:#333;width:400px;word-wrap:break-word;">
asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf
777777777777777777777777777777777777777777779999999999999999990000000000000000
</div>
<SCRIPT>
function  toBreakWord(intLen){
var  obj=document.getElementById("test");
var  strContent = obj.innerHTML;
var  strTemp = "";
while(strContent.length>intLen){
strTemp += strContent.substr(0,intLen)+"<br/>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById  &&  !document.all){toBreakWord(20);}
</SCRIPT>
</body>
</html>

google在gmail中的解决方案：
为保证各浏览器的兼容，<wbr>标记，它的作用是建议浏览器在这个标记处可以断行，只是建议而不是必定会在此处断行，还要根据整行文字长度而定。因此只要在连续的文字中间适当的插入若干标记就能解决断行问题。

function HtmlEscapeInsertWbrs(str, n, chars_to_break_after,chars_to_break_before)
{
var out = '';
var strpos = 0;
var spc = 0;
for (var i = 1; i < str.length; ++i) {
var prev_char = str.charAt(i - 1);
var next_char = str.charAt(i);
if (IsSpace(next_char)) {
spc = i;
} else {
if (i - spc == n
|| chars_to_break_after.indexOf(prev_char) != -1
|| chars_to_break_before.indexOf(next_char) != -1)
{
out += HtmlEscape(str.substring(strpos, i))
+ '<wbr>';
strpos = i;
spc = i;
}
}
}
out += HtmlEscape(str.substr(strpos));
return out;
}
/////
function IsSpace(ch)
{
return (" trn".indexOf(ch) >= 0);
}
function HtmlEscape(str){
return
str.replace(/&/g,"&amp;").replace(/</g,"&lt;")
.replace(/>/g,"&gt;").replace(/\"/g,"&"");
}
/*
说明： 函数已经帮你处理了Html敏感的符号(&),用了这个函数并不是说字符串显示的时候就会在某个点断行，只是在其中设置了可能的断行点()标记，在显示宽度不够的时候的情况下才指示浏览器做出断行。
用法： 参数说明
str： 你要处理的原始字符串
n: 每行最多多少个字符
chars_to_break_after: 一个字符串，比如"-:_",就会在这些字符后面发生断行(如果有断行必要) 如果不需要特别设置，那么使用空字符串 ""就行了
chars_to_break_before: 功能类似于上面这个， 没有特殊需要就设置成 "" 就可以了
*/
js/ajax/as/flex, xhtml/css/xml/xsl

推荐jquery vs yui3网址 http://carlos.bueno.org/jq-yui.html

一条评论 Posted by 于 5月 18, 2010

强烈推荐jquery vs yui3，看看他们之间的语法的相似差异，觉得能对学习YUI3提供一些帮助
http://carlos.bueno.org/jq-yui.html

js/ajax/as/flex

参数数值 替换 replace

一条评论 Posted by 于 5月 17, 2010

url:

http://www.taobao.com/go/act/shopping/sousuo55660.php?pid=mm_88888888_0_0&unid=123

js code:

<script type="text/javascript">
 (function(){
 var isrun = false;
var init_pid = function(){
  if(isrun) return;
  var str=window.location.search;
    var pid= str.match(/pid=mm_\d{0,10}_\d{0,10}_\d{0,10}/i);
    if(pid){
      pid = pid[0].split("=")[1];
      var unid= str.match(/unid=\d{0,10}/i);
      if(unid){pid += "%26"+unid[0]; }
      var n = str.match(/n=\d{0,5}/i);
      if(n){pid += "%26"+n[0]; }

      var reg=new RegExp("mm_0_0_0","gmi");
      var as = document.getElementsByTagName("A");
      for(var i = 0; i < as.length; i++){
        as[i].href=as[i].href.replace(reg,pid);
      }
      document.body.innerHTML =document.body.innerHTML.replace(reg,pid)

   }
   isrun = true;
}
window.onload = init_pid;
setTimeout(init_pid,3000);
})();
</script>
js/ajax/as/flex

json格式

一条评论 Posted by 于 5月 13, 2010

Json的规格非常简单，只用一个页面、几百个字就能说清楚，而且Douglas Crockford声称这个规格永远不必升级，因为该规定的都规定了。

    1） 并列的数据之间用逗号（"，"）分隔。
    2） 映射用冒号（"："）表示。
    3） 并列数据的集合（数组）用方括号("[]")表示。
    4） 映射的集合（对象）用大括号（"{}"）表示。

上面四条规则，就是Json格式的所有内容。
json格式举例：

[
　　{"城市":"北京","面积":16800,"人口":1600},
　　{"城市":"上海","面积":6400,"人口":1800}
]

进一步简化:

[
　　["北京",16800,1600],
　　["上海",6400,1800]
]
js/ajax/as/flex

YUI3 Node.simulate()模拟鼠标事件

留下评论 Posted by 于 5月 11, 2010

触发事件，类似于mootools的fireEvent()方法

YUI().use('node-event-simulate', function(Y) {
 Y.one("#test").simulate("click", { shiftKey: true });
});
js/ajax/as/flex, YUI/mootools/jquery

YUI2的 Selector类库实现JQUERY的选择器的方法

留下评论 Posted by 于 5月 4, 2010

比较一个纯js和yui2 selector的写法
js:

var flds = document.getElementsByName(‘gender’);
var nL = flds.length;
for (var j=0; j<nL; j++) {
     if (flds[j].checked) {
          ischecked = true;
          break;
     }
}

YUI:

var ischecked = (YAHOO.util.Selector.query('input[name=gender]:checked').length > 0) ? true : false;

理一下用YUI的Selector类库实现JQUERY的选择器的方法，分类参照JQUERY：
一。基本
1.#ID 选择指定ID的元素
YAHOO.util.Selector.query(’#ID’)
2.element 选择指定类型的元素
YAHOO.util.Selector.query(’div’)
3..className 选择指定类名的元素
YAHOO.util.Selector.query(’.className’)
4.* 选择所有元素
YAHOO.util.Selector.query(’*’)
5.selector1,selector2,…selectorN

YAHOO.util.Selector.query(’selector1,selector2,…selectorN’)

二。层级

1.ancestor descendant 指定祖先元素下的所有指定类型的后代元素

YAHOO.util.Selector.query(’div p’)

2.parent>child 指定父级元素下的所有子元素

YAHOO.util.Selector.query(’div>p’)

3.prev+next 文档流中指定元素的后一个元素

YAHOO.util.Selector.query(’div+p’)

4.prev~siblings 文档流中指定元素后的所有同级元素

YAHOO.util.Selector.query(’div~*’)

三.简单

1.：first 指定元素下的第一个元素

YAHOO.util.Selector.query(’table tr:first-child’)

2.：last 指定元素下的最后一个元素

YAHOO.util.Selector.query(’table tr:last:child’)

3.:not(selector) 指定不具备某属性的元素

YAHOO.util.Selector.query(’input:not([type=text])’)

4.：even 指定索引值为偶数的元素

YAHOO.util.Selector.query(’tr:nth-child(2n)’)

或者

YAHOO.util.Selector.query(’tr:nth-child(even)’)

5.：odd 指定索引值为奇数的元素

YAHOO.util.Selector.query(’tr:nth-child(2n+1)’)

或者

YAHOO.util.Selector.query(’tr:nth-child(odd)’)

同理，前面的:first也可以写成 YAHOO.util.Selector.query(’tr:nth-child(1)’)

注意，在JS里，计数是从0开始，比如公式中的2n+1，n从0 开始；但是CSS 3中，计数是从自然数1开始的，这点不能混淆。

6.:eq(index) 指定索引值的元素

YAHOO.util.Selector.query(’tr:nth-child(5)’)

7.:gt(index) 索引值大于指定数字的元素

YAHOO.util.Selector.query(’tr:nth-child(n+2)’)

排序第2以及之后的元素，即大于指定索引值1的元素

8.:lt(index) 索引值小于指定数字的元素

这个YUI似乎不能实现？我没在CSS 3中找到方法

9.:header 指定标题元素，H1-H6

这个在YUI里只能用YUI.util.Selector.query(’h1,h2,h3,h4,h5,h6′)实现了

10.animated 指定正在执行动画的元素

同样，不能实现；

四。内容

很遗憾，YUI的Selector是通过CSS 3来实现的，没找到根据内容匹配的方法

五。可见性

1.：hidden

选择所有不可见元素，包括display为hidden的元素以及hidden类型的input

只知道后者可以通过属性选择符实现

YAHOO.util.Selector.query(’input:[type=hidden]‘)

六。属性

1.[attribute] 选择所有包含指定属性的元素

这个在YUI里需要通过filter方法实现，filter方法的第一个参数类型是数组，并不能直接选择元素或者ID等，所以需要多定义一次。

var link= document.getElementsByTagName(’a’);
YAHOO.util.Selector.filter(a, ‘[href]‘);

2.[attribute=value] 选择所有属性的值为指定值的元素

YAHOO.util.Selector.query(’input[name=accept]‘);

例外：a 不能通过href的值直接匹配

3.[attribute!=value] 选择属性值不包含制定值的元素

YAHOO.util.Selector.query(’input:not([name=accept])’);

伪类选择+属性选择来实现。

4.[attribute^=value] 选择属性值以指定值开始的元素
YAHOO.util.Selector.query(’a[href^=www]‘);

5.[attribute$=value] 选择属性值以指定值结束的元素
YAHOO.util.Selector.query(’a[href$=www]‘);

6.[attribute^=value] 选择属性值包含指定值的元素
YAHOO.util.Selector.query(’a[href*=google]‘);

  1. <a href=”google.com”>链接1</a>
  2. <a href=”www.google.com>链接2</a>
  3. <a href=”google.cn”>链接3</a>

例子：

YAHOO.util.Selector.query(’a[href^=www]‘);返回链接2（以www开头）

YAHOO.util.Selector.query(’a[href$=com]‘)返回链接1和链接2（以com结尾）

;YAHOO.util.Selector.query(’a[href*=google]‘);返回全部三个链接（包含google）

7.[selector1][selector2][selectorN]

YUI实现不了

七。子元素

.:nth-child?? 同第三章

八。表单

:input，:textarea 同类型选择符

:text,:password等以input的type属性筛选的，同第六章的属性选择 符.，YAHOO.util.query(’input[type=text]‘)

另外在JQUERY中，:button同时匹配button元素和 input type=”button”

九。表单对象属性

1.：enabled 查找可用表单元素（与disabled对应）

YUI需要用:not伪类实 现：YAHOO.util.Selector.query(’input:not([disabled=disabled])’)

即属性不为disabled的表单元素

2.：disabled

YAHOO.util.Selector.query(’input[disabled=disabled]‘)

3：checked和：selected，选择checked=”checked”的radio或者checkbox；和 selected=”selected”的option元素

这个YUI无法实现。

但是可用obj.set(“checked”,true)来实现选中

不得不承认，选择器上，JQUERY上手比YUI要简单方便。另外如果不想打冗杂的YAHOO.util.Selected，可以定义成缩 写：var YUS = YAHOO.util.Selector；YUS.query(’div’)。这个是在淘宝的一个JS实验里看到的方法。

js/ajax/as/flex

AJAX中文乱码的两类问题

2条评论 Posted by 于 5月 4, 2010

1）发送路径中的参数有中文，在服务器段接收参数值是乱码

例如：

var url=”a.jsp?name=小李”；
xmlHTTP.open (“post”,url,true);

解决办法：

利用javascript的提供的escape()或encodeURI()方法

例如：

客户端:

var url=”a.jsp?name=小李”；
url=encodeURI(url);
url=encodeURI(url); //两次，很关键[具体为什么，我也不清楚]
/********************************************/
也有人写成var url=”a.jsp?name=escape(“小李”)”；

功能和encodeURI方法类似。

/********************************************/
xmlHTTP.setrequestheader(“cache-control”,”no-cache”);
xmlHTTP.setrequestheader(“Content-Type”,”application/x-www-form-urlencoded”);
xmlHTTP.setrequestheader(“contentType”,”text/html;charset=uft-8″)//指定发送数 据的编码格式
xmlHTTP.open (“post”,url,true);

服务器端：

String name = request.getParameter(“name”);
name = java.net.URLDecoder.decode(“name”, “UTF-8”);

2）返回来的responseText或responseXML的值中含有中文是乱码

原因：AJAX在接收responseText或responseXML的值的时候是按照UTF-8的格式来解码的，如果服务器段发送的数据不是 UTF-8的格式，那么接收responseText或responseXML的值有可能为乱码。

解决办法：在服务器指定发送数据的格式：

在jsp文件中：

response.setContentType(“text/text;charset=UTF-8”);//返回的是txt文本文件

或是

response.setContentType(“text/xml;charset=UTF-8”);//返回的xml文件

总结:1)ajax提交数据的格式默认为utf-8,利用javascript的提供的escape()或encodeURI()方法.在服务器端 接收的时候要使用Java.net.URLDecoder.decode(“”,”UTF-8″)方法进行解码.

2)xtmlhttp 返回的数据默认的字符编码是utf-8,所以服务器要向客户端发送数据的时候,也要采用utf-8编码

如果上述方法仍然解决不了乱码问题,那你尝试一下把jsp,htm,java文件用UTF-8编码格式保存.

总之:前后台数据交互都采用utf-8编码就行了.

js/ajax/as/flex