![• $(function)
• $(domelement)
• $([ domelement, domelement … ])
• $({ name: value, … })
• $("htmlelement", { attribute: value })
• $("selector")
• $("html")](https://image.slidesharecdn.com/footgun-140918195222-phpapp01/85/jQuery-Foot-Gun-Features-38-320.jpg)
![: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()](https://image.slidesharecdn.com/footgun-140918195222-phpapp01/85/jQuery-Foot-Gun-Features-47-320.jpg)
![$(".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;
}
}](https://image.slidesharecdn.com/footgun-140918195222-phpapp01/85/jQuery-Foot-Gun-Features-50-320.jpg)
jQuery Foot-Gun Features
- 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."
- 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?
- 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! });
- 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: [email protected]
- 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();