js复制内容到剪贴板功能

$(document).ready(function(){
$(“#btn_copy”).click(function(){
$(“#TextArea1”).select();
copyValue(“TextArea1”);
})
})
//复制功能
function copyValue(txtid) {
if (isIE()) {
clipboardData.setData(“Text”, document.getElementById(txtid).value);
alert(“您已成功复制了CDKEY!”);
}
else {
prompt(“您的浏览器不支持自动复制,请您手动复制对话框中的内容:”,document.getElementById(txtid).value);
}
}
function isIE(number) {
if (typeof (number) != number) {
return !!document.all;
}
}

Speed Up Your Website

原文地址:http://www.codeproject.com/Articles/26376/Speed-Up-Your-Website-By-Example

说在前面的:这个文章是08年的,比较老了,带着批判和找不同的心态去研究一下,会有收益的。

 

部分翻译:(翻译来自CSDN)

为什么减少请求数量
请求执行顺序:
e.g.: index.htm and then global.css, spring.css, logo.jpg, menu1.jpg, menu2.jpg, menu3.jpg, 1×1.gif, corner1.gif, common.js, validation.js etc…)
在加载页面时,浏览器从URL中(src)中提取头链接href={url},css文件链接和发送每个请求的资源。
大体上,浏览器在每台客户机提出页面请求时只并发下载2-4个资源请求,(取决于http和浏览器版本),一般来说,Firefox要比IE略好一些.
结论:请求与连接越少,则响应越快.
怎样减少请求数量?
减少文件数目(css,js,image)
合并文件(尽可能的)所有的CSS文件尽量合并归一,所有的JS文件尽量合并归一,

使用浏览器缓存
当第一次请求时,减少资源,之后将依靠cache机制,不必再请求资源。
使用”expires”头。

优化html
为什么优化它?
大体来说html只耗20%的时间而其它(CSS,Javascript,images)要消耗80%的时间
html包裹所有的对象(标签控件)和styles,这些都提供与浏览器进行解析,解包和render(生成).
由于浏览器之争(竞争)和x/html/css的兼容问题.浏览器被设计为两种模式:普通(快模式,信任模式),quirk模式(必须要验证HTML/CSS,找到和”原谅错误”)
怎么优化它?
1.减少下载时间
将冗长的一页尽量载减为多页
2.快速生成render
使用非常简单的设计
standard vs quirk mode两种模式的选择.
建立信任的standard模式(前提,设计者达到专业水平遵循标准)以使得浏览器使用最优化的解析
切换模式为标准模式

移除inline CSS改为外部CSS引用(减少内部脚本书写,如document.write())
如果遵循以上原则:浏览器会在生成内容与应用CSS和脚本改变布局之间踌躇,这种情况下会暂停内容的生成,所以要引用外部CSS,JS。
如果不遵循这条原则:外部文件意味着多了一个外部资源请求,如果主页CSS,JS很少,则用内联,减少请求数,加快响应速度。

减裁内容

少用table,转用div.为什么呢?浏览器不能生成实体控件对象(标签对应)直到捕捉到标签尾ie.</table>

若布局用bigger outer,(超多标签)

 

优化image
为什么要优化?
image消耗大量下载时间及带宽,在这方面节省时间会得到卓著的功效。
怎样优化?
1.减少图片的使用频率
2.使用css rollovers代替图片链接。
3.设置恰当的宽度与高度(尽量小)
4.仔细地选择图片的颜色与格式;
GIF: works best for solid colors and sharp-edged transitions from one color to other, Maximum colors: 256.
JPEG: works best for continuous gradations of many colors or grey tones.

 

5.避免动画与flash
6.背景尽量用颜色而不用图片
7.不要把图片放在服务器的多个目录上,(避免在两个请求中,得不到最优从第一次缓存图片)
8.在下载大图片时用进度条掩饰,这是个小把戏,但不会引起用户的反感.
9.尽量使用小于10kb的一张图片,尽量不要把大图裁成小图,因为这样会增加request的次数。
使用CSS Sprites或image maps代替
可以把零碎的一些小图拼成一张大图,然后使用css sprites或image maps。

 

