更新下前端相关笔记

color:red; /* 所有浏览器都支持 */

color:red !important;/* Firefox、IE7支持 */

_color:red; /* IE6支持 */

*color:red; /* IE6、IE7支持 */

+color:red;/*IE7支持*/

*+color:red; /* IE7支持 */

color:red\9; /* IE6、IE7、IE8支持 */

color:red\0; /* IE8、IE9支持 */

color:red\9\0; /*IE9 支持*/

/* webkit and opera */

?@media all and (min-width: 0px){ div{padding:11px;} }

/* webkit */

?@media screen and (-webkit-min-device-pixel-ratio:0){ div{padding:11px;} }

/* opera */

?@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { div{padding:11px;} }

/* firefox * /

?@-moz-document url-prefix(){ div{background-color:#cc0000;}} /* all firefox */

?html>/**/body div, x:-moz-any-link, x:default {background-color:#66ff00;} /* newest firefox */

}

*html .xxx{

color:red;

}//IE6

*+html .xxx{

color:red;

}//IE7

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

<!--[if lt IE 7 ]> <html content="ie=7" />

把这段代码放到<head>里面，在ie8里面的页面解析起来就跟ie7一模一样的了

内联元素都支持：

display:inline-block;

块级元素IE6/7不支持此时用display:inline;zoom:1;来代替；

清除浮动：

.c{

zoom:1;

}

.c:after{

clear:both;

display:block;

height:0;

content:".";

visibility:hidden;

}

ie6下面有时候列表图标要鼠标点击或移动过去才显示；

给li列表加zoom:1或position:relative;

window.parent 是iframe页面调用父页面对象

javascript 刷新父窗口

window.opener.document.location.reload();?

使用DD_belatedPNG解决IE6下PNG半透明问题,只需要一个理由,就是它支持backgrond-position与background-repeat.

http://dillerdesign.com/experiment/DD_belatedPNG/#download

使用DD_roundies解决ie圆角问题

http://dillerdesign.com/experiment/DD_roundies/

很好的博客网站主题

wordpress/themeforest

而IE6在这里有一个 bug，它每次都从服务器端读取背景图片，结果就是，若服务器反应较慢hover效果就会出现短暂的空白

随便在页面中哪个位置（head、body或者onload）调用上面提及的脚本，例如：

? ? <script type="text/javascript">

? ? ? ? document.execCommand("BackgroundImageCache", false, true);

? ? </script>?

加载flash(swfObject)

adobe提供的脚本

在需要显示flash的地方加入下面脚本，将flash路径改下就ok了。

这个脚本根据不同的浏览器用不同的标签显示flash(如object/embed).

用这个脚本主要是为了解决flash加载时要点击一次才能进行交互

? ? ? ? ? ? ? ? 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>

用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标签之前的内容包裹起来。

filter:fliph 内容翻转

filter:gray 内容变灰

http://blog.silentash.com/

http://www.w3school.com.cn/js/js_reference.asp

google jquery 引用：

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

//界面好：

http://www.position-absolute.com/articles/jquery-fade-and-slide-toggle-plugin/

http://www.jxwinter.cn/index.php/archives/tag/ie6

//content

forum

http://www.css-js.com

//question

有A页面通过jquery的dialog和iframe加载B页面而B页面也以同样的方法加载C页面但B页面打开的dialog却限定在了B窗口中

请问如何让C页面所在的dialog跳出B页面？

//move dialog

http://www.cnblogs.com/caixw/archive/2010/08/09/jquery-plugin-dialog.html

offsetHeight clientHeight

http://www.cftea.com/c/751.asp

将 document.body 和 document.documentElement 一起应用，比如：document.documentElement.scrollLeft || document.body.scrollLeft（一般将 document.documentElement 写在前面），类似应用请参见：http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp。

页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。

页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容（不管有没有 DTD），可以使用如下代码：

var scrollTop = window.pageYOffset ?

? ? ? ? ? ? ? ? || document.documentElement.scrollTop ?

? ? ? ? ? ? ? ? || document.body.scrollTop ?

? ? ? ? ? ? ? ? || 0;

http://www.cftea.com ? 千一网络

http://www.zhangjingwei.com/ ? ? 源码分析

http://www.web600.net/html/editor/JavaScript/201008183953.html

http://flyzonemu.javaeye.com/blog/326582 ?

addEvent

http://www.w2blog.net/view/353.html ? IE6 中 a:hover 的bug

2010=-09-12 Meizu m8

