Web中常用的Javascript技巧-Highcharts详细翻译系列一：chart...-HTML&CSS编码规范

当前位置: 编程技术>WEB前端

本页文章导读:

▪Web中常用的Javascript技巧事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture();事件按键event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值event.returnValue 鼠标位.........

▪Highcharts详细翻译系列一：chart 图表选项篇 Highcharts详细翻译系列一：chart 图表选项篇 1.概览参数描述默认值 alignTicks 多轴时最小刻度是否自动计算 true animation 是否启用动画效果 true ba.........

▪HTML&CSS编码规范 General Summary（总体概述）总体原则符合w3c通用网页标准。结构清晰，嵌套正确，嵌套深度适当。代码精炼。 .........

[1]Web中常用的Javascript技巧

来源: 发布时间: 2013-11-06

事件源对象

event.srcElement.tagName
event.srcElement.type

捕获释放

event.srcElement.setCapture();
event.srcElement.releaseCapture();

事件按键

event.keyCode
event.shiftKey
event.altKey
event.ctrlKey

事件返回值

event.returnValue

鼠标位置

event.x
event.y

窗体活动元素

document.activeElement

绑定事件

document.captureEvents(Event.KEYDOWN);

访问窗体元素

document.all("txt").focus();
document.all("txt").select();

窗体命令

document.execCommand

窗体COOKIE

document.cookie

菜单事件

document.oncontextmenu

创建元素

document.createElement("SPAN");

根据鼠标获得元素：

document.elementFromPoint(event.x,event.y).tagName=="TD
document.elementFromPoint(event.x,event.y).appendChild(ms)

窗体图片

document.images[索引]

窗体事件绑定

document.onmousedown=scrollwindow;

元素

document.窗体.elements[索引]

对象绑定事件

插件数目

navigator.plugins

取变量类型

typeof($js_libpath) == "undefined"

下拉框

下拉框.options[索引]
下拉框.options.length

查找对象

document.getElementsByName("r1");
document.getElementById(id);

定时

UNCODE编码

escape() ,unescape

父对象

obj.parentElement(dhtml)
obj.parentNode(dom)

交换表的行

TableID.moveRow(2,1)

替换CSS

document.all.csss.href = "a.css";

并排显示

display:inline

隐藏焦点

hidefocus=true

根据宽度换行

自动刷新

<meta HTTP-EQUIV="***" CONTENT="8;URL=http://c98.yeah.net">

简单邮件

<a href="mailto:aaa@bbb.com?subject=ccc&body=xxxyyy">

快速转到位置

obj.scrollIntoView(true)

锚

<a name="first">
<a href="#first">anchors</a>

网页传递参数

location.search();

可编辑

obj.contenteditable=true

执行菜单命令

obj.execCommand

双字节字符

/[^\x00-\xff]/

汉字

/[\u4e00-\u9fa5]/

让英文字符串超出表格宽度自动换行

word-wrap: break-word; word-break: break-all;

透明背景

<IFRAME src="http://www.blog.com.cn/1.htm" width=300 height=180 allowtransparency></iframe>

获得style内容

obj.style.cssText

HTML标签

document.documentElement.innerHTML

第一个style标签

document.styleSheets[0]

style标签里的第一个样式

document.styleSheets[0].rules[0]

防止点击空链接时，页面往往重置到页首端。

<a href="javascript:function()">word</a>

上一网页源

asp:
request.servervariables("HTTP_REFERER")
javascript:
document.referrer

释放内存

CollectGarbage();

禁止右键

document.oncontextmenu = function() { return false;}

禁止保存

<noscript><iframe src="http://www.blog.com.cn/*.htm"></iframe></noscript>

禁止选取

<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()>

禁止粘贴

<input type=text onpaste="return false">

地址栏图标

<link rel="Shortcut Icon" href="/blog_article/favicon.ico">

favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下
收藏栏图标

<link rel="Bookmark" href="/blog_article/favicon.ico">

查看源码

关闭输入法

<input >

自动全选

<input type=text name=text1 value="http://www.blog.com.cn/123" onfocus="this.select()">

ENTER键可以让光标移到下一个输入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9">

文本框的默认值

<input type=text value="http://www.blog.com.cn/123" onfocus="alert(this.defaultValue)">

title换行

obj.title = "123&#13sdfs&#32"

获得时间所代表的微秒

var n1 = new Date("2004-10-10".replace(/-/g, "\/")).getTime()

窗口是否关闭

win.closed

checkbox扁平

<input type=checkbox >

获取选中内容

document.selection.createRange().duplicate().text

自动完成功能

<input type=text autocomplete=on>打开该功能
<input type=text autocomplete=off>关闭该功能

窗口最大化

<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)">

无关闭按钮IE

window.open("aa.htm", "meizz", "fullscreen=7");

统一编码/解码

alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe")))
encodeURIComponent对":"、"/"、";" 和 "?"也编码

表格行指示

//各种尺寸

s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域高："+ document.body.offsetWeight +" (包括边线的宽)";
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;
//不缓存

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">

//正则匹配

匹配中文字符的正则表达式： [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内)：[^\x00-\xff]
匹配空行的正则表达式：\n[\s| ]*\r
匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/
匹配首尾空格的正则表达式：(^\s*)|(\s*$)（像vbscript那样的trim函数）
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

利用正则表达式限制网页表单里的文本框输入内容：

