View
711
Download
0
Category
Preview:
Citation preview
jQuery HasCoding
StandardsNow You Tell Me...
Who am I?RJ BruneelUniversity of Central FloridaWeb Applications DeveloperMARKETING DEPARTMENTALUMNI ’97
RJ.Bruneel@ucf.edu
Why use best practices &standards anyway?
Topics
Loading jQuery
jQuery Variables
jQuery Selectors
jQuery DOM Manipulation
jQuery Events
jQuery AJAX
Miscellaneous
LoadingjQuery
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
Loading jQuery from a local serverLoading jQuery
<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
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
Relying solely on a CDNLoading jQuery
<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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
Using protocol dependent URLsLoading jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
type="text/javascript"></script>
Using protocol independent URLsLoading jQuery
<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
<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
<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
<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
jQuery Variables
var bigcontainer = $("#container");
Disregarding naming standardsjQuery Variables
var $bigContainer = $("#container");
Following naming standardsjQuery Variables
for(var i = 0; i < 50; i++) {
$("#container").text(i);
}
Searching the DOM for the same element more than once
jQuery Variables
var $container = $("#container");
for(var i = 0; i < 50; i++) {
$container.text(i);
}
Caching jQuery objects using variables
jQuery Variables
$("#link").addClass("bold");
$("#link").fadeIn();
$("#link").removeClass("bold");
Calling multiple methods on the same jQuery object
jQuery Variables
$("#link")
.addClass("bold")
.fadeIn()
.removeClass("bold");
Using the chaining featurejQuery Variables
jQuery Selectors
$(".products");
Searching the DOM for a single element with a class name
jQuery Selectors
$("#products");
Searching the DOM usingan ID selector
jQuery Selectors
$("#container table.attendees td.column");
$("#outer-container #inner");
$("div#inner");
Using multiple IDs, excessive specificity or nesting when selecting an ID
jQuery Selectors
$("#product-container");
$("#product-container").find(".products");
$(".products", "#products-container");
Keeping selectors simple or giving them a context
jQuery Selectors
$(".container > *");
$(":radio");
$(":checkbox");
Using universal selectorsjQuery Selectors
$(".container").children();
$("input[type=checkbox]");
$("input[type=radio]");
Using the children method and being more specific
jQuery Selectors
jQuery DOM Manipulation
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
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
$("#element-not-found").slideUp();
Running jQuery methods on elements that don’t exist
jQuery DOM Manipulation
var $noSuchElement = $("#element-not-found");
if ($noSuchElement.length) {$noSuchElement.slideUp();
}
Verifying objects exist before using them
jQuery DOM Manipulation
var $list = $("#list-container > ul");
// Complicated DOM manipulation methods
Performing lots of DOM manipulation inline
jQuery DOM Manipulation
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
jQueryEvents
<a id="link" href="#" onclick="linkEventHandler();">link</a>
Putting javascript in the HTML code
jQuery Events
$("#link").on("click", myEventHandler);
Using jQuery to bind eventsjQuery Events
$("#link").on("click", function() {
alert("Link clicked!");
});
Using anonymous functionsjQuery Events
function linkClickHandler() { alert("Link clicked!");
}
$("#link").on("click", linkClickHandler);
Creating a method for your click handlers
jQuery Events
$(function() {
alert("DOM is ready");
});
Using anonymous function for the document ready event handler
jQuery Events
function initPage() {
alert("DOM is ready");
}
$(initPage);
Using named function for the document ready event handler
jQuery Events
$("#list a").on("click", myClickHandler);
Duplicating event handlersjQuery Events
$("#list").on("click", "a", myClickHandler);
Using event delegationjQuery Events
jQuery AJAX
var jqxhr = $.get(url, successHandler);
Using .getJson() or .get()jQuery AJAX
var jqxhr = $.ajax({
url: url,
success: successHandler
});
jqxhr.done(successHandler);
Using $.ajax()jQuery AJAX
var jqxhr = $.ajax({
url: "ajaxURL.php?param1=title¶m2=name"
});
Putting parameters in the URLjQuery AJAX
var jqxhr = $.ajax({ url: url, data: {
param1: "Title", param1: "Name" }
});
Putting parameters in the data object
jQuery AJAX
var jqxhr = $.ajax({ url: url });
jqxhr.done(successHandler);
Leaving off error handlingjQuery AJAX
var jqxhr = $.ajax({statusCode: { 404: handler404,
500: handler500 }});jqxhr.fail(failureHandler);
Implementing error handlingjQuery AJAX
Miscellaneous
$("#error-message").css("color":"red", "font-weight":"bold");
Using the CSS method in jQueryMiscellaneous
.error {"color": "red";
"font-weight": "bold";}
$("#error-message").addClass("error");
Using addClass methodMiscellaneous
$link
.attr("href", "#")
.attr("title", "My Title")
.attr("rel", "external");
Repeating jQuery methodsMiscellaneous
$link.attr({"href": "#","title": "My Title","rel": "external"
});
Using object literals for parameters
Miscellaneous
Questions?
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/
ContactRJBruneel@ucf.edu
Recommended