This talk recaps some features and practices that are best to avoid in good jQuery pages and apps. Following these rules will improve performance and maintainability, and may prevent your co-workers from coming after you with sharp objects.

4. Let's make standards work
for us, solving real problems!
Web developer needs should
be expressed early in the
process, before a standard is
deployed in browsers and it
becomes "too late to fix it."

5. (builtwith.com)

11. • "Please code responsibly"

12. jquery-latest.js
download
http://code.jquery.com/jquery-latest.js
http://code.jquery.com/jquery-latest.min.js
<script src="http://code.jquery.com/jquery-latest.
js"></script>

17. • $.browser
• $(elements).live( … )

19. From High Performance Browser Networking by Ilya Grigorik (O'Reilly)

20. :visible :hidden
console.time("init");
$("body").removeClass("activated");
$("p:visible").css("color", "blue");
console.timeEnd("init");

21. 30 ms

23. console.time("init");
$("body").removeClass("activated");
$("p.showing").css("color", "blue");
console.timeEnd("init");

24. 8 ms

25. :visible :hidden
data- .data()

27. • $("#abc").show()
• $("#abc").hide()
style
What could possibly go wrong?

28. $("<span>Hi!</span>")
.show()
.appendTo("body");

29. <style>
span { display: none; }
</style>
$("<span>Hi!</span>")
.show()
.appendTo("body");

30. <style>
span { display: block; }
</style>
$("<span>Hi!</span>")
.show()
.appendTo("body");

31. <style>
@media screen and (max-width: 700px) {
#bar { display: none; }
}
</style>
$("#bar").show();

32. display

34. $.ajax({
url: "file.txt",
success: function(data){
alert(data);
}
});

35. $.ajaxSetup({
type: "POST",
dataType: "json",
timeout: 500 // ms!
});

36. BAD
$.ajaxSetup()

37. function remoteCommand(options)
{
return $.ajax(
$.extend({
dataType: "json",
timeout: 1000,
...
}, options)
);
}

38. • $(function)
• $(domelement)
• $([ domelement, domelement … ])
• $({ name: value, … })
• $("htmlelement", { attribute: value })
• $("selector")
• $("html")

39. $(selector).appendTo("body");
var selector = "<script>alert(42)</script>";

40. .text()

43. $("#toggle-checkboxes").on("click", function( event ) {
$(".cb").each(function() {
$(this).prop("checked", !$(this).prop("checked"));
});
});

44. $("#toggle-checkboxes").on("click", function( event ) {
$(".cb").each(function() {
this.checked = !this.checked;
});
});

45. Instead of $(this) … Use this!
$(this).is(“:checked”) this.checked
$(this).prop(“checked”) this.checked
$(this).is(“:disabled”) this.disabled
$(this).attr(“id”) this.id
$(this).attr(“class”) this.className

46. querySelectorAll

47. :checkbox, :radio, :text, :image,
:file, :reset
input[type=X]
:button button, input[type=button]
:header h1, h2, h3, h4, h5
:first :first-child or .first()
:last :last-child or .last()

48. $("div").on("click", function( event ) {
// Throws an error in IE8 or the Android 2.x browser
this.className.add("clicked");
// Works everywhere
$(this).addClass("clicked");
// Works everywhere if you can clobber className
this.className = "clicked";
});

49. Twitter: @davemethvin
Github: dmethvin
Email: dave.methvin@gmail.com

50. $(".msg").addClass("unread");
compared to
var unreadClass = "unread",
msgs = document.getElementsByClassName("msg");
var cls = new RegExp("b"+unreadClass+"b");
for ( var i=0; i < msgs.length; i++ ) {
if ( !cls.test(msgs[i]) {
msgs[i].className += " "+unreadClass;
}
}

51. jQuery.fn.makeBlue = function() {
return this.css("color", "blue");
}
$(".da-ba-de-da-ba-di").makeBlue();