我刚刚开始研究JQuery。我的网络应用程序目前没有任何AJAX。
HTML中现有的JavaScript如下所示:
<form ...>
<p>Find what? <input ...></p>
<div class="ButtonArray">
<a href="AddRecord.ASP&Action=ADD">ADD</a>
<a href="#" onClick="return MyFormSubmit();">FIND</a>
</div>
</form>
这将显示[添加]和[查找]的按钮。对于“查找”,有必要提交表单,并且我使用MyFormSubmit()来验证数据,向页面添加视觉效果,然后对数据进行POST。
我可以将CLASS或ID添加到“查找”按钮,在JQuery中,我可以编写类似以下内容的代码:
$(function() {
$(".MySearchButtonClass").click(function() {
// validate and process form here
});
});
在我对JQuery的理解的“新手”阶段,我不明白为什么我会这样做
我以前的方法是在对象附近标识Method。在用户按下按钮之前,可能存在未加载JS的风险(存在吗?JS的LOAD就在页面顶部)。
在加载文档之前,不会激活JQuery Document Ready方法(我认为这保证JS已经存在并且可以运行了吗?),但是它将代码移到HTML文件的单独部分中-因此,当我在HTML源代码中看到MyButtonArray DIV,对我来说,哪些对象有方法,哪些没有方法对我来说并不明显。
您能帮我了解我的选择是什么以及应该注意的好处/陷阱吗?
编辑:我很高兴DOM操作(例如,当单击具有“LightBoxThumb”类的任何缩略图时可以显示的LightBox)将使用不引人注意的Javascript。
但是,我努力说服自己,具有特定操作的按钮应该以这种方式应用其方法。 (除了对“其他地方”的单个函数调用外,我当然不会在按钮上放置任何代码,但是在我看来,这是该按钮功能的最佳线索,而“Unobtrusive Javascript”的层级可能会使难度更大)确定。)
编辑2-接受的答案
我已经回答了Russ Cams的问题。它以一种对我帮助更多地了解应如何使用和何时使用它的方式描述了Java语言。
目前(如果我有更多经验,可能会更改!)我将坚持使用OnClick事件对对象执行单一的,不变的操作,因为我认为这对于我来说更容易调试-并诊断是否出现问题。对于表上的ZebraStripes,该表允许单击标题列进行排序(以及该类型的情况),我可以看到Unobtrusive Javascript方法的好处
拉斯的最后评论特别有用,在此重复:
最佳答案
Unobtrusive JavaScript是用于将JS代码与标记分离的主要驱动程序
使用document.ready中的代码,直到加载DOM以及加载页面内容之前,该代码都不会执行
从Learning jQuery
您可能想看看jQuery in Action,我强烈推荐它。您可以在Chapter 1上采样Chapter 5和book's homepage。我认为,这样做可能会提供进一步的信息,帮助您了解为何分离效果很好。
最后,看看this question,它的答案详细说明了如何在DOM节点上找到事件监听器。
编辑:
有些想法可能会说服您,为什么不打扰的JavaScript可能是一个好主意。
想象一下,您有一个函数绑定(bind)为在多个元素中的每个元素上引发的同一事件的事件处理程序-
元素调用该函数来处理
声明为内联时的事件
在每个元素或声明中
在一个地方,在
标记?
何时调用该函数的元素
每个人都引发了这个事件?
会更容易/更好地添加
内联到每个元素的事件处理程序
还是在一个地方更改代码?