Modern Web Development Using jQuery
-
Upload
rjs-software-systems -
Category
Technology
-
view
239 -
download
0
description
Transcript of Modern Web Development Using jQuery
Presented by :
Ryan GriggsSenior Software Developer
RJS Software
Modern Web Development
Using jQuery
• Getting Started
• Manipulation
• Events
• AJAX
• Demo
• Q & A
Agenda
• Reduces code
• Reusable and lightweight
• Well-tested and cross-browser compatible
• Powerful selector engine
• Method chaining
Why Use jQuery?
• Page Setup<!DOCTYPE html><html><head>
<title>RJS Software</title><script src="scripts/jquery.min.js"></script>
</head><body></body></html>
Getting Started
• Hello World
Old
function pageReady(){
document.getElementsByTagName("body")[0].innerText = "Hello,
World!";
}
document.onload = pageReady;
New
$(document).ready(function () {
$("body").text("Hello, World!");
});
Getting Started
• Completed<!DOCTYPE html><html><head>
<title>RJS Software</title><script src="scripts/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function () {
$("body").text("Hello, World!");
});</script>
</head><body></body></html>
Getting Started
• Document Object Model
• Representation of your document in code
• jQuery eases navigation and manipulation
Manipulation
• Content
$("#page-header").text();
$("#document-content").html();
$("input#document-title").val();
$("#page-header").text("New Page Header");
$("#document-content").html("<h1>New
Content</h1>");
$("input#document-title").val("Invoice");
Manipulation
• Attributes
$("#google-link").attr("href");
$("#google-link").attr("href",
"www.google.com"); $("#google-link").attr(
{ "href": "http://www.google.com",
"title": "Google.com"});
Manipulation
• Properties$("#myTextbox").prop("disabled");
$("#myTextbox").prop("disabled", true); $("#myCheckbox").prop("checked");
$("#myCheckbox").prop("checked", true);
Manipulation
• CSS
$("#myText").css("font-size", "2em");
$("#myText").css({
"font-size":"2em",
"color":"red"
});
Manipulation
• Classes
$("#myText").addClass("bold"); $
("#myText").removeClass("bold"); $("#myText").toggleClass("bold"); $("#myText").hasClass("bold");
Manipulation
• Custom
• Deprecated: bind(), unbind(), live(), delegate()
• Current: on()
• Shorthand
• Examples: blur(), click(), focus(), hover(), keydown(), load(), resize()
Events
• On$("body").on("keypress",function(event){ if(event.which == 13){ // ENTER key was pressed }});
$("body").on("click", "a", function () {alert("Clicked!");
});
Events
• Shorthand$("body").keypress(function () { if(event.which == 13){ // ENTER key was pressed }});
$("body a").click(function () {alert("Clicked!");
});
Events
• Old wayvar httpRequest; document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); }; function makeRequest(url) { if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!httpRequest) { alert("Cannot create an XMLHTTP instance"); return false; } httpRequest.onreadystatechange = alertContents; httpRequest.open('GET', url); httpRequest.send(); } function alertContents() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { alert(httpRequest.responseText); } else { alert('There was a problem with the request.'); } } }
AJAX
• jQuery way$("#ajaxButton").click(function () {
$("#result").load("test.html");});
AJAX
• jQuery way (more complex)$("#ajaxButton").click( function () {
$.ajax({ type: "POST", url: "test.html", data: "folder=1234",
success: function(data){$("#result").html(data);
}});
});
AJAX
• Reduced existing Javascript code
• Allowed more complex behavior in shorter implementation time
• Removed need for browser-dependent code and “hacks”
RJS Usage
$("#forgot-button").on("click", function () { var emailAddress = $("#email").val(), $buttonTrigger = $(this);
if (emailAddress.length > 0 && $("#loginForm").validate().element("#email")) { $(this).button("disable");
$.ajax({ type: "POST", url: "/login.aspx", data: { email: emailAddress }, success: function (data) { $("#email").val(""); $buttonTrigger.button("enable");
var $status = $(document.createElement("div")) .addClass("ui-widget") .css({ display: "none", opacity: 0 }) .html($(document.createElement("div")) .addClass("ui-state-highlight ui-corner-all") .html($(document.createElement("p")) .html($(document.createElement("span")) .addClass("ui-icon ui-icon-info") .css({ 'float': "left", 'marginRight': ".3em" }) ).append(data) ) ).append($(document.createElement("br")));
$("#forgotpassword").slideUp("fast"); $status.insertAfter($("#browser-error")).slideDown("fast") .animate({ opacity: 1 }, { queue: false, duration: "fast" });
setTimeout(function () { $status.animate({ height: 0, opacity: 0 }, "fast", function () { $(this).remove(); }); }, 4000); } }); }});
RJS Usage
Demo
Questions and Answers
Learn More
Contact:Ryan GriggsRJS Software [email protected] [email protected] or 952-736-5800