js高级应用

1、trigger

　　情景：在项目中，tab页切换时，元素无法正常显示出来，拖动窗口大小时，又能正常显示；

　　可在tab的切换点击事件中加入该操作：

　　$(window).trigger("resize",$(window).width(),$(window).height()); 即重置窗口大小，实现拖动窗口效果。

2、$.attr()问题：

　　情景：<input id="tt" clickEvent="sendInfo('info')"> ，

　　　　 $("#tt").attr("clickEvent") 结果取出来的是“sendInfo(”，

　　　　　因为该代码经过浏览器解析后，变成<input id='tt' clickEvent='sendInfo('info')'>，故有此结果；

　　　　 如果属性是通过后台拼接，该问题更突出（如：java中的标签）。

　　处理方法：1、改写成：<input id="tt" clickEvent='sendInfo("info")'>

　　　　　　　2、案例：

　　　　　　　　字符串1：{"cityId":"110100","cityName":"北京市辖区"}

　　　　　　　　字符串2：{"cityId":"110100","cityName":"北京市辖区"}

　　　　　　　　如上字符串所示，字符串1是在java后台生成，通过structs2传递到前台后，js中取得的字符串却变成了字符串2的样子，

　　　　　　　　其中的”变成了"使用的时候用StringEscapeUtils.unescapeHtml(字符串2)) 解下码就行，便可取得原字符串1。

　　　　　　　　由以上可以找到解决方案：

　　　　　　　　　　1、后台传前台：[如json字符串].replaceAll("[\"']", """)，先将字符串中的单引号和双引号转出"""，

　　　　　　　　　　　 传到前台后浏览器会自动解析格式；

　　　　　　　　　　2、前台传后台：都是自己写的，这个就不要偷懒啦，注意下格式就行了。

3、jquery简雅之美：

　　1)、简雅之美 - 高兼容事件绑定

　　　　比如input的值改变事件，正常我们可能都会想到onpropertychange事件，于是这样操作：

　　　　$(ob).bind("propertychange",function(){ ......　});

　　　　但是问题又来了，onpropertychange事件是ie专有的，可恶的是还只是ie9一下的版本才能有效；

　　　　那ie9及以上版本咋整？不急还有oninput事件，于是写下如下代码：

　　　　$(ob).bind("input",function(){ ......　});

　　　　然这样并没有解决问题，这种照顾了ie9及以上版本却照顾不了ie8等低版本，不急我们可以这样写：

　　　　$(ob).bind("input propertychange",function(){ ......　});于是问题解决了。

　　　　绑定事件如此写，其实可以看成是事件选择器，既优雅又简洁。

4、js判断输入字符串长度（汉字算两个字符，字母数字算一个）

　　汉字在数据库中占2个字符，如果输入字符超过数据库表字段长度，会出现错误，因此需要在前台进行判断。有两种方法进行判断：

方法一：使用正则表达式，代码如下：

function getByteLen(val) {

var len = 0;

for (var i = 0; i < val.length; i++) {

var a = val.charAt(i);

if (a.match(/[^\x00-\xff]/ig) != null) {

len += 2;

} else {

len += 1;

}

}

return len;

}

方法二：使用字符unicode判断：方法如下：

function getByteLen(val) {

var len = 0;

for (var i = 0; i < val.length; i++) {

var length = val.charCodeAt(i);

if(length>=0&&length<=128) {

len += 1;

} else {

len += 2;

}

}

return len;

}

5、比较完美的日期格式化

　　a、（如jsp）头部引入标签<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

　　b、利用<fmt:formatDate value="${obj.date}" pattern="yyyy-M-d" />嵌套到要初始化的输入域：

　　　　<input type="text" value="<fmt:formatDate value="${obj.date}" pattern="yyyy-M-d" />"/>