图片 2

几个你不知底的HTML五的接口介绍,网络常用的javascript函数及其他js类库写的

响应式巩固安排

2015/03/18 · CSS,
HTML5,
JavaScript ·
响应式,
设计

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,禁止转发!
英文出处:24ways.org。迎接参预翻译组。

贰四ways
在那10年中曾经渐渐庞大了。在因特网历史中那已是一个千古永远的了。回看一下在那段时间里大家见证全部变化:Ajax的兴起,移动器材的增加产量,前端开辟工具不可预见的前景。

工具和本领来来往往,兴起衰落,但在过去的十年中有壹件事于自身而言是直接未有生成的:渐进式加强。

渐进式巩固不是一门本领。它更像是一种沉思方式。渐进式巩固鼓励你去钻探网页所提供的主导意义,而不是去想一个已产生网页怎么样体现的一线难点。所以渐进式加强允许你以更抽象的诀要思考宗旨作用,而不是纠结于网页在不利的宽屏设备上的美貌图景。

若果您曾经明确要抬高的骨干职能是什么–向购物栏中增多1件商品,公布一条音讯,分享一张图片–然后你能够以1种最简便的措施贯彻该意义。这平日也代表要从理想的老一套的HTML出手。你所急需的常备只是链接和表格。然后,只要你已经使得该中央职能主旨专门的学问,你就足以开首对更加多当代浏览器加强功能以渐渐提供更加好的用户体验。

以那种艺术行事的便宜不仅仅是您的网页能够在旧式浏览器山东中华工程集团作(就算只是中央能运作)。它还是可以够确认保障假如在以后的浏览器中出现的小毛病不至于形成大祸。

芸芸众生对渐进式巩固存在贰个误解,以为渐进式巩固正是花时间化解旧式浏览器,可是谜底却反倒。将基本功效投入使用并不会费用太久。而且倘若你早已落成那壹部分办事,你就足以随心所欲地去测试新型最棒的浏览器技巧,脑中的意识是不怕它们以后还不能被周边帮助,也绝非问题,因为你早已把最保证的东西投入使用了。

对待Web发展的关键在于意识到不会有最后的接口—恐怕会有那二个只有1线差距但会借助于自由时刻放4用户的性质和容积的接口。网址无需在每三个浏览器中都扳平。

真正掌握了那一个便是一个高大地开垦进取。你能够把时光开销在为更加多浏览器提供最棒心得的同时保障能在别的组建专门的学业的地点落到实处大旨功用,而不是尽力使你的网址在出入巨大的浏览器中一模同样。

允许自身以三个简易的例子来发挥:导航。

先是步:主题成效

万1大家现在有3个有关圣诞节1二天欢乐的简练网址,一天2个页面。这些基本职能也一定清楚了:

1、掌握在那之中大41天。
二、从壹天到另一天浏览。

第一个职能能够透过将文件用头条,段落以及全部常用的HTML结构化标签组装起来落成。第二个则透过一种类的超链接完结。
那就是说未来导航列表最符合放在哪儿呢?个人来说,小编是多少个跳转到页脚导航形式的观者。这几个情势先放网页内容,其次才是导航。页面顶部有3个饱含href属性的再而三指向导航的竹签。

XHTML

<a class=”control” href=”#menu”>Menu</a> … <nav
id=”menu” role=”navigation”>… <a class=”control”
href=”#top”>Dismiss</a></nav>

1
2
3
4
5
<a class="control" href="#menu">Menu</a>
 
<nav id="menu" role="navigation">…
<a class="control" href="#top">Dismiss</a></nav>

翻开页脚超链导航航空模型型式的言传身教。

出于唯有超链接,这一个格局也只是在互连网初兴时代能在每二个浏览器上中国人民解放军海军事工业程大学业作。Web浏览器要做的只是显得超链接(正如名字所示)。

其次步:加强型布局

在小显示屏设备上,举例移动电话,页脚链接格局是一个卓越轻巧的化解办法。一旦有越来越多的显示器空间可应用时,就足以动用CSS将导航重新定位在内容之上。作者得以设置position属性为absolute,使用弹性布局盒,只怕安装display属性为table。

CSS

@media all and (min-width: 35em) { .control { display: none; } body {
display: table; } [role=”navigation”] { display: table-caption;
columns: 6 15em; } }

1
2
3
4
5
6
7
8
9
10
11
12
@media all and (min-width: 35em) {
  .control {
    display: none;
  }
  body {
    display: table;
  }
  [role="navigation"] {
    display: table-caption;
    columns: 6 15em;
  }
}

翻看宽屏样式的演示。

第三步:增强!

不错。现在自家早就得以为全部人提供基本职能了,而且对宽屏也有非常不错的响应风格设计。到此处笔者能够告1段落脚步了,但渐进式加强的莫过于优点却是笔者还并未完成的。从此刻开端,笔者能够疯狂地为现代浏览器增添各个奇异的优化职能,而不用顾忌不能为旧式浏览器提供退路—退路一度打算好了。

实质上笔者想为小显示器的设备提供3个优异的屏外画布。上边是自家的安排性:

