不显眼的JavaScript与jQuery - 好的10分钟的教程？ [英] Unobtrusive javascript with jquery - good 10 minute tutorial?
问题描述
我正在寻找使用JQuery的10分钟不错介绍。我对这个概念是完全陌生的，我想看看事件绑定是如何工作的。
作为一些背景知识，我期待着做一个删除这个标签系统类似于我们在这里所拥有的。看看源代码，我没有看到任何js，只是一个img标签。这让我觉得必须有外部的js绑定到click事件。我想知道如何做到这一点，我想要一个教程，告诉我如何！
我猜 jQuery主页上的教程页面将是一个开始的好地方：）
< html>
< head>
< script type =text / javascript
src =http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js><<< ; /脚本>
< script type =text / javascript>
//只有当DOM完成加载时才执行脚本
$（document）.ready（function（）{
$（'＃removeme'）。click（function（）{
//删除已经成为事件目标的元素
$（this）.remove（）;
//停止浏览器跟踪链接
返回false;
}） ;
}）;
< / script>
< / head>
< body>
< p>
< a id =removemehref =http://example.org>移除我< / a>
< / p>
< / body>
< / html>
I'm looking for a good 10 minute introduction to Unobtrusive Javascript using JQuery. I'm completely new to the concept, and I'd like to see how the event binding and such works.
As some background, I'm looking to do a "remove this tag" system similar to what we have here on SO. Looking at the source, I didn't see any js, just an img tag. That makes me think there must be external js that's binding to the click event. I want to know how to do that, and I want a tutorial that shows me how!
I guess the Tutorials page on jQuery homepage would be a good place to start :)
Simple example to remove a link you have clicked on follows:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
// execute script only when DOM has finished loading
$(document).ready(function() {
$('#removeme').click(function() {
// remove element that has been target of the event
$(this).remove();
// stop browser from following the link
return false;
});
});
</script>
</head>
<body>
<p>
<a id="removeme" href="http://example.org">Remove me</a>
</p>
</body>
</html>
这篇关于不显眼的JavaScript与jQuery - 好的10分钟的教程？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
