1、开发人员需要确定某个给定的节点是不是另一个节点的后代,使用contains方法,不过火狐不支持,他需要compareDocumentPosition()方法
为了使用一些浏览器和能力检测,就可以写出如下通用的contains函数
function contains(refNode, otherNode)
{
if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engine.webkit >= 522)) {
return refNode.contains(otherNode);
}
else if(typeof refNode.compareDocumentPosition == "function") {
return !!(refNode.compareDocumentPosition(otherNode) & 16);
}
else {
var node = otherNode.parentNode;
do {
if (node == refNode) {
return true;
}
else {
node = node.parentNode;
}
} while(node !==null);
return false;
}
}
var client = function() {
var engine = {
// rendering engines
ie : 0,
gecko : 0,
webkit : 0,
khtml : 0,
opera : 0,
// specific version
ver : null
};
var browser = {
// browsers
ie : 0,
firefox : 0,
safari : 0,
konq : 0,
opera : 0,
chrome : 0,
safari : 0,
// specific version
ver : null
// detection of rendering engines/platforms/devices here
};
var system = {
win : false,
mac : false,
x11 : false
};
// detect rendering engines/browsers
var ua = navigator.userAgent;
if (window.opera) {
engine.ver = browser.ver = window.opera.version();
engine.opera = browser.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)) {
engine.ver = RegExp['$1'];
engine.webkit = parseFloat(engine.ver);
// figure out if it’s Chrome or Safari
if (/Chrome\/(\S+)/.test(ua)) {
browser.ver = RegExp['$1'];
browser.chrome = parseFloat(browser.ver);
} else if (/Version\/(\S+)/.test(ua)) {
browser.ver = RegExp['$1'];
browser.safari = parseFloat(browser.ver);
} else {
// approximate version
var safariVersion = 1;
if (engine.webkit < 100) {
safariVersion = 1;
} else if (engine.webkit < 312) {
safariVersion = 1.2;
} else if (engine.webkit < 412) {
safariVersion = 1.3;
} else {
safariVersion = 2;
}
browser.safari = browser.ver = safariVersion;
}
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
engine.ver = browser.ver = RegExp['$1'];
engine.khtml = browser.konq = parseFloat(engine.ver);
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
engine.ver = RegExp['$1'];
engine.gecko = parseFloat(engine.ver);
// determine if it’s Firefox
if (/Firefox\/(\S+)/.test(ua)) {
browser.ver = RegExp['$1'];
browser.firefox = parseFloat(browser.ver);
}
} else if (/MSIE ([^;]+)/.test(ua)) {
engine.ver = browser.ver = RegExp['$1'];
engine.ie = browser.ie = parseFloat(engine.ver);
}
//detect browsers
browser.ie = engine.ie;
browser.opera = engine.opera;
//detect platform
var p = navigator.platform;
system.win = p.indexOf('Win') == 0;
system.mac = p.indexOf('Mac') == 0;
system.x11 = (p.indexOf('X11') == 0) || (p.indexOf('Linux') == 0);
if (system.win) {
if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
if (RegExp['$1'] == 'NT') {
switch (RegExp['$2']) {
case '5.0' :
system.win = '2000';
break;
case '5.1' :
system.win = 'XP';
break;
case '6.0' :
system.win = 'Vista';
break;
default :
system.win = 'NT';
break;
}
} else if (RegExp['$1'] == '9x') {
system.win = 'ME';
} else {
system.win = RegExp['$1'];
}
}
}
return {
engine : engine,
system : system,
browser : browser
};
}();
//usage:
if (client.engine.webkit) { // if it’s WebKit
if (client.browser.chrome) {
// do something for Chrome
} else if (client.browser.safari) {
// do something for Safari
}
} else if (client.engine.gecko) {
if (client.browser.firefox) {
// do something for Firefox
} else {
// do something for other Gecko browsers
}
}
2、对于重复提交问题,js可以这么处理,我对百度首页做测试,嘎嘎
直接使用扣肉浏览器,在console里面输入以下内容
var btn = document.getElementById("su");
var form = document.forms[0];
form.onsubmit = function(event) {
event.preventDefault();
btn.disabled = true;
}
3、对于屏蔽输入字母情况
var filed = document.forms[0].elements[0];
filed.onkeypress = function(event) {
if(/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) {
alert("你输入的是数字");
}
}
4、对于textarea的字符数限制:使用jquery
//备注字符限制
$('textarea[name="note"]').live('keyup', function() {
var v = this.value.replace(/^\s+|\s+$/g, '');
if (v.length > 100) {
this.value = v.substring(0, 100);
$('#limitCount').text('还可以输入0个字符')
} else {
$('#limitCount').text('还可以输入' + (100 - v.length) + '个字符')
}
}).live('blur', function() {
var v = this.value.replace(/^\s+|\s+$/g, '');
if (v.length > 100) {
this.value = v.substring(0, 100);
$('#limitCount').text('还可以输入0个字符')
} else {
this.value = v;
$('#limitCount').text('还可以输入' + (100 - v.length) + '个字符')
}
});
5、对于html5,IE9一下版本浏览器,你要使用createElement方式在浏览器解析dom之前创建出IE未知元素,因为IE9一下版本浏览器碰到未知元素,他就不会正常解析,会导致dom的树结构错误,如果使用createElement方式,实现让dom知道,他们会神奇的解析正确。
<!--[if lt IE 9]>
<script>
var e = ("abbr, article, aside, audio, canvas, datalist, details, figure, footer, header, hgroup, mark, menu,meter, nav, output, progress,section,time, video").split(',');
for(var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
可以把上面这个命名为ltie9.js
然后在写html5的时候,在head中引用
<head>
......
<script src='ltie9.js'/>
</head>
6、按钮变颜色:
<a href="javascript:void(0)" title="新增" name="pic_add_btn">
<img alt="新增" src="res/img/btn_add.jpg" style="position: relative; left: -11px;" width="25px;">
</a>
7、锚定扩展(回到顶部)
$('html,body').animate({
scrollTop : $('#block'+current_block).offset().top
}, 500, function() {
a.addClass('current').siblings('.current').removeClass('current');
});
可以在上面的方法基础上添加:
$('someBtn').click(调用上面的方法)
scrollTop回到里上端多远出
500是速度
function()是回到动作完成后,发生的事件
8、图片的幻灯片效果:
$(function(){
$.fn.slider = function(op) {
var e = this.find("img"), p = $('<p/>'), l = e.length, x = 0, h = [], ho = false;
e.each(function(i, n) {
h[i] = $('<span></span>').bind('mouseover', function() {
$(this).addClass('active').siblings('.active').removeClass('active');
e.eq($(this).index()).stop(true, true).fadeIn(500).siblings('img:visible').stop(true, true).fadeOut(500);
}).appendTo(p);
});
p.appendTo(this);
this.hover(function() {
ho = true;
}, function() {
ho = false;
});
h[0].triggerHandler('mouseover');
setInterval(function() {
if (!ho) {
if (++x == l)
x = 0;
h[x].triggerHandler('mouseover');
}
}, 5000);
}
$('#pd_detail_img').slider();
});
然后对p,span进行css渲染
9、忽闪忽闪的效果
$(function(){
freshTip();
})
function freshTip() {
$('span[name="fresh_tip"]').each(function(){
$(this).toggle();
$(this).css("color", "red");
}) ;
setTimeout("freshTip()", 600);
}
//setTimeout只调用一次,第一个参数,调用的方法名称以及参数"freshTip("+参数+")"。
- 大小: 1.8 KB
分享到:
相关推荐
常用JS脚本,项目过程中积累的脚本,如自动生成大写金额等技术。
常用的ASP、JS脚本,非常适合初学者。这个资料是自已积累开始学ASP时一点点积累下来的,希望对初学ASP、JS的朋友有所帮助。(注:里面有一个ASP批量木马清理程序,可能有些杀毒软件为认为是病毒,其实不是。大家注意...
做Web开发已经四年,或多或少积累了一些JavaScript脚本。比如,限制input只允许输入数字的脚本;敲回车自动转到下一个控件,相当于Tab键的作用一样;因为JavaScript数值运算的结果常常不是我们想要的,还得有浮点数...
集了微软所有web developer的心血积累,包含了Jscript,VBscript,正则表达式,FSO,WSH,htc等,绝对值得一看,没事的时候我就常拿出来翻翻
该库目前拥有超过180个模块,包括Dom操作,cookie设置,类创建,模板函数,日期格式化等实用模块,同时配套有打包工具Eustia进行定制化,使JS脚本加载量缩减在10KB以下,极大优化移动端页面的加载速度。
废料 各种脚本和片段。 内容 坏电话号码
使用已成为维护开发Node.js模块所需的各种构建任务的流行方法。 人们喜欢npm-scripts,因为它很简单! 这是常见的克制: 不要打扰咕gr咕咕bro咕bro咕bro咕npm run name:of:script 事实上,这是更简单,但它可以...
75. javascript的容错脚本 161 76. Web search with JavaScript 162 77. 如何防止他人使用旧id和旧口令访问Domino服务器 164 78. Fixing the Domino CheckBox Bug 165 79. Managing JavaScript "popup" windows 172 ...
最终不还是 HTML,CSS,JavaScript么,换了哪个动态脚本语言不行呢? 所谓的低重用性,ROR的无缝集成,几行代码把即把MVC一层统一。 上面的例子,诸多脚本语言PHP,Perl,Python,BeanShell,ASP,JSP各个都能做到,还能列...
3、前端代码(界面、CSS、JS、图片等)、后端代码(JAVA业务逻辑、SQL脚本【只需要提供一种数据库脚本,在安装时会根据数据库类型自动转换】)全部打包在一个Bundle(JAR)中,分发、测试、积累、部署都十分方便。...
我发现很难跟踪项目何时积累了足够的重要更改,以及何时发布版本。 这是一个脚本,可以帮助: 它每小时运行一次为/ srv / project-summary /中检出的所有项目提取最新更改在每个Git仓库中找到最新的标签并计算提交...
Bluefish标榜其自身是"一款为熟练的Web设计员和程序员而设的编辑器,但它的UI却很直观,任何初学者都很够很快上手,并在不断地..."链接描述"对话框甚至还提供了例如OnClick和OnMouseover这样的Javascript脚本事件功能。
ca-apm-fieldpack-js-calcs 这是我自己写的或多年来积累的计算器的资料库。 请随时发表评论或对这些脚本进行增强。 确保您阅读了CONTRIBUTING.md!
在上玩抽奖游戏的 js 脚本。 事实证明,您可以积累很多游戏,而玩它们需要一段时间。 这会循环遍历它们,直到它们筋疲力尽或您获胜。 应该停在获胜页面上,尽管我从未见过它:) 设置 在浏览器上的脚本注入器的上...
种种语言都有它特别的地方,对于JavaScript来说,使用var就可以声明任意类型的变量,这门脚本语言看起来很简单,然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节,...
日常积累技术方面知识(欢迎投稿) 通用文章 工具 短别名提高效率 快速浏览历史提交记录 油猴 :monkey:脚本管理器,非常牛逼的,让你自定义各种神奇 喜马拉雅桌面客户端 提高文字录入效率 最端的纯粹的分屏软件,...
“链接描述”对话框甚至还提供了例如OnClick和OnMouseover这样的 Javascript 脚本事件功能。 Bluefish 是一个为有经验的网页设计者准备的 GTK HTML 编辑器,Bluefish除了可以在LINUX下运行外,还可以在FREEBSD,...