好书下载：

http://ajava.org/book/?

good

http://preloaders.net/en/horizontal ??

loading img

http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html ? 博客园justinyoung

15 个 JavaScript Web UI 库

http://news.csdn.net/a/20100519/218442.html

常用技术收集

http://banu.blog.163.com/blog/static/2314648201089836588/

IE6 hover span

有相对定位时，a:hover{position:relative;}

? ? ?a:hover span{ position:absolute;}

http://www.happinesz.cn/archives/991/?

IE6 position:fixed/absolute

比较详细的javascript /css /ajax...

http://www.web666.net/dom/cancelBubble.html

浏览器的两种模式quirks mode 和strict mode

http://kino.javaeye.com/blog/241260

w3help:

http://www.w3help.org/zh-cn/

forum:

http://bbs.51cto.com/forum-137-1.html

http://forum.csdn.net/SList/CrossBrowser

drag

http://www.koyoz.com/blog/?action=show&id=80

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对象只在事件过程中才有效。?

? ?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?

? ?检索相对于父要素鼠标垂直坐标的整数?

计算网页内容的宽与高

http://www.javaeye.com/topic/563999

jQuery20个最新的jQuery效果:

http://www.cssrain.cn/?p=1430

jquery 源码分析

http://www.zhangjingwei.com/archives/jquery-analysis-code-1/

http://www.aliue.com/index.php

http://help.dottoro.com/ljogqtqm.php

ellipsis:

? ? ? ? overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

-moz-binding: url('ellipsis.xml#ellipsis');

width:100px;

选中的文字背景：

http://daverupert.com/2010/06/web-performant-wordpress/

wijmo(基于jquery ui)

http://wijmo.com/

http://www.cnblogs.com/rubylouvre/archive/2010/11.html

网页常用js代码收集

http://www.cnblogs.com/lushuicongsheng/archive/2010/11/10/1874447.html1

看看

http://hi.baidu.com/mt20

zen-coding:

http://www.appinn.com/zen-coding/

downlist:http://code.google.com/p/zen-coding/downloads/list

小众软件：

http://www.appinn.com/

Free Image Convert And Resize (图片批量转换和调整大小) V2.0.8.5 多国语言免费

http://www.xiazaiba.com/word/Free+Image+Convert

canvas 教程

https://developer.mozilla.org/cn/canvas_tutorial

css优先级别：

id选择器>类选择器>标签选择器

important>内联样式(style="color:red")

desktop

http://desktop.sonspring.com/

去掉虚线框：

非IE:outline:none;

IE:在标签里面加属性HideFocus

http://www.js8.in/

http://www.cnblogs.com/sweetie/archive/2010/11/14/1877079.html

chrome 字体太小的问题：

-webkit-text-size-adjust:none;

font-size:10px;

wmode＝opaque 参数可以是FLASH位于最低，无法挡住下拉菜单，并且还能提高FLASH帧速，真是好参数

FALSH透明的参数为：wmode＝transparent

在线编辑调试页面

http://jsfiddle.net/

onchange,onpropertychange,oninput的区分:

http://roshanca.com/?p=95

http://roshanca.com/?s=%E9%97%AD%E5%8C%85 ?什么是闭包

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

? ? a[i].onclick = function(i){

? ? ? ? return function(){

? ? alert(i)

}

? ? }(i)

}

http://www.cnblogs.com/jeffwongishandsome/archive/2009/05/17/1458405.html

程序男，热爱编程、思考和阅读，现主要从事.net平台下的web开发工作，对服务端和前端编程都有浓厚的兴趣。

http://www.cnblogs.com/jeffwongishandsome/

SWFObject is better than ac_ranActieContent

scroll、client、offsetWidth等获取、设置详解

http://www.easewe.com/Article/document/257.htm

//如果提供了事件对象，则这是一个非IE浏览器 ? ??

if ( e && e.stopPropagation ) ? ??

　　//因此它支持W3C的stopPropagation()方法 ? ??

　　e.stopPropagation(); ? ??

else ? ?

　　//否则，我们需要使用IE的方式来取消事件冒泡 ? ??

　　window.event.cancelBubble = true; ? ??

return false; ? ?

2.阻止浏览器的默认行为

//如果提供了事件对象，则这是一个非IE浏览器 ? ??

if ( e && e.preventDefault ) ? ??

　　//阻止默认浏览器动作(W3C) ? ??

　　e.preventDefault(); ? ??

else ? ?

　　//IE中阻止函数器默认动作的方式 ? ??

