Unobtrusive javascript with jquery - good 10 minut

2019-02-04 15:38发布

问题:

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!

回答1:

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>