一、 将导航放置在主内容下边。
二、 监听伪类为.control的链接是不是被点击并截留其影响。
叁、 当那些链接被点击后,为重心body切换赋予伪类.active。
4、 如果伪类.active存在,将内容滑出以展示导航。

上面是定位内容和导航的CSS代码:

CSS

@media all and (max-width: 35em) { [role=”main”] { transition: all
.25s; width: 100%; position: absolute; z-index: 2; top: 0; right: 0; }
[role=”navigation”] { width: 75%; position: absolute; z-index: 1; top:
0; right: 0; } .active [role=”main”] { transform: translateX(-75%); }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media all and (max-width: 35em) {
  [role="main"] {
    transition: all .25s;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  [role="navigation"] {
    width: 75%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
  }
  .active [role="main"] {
    transform: translateX(-75%);
  }
}

在小编的JavaScript代码中,小编将会监听伪类.control链接上的其余点击事件,然后据此为注重body切换赋予伪类.active。

JavaScript

(function (win, doc) { ‘use strict’; var linkclass = ‘control’,
activeclass = ‘active’, toggleClassName = function (element,
toggleClass) { var reg = new RegExp(‘(s|^)’ + toggleClass + ‘(s|$)’); if
(!element.className.match(reg)) { element.className += ‘ ‘ +
toggleClass; } else { element.className = element.className.replace(reg,
”); } }, navListener = function (ev) { ev = ev || win.event; var target
= ev.target || ev.srcElement; if (target.className.indexOf(linkclass)
!== -1) { ev.preventDefault(); toggleClassName(doc.body, activeclass); }
}; doc.addEventListener(‘click’, navListener, false); }(this,
this.document));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function (win, doc) {
  ‘use strict’;
  var linkclass = ‘control’,
    activeclass = ‘active’,
    toggleClassName = function (element, toggleClass) {
      var reg = new RegExp(‘(s|^)’ + toggleClass + ‘(s|$)’);
      if (!element.className.match(reg)) {
        element.className += ‘ ‘ + toggleClass;
      } else {
        element.className = element.className.replace(reg, ”);
      }
    },
    navListener = function (ev) {
      ev = ev || win.event;
      var target = ev.target || ev.srcElement;
      if (target.className.indexOf(linkclass) !== -1) {
        ev.preventDefault();
        toggleClassName(doc.body, activeclass);
      }
    };
  doc.addEventListener(‘click’, navListener, false);
}(this, this.document));

本人曾经希图稳妥了,是吧?哪有那么快!

复制代码 代码如下:

点评:就算近日的主流浏览器已经落到实处了大多的HTML五新特色,然则众多开辟者根本就没注意到那个更简洁,也很有用的API,本类别小说介绍那些接口API,同时也指望能砥砺越来越多开拓者去研究那多少个还不知名的API

正规符合测试

本身纵然在自个儿的代码中早已得以完成add伊芙ntListener函数。那并不是贰个平安的假若。因为JavaScript不像HTML或CSS那样具有容错性。借让你使用了2个浏览器不能够识其他HTML成分或性能,或是使用了3个浏览器不能够了然的CSS选用器,属性或是值,那都不是大难点。浏览器会忽略掉它不能识别的东西:既不会抛出荒唐也不会告壹段落解析文件。

JavaScript就不一致了。如若你的JavaScript代码有错误,又恐怕利用了2个浏览器不能够鉴定识别的JavaScript函数或性质,浏览器会抛出荒谬,而且会终止解析文件。那正是为何JavaScript中特征在动用在此以前必须求测试。那也认证将主导作用依赖于JavaScript是特别不安全的。

就本身来讲,作者要求测试add伊芙ntListener函数的存在性:

JavaScript

(function (win, doc) { if (!win.addEventListener) { return; } … var
enhanceclass = ‘cutsthemustard’; doc.documentElement.className += ‘ ‘ +
enhanceclass; }(this, this.document));

1
2
3
4
5
6
7
8
(function (win, doc) {
  if (!win.addEventListener) {
    return;
  }
  …
  var enhanceclass = ‘cutsthemustard’;
  doc.documentElement.className += ‘ ‘ + enhanceclass;
}(this, this.document));

BBC的大拿们称那种特性测试为正规符合测试。假如3个浏览器通过了该测试,它就直达了规范,所以它就获取了增进品质。假设叁个浏览器没能到达标准,它就从未压实的性质。那也不算什么坏事,记住,网站无需在各类浏览器中都突显的均等。

自己期待确定保障自己的离线画布样式只可以选拔于符合典型的浏览器。小编会动用JavaScript为文书档案增加3个伪类.cutsthemustard:

JavaScript

(function (win, doc) { if (!win.addEventListener) { return; } … var
enhanceclass = ‘cutsthemustard’; doc.documentElement.className += ‘ ‘ +
enhanceclass; }(this, this.document));

1
2
3
4
5
6
7
8
(function (win, doc) {
  if (!win.addEventListener) {
    return;
  }
  …
  var enhanceclass = ‘cutsthemustard’;
  doc.documentElement.className += ‘ ‘ + enhanceclass;
}(this, this.document));

当今本人得以应用已存在的类名来调治本人的CSS:

CSS

@media all and (max-width: 35em) { .cutsthemustard [role=”main”] {
transition: all .25s; width: 100%; position: absolute; z-index: 2; top:
0; right: 0; } .cutsthemustard [role=”navigation”] { width: 75%;
position: absolute; z-index: 1; top: 0; right: 0; } .cutsthemustard
.active [role=”main”] { transform: translateX(-75%); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media all and (max-width: 35em) {
  .cutsthemustard [role="main"] {
    transition: all .25s;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  .cutsthemustard [role="navigation"] {
    width: 75%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
  }
  .cutsthemustard .active [role="main"] {
    transform: translateX(-75%);
  }
}

查阅符合标准的加强型离线画布导航演示。记住,那只适用于小显示器,所以你也许会须要将浏览器窗口压扁。

/*———————————–
Web Application JavaScript Library
2009.11 janchie
————————————*/

原来的书文地址:伍 HTML5 APIs You Didn’t Know Existed
原稿日期: 20十年0八月十二日
翻译日期: 20一3年六月二日
当人们看来大概说出”HTML伍”那么些词的时候,估摸至少有二分之一之上的人,会联想到他既是叁个肉麻而又充满吸重力的淑女,同时也是三头能把您搞得焦头烂额的独角兽,那能怪大家这几个开垦者吗?
大家注意到那一个基础的Api停滞发展了如此遥远的日子(大约是1九九七-二〇一〇),以至于像”placeholder”这样基础的三个外加成效,也要开销大家十分长的时光来管理。
尽管目前的主流浏览器已经达成了累累的HTML伍新天性,不过不少开荒者根本就没注意到这么些更简洁,也很有用的API。
本连串小说介绍那几个接口API,同时也指望能鼓励更加多开拓者去研讨那个还不知名的API。
Element.classList
本条性格已经表露了几许年,通过classList,大家能够通过JavaScript来支配底层css的class属性.
代码如下:

增加全部!

这可是是3个相比较较简单的事例,但它申明了渐进式加强背后的思维:只要你早就为全部人提供了着力职能,就足以自由为今世浏览器扩大最流行的增高品质。

渐进式巩固并不意味你必须为全部人都提供平等的效果—恰恰相反。那也是怎么需求及早鲜明你的中坚功效是什么,而且保证那么些宗旨成效能够被超过二分一着力才干提供完结。在这些点的功底上,你能够放肆增加越多的不属于入眼职务的表征。你能够在能支撑更加多特点的浏览器上相应的拉长更加多的属性,比方CSS的卡通片效果,JavaScript的定势效用以及HTML中新的输入框类型。

正如本人所说的,渐进式巩固不是1门本事。它是1种挂念方式。要是你已经初阶运用那种思维格局,你就早已企图好了面对接下去的十年了。

赞 1 收藏
评论

//String原生对象扩张 置空左右端空格
String.prototype.trim = function(){
return this.replace(/(^[\s\n\t\r]*)|([\s\n\r\t]*$)/g,
“”);
};
//Date原生对象扩充 格式化输出
Date.prototype.format = function (string) {
var self = this;
var p = function p(s) {
return (s.toString().length == 1) ? “0” + s : s;
};
return string ?
string.replace(/dd?d?d?|MM?M?M?|yy?y?y?|hh?|HH?|mm?|ss?|tt?|zz?z?/g,
function (string) {
switch (string) {
case “hh”: return p(self.getHours() < 13 ? self.getHours() :
(self.getHours() – 12));
case “h”: return self.getHours() < 13 ? self.getHours() :
(self.getHours() – 12);
case “HH”: return p(self.getHours());
case “H”: return self.getHours();
case “mm”: return p(self.getMinutes());
case “m”: return self.getMinutes();
case “ss”: return p(self.getSeconds());
case “s”: return self.getSeconds();
case “yyyy”: return self.getFullYear();
case “yy”: return self.getFullYear().toString().substring(2, 4);
case “dddd”: return self.getDayName();
case “ddd”: return self.getDayName(true);
case “dd”: return p(self.getDate());
case “d”: return self.getDate().toString();
case “MMMM”: return self.getMonthName();
case “MMM”: return self.getMonthName(true);
case “MM”: return p((self.getMonth() + 1));
case “M”: return self.getMonth() + 1;
case “t”: return self.getHours() < 12 ?
Date.CultureInfo.amDesignator.substring(0, 1) :
Date.CultureInfo.pmDesignator.substring(0, 1);
case “tt”: return self.getHours() < 12 ?
Date.CultureInfo.amDesignator : Date.CultureInfo.pmDesignator;
case “zzz”:
case “zz”:
case “z”: return “”;
}
}) : this.toString();
};
/*————————————*/

代码如下:

关于笔者:fzr

图片 1

微博:@fzr-fzr)
个人主页 ·
笔者的小说 ·
26

图片 2

//申明对象
var App = {};
//对象承袭或品质合并
App.extend = function(obj, hash) {
this.each(hash, function(key, value) {
obj[key] = value;
});
return obj;
};
//遍历
App.each = function(obj, func, context) {
var length = obj.length, i = -1;
if(length !== undefined) {
while(++i < length) if(func.call(context, obj[i], i, obj, length)
=== false) break;
}
else for(var key in obj) if(obj.hasOwnProperty(key))
if(func.call(context, key, obj[key], obj) === false) break;
return obj;
};
(function(doc, win){
var string = Object.prototype.toString,
quirks = doc.compatMode === “BackCompat”,
docelem = doc.documentElement,
ua = win.navigator.userAgent.toLowerCase(),
version = (ua.match( /.(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) ||
[])[1],
isChrome = /chrome/.test(ua),
isWebKit = /webkit/.test(ua),
isSafari = !isChrome && isWebKit,
isOpera = /opera/.test(ua),
isIE = /msie/.test( ua ) && !isOpera,
isFF = /firefox/.test(ua);
//Dom加载
doc.ready = function(func) {
var isReady = false,doReady = function() {
if (isReady) return;
isReady = true; func();
};
if (isIE) {
if (docelem.doScroll && win.self == win.top) {
(function() {
if (isReady) return;
try {
docelem.doScroll(“left”);
} catch (error) {
setTimeout(arguments.callee, 0);
return;
}
doReady();
})();
}else {
if (isReady) return;
this.attachEvent(“onreadystatechange”, function() {
if (doc.readyState === “complete”) {
doc.detachEvent(“onreadystatechange”, arguments.callee);
doReady();
}
});
}
win.attachEvent(‘onload’, doReady);
}else if (isWebKit && version < 525) {
(function() {
if (isReady) return;
if (/loaded|complete/.test(doc.readyState))
doReady();
else
setTimeout(arguments.callee, 0);
})();
win.addEventListener(‘load’, doReady, false);
}else {
if (!isFF)
this.addEventListener(“DOMContentLoaded”, function() {
doc.removeEventListener(“DOMContentLoaded”, arguments.callee, false);
doReady();
}, false);
this.addEventListener(‘load’, doReady, false);
}
};
App.extend(App,{
//类型检验
isArray: function(v) { //是不是为数组
return string.apply(v) === “[object Array]”;
},
isFunction: function(v) { //是或不是为函数体
return string.apply(v) === “[object Function]”;
},
isNumber: function(v) { //是或不是为数字
return typeof v === “number” && isFinite(v);
},
isDate: function(v) { //是还是不是为日期
return string.apply(v) === “[object Date]”;
},
isElement: function(v) { //是还是不是为Dom成分节点
return !!(v && v.nodeType === 1);
},
// 浏览器检查评定
isOpera: isOpera,
isChrome: isChrome,
isWebKit: isWebKit,
isSafari: isSafari,
isIE: isIE,
isFF: isFF,
isQuirks:quirks,
getVersion:version,

// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,未有则增进
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实,本函数 toggleClassList 假使帮忙的话,
// 那么下边包车型客车代码就不会被施行,此处仅作示范,请灵活应用
// 2. classList API
// element 的class属性是还是不是带有 hide 那个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};

//取id元素
$: function(id) {
return typeof id === “string” ? doc.getElementById(id) : id;
},
//取name成分集结
$N:function(name){
return doc.getElementsByName(name);
},
//取tag成分集结
$T:function(tag, root){
return (root || doc).getElementsByTagName(tag);
},
//按属性名(是或不是带有)、值、范围取元素集结
$A:function(attrName, attrValue, tag, root){
var elems = doc.all ? doc.all : this.$T( tag || “*”,root || doc),
result = [],
attVal = (typeof attrValue != “undefined”)? new RegExp(“(^|\\s)” +
attrValue + “(\\s|$)”) : null;
for(var i=0; i<elems.length; i++){
attr = elems[i][attrName] || elems[i].getAttribute(attrName);
if(typeof attr === “string” && attr.length > 0){
if(typeof attrValue === “undefined” || (attVal && attVal.test(attr))){
result.push(elems[i]);
}
}
}
return result;
},
//取body元素
$B: doc.body || docelem,
//取Class属性成分集结
$C:function(attrValue, tag, root){
return this.$A(“className”,attrValue, tag, root);
},
//取浏览器窗体宽度
getWinWidth: win.innerWidth || docelem.clientWidth ||
doc.body.clientWidth,
//取浏览器窗体高度
getWinHeight: win.innerHeight || docelem.clientHeight ||
doc.body.clientHeight,
//取成分样式
getStyle: function(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(doc.defaultView && doc.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,”-$1″);
name = name.toLowerCase();
var s = doc.defaultView.getComputedStyle(elem,””);
return s && s.getPropertyValue(name);
}else{
return null;
}
},
//获取成分荧屏坐标值
getPosition: function() {
return docelem.getBoundingClientRect && function(o){
var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.doc;
return
{left:pos.left+root.documentElement.scrollLeft,top:pos.top+root.documentElement.scrollTop};
} || function(o){
var x = 0, y = 0;
do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent));
return {left:x,top:y};
};
}(),
//设置光滑度
setOpacity: function (elem,num){
if(elem.filters){
elem.style.filter = “alpha(opacity=”+num+”)”;
}else{
elem.style.opacity = num/100;
}
},
//隐藏或出示成分
hide: function(elem){elem.style.display = “none”;},
show: function(elem){elem.style.display = “block”;},
toggle: function(elem){
elem.style.display = this.getStyle(elem,”display”) === “none”
?”block”:”none”;
},
//成分Class属性操作
addClass: function(elem, clsName) {
if (elem.className === ”) {
elem.className = clsName;
}else if (elem.className !== ” && (‘ ‘ + elem.className + ‘
‘).indexOf(‘ ‘ + clsName + ‘ ‘) === -1) {
elem.className = elem.className + ‘ ‘ + clsName;
}
},
removeClass: function(elem, clsName) {
if (clsName && (‘ ‘ + elem.className + ‘ ‘).indexOf(‘ ‘ + clsName + ‘ ‘)
> -1) {
elem.className = (‘ ‘ + elem.className + ‘ ‘).replace(‘ ‘ + clsName + ‘
‘, ‘ ‘).replace(/^ | $/g,”);
}
},
//追加Html文本对象( 协理Table )
append: function(elem, text) {
if (typeof text === “string”) {
if (elem.insertAdjacentHTML){
if (elem.tagName === “TABLE”){
var html = elem.outerHTML,ep = elem.parentNode,sl = html.length;
text = html.substr(0,sl-8) + text + html.substr(sl-8,sl);
ep.insertAdjacentHTML(“beforeEnd”, text);
ep.replaceChild(ep.lastChild,elem);
}else{
elem.insertAdjacentHTML(“beforeEnd”, text);
}
}else {
var rlt = null, rg = doc.createRange(), fm =
rg.createContextualFragment(text);
rlt ? elem.insertBefore(fm, rlt) : elem.appendChild(fm);
}
}else if (typeof text === “object”) elem.appendChild(text);
},
//删除成分
remove:function(elem){
if (elem.parentNode) elem.parentNode.removeChild(elem);
},
//置空成分内容及子节点
empty:function(elem){
while(elem.firstChild){
elem.removeChild(elem.firstChild);
}
},
//图像预加载
loadimages: function(){
var a = arguments,loads = function(){
if(doc.images){ if(!doc.ps) doc.ps = [];
var i,j=doc.ps.length; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ doc.ps[j] = new Image;
doc.ps[j++].src=a[i];}}
};
arguments.callee.caller ? loads():doc.ready(loads);
},

ContextMenu API
经测试chrome28不管用。。。
新的API,ContextMenu 是极好的接口:
此接口允许你很简短地增添菜单项到浏览器的上下文菜单(右键菜单),而不是去覆盖浏览器的默许右键菜单。
亟需专注的是,你最佳应用js脚本来动态的始建菜单contextmenu,那样能够幸免页面禁止使用JS脚本的气象
下出现多余的HTML代码。
代码如下:

//事件绑定
bind: function () {
if (win.addEventListener) {
return function(elem, sType, fnc) {
elem.addEventListener(sType, fnc, false);
};
} else if (win.attachEvent) {
return function(elem, sType, fnc) {
elem.attachEvent(“on” + sType, fnc);
};
} else {
return function(){};
}
}(),
//解除事件绑定
unbind: function(elem, sType, fnc){
if(elem.removeEventListener){
elem.removeEventListener(sType, fnc, false);
}else if(elem.detachEvent){
elem.detachEvent(“on” + sType, fnc);
}else{
elem[“on”+ sType] = null;
}
},
//禁止事件冒泡
stopPropagation: function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
//禁止暗许事件动作
preventDefault: function(ev) {
if (ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
},
//获取鼠标地点
getXY: function(ev){
return {
x:ev.pageX ? ev.pageX : ev.clientX + docelem.scrollLeft,
y:ev.pageY ? ev.pageY : ev.clientY + docelem.scrollTop
};
},
//绑定拖动事件
drag: function (obj, obj2){//obj:移动的对象 obj贰:拖动点
obj贰 = obj贰 || obj; //要是不设拖动点,那么拖动点即运动的目标
var x, y, ut = this;
obj2.onmousedown = function(e){
e = e || win.event;
ut.preventDefault(e);
obj.setCapture && obj.setCapture();
x = ut.getXY(e).x – parseInt(obj.style.left);
y = ut.getXY(e).y – parseInt(obj.style.top);
docelem.onmousemove = over;
docelem.onmouseup = up;
}
function over(e){
e = e || win.event;
obj.style.left = ut.getXY(e).x – x + “px”;
obj.style.top = ut.getXY(e).y – y + “px”;
}
function up(){
obj.releaseCapture && obj.releaseCapture();
docelem.onmousemove = null;
docelem.onmouseup = null;
}
},
//绑定横向滚动事件
sliderX : function (obj,x1,x2,overEvent,upEvent){
var x, t , ut = this;
obj.onmousedown = function (e){
e = e || win.event;
ut.preventDefault(e);
obj.setCapture && obj.setCapture();
t = ut.getXY(e).x – parseInt(obj.style.left);
docelem.onmousemove = over;
docelem.onmouseup = up;
}
function over(e){
e = e || win.event;
x = ut.getXY(e).x – t;
if(x<x1) x=x1;
if(x>x2) x=x2;
obj.style.left = x + “px”;
overEvent && overEvent(x);
}
function up(){
obj.releaseCapture && obj.releaseCapture();
docelem.onmousemove = null;
docelem.onmouseup = null;
upEvent && upEvent(x);
}
},
//绑定竖向滚动事件
sliderY : function (obj,y1,y2,overEvent,upEvent){
var y, t , ut = this;
obj.onmousedown = function (e){
e = e || win.event;
ut.preventDefault(e);
obj.setCapture && obj.setCapture();
t = ut.getXY(e).y – parseInt(obj.style.top);
docelem.onmousemove = over;
docelem.onmouseup = up;
}
function over(e){
e = e || win.event;
y = ut.getXY(e).y – t;
if(y<y1) y=y1;
if(y>y2) y=y2;
obj.style.top = y + “px”;
overEvent && overEvent(y);
}
function up(){
obj.releaseCapture && obj.releaseCapture();
docelem.onmousemove = null;
docelem.onmouseup = null;
upEvent && upEvent(y);
}
},
//设置cookie
setCookie:function(n, v, t){
var exp = new Date();
exp.setTime(exp.getTime() + (t||24)*60*60*1000);
doc.cookie = n + “=”+ escape(v) + “;expires=” +
exp.toGMTString()+’;path=/’;
},
//获取cookie
getCookie:function(n){
var arr = doc.cookie.match(new RegExp(“(^| )”+ n
+”=([^;]*)(;|$)”));
if(arr != null) return unescape(arr[2]);
return null;
}
});
})(document,window);

代码如下:

//日期字符串格转日期
App.parseDate = function(date){
var dt = date instanceof Date ? date: Date(date.replace(“-“,”/”));
return isNaN(dt.getTime()) ? null : dt ;
};
//Json字符串转对象
App.parseJSON = function(jsonString) {
var result = false;
try {
result = eval(‘(‘ + jsonString + ‘)’);
}catch (e) {};
return result;
};
//取不重复唯一值
App.getUid = function(){
return “uid”+(new Date()).getTime()+ parseInt(Math.random()*100000);
};
//获取钦赐范围的人身自由数
App.random = function (n1, n2){
return Math.floor(Math.random()*(n2-n1+1)) + n1;
};
//秒转变为阿秒
App.s2ms = function (str){
var t = str.split(“:”);
return t[0] * 60000 + t[1] * 1000;
};
//飞秒调换为秒
App.ms2s = function (ms){
return
(ms/60000+”:”+ms/1000%60).replace(/\.\d+/g,””).replace(/(^|:)(\d)(?!\d)/g,”$10$2″);
};
//数字调换为编号
App.num2number = function (num, n){
return Array(n).join(“0”).concat(num).slice(-n);
};
//数字转化为华语
App.num2gb = function (n){
return “零1贰34伍六柒8九”.split(“”)[n];
};
//Flash生成代码
App.getFlash = function (url, width, height, param){
var tagName = “”, o1 = {width:width||1, height:height||1}, o2 = {};
if (this.isIE){
tagName = “object “;
o1.classid = “clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”;
o1.codebase =
“”;
o2.movie = url;
o2.quality = “high”;
param && this.extend(o2, param);
}else{
tagName = “embed “;
o1.type = “application/x-shockwave-flash”;
o1.pluginspage = “”;
o1.src = url;
o1.quality = “high”;
param && this.extend(o1, param);
}
if(o1.width<2&&o1.height<2) tagName+=’style=”position:absolute;
top:-100px;” ‘;
var a1=[], a2=[], i;
for(i in o1) a1.push(i+’=”‘+o1[i]+'”‘);
for(i in o2) a2.push(‘<param name=”‘+i+'” value=”‘+o2[i]+'”
/>’);
return ‘<‘+tagName+a1.join(‘
‘)+’>’+a2.join(”)+'</’+tagName+’>’;
};
//播放器生成代码
App.getPlayer = function (url, width, height, param){
var wmp =
[“6bf52a52-394a-11d3-b153-00c04f79faa6″,”application/x-mplayer2”];
var rmp =
[“CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”,”audio/x-pn-realaudio-plugin”];
var mp = /\.rm$/.test(url) ? rmp : wmp;
var tagName = “”, o1 = {width:width||1, height:height||1}, o2 = {};
if (this.isIE){
tagName = “object “;
o1.classid = “clsid:”+mp[0];
o2.url = url;
param && this.extend(o2, param);
}else{
tagName = “embed “;
o1.type = mp[1];
o1.src = url;
param && this.extend(o1, param);
}
if(o1.width<2&&o1.height<2) tagName+=’style=”position:absolute;
top:-100px;” ‘;
var a1=[], a2=[], i;
for(i in o1) a1.push(i+’=”‘+o1[i]+'”‘);
for(i in o2) a2.push(‘<param name=”‘+i+'” value=”‘+o2[i]+'”
/>’);
return ‘<‘+tagName+a1.join(‘
‘)+’>’+a2.join(”)+'</’+tagName+’>’;
};
//获取XMLHttp对象
App.xmlhttp = function (){
if (this.isFF) return new XMLHttpRequest();
var a =
[“Msxml2.XMLHTTP.3.0″,”Msxml2.XMLHTTP”,”Microsoft.XMLHTTP”,”Msxml2.XMLHTTP.4.0″,”Msxml2.XMLHTTP.5.0″];
for (var i=0,l=a.length;i<l;i++){
try{
return new ActiveXObject(a[i]);
}catch(e){}
}
return false;
};
//Get数据
App.get = function (url,callBack){
var x = this.xmlhttp();
x.open(“get”,url,true);
x.onreadystatechange = function(){
x.readyState==4 && (x.status==0||x.status==200) &&
callBack(x.responseText);
}
x.send(null);
};
//Post数据
App.post = function (url,arg,callBack){
var x = this.xmlhttp();
x.open(“post”,url,true);
x.setRequestHeader(“Content-Length”,arg.length);
x.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
x.onreadystatechange = function(){
x.readyState==4 && (x.status==0||x.status==200) &&
callBack(x.responseText);
}
x.send(arg);
};

<div class=”hide”>
<!– contextmenu 钦赐了运用哪个上下文菜单。 –>
<!– !!!不精通干什么,笔者的浏览器上这几个配置不起成效。 –>
<section contextmenu=”mymenu”
style=”min-height:100px;min-height:200px;background:#999;”>
<h一>点击此区域查看菜单</h1>
<!–
为了代码结构的明明白白,把menu成分放到了要选择的因素内部,其实你也可以放置外部的其它地点:
–>
<!– 增添菜单,至于图片Logo,请自个儿安装。add the menu –>
<menu type=”context” id=”mymenu”>
<menuitem label=”刷新页面” onclick=”window.location.reload();”
icon=”;
<menu label=”分享到…”
icon=”;
<menuitem label=”今日头条今日头条”
icon=””
onclick=”window.location.href=’;
<menuitem label=”腾讯天涯论坛”
icon=””
onclick=”window.location.href=’;
</menu>
</menu>
</section>
</div>

有一点点函数未经测试,接待大家提个意见

Element.dataset
数据集(dataset) API 允许开采者对DOM成分设置(set)和获取(get) 以 data-
前缀初步的属性值。
代码如下:

您也许感兴趣的小说:

  • 用javascript实现兼容IE柒的类库
    IE七_0_玖.zip提供下载
  • 一实用的得以完结table排序的Javascript类库
  • JavaScript 应用类库代码
  • JavaScript类库D
  • Javascript类库的顶层对象名用户体验分析
  • stream.js
    三个异常的小、完全部独用立的Javascript类库
  • 伍个至上的Javascript日期管理类库分享
  • Moment.js
    不容错过的超棒Javascript日期管理类库
  • javascript面向对象包装类Class封装类库剖析
  • javascript拖拽上传类库DropzoneJS使用办法
  • JavaScript页面模板库handlebars的简短用法

代码如下:

<div id=”intro” data-website=”www.csdn.net” data-id=”551996458″
data-my-name=”铁锚”
data-blog-url=”;

代码如下:

function testDataset(){
//
var intro = document.getElementById(“intro”);
// 注意那一个不是 id属性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = “qq:”+id
+”,website:”+website
+”,blogUrl:”+blogUrl
+”,myName:”+myName
;
//
warn(msg);
};

从未有过什么样好说的,和classList一样,简单却实用。(想1想,是否改换了后台和前台JS的某个交互以及解耦?)
window.postMessage API
IE八 已经援助 postMessage API 好几年了,此API允许window 和iframe
成分之间相互传送音讯。
跨域帮助啊。 代码如下:

代码如下:

// From window or frame on domain 1, send a message to the iframe which
hosts another domain
var iframeWindow = document.getElementById(“iframe”).contentWindow;
iframeWindow.postMessage(“Hello from the first window!”);
// From inside the iframe on different host, receive message
window.addEventListener(“message”, function(event) {
// Make sure we trust the sending domain
if(event.origin == “”) {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage(“Hello back!”);
}
]);
// message 只允许string 类型的多少,不过你能够采用 JSON.stringify 以及
JSON.parse 传递愈来愈多有意义的新闻。

autofocus Attribute
autofocus 属性确定保障当页面加载后,给定的 BUTTON,INPUT大概 TEXTAREA
成分能够自动获得焦点。

代码如下:

<input autofocus=”autofocus” />
<button autofocus=”autofocus”>Hi!</button>
<textarea autofocus=”autofocus”></textarea>

autofocus 属性首要用在简约的输入页面,详细的情况请参考:autofocus 属性
各浏览器商家对那一个API的支撑度各不一致,所以在动用从前最棒检查评定一下包容性,花一些时光来读书方面所列出的API,您将会对他们询问和左右更加多。
一部分的测试代码如下:

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>四个你不知道的 HTML5 API接口演示 </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author”
content=”[email protected]”>
<meta name=”Description”
content=”original=;
<style>
.hide{ display:none}
.poplayer{ z-index:999; position:absolute;background-color:#fff;
top:0px;left:0px;overflow: hidden;width:100%;height:100%;opacity:1;}
.close{ top:3px; right:10px;position:absolute;}
</style>
<script>
// 呈现警告音信
function warn(msg){
warn = warn || “一个茫然警告!”;
if(window.console){
console.warn(msg);
} else {
alert(msg);
}
};
// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,未有则拉长
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实,本函数 toggleClassList 如若帮忙的话,
// 那么上面包车型地铁代码就不会被实施,此处仅作示范,请灵活使用
// 2. classList API
// element 的class属性是或不是含有 hide 那么些CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};
// 使用className属性(Dom元素,css类名)
function toggleClassName(element,cName){
var className = element.className || “”;
// 去掉首尾的空白
cName = cName.replace(/^\s*|\s*$/g,””);
// cName 中间假诺带有空白字符,则战败.
假使要好好管理,能够拆分为数组,单个管理
var blankReg = /\s+/;
if(blankReg.test(cName)){
warn(“‘”+cName+”‘中间含有空白字符”);
return false;
}
// 正则, \b 代表可知延续字符的分界,可以那样精通:
// “hide2 hide hide myname” 那么,
// hide二 的左右各有2个虚构的\b ,hide 前后也有,
// 然而 hi 和 de之间则并未有。
// g 表示单行全局
//var rep = /\bhide\b/g;
var rep = new RegExp(“\\b” + cName + “\\b”, “g”);
if(rep.test(className)){
className = className.replace(rep,””);
} else {
className += ” “+cName;
}
// 替换新className。
element.className = className;
return true;
};
// 函数,切换(元素id,className)
function toggleClass(elementId,cName){
// 获取一个DOM成分
var element = document.getElementById(elementId);
// 假如不设有成分
if(!element){
warn(“id为”+elementId+”的要素不存在”);
return false;
}
if(!element.classList){
warn(“id为”+elementId+”的要素不帮忙classList属性,将应用其余花招来实现”);
return toggleClassName(element,cName);
} else {
return toggleClassList(element,cName);
}
};
function testDataset(){
//
var intro = document.getElementById(“intro”);
// 注意那个不是 id属性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = “qq:”+id
+”,website:”+website
+”,blogUrl:”+blogUrl
+”,myName:”+myName
;
//
warn(msg);
};
// dom加载后 执行
window.addEventListener(“DOMContentLoaded”, function() {
var open = document.getElementById(“open”);
var close = document.getElementById(“close”);
open.addEventListener(“click”,function(){
//
toggleClass(“diary2″,”hide”);
toggleClass(“loading”,”hide”);
});
close.addEventListener(“click”,function(){
//
toggleClass(“diary2″,”hide”);
toggleClass(“loading”,”hide”);
});
//
testDataset();
}, false);
</script>
</head>
<body>
<div>
<div id=”diary2″ class=”diary poplayer hide”>
<a href=”javascript:void(0)” _fcksavedurl=””javascript:void(0)””
id=”close”>关闭</a>
<div id=”loading” class=”loading hide” style=”z-index:1; position:
absolute; left: 40%; top: 30%; width: 104px; height: 104px;opacity:
0.5;background: #000000;border: 0px solid #000000;border-radius:
10px;-webkit-border-radius: 10px;”>
<img src=””
alt=””
style=”position:absolute; left:26px; top:10px;width: 50px;height:
50px;border-radius: 10px;-webkit-border-radius: 10px;”>
<div class=”loadingtext” style=”position:absolute;left: 12px;top:
76px;color: #ffffff;”>正在加载中</div>
</div>
</div>
<div>
<a href=”javascript:void(0)” id=”open”>打开</a>
</div>
</div>
<div class=”hide”>
<!– contextmenu 钦定了动用哪个上下文菜单。 –>
<!– !!!不精晓为什么,笔者的浏览器上那么些配置不起功效。 –>
<section contextmenu=”mymenu”
style=”min-height:100px;min-height:200px;background:#999;”>
<h1>点击此区域查看菜单</h一>
<!–
为了代码结构的一览明白,把menu成分放到了要利用的要素内部,其实您也得以停放外部的别的地点:
–>
<!– 增加菜单,至于图片Logo,请自个儿设置。add the menu –>
<menu type=”context” id=”mymenu”>
<menuitem label=”刷新页面” onclick=”window.location.reload();”
icon=”;
<menu label=”分享到…”
icon=”;
<menuitem label=”博客园腾讯网”
icon=””
onclick=”window.location.href=’;
<menuitem label=”腾讯腾讯网”
icon=””
onclick=”window.location.href=’;
</menu>
</menu>
</section>
</div>
<div id=”intro” data-website=”www.csdn.net” data-id=”551996458″
data-my-name=”铁锚”
data-blog-url=”;
</body>
</html>