注意细节 提高CSS的网页渲染效率

CSS学习越深入,我们需要关注的细节之处就越多,今天我们通过11个注意点来提高CSS的网页渲染效率

1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 – color:#f3a;
* 建议用 – color:#FF33AA;

2、display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时,会有所消耗资源。
* 不赞成 – visibility:hidden;
* 建议用 – display:none;

3、border:none;与border:0;的区别

和display与visibility的关系类似,分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框,但它会为你保留border-color/border-style的使用权。
* 不赞成 – border:0;
* 建议用 – border:none;

4、不宜用过小的背景图片平铺

一张宽高1px的背景图片,虽然文件体积非常之小,但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关,最大的图片文件体积保持约70KB。
* 不赞成 – 宽高8px以下的平铺背景图片
* 建议用 – 衡量适中体积及尺寸的背景图片

5、慎用IE滤镜

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有让PNG透明的滤镜,可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明,因为IE7以上已经支持了PNG透明。
* 不赞成,滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用,最好选择其它方法能避免使用滤镜。

6、*{ margin:0; padding:0;}避免浏览器样式差异

*号通配符把所有标签都初始化一遍,浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异,或是某些已经不推荐使用的标签(因为你不会去用它),它们不需通配符要重新初始化一遍这样做能节省一点资源。
* 不赞成,使用*号通配符
* 不赞成,div span button b table等标签纳入通配符控制内外填充样式
* 建议用,有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

如果你有一个选择器是以id作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。
* 不赞成 – button#backButton { }
* 不赞成 – .menu-left #newMenuIcon { }
* 建议用 – #backButton { }
* 建议用 – #newMenuIcon { }

8、尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。
* 不赞成 – treeitem[mailfolder=”true”] > treerow> treecell { }
* 建议用 – .treecell-mailfolder { }

 9、避免子孙选择符

子孙选择符是CSS中最耗资源的选择

 

唠唠IE6中PNG透明滤镜AlphaImageLoader

AlphaImageLoader

说明:

在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。

语法:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true:默认值。滤镜激活。
false:滤镜被禁止。

sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop:剪切图片以适应对象尺寸。
image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale:缩放图片以适应对象的尺寸边界。

src:必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

具体操作:

  1. 为预览区域(比如要在某个 div 中预览)添加样式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
  2. 为 AlphaImageLoader 设置 src 属性。

—————————————大名叫分割线————————————————

ie6的这个滤镜解决png的问题还是很不错的,我最近都不怎么用iepng.js了。

说说缺点,首先是不能作为循环背景,不能做定位(background-position)。

昨天做项目发现了另一个问题,就是sizingMethod对图片和容器间的影响,你可以仔细看一下上面的参数说明。

这个很有意思,如果是scale这个参数,你就可以把这个容器当作图片来使用了(我的意思是类似img标签)。

另外就是我的png背景透明的父级DOM下的内容不能操作,这个我还没搞清楚,不过我的解决办法是单拿出来一个层写背景,放在我需要背景的元素下面,这样总算是解决了png的大部分问题。

 

关于div遮盖flash的问题总结

首先说ff和chrom,这两个浏览器实际上是可以根据正常逻辑解决遮盖问题,所以一般来说正常操作就好。

兼容上主要是ie产生的问题。当flash的wmode属性为Transparent 问题并不是很大,一般逻辑仍然能解决。

但是如果你引用的flash没写参数,或者参数不是Transparent的时候,ie就会认为flash在最上面。

ps:一些flash的wmode必须使用window属性,以保证输入法和flash的速度。

解决方法:

iframe>flash一句话解决问题。

只要在flash和div中间再加一个iframe就可以解决覆盖的问题。

但是有个问题需要注意,iframe遮在flash上面的效果是,iframe与flash交叉的部分会透明掉。

也就是说你的div必须是个矩形,如果是个不规则图形,flash上会有透明的地方。

情况就是这样,希望对你有帮助。

一些兼容技巧

1:innerText
IE支持,FIREFOX不支持
解决办法:用innerHTML,2种浏览器都识别innerHTML

