jquery has coding standards
TRANSCRIPT
![Page 1: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/1.jpg)
jQuery HasCoding
StandardsNow You Tell Me...
![Page 2: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/2.jpg)
Who am I?RJ BruneelUniversity of Central FloridaWeb Applications DeveloperMARKETING DEPARTMENTALUMNI ’97
![Page 3: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/3.jpg)
Why use best practices &standards anyway?
![Page 4: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/4.jpg)
Topics
Loading jQuery
jQuery Variables
jQuery Selectors
jQuery DOM Manipulation
jQuery Events
jQuery AJAX
Miscellaneous
![Page 5: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/5.jpg)
LoadingjQuery
![Page 6: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/6.jpg)
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
Loading jQuery from a local serverLoading jQuery
![Page 7: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/7.jpg)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
Loading jQuery from a content delivery network (CDN)
Loading jQuery
![Page 8: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/8.jpg)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
Relying solely on a CDNLoading jQuery
![Page 9: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/9.jpg)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-
2.1.4.min.js" type="text/javascript"><\/script>');</script>
Implementing a fallbackLoading jQuery
![Page 10: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/10.jpg)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
Using protocol dependent URLsLoading jQuery
![Page 11: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/11.jpg)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
Using protocol independent URLsLoading jQuery
![Page 12: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/12.jpg)
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
</head>
Loading jQuery at the top of the page
Loading jQuery
![Page 13: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/13.jpg)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
</body>
</html>
Loading jQuery at the bottom of the page
Loading jQuery
![Page 14: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/14.jpg)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
Loading jQuery 2.x if you supportIE 6, 7 or 8
Loading jQuery
![Page 15: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/15.jpg)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
type="text/javascript"></script>
Loading jQuery 1.x if you supportIE 6, 7 or 8
Loading jQuery
![Page 16: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/16.jpg)
jQuery Variables
![Page 17: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/17.jpg)
var bigcontainer = $("#container");
Disregarding naming standardsjQuery Variables
![Page 18: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/18.jpg)
var $bigContainer = $("#container");
Following naming standardsjQuery Variables
![Page 19: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/19.jpg)
for(var i = 0; i < 50; i++) {
$("#container").text(i);
}
Searching the DOM for the same element more than once
jQuery Variables
![Page 20: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/20.jpg)
var $container = $("#container");
for(var i = 0; i < 50; i++) {
$container.text(i);
}
Caching jQuery objects using variables
jQuery Variables
![Page 21: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/21.jpg)
$("#link").addClass("bold");
$("#link").fadeIn();
$("#link").removeClass("bold");
Calling multiple methods on the same jQuery object
jQuery Variables
![Page 22: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/22.jpg)
$("#link")
.addClass("bold")
.fadeIn()
.removeClass("bold");
Using the chaining featurejQuery Variables
![Page 23: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/23.jpg)
jQuery Selectors
![Page 24: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/24.jpg)
$(".products");
Searching the DOM for a single element with a class name
jQuery Selectors
![Page 25: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/25.jpg)
$("#products");
Searching the DOM usingan ID selector
jQuery Selectors
![Page 26: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/26.jpg)
$("#container table.attendees td.column");
$("#outer-container #inner");
$("div#inner");
Using multiple IDs, excessive specificity or nesting when selecting an ID
jQuery Selectors
![Page 27: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/27.jpg)
$("#product-container");
$("#product-container").find(".products");
$(".products", "#products-container");
Keeping selectors simple or giving them a context
jQuery Selectors
![Page 28: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/28.jpg)
$(".container > *");
$(":radio");
$(":checkbox");
Using universal selectorsjQuery Selectors
![Page 29: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/29.jpg)
$(".container").children();
$("input[type=checkbox]");
$("input[type=radio]");
Using the children method and being more specific
jQuery Selectors
![Page 30: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/30.jpg)
jQuery DOM Manipulation
![Page 31: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/31.jpg)
var $list = $("#list");
for(var i = 0; i < 1000; i++) {$list.append("<li>"+i+"</li>");
}
Appending the same element many times to the DOM
jQuery DOM Manipulation
![Page 32: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/32.jpg)
var array = []; for(var i = 0; i < 1000; i++){
array[i] = "<li>"+i+"</li>";}
$list.append(array.join(""));
Using string concatenation orarray.join() before appending
jQuery DOM Manipulation
![Page 33: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/33.jpg)
$("#element-not-found").slideUp();
Running jQuery methods on elements that don’t exist
jQuery DOM Manipulation
![Page 34: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/34.jpg)
var $noSuchElement = $("#element-not-found");
if ($noSuchElement.length) {$noSuchElement.slideUp();
}
Verifying objects exist before using them
jQuery DOM Manipulation
![Page 35: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/35.jpg)
var $list = $("#list-container > ul");
// Complicated DOM manipulation methods
Performing lots of DOM manipulation inline
jQuery DOM Manipulation
![Page 36: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/36.jpg)
var $list = $("#list-container > ul").detach();
// Complicated DOM manipulation
$list.appendTo("#list-container");
Detaching elements before DOM manipulation and adding them back
jQuery DOM Manipulation
![Page 37: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/37.jpg)
jQueryEvents
![Page 38: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/38.jpg)
<a id="link" href="#" onclick="linkEventHandler();">link</a>
Putting javascript in the HTML code
jQuery Events
![Page 39: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/39.jpg)
$("#link").on("click", myEventHandler);
Using jQuery to bind eventsjQuery Events
![Page 40: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/40.jpg)
$("#link").on("click", function() {
alert("Link clicked!");
});
Using anonymous functionsjQuery Events
![Page 41: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/41.jpg)
function linkClickHandler() { alert("Link clicked!");
}
$("#link").on("click", linkClickHandler);
Creating a method for your click handlers
jQuery Events
![Page 42: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/42.jpg)
$(function() {
alert("DOM is ready");
});
Using anonymous function for the document ready event handler
jQuery Events
![Page 43: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/43.jpg)
function initPage() {
alert("DOM is ready");
}
$(initPage);
Using named function for the document ready event handler
jQuery Events
![Page 44: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/44.jpg)
$("#list a").on("click", myClickHandler);
Duplicating event handlersjQuery Events
![Page 45: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/45.jpg)
$("#list").on("click", "a", myClickHandler);
Using event delegationjQuery Events
![Page 46: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/46.jpg)
jQuery AJAX
![Page 47: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/47.jpg)
var jqxhr = $.get(url, successHandler);
Using .getJson() or .get()jQuery AJAX
![Page 48: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/48.jpg)
var jqxhr = $.ajax({
url: url,
success: successHandler
});
jqxhr.done(successHandler);
Using $.ajax()jQuery AJAX
![Page 49: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/49.jpg)
var jqxhr = $.ajax({
url: "ajaxURL.php?param1=title¶m2=name"
});
Putting parameters in the URLjQuery AJAX
![Page 50: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/50.jpg)
var jqxhr = $.ajax({ url: url, data: {
param1: "Title", param1: "Name" }
});
Putting parameters in the data object
jQuery AJAX
![Page 51: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/51.jpg)
var jqxhr = $.ajax({ url: url });
jqxhr.done(successHandler);
Leaving off error handlingjQuery AJAX
![Page 52: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/52.jpg)
var jqxhr = $.ajax({statusCode: { 404: handler404,
500: handler500 }});jqxhr.fail(failureHandler);
Implementing error handlingjQuery AJAX
![Page 53: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/53.jpg)
Miscellaneous
![Page 54: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/54.jpg)
$("#error-message").css("color":"red", "font-weight":"bold");
Using the CSS method in jQueryMiscellaneous
![Page 55: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/55.jpg)
.error {"color": "red";
"font-weight": "bold";}
$("#error-message").addClass("error");
Using addClass methodMiscellaneous
![Page 56: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/56.jpg)
$link
.attr("href", "#")
.attr("title", "My Title")
.attr("rel", "external");
Repeating jQuery methodsMiscellaneous
![Page 57: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/57.jpg)
$link.attr({"href": "#","title": "My Title","rel": "external"
});
Using object literals for parameters
Miscellaneous
![Page 58: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/58.jpg)
![Page 59: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/59.jpg)
Questions?
![Page 60: jQuery Has Coding Standards](https://reader035.vdocuments.us/reader035/viewer/2022062522/58e7e0471a28ab3a578b61e1/html5/thumbnails/60.jpg)
THANK YOUDownload Slideshttp://www.slideshare.net/RJBruneel/jquery-has-coding-standards
Additional Resourceshttp://www.jquery.comhttp://lab.abhinayrathore.com/jquery-standards/http://gregfranko.com/jquery-best-practices/