　　window.event.returnValue = false; ? ??

return false;?

添加事件：

if(obj.attachEvent){

obj.attachEvent("on" + handle,fn);

}else{

obj.addEventListener(handle,fn,false)

}

移除事件：

if(obj.attachEvent){

obj.detachEvent("on" + handle,fn);

}else{

obj.removeEventListener(handle,fn.false);

}

this.getPosition = function(obj) {

?var x = obj.offsetLeft, y = obj.offsetTop;

?while (obj && obj.offsetParent) {

?x += obj.offsetParent.offsetLeft;

?y += obj.offsetParent.offsetTop;

?obj = obj.offsetParent;

?return [x, y];

?};?

function getStyle(obj){

var obj = document.getElementById(obj);

return obj.currentStyle ? obj.currentStyle : document.defaultView.getComputedStyle(obj,null);

}

Object.prototype.extend

http://www.cnblogs.com/5201314/archive/2009/05/22/1487213.html

Object.extend = function(destination, source) {

for (var property in source) {

? ? destination[property] = source[property];

}

return destination;

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

var s = "";

s += "\r\n网页可见区域宽："+ document.body.clientWidth;

s += "\r\n网页可见区域高："+ document.body.clientHeight;

s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";

s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";

s += "\r\n网页正文全文宽："+ document.body.scrollWidth;

s += "\r\n网页正文全文高："+ document.body.scrollHeight;

s += "\r\n网页被卷去的高："+ document.body.scrollTop;

s += "\r\n网页被卷去的左："+ document.body.scrollLeft;

s += "\r\n网页正文部分上："+ window.screenTop;

s += "\r\n网页正文部分左："+ window.screenLeft;

s += "\r\n屏幕分辨率的高："+ window.screen.height;

s += "\r\n屏幕分辨率的宽："+ window.screen.width;

s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;

s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;

s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";

s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

//alert(s);

for(a in document.body){

document.write(a);

document.write("----");

document.write(document.body[a]);

document.write("<br>");

}

</SCRIPT>

</BODY>

</HTML>

但上面得到的并不是窗口可见区域的尺寸（当网页没有占满整个窗口时）这时要得到高度和宽度

在IE下：document.documentElement.clientHeight

在其它浏览器下：window.innerHeight

http://webjcw.cn/dom/ref_window/innerheight.php

http://help.dottoro.com/ljknuajj.php

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);

? ? ?}

designMode

http://www.code-design.cn/blogdetail2615.html

http://www.code-design.cn/blogdetail117.html

样式之美博客

http://www.aoao.org.cn/blog/

月影博客

http://www.silverna.org/blog/?p=73

http://bbs.51js.com/viewthread.php?tid=88174