2:document.createElement
document.appendChild
在往表里插入行时
FIREFOX支持,IE不支持
解决办法:把行插入到TBODY中,不要直接插入到表

3:setAttribute(‘style’,’color:red;’)
FIREFOX支持,IE6,7不支持
解决办法:不用setAttribute(‘style’,’color:red’)
而用object.style.cssText = ‘color:red;’
最好的办法是上面种方法都用上
4:class
setAttribute(‘class’,’styleClass’)
FIREFOX支持,IE不支持
解决办法:
setAttribute(‘class’,’styleClass’)
setAttribute(‘className’,’styleClass’)
2种都用上(注:IE和FF都支持object.className)

5:用setAttribute设置事件
var obj = document.getElementById(‘objId’);
obj.setAttribute(‘onclick’,’funcitonname();’);
FIREFOX支持,IE不支持
解决办法:
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下:
var obj = document.getElementById(‘objId’);
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持

6:建立单选钮
IE以外的浏览器
var rdo = document.createElement(‘input’);
rdo.setAttribute(‘type’,’radio’);
rdo.setAttribute(‘name’,’radiobtn’);
rdo.setAttribute(‘value’,’checked’);
解决办法:
IE所支持方法
var rdo =document.createElement(“<input type=’radio’ name=’radiobtn’ value=’checked’>”);

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1.element要用getElementById or ByTagName来得到,

2.setAttribute(“class”, vName)中class是指改变”class”这个属性,所以要带引号。

3.IE中要把class改成className,…..IE不认class,所以最好写两句,都用上吧。

W3C DOM – {setAttribute()}

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

1、关于class和className
class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。使用setAttribute(“class”, vName)语句动态设置
Element的class属性在firefox中是行的通的,在IE中却不行。因为使用IE内核的浏览器不认识”class”,要改用”className”;
同样,firefox 也不认识”className”。所以常用的方法是二者兼备:
element.setAttribute(“class”, vName);
element.setAttribute(“className”, vName);   //for IE

2、setAttribute()的差异
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById(“foo”);
bar.setAttribute(“onclick”, “javascript:alert(‘This is a test!’);”);
这里利用setAttribute指定e的onclick属性,简单,很好理解。但是IE不支持,IE并不是不支持setAttribute这个函数,
而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性
在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById(“foo”).className = “fruit”;
document.getElementById(“foo”).style.cssText = “color: #00f;”;
document.getElementById(“foo”).style.color = “#00f”;
document.getElementById(“foo”).onclick= function () { alert(“This is a test!”); }

自动换行 word-break:break-all和word-wrap:break-word 的区别

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于:

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

3,word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。 word-break : normal | break-all | keep-all 参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法: word-wrap : normal | break-word 参数: normal : 允许内容顶开指定的容器边界 break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数: auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的脚本特性为tableLayout。

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。

我在网站上试验过确实不支持,你可以再W3C验证一下

去除触发链接时出现的虚线框

链接在被点击时会出现虚线框,即使松开了也仍然存在,在有的时候显得不美观。既然不好看,那就不要它。怎样去掉呢?

方法一 IE下可使用其私有的html属性:hideFoucs,在标签的结构中加入hidefocus=”true”属性。即:

<a href=”http://www.17css.com” hidefocus=”true” title=”17css-青色’s Blog”>17css-青色’s Blog</a>

而在 Firfox 浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none; 就可以了,即:

.HideFocus { outline:none; }

方法二 也可以使用CSS expression来控制,但不推荐使用,毕竟expression在性能上有问题。

.HideFocus {
hide-focus:expression(this.hideFocus=true);  /* for ie 5+ */
outline:none;  /* for firefox 1.5 + */
}

除链接外,该CSS同样适用于input和button标签。

方法三 将以下代码保存为link.htc文件:

<public:attach event=”onfocus” onevent=”hscfsy()”/>
<script type=”text/javascript”>
function hscfsy(){ this.blur(); }
</script>

链接样式中加入:

a { behavior:url(link.htc); }

IE中已经没有问题,但是在FF中虚线框依然存在。再增加一条样式定义来解决此问题:

a:focus { outline:0; }

这样IE、FF中虚线都不存在了。