给TR加边框的问题

遇到需要给TR加边框的需求,一定很头疼,因为目前还没发现有什么完美的方法解决这个问题,为了兼容性最后我只能选择给TD上下加边框,然后用JS判断第一个TD和最后一个TD的左右边框。
如果不考虑IE6和IE7的话用下面的最简单方法也可以,只是谷歌和火狐有点区别,还有一点小闪动现象。

提示:你可以先修改部分代码再运行。

行级元素和块级元素

整理一下:

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素”a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。
块元素(block element)
* address – 地址
* blockquote – 块引用
* center – 举中对齐块
* dir – 目录列表
* div – 常用块级容易,也是css layout的主要标签
* dl – 定义列表
* fieldset – form控制组
* form – 交互表单
* h1 – 大标题
* h2 – 副标题
* h3 – 3级标题
* h4 – 4级标题
* h5 – 5级标题
* h6 – 6级标题
* hr – 水平分隔线
* isindex – input prompt
* menu – 菜单列表
* noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript – )可选脚本内容(对于不支持script的浏览器显示此内容)
* ol – 排序表单
* p – 段落
* pre – 格式化文本
* table – 表格
* ul – 非排序列表

内联元素(inline element)
* a – 锚点
* abbr – 缩写
* acronym – 首字
* b – 粗体(不推荐)
* bdo – bidi override
* big – 大字体
* br – 换行
* cite – 引用
* code – 计算机代码(在引用源码的时候需要)
* dfn – 定义字段
* em – 强调
* font – 字体设定(不推荐)
* i – 斜体
* img – 图片
* input – 输入框
* kbd – 定义键盘文本
* label – 表格标签
* q – 短引用
* s – 中划线(不推荐)
* samp – 定义范例计算机代码
* select – 项目选择
* small – 小字体文本
* span – 常用内联容器,定义文本内区块
* strike – 中划线
* strong – 粗体强调
* sub – 下标
* sup – 上标
* textarea – 多行文本输入框
* tt – 电传文本
* u – 下划线
* var – 定义变量

JS判断字符串字节长度(数字英文长度记为1,中文记为2)

你早晚会用到的,用CSS来控制文字长度毕竟不是什么需求都能满足,现在后台也不管字符长度截取了,只能用JS来截取字符串了。

[js]/**
* 返回字符的字节长度(汉字算2个字节)
* @param {string}
* @returns {number}
*/

var getByteLen = function (val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
len += 2;
else
len += 1;
};
return len;
}
var sAbc = ‘1a啊啊22飞3地方a’;
var ol = getByteLen(sAbc);
alert(‘直接用length取得的字节长度:’ + sAbc.length);
alert(‘通过getByteLen()方法取得的字节长度:’ + ol);
[/js]

通过上面的方法就可以继续写一个截取指定长度的新字符串了,截取掉的部分用…补全:

[js]/**
* 返回字符的字节长度(汉字算2个字节)
* @param {string}{number}
* @returns {string} +’…’
*/

var cutStrForNum = function (str, num) {
var len = 0;
for (var i = 0; i < str.length; i++) {
if (str[i].match(/[^\x00-\xff]/ig) != null) //全角
len += 2;
else
len += 1;
}
if (len >= num) {
newStr = str.substring(0, num) + "…";
}
return newStr;
}
var sAbc = ‘1a啊啊22飞3地方a’;
alert(cutStrForNum(sAbc, 3));[/js]

webstorm快捷键大全(亲自整理)

webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目。
今天整理了一些webstorm比较实用的快捷键:

Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ )
Shift+F6 重构-重命名
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+G 查找行
Ctrl+Shift+Up/Down 代码向上/下移动。
F2 或Shift+F2 高亮错误或警告快速定位
写代码,按Tab 生成代码
选中文本,按Ctrl+Shift+F7 高亮显示所有该文本,按Esc高亮消失。(因为这个功能我就可以发放心的放弃sublime了)
Ctrl+B或Ctrl+鼠标左键单击 快速打开光标处的类或方法,(NB的功能)
Ctrl + Alt + B Go to implementation(s) 跳转方法实现处
Ctrl + Shift + I Open quick definition lookup 打开定义快速查找
Alt + Up/Down Go to previous/next method 跳转到上一个/下一个方法
Ctrl+E 最近打开的文件
Alt+F1 查找代码所在位置
Ctrl+Alt+L 格式化代码
Ctrl+R 替换文本
Ctrl+F 查找文本
Ctrl+P 方法参数提示
F3 查找下一个
Shift+F3 查找上一个
alt+Shift+F 将当前文件加入收藏夹
ctrl+alt+s 打开配置窗口
ctrl+Shift+N 通过文件名快速查找工程内的文件(必记)
ctrl+Shift+alt+N 通过一个字符快速查找位置(必记)
Shift+enter 重新开始一行(无论光标在哪个位置)
Ctrl + Alt + T  with…(if, else, try, catch, for, etc)用 * 来围绕选中的代码行,( * 包括 if 、 while 、 try catch 等)
Ctrl + Shift + U Toggle case for word at caret or selected block 光标所在位置大小写
Ctrl + Delete Delete to word end 删除文字结束
Ctrl + Backspace Delete to word start 删除文字开始
Ctrl + E Recent files popup 弹出最近打开的文件
F11 Toggle bookmark 切换标记,我觉得叫书签更好,就是sublime text 的F2
Ctrl + Shift + F12 Toggle maximizing editor 切换最大化编辑器
Alt + Shift + F Add to Favorites 添至收藏夹
   