::-moz-selection { background:#f50; color:#fff;} // FF私有属性

::selection { background:#f50; color:#fff;} //其他非IE标准浏览器

.abc::selection{} /*abc为Class名称*/

.abc::-moz-selection{}

</style>

JavaScript颜色转换的核心

JavaScript颜色转换的核心就是进制间的转换。RGB格式其实就是十进制表示法，所以，十六进制颜色与RGB颜色的转换就是十六进制与十进制之间的转换。

十六进制转换为十进制相对容易些，核心代码如下示例：parseInt("0xFF")，其结果就是255，”0x”就表明当前是16进制，由于parseInt后面无参数，默认就是转换为10进制了。

十进制转换为16进制，核心代码如下：var num=255; num.toString(16);，其结果是FF。”16″表示数值转换为16进制字符串。

ajax如何控制浏览器的历史记录

http://www.qgy18.com/2008/09/howto_control_browser_history/

prototype:

http://w3er.com/javascript/master-javascript-object-system/#comment-102

http://css-tricks.com (a web design community)

http://css-tricks.com/downloads/

web标准化交流会

http://www.w3ctech.com/about

对于英文文章，只需要设定 text-align:justify; 就可以实现两端对齐，

如果作者主要致力于中文写作，则需要添加text-justify:inter-ideograph属性

http://uicss.cn/category/ue-seo/

使用HTML5开发的一些精彩应用:

http://homepage.yesky.com/165/11753665.shtml

http://www.9yuer.com/index.html

http://www.9yuer.com/thread-2825.html

网页制作后期细节开发

触发文字选择的事件：onselect=function(){return false;}适应于<input type='text'><textarea>

可以彻底禁止左右键~`＜body oncontextmenu="return false"＞如果禁止用鼠标选择和复制,则加上onselectstart="return false"

可以彻底禁止左右键~`

如果禁止用鼠标选择和复制,则加上

onselectstart="return false"

即是<body oncontextmenu="return false" onselectstart="return false">

如果禁止人家粘贴则加上

onpaste="return false"?

即<body oncontextmenu="return false" onpaste="return false" >?

禁止剪切

oncut='return false'

六、方法集锦?

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架

if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页

// -->

9. 防止被人frame

<SCRIPT LANGUAGE=javascript><!--?

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

10. <noscript><iframe src=*.html></iframe></noscript> 网页将不能被另存为?

http://www.wxwdesign.com/page/45 ?前端开发

http://xirang.ca/2009/12/rotating-snake-visual-illusion

http://varnow.org/?p=232 ?记录前端-记录成长

http://css9.net

模拟下拉列表: ? http://www.uur.cn/web/split/3-5_%E5%8D%95%E9%80%89%E4%B8%8B%E6%8B%89%E6%A1%86/demo.html

http://js1k.com ? canvas games

select option disable restyle /javascript drag study

http://www.53dns.com/ ?互易中国 ?域名/空间

第六感

http://www.the6cn.com/web/javascript/index.shtml

浮动的内联元素里面再有浮动元素，则该内联元素宽度会100%；该元素里面的元素设置diaplay:inline-block可用

faststone:

FastStone Capture 6.7　

http://www.newhua.com/soft/44264.htm

http://www.o2sky.cn/blog/ ?

canvas资料：

http://forum.livetome.cn/thread-8588-1-1.html

http://www.html5.jp/ ?

http://paranimage.com/html-5-canvas-tutorials-and-examples/

http://mozillalabs.com

http://www.xlnv.net

onPropertyChange onChange onInput事件:

http://hi.baidu.com/yljf184/blog/item/98df82df71fc731f62279876.html

前端：

http://www.ooso.net/

http://www.qianduan.net

http://www.cnblogs.com/zhenn/

获得选中的文字：

// 说明：获取页面上选中的文字?

// 整理：http://www.CodeBit.cn?

function getSelectedText() {?

? ? if (window.getSelection) {?

? ? ? ? // This technique is the most likely to be standardized.?

? ? ? ? // getSelection() returns a Selection object, which we do not document.?

? ? ? ? return window.getSelection().toString();?

? ? }?

? ? else if (document.getSelection) {?

? ? ? ? // This is an older, simpler technique that returns a string?

? ? ? ? return document.getSelection();?

? ? }?

? ? else if (document.selection) {?

? ? ? ? // This is the IE-specific technique.?

? ? ? ? // We do not document the IE selection property or TextRange objects.?

? ? ? ? return document.selection.createRange().text;?

? ? }?

</script>?

在 FireFox 下获取 input 和 textarea 中选中文字的解决方案:

// 说明：FireFox 下获取 input 或者 textarea 中选中的文字?

// 整理：http://www.codebit.cn?

function getTextFieldSelection(e) {?

? ? if (e.selectionStart != undefined && e.selectionEnd != undefined) {?

? ? ? ? var start = e.selectionStart;?

? ? ? ? var end = e.selectionEnd;?

? ? ? ? return e.value.substring(start, end);?

? ? }?

? ? else return ""; ?// Not supported on this browser?

</script>?

比较全面的一个：

参考：http://help.dottoro.com/ljtfkhio.php

<head>

? ? <script type="text/javascript">

? ? ? ? function GetSelectedText () {

? ? ? ? ? ? var selText = "";

? ? ? ? ? ? if (window.getSelection) { ? ? ?// Firefox, Opera, Google Chrome and Safari

? ? ? ? ? ? ? ? if (document.activeElement &&?

? ? ? ? ? ? ? ? ? ? ? ? (document.activeElement.tagName.toLowerCase () == "textarea" ||?

? ? ? ? ? ? ? ? ? ? ? ? ?document.activeElement.tagName.toLowerCase () == "input"))?

? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? var text = document.activeElement.value;

? ? ? ? ? ? ? ? ? ? selText = text.substring (document.activeElement.selectionStart,?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? document.activeElement.selectionEnd);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? else {

? ? ? ? ? ? ? ? ? ? var selRange = window.getSelection ();

? ? ? ? ? ? ? ? ? ? selText = selRange.toString ();

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? else {

? ? ? ? ? ? ? ? if (document.selection.createRange) { ? ? ? // Internet Explorer

? ? ? ? ? ? ? ? ? ? var range = document.selection.createRange ();

? ? ? ? ? ? ? ? ? ? selText = range.text;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? if (selText !== "") {

? ? ? ? ? ? ? ? alert (selText);

? ? ? ? ? ? }

? ? ? ? }

? ? </script>

</head>

? ? Some text for selection.

? ? <br /><br />

? ? <textarea>Some text in a textarea element.</textarea>

? ? <input type="text" value="Some text in an input field." size="40"/>

? ? <br /><br />

? ? Select some content on this page!

</body>

http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html

http://www.flyinghail.net/page/2/

http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html

http://www.35ui.cn/

天气预报嵌套地址：

http://www.265.com/weather/59493.htm

在Opera下，对于onkeydown的默认行为是不能用event.preventDefault()来取消,用opera下onkeypress却可以。

var cancelKeypress = false; ?

document.onkeydown = function(evt) { ?

? ? evt = evt || window.event; ?

? ? cancelKeypress = (evt.ctrlKey && evt.keyCode == 84); ?

? ? if (cancelKeypress) { ?

? ? ? ? return false; ?

? ? } ?

}; ?

/* For Opera */ ?

document.onkeypress = function(evt) { ?

? ? if (cancelKeypress) { ?

? ? ? ? return false; ?

? ? } ?

};?

有时候ajax返回的html类型的data，通过$(data).find("#ddd"),居然找不到，测试了下先把data数据appendTo一个容器比如body后再去$(data).find("#ddd")就可以找的到了，jquery处理方式有点怪

ie6 边框透明的解决方案：

border:2px solid transparent;

_border-color:tomato;

_filter:chroma(color=tomato);

如果是表格的话则table的border-collapse属性不能为collapse才可以实现

参考：http://blog.csdn.net/doymm2008/archive/2010/03/05/5349467.aspx

透明PNG在IE6下的官方解决方案

http://blog.csdn.net/doymm2008/archive/2010/03/05/5349374.aspx

http://hi.baidu.com/iamzhangxinxu/blog/category/.net%D1%A7%CF%B0

鼠标位置

function mousePosition(ev){

? ? if(ev.pageX || ev.pageY){

? ? ? ? return {x:ev.pageX, y:ev.pageY};

? ? }

? ? return {

? ? ? ? x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

? ? ? ? y:ev.clientY + document.body.scrollTop ?- document.body.clientTop

? ? };

事件源

var e = arguments[0] || window.event;

var ele = e.target || e.srcElement;

http://www.web666.net/

http://jslover.com

ie6 fixed

.fixed{ ?

?position: fixed; ?

?_position: absolute; ?

?_top: expression(eval(document.documentElement.scrollTop)); ?

} ?

html { ?

?_background: url(xx.jpg) fixed; ?

http://www.planeart.cn/

简单的判断IE：if(-[1,]){//非IE}

返回毫秒数：

var a = +new Date();

http://jscrollpane.kelvinluck.com/

js学习：

http://blog.csdn.net/yangdengfeng2003/category/300597.aspx

http://wange.im/

http://www.cssshare.com/

http://www.94this.com.cn/

http://www.html-js.com/?p=1031

14个非常棒的 JavaScript 游戏开发框架推荐?

http://www.cnblogs.com/lhb25/archive/2011/04/25/1965739.html

http://www.cnblogs.com/lhb25/

http://www.pigzz.com/jscode/

前端工程师blog:

http://hszy00232.blog.163.com/

再谈图片预加载：

http://www.planeart.cn/?p=1121

再谈IE6之fixed

http://www.planeart.cn/?p=877

good:

http://www.cnblogs.com/cloudgamer/

用JavaScript写出一个linux PC模拟器

http://bellard.org/jslinux/

https://github.com/

css3:

http://dotnet.aspx.cc/

http://missdora.net/blog/category/javascript/

transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现

有五种变形样式，可以重叠多种变形样式，以空格分隔

scale:缩放，1为原始大小。scale(x)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。

rotate:水平旋转，属性值格式为Xdeg。rotate(Xdeg)。X为正数时，顺时针旋转；为负数时，逆时针旋转

translate:定位元素，基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴分别定位

skew:将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述，想象一下平行四边形吧。属性值为一个时，x、y轴参数相同；为两个时，x、y轴各自倾斜。

matrix:矩阵，六个值。矩阵变形（学习完毕之后更新）

浏览器支持情况:-webkit-transform,-moz-transform,-o-transform,目前对CSS3动画支持的最好最全面的是webkit内核浏览器。

在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时的源点，也就是变形时围绕的点。这个属性接受两个参数，可以是百分比、top/center/bottom、带单位的数值。

transition:transition-property transition-duration transition-timing-function transition-delay

transition-property:要实现动态转换的css属性名。可以设定为all,则动态转换所有改变的属性值，包括transform

transition-duration:设定转换的时间，单位s(秒)

transition-timing-function:过渡时的效果，可以想象下幻灯片切换时的效果。常用值：ease | linear | ease-in | ease-out | ease-in-out

transition-delay:动态转换产生的延迟时间。不常用

eg:

.color-transition{

color:red;font-size:18px;

-webkit-transition:color .5s linear;}

.color-transition:hover{

color:blue;}

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

http://www.cctry.com

http://www.xiaotai.com

.noBr

{

white-space:nowrap;

word-break:keep-all;

}

.wordBr

{

white-space:normal;

word-wrap:break-word;

}

.break

{

white-space:normal;

? word-break:break-all;

}

http://hellohtml5.com/search/label/javascript

http://www.chinabyte.com/bang/html5/

function setCookie(name, value, expires, path, domain, secure){

? ? var c = name + '=' + escape(value);

? ? if(expires){

? ? ? ? var d=new Date();

? ? ? ? d.setTime(d.getTime()+expires*24*3600*1000);

? ? ? ? c+='; Expires='+d.toGMTString();

? ? }

? ? c += ((path) ? '; path=' + path : '') +

? ? ? ? ?((domain) ? '; domain=' + domain : '') +

? ? ? ? ?((secure) ? '; secure' : '');

? ? document.cookie = c;

}

function getCookie(name)

{

? ? var a=document.cookie.split("; ");

? ? name+="=";

? ? for(var i=0;i<a.length;i++)

? ? ? ? if(a[i].indexOf(name)==0)

? ? ? ? ? ? return unescape(a[i].substr(name.length));

? ? return '';

}

javascript api:

http://qefqei.com/javascript/

http://qefqei.com/jquery/

css3:

https://developer.mozilla.org/en/css/-moz-transform

http://www.css88.com/tool/css3Preview/

callee属性是arguments的一个属性，返回方法的正文。

即：func.arguments.callee = func;

利用callee属性可以轻松实现递归调用：

caller属性是方法的一个属性，返回当前调用该方法的方法。

如果在A方法中调用了B方法，在A方法执行的过程中，在B函数中存在B.caller等于A的方法体。

a:link|a:visited|a:hover|a:active

排序算法：

http://www.comp.nus.edu.sg/~xujia/mirror/algorithm.myrice.com/algorithm/commonalg/sort/index.htm#

writing-mode:tb-rl; (IE)

transform:rotate(90deg);

var documentFragment=document.createDocumentFragment();?

diaplay:inline-block;

内联元素浏览器都支持；块级元素在IE6/7下面不支持，这时候加上*display:inline;*zoom:1;就可以了。

由于 inline 元素是可以自然地 vertical-align 的，因此将需要设定垂直居中的对象设定为 inline-block，同时引入一个冗余的兄弟元素同样设定为 inline-block，并且 height: 100%，再设定两者都为 vertical-align: middle。

eg:<div 和 "undefined"。?

function createXmlHttpRequest(){ ?

? ? ? ? if(window.ActiveXObject){ //如果是IE6以及以下浏览器 ?

? ? ? ? ? ? return new ActiveXObject("Microsoft.XMLHTTP"); ?

? ? ? ? }else if(window.XMLHttpRequest){ ??

? ? ? ? ? ? return new XMLHttpRequest(); ?

? ? ? ? } ?

? ? } ?

xmlHttpRequest = createXmlHttpRequest(); ?

xmlHttpRequest.onreadystatechange = fn;

xmlHttpRequest.open("get",url,true); ?

xmlHttpRequest.send(null); ?

canvas 特效：

http://hakim.se/experiments/html5/blob/04/

reset.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img { border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:'';}abbr,acronym { border:0;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,canvas,video,audio

{

display:block;

}

来客轩javascript 学习
http://www.wlog.cn/category/javascript/

更新上前端相关笔记

来客轩javascript 学习
http://www.wlog.cn/category/javascript/

热点推荐

更新上前端相关笔记

来客轩javascript 学习http://www.wlog.cn/category/javascript/

热点推荐

来客轩javascript 学习
http://www.wlog.cn/category/javascript/