通常情况下, JavaScript的往往内嵌在HTML文件的元素标签内的。例如,下面是一个典型的JavaScript内嵌在HTML文件的元素标签内:
<input type="text" name="date" onchange="validateDate(this);" />
然而,html主要是用来描述文件的结构,而不是实现行为的。倘若将二者结合在一起会直接影响网站的可维护性,所以不推荐结合和行为相结合。
无侵入的解决方案是必须的注册事件处理程序,而不是html文件的元素标签中内嵌。这是给满足一个特定的CSS选择器的所有内容,添加特定行为的脚本:
<input type="text" name="date" />
window.onload = function(){ //Wait for the page to load.
var inputs = document.getElementsByTagName('input');
for(var i=0,l=inputs.length;i<l;i++){
input = inputs[i];
if(input.name && input.name=='date'){
input.onchange = function(){
validateDate();
}
}
}
};
function validateDate(){
//Do something when the content of the 'input' element
//with the name 'date' is changed.
}
下面是jQuery JavaScript库来实现的脚本:
$(document).ready(function(){ //Wait for the page to load.
$('input[name=date]').bind('change', validateDate);
});
function validateDate(){
//Do something when the content of the 'input' element
//with the name 'date' is changed.
}
由于对象名称属性是用来描述语义的一个组成部分,这种做法符合现代web标准的,同时又不在结构代码中内嵌任何行为代码,我们称之为无侵入的JavaScript(Unobtrusive Javascript)。
分享到:
相关推荐
Unobtrusive JavaScript date-picker widgit汉化版,date-picker汉化版
Part II explains the scripting environment provided by web browsers, with a focus on DOM scripting with unobtrusive JavaScript. The broad and deep coverage of client-side JavaScript is illustrated ...
Part II explains the scripting environment provided by web browsers, with a focus on DOM scripting with unobtrusive JavaScript. The broad and deep coverage of client-side JavaScript is illustrated ...
but their usage should be clear enough, allowing you to skip that part if you already have a solid understanding of programming JavaScript, including topics such as unobtrusive JavaScript and feature...
JS超级名著《Essentials of Javascript》目录: JavaScript 1 JavaScript syntax 18 JavaScript Style Sheets 43 JavaScript engine 44 ...Unobtrusive JavaScript 136 Venkman 139 XMLHttpRequest 141
微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.
Part II explains the scripting environment provided by web browsers, with a focus on DOM scripting with unobtrusive JavaScript. The broad and deep coverage of client-side JavaScript is illustrated ...
jquery.unobtrusive-ajax.min.js
jquery.validate.unobtrusive.min.js 文件很小,加载速度快 jQuery验证控件
<script src="./js/jquery.validate.unobtrusive.js"> 请输入名字!" data-val-required="请输入名字!" data-val="true"/> ...
Unobtrusive DOM 脚本编程的主要方面,包括一个关于文档对象模型,事件,JavaScript 与CSS 交互的简短的总览。最后你看到了Ajax 背后的前提和在现代浏览器中JavaScript 的支持。这些话题加在一起,足够带你步入专业...
前端项目-jquery-validation-unobtrusive,添加到jquery validation,以在data-*属性中启用不显眼的验证选项。
jquery.unobtrusive-ajax 一个Ajax 异步刷新的脚本 具体方法在我的主页,大家可以看一下,如有疑问,欢迎留言
Unobtrusive Ajax is about making web applications that work for everyone all the time, even if you have JavaScript turned off, or you're using a mobile phone or a screen reader, or however you happen ...
萤火虫UJS Firebug 扩展,用于显示绑定到 DOM 元素的 Unobtrusive Javascript。 more documentation coming soon
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
jquery-ajax-unobtrusive, 在数据 * 属性中,添加到 jQuery Ajax以启用低调选项 jQuery低调 AjaxjQuery低调Ajax库补充了 jQuery Ajax方法,添加了对通过Ajax调用指定HTML替换选项的支持,如 HTML5 data-* 元素。...