【金沙澳门官网网址】网上常用的javascript函数及

作者: 前端知识  发布:2019-06-25

关于小编:fzr

金沙澳门官网网址 1

微博:@fzr-fzr) 个人主页 · 作者的篇章 · 26

金沙澳门官网网址 2

//取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);
},

加强全体!

那只是是多少个针锋绝相比较较简单的例证,但它注明了渐进式巩固背后的思考:只要你早就为全部人提供了主导效能,就足以随心所欲为今世浏览器增添最风靡的增长质量。

渐进式加强并不意味你必须为全体人都提供同样的效果—恰恰相反。那也是干什么须求及早鲜明你的主题成效是如何,而且保证这一个宗旨成效能够被大多主干技术提供完结。在那一个点的功底上,你能够自由增加越多的不属于重视职责的风味。你能够在能支撑越来越多特点的浏览器上相应的增加越来越多的属性,譬喻CSS的卡通效果,JavaScript的定势效用以及HTML中新的输入框类型。

正如自身所说的,渐进式巩固不是一门手艺。它是一种思考方式。假诺你早就发轫运用这种理念方式,你就早已希图好了直面接下去的十年了。

赞 1 收藏 评论

//证明对象
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,

响应式巩固统一打算

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

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

24ways 在那10年中早已逐步变得壮大了。在因特网历史中那已是二个世代恒久的了。回顾一下在这段岁月里我们见证全部变化:Ajax的兴起,移动设备的剧增,前端开拓工具不可预见的前景。

工具和本事来来往往,兴起衰落,但在过去的十年中有一件事于自家来说是一贯未有成形的:渐进式加强。

渐进式加强不是一门技能。它更像是一种观念方式。渐进式加强鼓励你去思索网页所提供的着力意义,而不是去想三个已到位网页如何显示的微薄难点。所以渐进式巩固允许你以更抽象的主意考虑大旨功用,而不是纠结于网页在不利的宽屏设备上的大好图景。

假使你已经分明要增长的主干职能是怎样–向购物栏中加多一件货品,公布一条音信,分享一张图纸–然后您能够以一种最简易的章程完结该意义。那平日也意味着要从能够的老一套的HTML入手。你所须要的不以为奇只是链接和表格。然后,只要您已经使得该中央功能主旨专门的学问,你就足以起来对更加多当代浏览器抓牢际效果果以慢慢提供越来越好的用户体验。

以这种方法专门的学业的好处不仅是您的网页可以在旧式浏览器中央银行事(即使只是基本能运营)。它仍可以担保要是在到现在的浏览器中出现的小毛病不至于变成大祸。

人人对渐进式巩固存在多个误会,感觉渐进式巩固正是花时间化解旧式浏览器,然则谜底却反倒。将基本功用投入使用并不会开支太久。而且一旦你早已做到这一部分工作,你即可随心所欲地去测试新型最棒的浏览器技术,脑中的意识是不怕它们以后还不能够被普及扶助,也不曾难题,因为您早已把最保证的东西投入使用了。

待遇Web发展的关键在于意识到不会有最后的接口—只怕会有成都百货上千唯有一线差异但会依赖于自由时刻任性用户的个性和体积的接口。网址无需在每二个浏览器中都同样。

确实领会了那一个便是一个特大地发展。你能够把日子开支在为愈来愈多浏览器提供最棒经验的还要确认保障能在任何创设办事的地方落到实处核心成效,而不是努力使您的网址在距离巨大的浏览器中千篇一律。

同意作者以二个总结的事例来抒发:导航。

首先步:核心职能

即使大家明日有三个关于圣诞节12天吉庆的简短式网球址,一天一个页面。这些主旨职能也非常清楚了:

1、精晓个中私行一天。
2、从一天到另一天浏览。

先是个效益能够通过将文件用头条,段落以及有着常用的HTML结构化标签组装起来实现。第二个则透过一多级的超链接完成。
那正是说以往导航列表最符合放在哪儿吧?个人来说,笔者是叁个跳转到页脚导航情势的听众。那一个方式先放网页内容,其次才是导航。页面顶上部分有三个包括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、 将导航放置在主内容上面。
2、 监听伪类为.control的链接是或不是被点击并阻挠其反应。
3、 当这个链接被点击后,为宗旨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));

本身早就策画稳妥了,是吗?哪有那么快!

//String原生对象增添 置空左右端空格
String.prototype.trim = function(){
return this.replace(/(^[sntr]*)|([snrt]*$)/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();
};
/*------------------------------------*/

正规符合测试

笔者就算在本人的代码中曾经落实add伊夫ntListener函数。那并不是三个平安的比如。因为JavaScript不像HTML或CSS那样具备容错性。若是您使用了三个浏览器不能识别的HTML成分或性质,或是使用了一个浏览器不可能明白的CSS选取器,属性或是值,这都不是大问题。浏览器会忽略掉它不可能识别的东西:既不会抛出荒唐也不会告一段落深入分析文件。

JavaScript就差异了。若是您的JavaScript代码有错误,又或许使用了贰个浏览器不可能分辨的JavaScript函数或性质,浏览器会抛出荒谬,而且会终止深入分析文件。那正是为什么JavaScript中特征在动用在此以前必需要测试。那也表达将主导成效重视于JavaScript是特别不安全的。

就自身来讲,小编供给测试addEventListener函数的存在性:

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的大咖们称这种特征测试为正规符合测试。假诺三个浏览器通过了该测试,它就直达了标准,所以它就赢得了提升质量。假若二个浏览器没能到达标准,它就从未有过升高的质量。那也不算什么坏事,记住,网站没有须要在每一个浏览器中都突显的一样。

自小编梦想确认保障本身的离线画布样式只可以利用于符合规范的浏览器。笔者会利用JavaScript为文书档案增加三个伪类.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%);
  }
}

查看符合规范的加强型离线画布导航演示。记住,那只适用于小显示器,所以你大概会供给将浏览器窗口压扁。

//日期字符串格转日期
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`).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 "零一二三四五六七八九".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);
};

//事件绑定
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:移动的对象 obj2:拖动点
obj2 = obj2 || 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);

本文由金沙澳门官网发布于前端知识,转载请注明出处:【金沙澳门官网网址】网上常用的javascript函数及

关键词: 金沙澳门官网

上一篇:Web品质优化体系
下一篇:没有了