//消除图像工具栏
[/html]
<IMG SRC="/blog_article/mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="false">
or
<head>
<meta http-equiv="imagetoolbar" content="no">
</head>
[/html]
//取得控件得绝对位置(1)

<script language="javascript"> <br/>function getoffset(e) <br/>{ <br/> var t=e.offsetTop; <br/> var l=e.offsetLeft; <br/> while(e=e.offsetParent) <br/> { <br/> t+=e.offsetTop; <br/> l+=e.offsetLeft; <br/> } <br/> var rec = new Array(1); <br/> rec[0] = t; <br/> rec[1] = l; <br/> return rec <br/>} <br/></script> <br/>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
//获得控件的绝对位置(2)

oRect = obj.getBoundingClientRect();
oRect.left
oRect.

//打印分页

<p >page1</p>
<p >page2</p&

[2]Highcharts详细翻译系列一：chart 图表选项篇

来源: 互联网发布时间: 2013-11-06

Highcharts详细翻译系列一：chart 图表选项篇

1.概览

参数

描述

默认值

alignTicks

多轴时最小刻度是否自动计算

true

animation

是否启用动画效果

true

backgroundColor

图表外部的背景色或渐变色

#FFFFFF

borderColor

图表外边框的颜色

#4572A7

borderRadius

图表外边框的圆角半径

5.0

borderWidth

外边框的像素宽度

0.0

className

图表容器div使用的一个css类名

null

defaultSeriesType

type的别名

null

events

addSeries 、click、load、redraw、selection

null

height

一个显式的图表高度

null

ignoreHiddenSeries

如果true,一旦一个系列被隐藏，轴将会扩展剩余的可见系列

true

inverted

是否倒置轴，使得x轴时垂直的y轴是水平的

false

margin

图表的外边框和绘图区域的边距

null

marginBottom

下边距

null

marginLeft

左边距

null

[3]HTML&CSS编码规范

来源: 发布时间: 2013-11-06

General Summary（总体概述）

总体原则

符合w3c通用网页标准。

结构清晰，嵌套正确，嵌套深度适当。

代码精炼。

注释清晰，代码可读性高。

风格统一。

1.1 基本命名风格

本文档的命名规范会仅使用以下命名风格。

Camel风格

这种风格除了第一个单词的首字母,其他单词都应大写首字母。Ex: backColor

1.2 大小写敏感

不要出现两个只用大小写区分的Class。
不要出现两个只用大小写区分的ID。

Naming Conventions and Style（命名规范和代码风格）

1.3 所有的Class及ID均采用 Pascal 风格

<ul NumHeading2">1.4 使用有意义的Class及ID

<p NumHeading2">1.5 所有的样式控制尽量使用Class，ID用于Javascript对DOM结构的控制

可以防止因优先级的问题导致CSS代码量加大
同一个Class可应用于多个标签，但同一个ID只能用于一个标签

1.6 所有CSS代码尽量单独封装在独立的CSS文件中，文件命名应用有意义的名字，例如layout.css编写页面布局方面的CSS代码。

尽量不要出现直接在HTML标签中书写CSS代码的情况。
在<head>标签中可使用<style></style>针对本页面中特定元素的样式控制代码

1.7 CSS代码每行一个属性

每行一个属性的代码风格更利于维护，注释更方便
在使用Hack进行浏览器兼容性处理时更清晰

/* Example */

.mainNav {

width: 200px;

height: 200px;

background: #f00 url(/blog_article/bg.jpg) no-repeat left top; /* 背景颜色及背景图片 */

}

不建议采用下面的代码形式，哪怕是只有一条属性

/* Example */

.mainNav {

width: 200px; height: 200px; background: #f00 url(/blog_article/bg.jpg) no-repeat left top; /* 背景颜色及背景图片 */

}

1.8 CSS代码中应遵循从外到内，从上到下，从左到右的原则

先写外围框架的，再写内部元素的。
先写网页中视觉上出现在页面上面的元素CSS代码，再写下面的。
先写网页中视觉上出现在页面左边的元素CSS代码，再写右边的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

.header {

}

.container {

}

.container .sidebar {

}

.container .main {

}

.footer {

}

</style>

</head>

<body>

<div NumHeading2">1.9 代码缩写

对于padding，margin，border等属性应采用缩写方式

/* Good Example */

margin: 10px 5px 15px;

padding: 1px 2px;

border-width: 1px;

/* Not Good Example */

margin: 10px 5px 15px 5px;

padding: 1px 2px 1px 2px;

border-width: 1px 1px 1px 1px;

1.10 所有CSS代码尽量单独封装在独立的CSS文件中，文件命名应用有意义的名字，例如layout.css编写页面布局方面的CSS代码。

在文件开始处给出适当的注释

/* -------

文件名：layout.css

作用：页面主体布局

创建者：

创建日期：

最后更新：

最后更新时间：

------- */

Indentation and Spacing(缩进和空格)

1.11 使用TAB缩进，不要使用Spaces. 定义TAB值为4

1.12 注释和代码要在同一列，使用同样的缩进格式

对于某一属性的单独注释，直接写在同一行内。

/* Good Example */

/* Header */

.header {

width: 200px;

min-height: 100px; /* 针对IE7中设置最小高度 */

}

1.13 选择器与开始大括号({)之间应保持而且仅有一个空格

1.14 结束大括号(｝)应该放在单独的一行。

1.15 用一到两个空行来分割不同的页面模块CSS代码段

/* Good Example */

.header {

width: 200px;

height: 100px;

}

.header .mainNav {

margin: 5px 2px;

}

&nbs