火狐浏览器图片加载失败不显示占位符的解决方法

很多web开发人员都喜欢使用火狐浏览器来调式页面,也包括我,当然我也喜欢chrome调css更舒服,firefox调js比chrome舒服(看断点和json界面好一些)。还有各自的控制台信息也有不同,报错的时候可以同时看一下有时候不一定哪个浏览器的错误信息更定位准确一些。

废话说了不少,接下来是重点了,firefox最不爽的一个地方就是图片加载失败不显示占位符这让我们这些做布局的人情何以堪,不明白浏览器的开发人员为什么要这样做,而且还不能设置。
解决办法就是自己定义一个样式文件放到配置目录下面。
1. 新建一个userContent.css。内容如下:

[css]/*
*显示缺失图像占位符
*/
@-moz-document url-prefix(http),url-prefix(file)
{
img:-moz-broken
{
-moz-force-broken-image-icon: 1 !important;
width: 24px;
height: 24px;
}
}[/css]

2.把这个css文件放到你的配置目录下面
xp用户路径地址:C:\Documents and Settings\用户名\Application Data\Mozilla\Firefox\Profiles\不固定字符串.default\chrome
win7用户路径地址: C:\Users\用户名\AppData\Roaming\Mozilla\Firefox\Profiles\不固定字符串.default \chrome

PS:如果你的路径里面没有chrome这个文件夹就自己手动新建一个,我的电脑就没有,最后重启浏览器就OK了。

jQuery对象和DOM对象的相互转换

在讨论jQuery对象和DOM对象的相互交换之前,先约定好定义变量的风格。如果获取的对象是jQuery对象,那么在变量前加上$,例如:

var $variable = jQuery对象;

如果获取的是DOM对象,则定义如下:

var variable = DOM对象;

1.jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法,但是如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不实用DOM对象的时候,有以下两种处理方法。jQuery提供了两种方法将一个jQuery对象转换成DOm对象,即[index]和get(index).

(1)jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象。

jQuery代码如下:

[js]var $cr = $("#cr"); //jQuery对象
var cr = $cr[0] //DOM对象
alert(cr.checked) //检测这个checkbox是否选中了[/js]

(2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象。

jQuery代码如下:

[js]var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked)[/js]

2.DOM对象转换成jQuery对象

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,方式为$(DOM对象)。

jQuery代码如下:

[js]var cr = document.getElementByID("cr"); //DOM对象
var $cr = $(cr);[/js]

转换后,可以任意使用jQuery中的方法。

通过以上方法,可以任意地相互转换jQuery对象和DOM对象。

最后强调,DOM对象才能使用DOM中的方法,jQuery对象不可以使用DOM中的方法,但jQuery对象提供了一套更加完善的工具用于操作DOM

jQuery的on()方法支持的所有事件

自从jQuery添加了on()和off()方法之后,基本跟事件有关的操作我不会再使用其他诸如$(‘xxx’).click(function(){});之类的了。
不过jQuery的api里面没有说on里面到底可以绑定多少个事件,今天看jQuery1.8.3的源码无意间发现了这些,很开心~
下面就把on里面支持的事件列出来,共享给大家:

blur
focus
focusin
focusout
load
resize
scroll
unload
click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter
mouseleave
change
select
submit
keydown
keypress
keyup
error
contextmenu

JS主流的“类”的写法

js其实没有类的概念,不过业界人士一般都使用构造函数来写JS的“类”(潜规则)。
[js]/**
* 定义一个MyClass的类(首字母大写)
* @param opts
* @constructor
**/
var MyClass = function(opts) {
opts = $.extend({
"element": null, //容器
"listPath": "/attach_html/getAttachImgFilesOfIReceive" //路径地址
}, opts);

this.opts = opts; //定义属性
this.init(); //执行初始化方法
};
//方法放在原型下面,私有方法命名加下划线
$.extend(MyClass.prototype, {
//初始化
"init": function() {
var that = this;
var opts = this.opts;
var elEl = this.element;
console.info(opts);
},
// 私有方法
"_private": function() {
//do….
}
});

/********************/
var itemEl = $(‘.itme’);
// 实例化
var newClass = new Classes({
"element": itemEl, //容器
"name": ‘liuxiaofan’
});[/js]

Sublime Text 3 目前支持的插件列表

以下是截止到今天 2013年8月2日 Sublime Text 3 目前支持的插件列表:

(为了避免将来有人搜到这篇文章,看到的结果不是最新的,所以特别说明一下~)