![Page 1: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/1.jpg)
jQuery: JavaScript, Made Easy
1
![Page 2: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/2.jpg)
What is jQuery? § jQuery is JavaScript.
§ jQuery is a Framework, a collec:on of “shortcuts”
§ jQuery is a pla@orm for moderniza:on.
§ jQuery is open-‐source -‐ hDps://github.com/jquery/jquery
2
![Page 3: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/3.jpg)
jQuery is…
Everything that is done in jQuery can be done in JavaScript. Everything that is done in jQuery IS being done in JavaScript.
Everything in jQuery is designed to make your JavaScript simpler and cut down on development :me.
One of the major advantages to jQuery is it’s ability to implement open-‐source plugins from a vast online library that can add func:onality to a web site with a very small :me investment required.
3
document.getElementById("id") = $("#id")
![Page 4: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/4.jpg)
Where is jQuery used?
4
jQuery is leveraged in the majority of the top 10,000 and 100,000 web sites on the internet today.
Source: hDp://trends.builtwith.com/javascript/jQuery
![Page 5: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/5.jpg)
What can jQuery do for me? BESIDES JUST MAKING MY JAVASCRIPT EASIER…
5
![Page 6: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/6.jpg)
Galleries
6
![Page 7: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/7.jpg)
Layouts hDp://pinterest.com/
7
![Page 8: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/8.jpg)
Tooltips
8
![Page 9: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/9.jpg)
Validation hDp://bit.ly/14DLGil
9
![Page 10: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/10.jpg)
How do I use jQuery?
10
<!-‐-‐ jQuery.com CDN -‐-‐> <script src="http://code.jquery.com/jquery-‐1.9.1.min.js"></script> <!-‐-‐ Google hosted CDN -‐-‐> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-‐-‐ Microsoft hosted CDN -‐-‐> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-‐1.9.1.min.js"></script> <!-‐-‐ Self-‐hosted -‐-‐> <script src="scripts/jquery.min.js"></script>
![Page 11: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/11.jpg)
How do I know if it’s working? Here is a simple bit a code that you can run to confirm that jQuery is running on your page.
11
<script type="text/javascript"> if (jQuery) {
alert("jQuery is loaded"); } </script>
<script type="text/javascript"> if ($) {
alert("jQuery is loaded"); } </script>
![Page 12: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/12.jpg)
It works! What now?
Let’s take a look at the three ways in jQuery to launch a script when a page loads.
12
![Page 13: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/13.jpg)
1. <script>
$(document).ready(function () {
// Your code goes here
});
</script>
Document.ready
13
![Page 14: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/14.jpg)
2. Window.Onload
14
<script>
window.onload = function() {
// Your code goes here
});
</script>
![Page 15: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/15.jpg)
3. Anonymous func:on()
Preferred method.
15
<script>
$(function(){
// Your code goes here
});
</script>
![Page 16: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/16.jpg)
Let’s try our first script… Hello World:
16
<script> $(function () { alert("Hello World"); }); </script>
Now let’s refine our script…
![Page 17: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/17.jpg)
Selectors Selectors are what make jQuery so clean and efficient.
Selectors are what makes jQuery EASY!
17
<script> $(function () { $("button").click(function () {
alert("Hello World"); });
}); </script>
<button>Sample</button>
![Page 18: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/18.jpg)
Objects and DOM elements
In the following slides we will compare code samples wriDen in pure JavaScript versus their equivalent code in jQuery…
18
![Page 19: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/19.jpg)
Objects and DOM elements JAVASCRIPT
document.getElementById("targetId");
document.getElementsByClassName("targetClass");
document.getElementsByName("targetName");
document.getElementsByTagName("targetTag");
JQUERY $("#targetId");
$(".targetClass");
$('[name="targetName"]');
$("targetTag");
19
![Page 20: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/20.jpg)
Objects and DOM elements - Semantics
JAVASCRIPT <a onclick="doSomething()" href="#">Click!</a>
JQUERY $('a.doSomething').click(function () {
alert(‘Do Something'); });
20
var a = document.createElement('a'); a.href = 'http://www.'; a.title = 'todo'; a.innerHTML = 'Homepage'; a.target = '_blank'; document.getElementById('body').appendChild(a);
$('<a/>', { href: 'http://www.', title: 'todo', html: 'Homepage', target: '_blank' }).appendTo('body');
![Page 21: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/21.jpg)
One last comparison... JAVASCRIPT
var xhr; try { xhr = new XMLHttpRequest(); } catch (e) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } xhr.open("GET", "test.txt", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { alert(xhr.responseText) } } xhr.send(null)
JQUERY $.get('test.txt', function (xhr) { alert(xhr); });
21
![Page 22: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/22.jpg)
<script> $(function () {
$("button").click(function () { $("input").val("Changed"); $("input").change(); }); $("input").change(function () { alert("Handler for .change() called."); }); }); </script>
<script> $(function () {
$("button").click(function () { $("input").val("Changed"); //$("input").change(); }); $("input").change(function () { alert("Handler for .change() called."); }); }); </script>
Events The .click() func:on we just created is called an event. There are many events in jQuery that you can use to turn ordinary DOM elements into func:onal tools in your web site.
22
<button>Sample</button> <input type="text" value="Sample" />
![Page 23: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/23.jpg)
<script> $(function () { $("button").click(function () { $("input").val("Changed"); $("#coloredDiv").attr("style", "background-‐color:red;height:100px; width:100px;"); //$("input").change(); }); $("input").change(function () { alert($("#coloredDiv").attr("style")); }); }); </script>
Attributes jQuery has several aDributes that you can leverage to modify DOM elements. The most basic is .aDr(). This aDribute allows you to modify any key/value pair associated with an element.
23
<div id="coloredDiv"></div>
In our example "style", "background-‐color:red;height:100px; width:100px;“ is our key/value pair.
![Page 24: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/24.jpg)
Attributes The .aDr() method can also accept an object of mul:ple key/value pairs. In the following example we will set the href value using jQuery:
<a href="#" class="siteLink">Sample</a> $(".siteLink").attr("href", "allMyHrefsAreTheSameNow.html");
In this example we will set both the HREF value and the Title aDribute simultaneously:
$(".siteLink").attr({ title: "all titles are the same too!", href: "somethingNew.html" });
This sort of script could be handy in many situa:ons when modernizing a site. For instance, upda:ng all images to have alt tags on a give page.
24
![Page 25: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/25.jpg)
CSS Attributes That .aDr() tag was a liDle ugly, not seman:c and really not a great way to control CSS. Let’s look at other ways to control CSS of DOM elements.
25
$("#coloredDiv").css({ backgroundColor : "red", // or "background-‐color" : "red" height : "100px", width : "100px“ });
$("#coloredDiv").addClass("redBox"); $("#coloredDiv").removeClass("blueBox"); $("#coloredDiv").toggleClass("coloredBox");
![Page 26: jQuery: JavaScript, Made Easysupermobile.dk/pdf/jQuery_vs_JavaScript.pdf · It works! What now? " Let’s"take"alook"atthe"three"ways"in"jQuery"to"launch"ascript when"apage"loads."](https://reader034.vdocuments.site/reader034/viewer/2022052103/603e2b743b300a20f905d689/html5/thumbnails/26.jpg)
//supermobile.dk/jquery
26