1.
color:red; /* 所有浏览器都支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red/9; /* IE6、IE7、IE8支持 */
color:red/0; /* IE8支持 */
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
2.
<meta http-equiv="x-ua-compatible" content="ie=7" />
把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了
3.
ie6有时候列表图标要鼠标点击或移动过去才显示;
给li列表加zoom:1或position:relative;
4.
window.parent 是iframe页面调用父页面对象
javascript 刷新父页面:
window.opener.document.location.reload();
5.
使用DD_belatedPNG解决IE6下PNG半透明问题,只需要一个理由,就是它支持backgrond-position与background-repeat.
http://dillerdesign.com/experiment/DD_belatedPNG/#download
6.
使用DD_roundies解决ie圆角问题
http://dillerdesign.com/experiment/DD_roundies/
7.
IE6有一个 bug,它每次都从服务器端读取背景图片,结果就是,若服务器反应较慢hover效果就会出现短暂的空白
随便在页面中哪个位置(head、body或者onload)调用下面提及的脚本,例如:
<!--[if IE 6]>
<script type="text/javascript">
document.execCommand("BackgroundImageCache", false, true);
</script>
<![endif]-->
8.
加载flash
adobe提供的脚本
<script src="../js/AC_RunActiveContent.js" type="text/javascript"></script>
在需要显示flash的地方加入下面脚本,将flash路径改下就ok了。
这个脚本根据不同的浏览器用不同的标签显示flash(如object/embed).
用这个脚本主要是为了解决flash加载时要点击一次才能进行交互
<script type="text/javascript">
AC_FL_RunContent('codebase','https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','736','height','145','src','images/games_<%=localeString%>','flashvars','lagStr=<%=localeString%>','quality','high','wmode','transparent','pluginspage','https://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/games_<%=localeString%>');
</script>
9.
用slideToggle()时发现
在IE8下margin有时失效,开始以为是jquery问题,后来发现是IE8的bug.
综合几个解决方案:
1.给父DIV加个看不见的边框
2.给父DIV设个:overflow:hidden或overflow:auto
3.把margin去掉换成底色的border,如margin-top:8px 换成border-top:8px solid #xxx;
3.给消失margin的标签加上浮动,比如float:left;
4.在消失margin-top的标签前面加个空的标签如<div></div>,或者用一个空的div将消失margin的标签包裹起来;或者用一个空的div将消失margin标签之前的内容包裹起来。
10.
filter:fliph 内容翻转
filter:gray 内容变灰
11.wordpress感觉很不错。
12.google jquery 引用:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
13.good UI
http://www.position-absolute.com/articles/jquery-fade-and-slide-toggle-plugin/
http://www.jxwinter.cn/index.php/archives/tag/ie6
14. forum
http://bbs.51cto.com/forum-137-1.html
http://forum.csdn.net/SList/CrossBrowser
15.question
有A页面 通过jquery的dialog和iframe加载B页面 而B页面也以同样的方法加载C页面 但B页面打开的dialog却限定在了B窗口中
请问如何让C页面所在的dialog跳出B页面?
16.
offsetHeight clientHeight
http://www.cftea.com/c/751.asp
17. 源码分析
18.useful
http://www.web600.net/html/editor/JavaScript/201008183953.html
19.addEvent是怎样诞生的
http://flyzonemu.javaeye.com/blog/326582
20.IE6 a:hover span bug
可以参考http://www.w2blog.net/view/353.html
或者 a:hover{ position:relative;}
a:hover span{position:absolute; width:20px; height:20px; display:block;}
21. 比较好的技术ebook下载
22.很好的loading...在线图片生成
http://preloaders.net/en/horizontal
23.jquery 简易插件实例
http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html
24.15个javascript web ui 库
http://news.csdn.net/a/20100519/218442.html
25.IE6下position:fixed。可惜页面有position:relative或absolute时全部变成fixed;不怎么好。IE8下遮罩层,当页面很长很长时会出现页面底部没有遮罩层,这是IE8的Bug,这时可以用position:fixed试试解决这个问题。
http://www.happinesz.cn/archives/991/
26.比较基础详细的javascript/css/ajax
http://www.web666.net/dom/cancelBubble.html
27.浏览器的两种模式
浏览器的两种模式quirks mode 和strict mode
http://kino.javaeye.com/blog/241260
28.w3help正在...:
29.一个drag的例子:
http://www.koyoz.com/blog/?action=show&id=80
30.几个很容易弄混的概念:
obj.offset[Width|Height|Top|Left] 取控件相对于父控的位置
event.offset[X|Y] 取鼠标相对触发事件的控件中的坐标
event.screen[X|Y] 鼠标相对于屏幕坐标
event.client[X|Y] 鼠标相对于网页坐标
obj.scroll[Width|Height|Top|Left] 获取对象滚动的大小
obj.client[Width|Height|Top|Left] 获取对象可见区域的大小
解释一下event.X和event.clientX有什么区别?
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
event.X也一样
但是如果设置事件对象的定位属性值为relative
event.clientX不变
而event.X返回事件对象的相对于本体的坐标
event对象详解 ICOOE 2000.3.31 http://www.51js.com/
event代表事件的状态,例如事件发生的的元素、鼠标的位置等等,event对象只在事件过程中才有效。
31.几个Event属性:
altKey
检索ALT键的当前状态
可能的值 true为关闭
false为不关闭
button
检索按下的鼠标键
可能的值: 0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键
cancelBubble
设置或检索当前事件是否将事件句柄起泡
可能的值: false 启用起泡
true 取消该事件起泡
clientX
检索与窗口客户区域有关的鼠标光标的X坐标,属性为只读,没有默认值。
clientY
检索与窗口客户区域有关的鼠标光标的Y坐标,属性为只读,没有默认值。
ctrlKey
ctrlKey 检索CTRL键的当前状态
可能的值 true为关闭
false为不关闭
dataFld
检索被oncellchange事伯影响的列
aTransfer
为拖放操作提供预先定义的剪贴板式。
Element
检索在on mouseover和on mouseout事件期间退出的对象指针
keyCode
设置或检索与引发事件的关键字相关联的Unicode关键字代码
该属性与onkeydown onkeyup onkeypress一起使用
如果没有引发事件的关键字,则该值为0
offsetX
检索与触发事件的对象相关的鼠标位置的水平坐标
offsetY
检索与触发事件的对象相关的鼠标位置的垂直坐标
propertyName
检索在对象上己更改的特性的名称
reason
检索数据源对象数据传输的结果
可能的值:
0 数据传输成功
1 数据传输失败
2 数据传输错误
recordset
检索数据源对象中默认记录集的引用
该特性为只读
repeat
检索一个事件是否被重复
该属性只有在onkeydown事件重复时才返回true
returnvalues
设置或检索从事件中返回的值
可能的值:
true 事件中的值被返回
false 源对象上事件的默认操作被取消
screenX
检索与用户屏相关的鼠标的水平位置
screenY
检索与用户屏相关的鼠标的垂直位置
shiftKey
检索shiftKey键的当前状态
可能的值 true为关闭
false为不关闭
srcElement
检索触发事件的对象
srcFilter
检索导致onfilterchange事件触发的过滤器对象
srcUm
检索触发事件行为的同一资源名称
除非下面两个条件都为真,否则该特性被设置为null
1.行为被附加到触发事件的要素上
2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件
toElement
检索作为on mouseover或者on mouseout事件结果而移动的对象
type
检索事件对象中的事件名称
x
检索相对于父要素鼠标水平坐标的整数
y
检索相对于父要素鼠标垂直坐标的整数
32.
计算网页内容的宽与高
http://www.javaeye.com/topic/563999
jQuery–20个最新的jQuery效果:
http://www.cssrain.cn/?p=1430
jquery 源码分析
http://www.zhangjingwei.com/archives/jquery-analysis-code-1/
33.省略号:
ellipsis:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
width:100px;
xml:
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><binding id="ellipsis"><content><xul:window><xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description></xul:window></content></binding></bindings>
34.
wijmo(基于jquery ui)
http://wijmo.com/
35.
网页常用js代码收集
http://www.cnblogs.com/lushuicongsheng/archive/2010/11/10/1874447.html1
36.zen-coding:
http://www.appinn.com/zen-coding/
downlist:http://code.google.com/p/zen-coding/downloads/list
37.小众软件:
http://www.appinn.com/
38.Free Image Convert And Resize (图片批量转换和调整大小) V2.0.8.5 多国语言免费
http://www.xiazaiba.com/word/Free+Image+Convert
39.canvas 教程
https://developer.mozilla.org/cn/canvas_tutorial
40.css优先级别:
id选择器>类选择器>标签选择器
important>内联样式(style="color:red")
41.desktop
http://desktop.sonspring.com/
42.去掉虚线框:
非IE:outline:none;
IE:在标签里面加属性HideFocus
43.前端网站
http://www.js8.in/
http://www.aoao.org.cn/blog/
http://www.silverna.org/blog/
http://bbs.51js.com/viewthread.php?tid=88174
http://www.the6cn.com/web/javascript/index.shtml
http://www.qianduan.net
44.chrome 字体小于11像素的问题:
加上-webkit-text-size-adjust:none;
45.wmode=opaque 参数可以是FLASH位于最低,无法挡住下拉菜单,并且还能提高FLASH帧速
FALSH透明的参数为:wmode=transparent
46.在线编辑调试工具
http://jsfiddle.net/
47.onchange,onpropertychange,oninput的区分:
参考:http://hi.baidu.com/yljf184/blog/item/98df82df71fc731f62279876.html
onpropertychange(ie专有)
oninput(非IE)
48.闭包
http://www.cnblogs.com/jeffwongishandsome/archive/2009/05/17/1458405.html
(主要从事.net平台下的web开发工作,对服务端和前端编程都有浓厚的兴趣)
49.SWFObject is better than ac_ranActieContent
50.阻止冒泡/浏览器默认行为
if(e && e.stopPropagation){
e.stopPropagation();
}
else{
window.event.cancelBubble = true;
return false;
}
//
if(e && e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
return false;
}
51.获取offsetLeft/offsetTop的值
var x=0,y=0;
while(obj && obj.offsetParent){
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent;
}
52. 获取样式表的样式
return obj.currentStyle || document.defaultView.getComputeStyle(obj,null);
53.Object.prototype.extend (参考http://www.cnblogs.com/5201314/archive/2009/05/22/1487213.html)
Object.extend = function(a,b){
for(var a in b){
a[i] = b[i];
}
return a;
}
54.设置或返回一个窗口的内容区域的内部高度(参考http://help.dottoro.com/ljknuajj.php)
在IE下:document.documentElement.clientHeight
在其它浏览器下:window.innerHeight
55.trigger操作
function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}