In Backbone selecting elements with jQuery

It is an example for the question on Stackoverflow.com at http://stackoverflow.com/questions/8933975/in-backbone-js-using-jquery-what-is-the-correct-way-to-select-an-element-within

HTML

<script src="https://raw.github.com/documentcloud/underscore/1.1.7/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.5.3/backbone.js"></script>
Username: <input type="text" id="username" value="Tom"> <br />

<br /><br />
<div id="login">
    Username: <input type="text" id="username" value="Jeff"/><br />
    <button id="loginButton">Login</button>
</div>

<div id="output"></div>

JavaScript

var LoginView = Backbone.View.extend({
    el: "#login",
    events: {
        "click #loginButton": "login"
    },

    login: function () {
        var val1 = $("#username", this.el ).val()
        var val2 = $(this.el).find("#username").val();
        var val3 = this.$("#username").val();

        $("#output").append("<li>" + val1 +  "</li>")
        $("#output").append("<li>" + val2 +  "</li>")
        $("#output").append("<li>" + val3 +  "</li>")    }
})
var loginView = new LoginView();