关于input中type属性的切换

之前的几个项目一直纠结一个问题,就是input的type值可不可以通过什么方法直接切换。以保证密码输入框可以做到英文字符和点点之间自行切换,而不是覆盖一个文本层在上面坐事件或者别的什么方法。

好吧我还是上图吧:

input-type

input-type2

之前发现js里面有一个obj.type的属性可以直接改input里面的type值。

结果昨天测试发现不兼容ie9以下的ie浏览器。顿时泪奔。

所以现在的做法 依然是覆盖一个i额层在这个password上面来解决这个问题。

还有一个方法就是给3个跟password有关的input

<input class=”input1″ type=”text” value=”文字内容”/>

<input class=”input2″ type=”password” value=”密码内容”/>

<input class=”input3″ type=”hidden” value=”用来接收密码,提供给程序”/>

然后无非就是全部隐藏,需要显示文字的时候显示input1,input1获得焦点时隐藏掉input1,显示input2并把焦点光标给input2~剩下的逻辑你懂的。

 

iframe框架 跳出所有的框架,跳转到你所要的地址

以下都是在iframe 框架中

1,<a href=”http//:www.baidu.com” target=”_blank”>百度</a>

2,

javascript:
function window.onload()
{
if(window.parent.length>0)
window.parent.location=location;
}

或者:

<script>

if (window != top)
top.location.href = location.href;

</script>

3,自动跳出iframe的代码
<script type=”text/javascript”>
if (top.location !== self.location) {
top.location=self.location;
}
</script>

4,在框架页内的退出操作:
<script type=”text/javascript”>
if (top.location !== self.location) {
top.location = “../index.jsp”;//跳出框架,并回到首页
}
</script>

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。

 

关于页面加载后执行js的一点说道

之前做过一个页面图片处理的页面碰到过这个问题,今天回顾一下。

需求是页面会加载很多图片,加载图片后要对图片的位置、尺寸记录,然后缩放到指定大小,还要根据位置设置相应的弹出框。

那问题就是用一般的jquery{$(function(){})}无力解决这个问题,因为各个浏览器对处理顺序的解释不同。

chrom会在图片解析之前就执行函数,那么就判断不到图片正确的尺寸,页面就会错位。

js里面有个window.onload事件可以解决这个问题。

window.onload需要当页面完全加载完成的时候才会触发,包括图片、flash等富媒体。

DOMReady只判断页面内所有的DOM节点是否已经全部完成,至于节点中的内容是否加载完成并不关心。

(*摘自曹刘阳的《编写高质量代码——Web前端开发修炼之道》)

一些兼容技巧

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!”); }

关于IE中弹出框内文本焦点问题

直接使用$.focus()在ie中往往不好用,根本不知道光标定位到哪里去了,当前遇到的弹出框是用ajax读取出来的,同事给了一个解决方案,解决了。

今天有人问我,我又给忘了,在这里记录一下。

focusSta = obj . focusSta ? parseInt(obj.focusSta) : 0;

if(focusSta === 1){

var item = document.getElementById(‘commentContent_’+uniqueId);

if(item){

if($.browser.msie){

item.value = “&nbsp”;

item.focus();

item.value = ”;

item.select();

}else{

item.focus();

}

}

}

为什么这么写我是说不清,知道的跟一下帖子…

javascript的window.onload与jquery的$(document).ready()

 

以 浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

onload

window.load  $(document).ready()

执行时机  必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行  网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完
编写个数  不能同时编写多个
以下代码无法正确执行:
window.onload = function(){
alert(“text1”);
};
window.onload = function(){
alert(“text2”);
};
结果只输出第二个  能同时编写多个
以下代码正确执行:
$(document).ready(function(){
alert(“Hello World”);
});
$(document).ready(function(){
alert(“Hello again”);
});
结果两次都输出
简化写法  无  $(function(){
// do something
});

另外,需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用 Jquery 中另一个关于页面加载的方法 —load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。
Jquery 代码如下:
$(window).load(function (){
// 编写代码
});等价于 JavaScript 中的以下代码
Window.onload = function (){
// 编写代码
}

——————————————————————————————

最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件。改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉了。

起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了,还不见jquery的效果出来。

删了onload加载的方法试试,结果还是一样,看来没有必要把原本的onload事件绑定也改用$(document).ready()来写。那是什么原因使得Firefox正常而IE就能呢?接着调试,发现IE下原来绑定的onload方法竟然先于$(document).ready()的内容执行,而Firefox则是先执行$(document).ready()的内容,再执行原来的onload方法。这个和网上的说法似乎不完全一致啊,呵呵,有点意思,好像越来越接近真相了。

翻翻jquery的源码看看$(document).ready()是如何实现的吧:

复制代码 代码如下:
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll(“left”);
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
jQuery.event.add( window, “load”, jQuery.ready );

结果很明了了,IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。

覆盖select,使之不可操作

自定义的层给select遮挡住是一个老问题了,不过可喜的是ie7和ff都已经支持select的zIndex,只要给层设定高的zIndex就能覆盖select了,可惜对于ie6这个问题还是需要解决。

覆盖select据我所知有两个比较好的方法:

1,显示层时,先隐藏select,关闭层时再重新显示;

2,用一个iframe作为层的底,来遮住select。

方法1应该都明白,方法2就是利用iframe可以覆盖select的特性,只要把一个iframe作为层的底部就可以覆盖下面的select了,程序中是这样使用的:this.Lay.innerHTML = ‘<iframe style=”position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);”></iframe>’可以看出这个透明的iframe也以同样覆盖整个页面,如果是有内容显示的页面最好设置z-index:-1;确保iframe在层的底部。个人觉得使用方法2比较好,但始终是改变了页面结构,有时会比较难控制,至于方法1就比较容易方便。