intro to jquery. what is jquery? a javascript library lightweight (about 31kb for the minified...
TRANSCRIPT
![Page 1: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/1.jpg)
Intro to jQuery
![Page 2: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/2.jpg)
What is jQuery?A JavaScript library
Lightweight (about 31KB for the minified version)
Simplifies HTML document traversing (DOM), event handling, animations, and more"write less, do more"
![Page 3: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/3.jpg)
<aside> MinificationRemoval of all unnecessary characters in code
e.g. whitespace new line chars, and comments
Reduces amount of data needed to be transferredSmaller file size = quicker page loads, but less readability
A lot of tools that compress the source code for you jscompress.com is just one
![Page 4: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/4.jpg)
How to Add jQueryLastest stable version is 1.7.1
Download it and store locally<script type="text/javascript" src="jquery.js"></script>
Use the hosted jQuery library<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js"></script>
![Page 5: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/5.jpg)
jQuery Syntax$(selector).action();
$ (typically) used to define jQuerySelector - HTML element to "query" or findAction - What to do jQuery action to perform
![Page 6: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/6.jpg)
<aside> Defining jQuery$ is shorthand for the standard function (full name is
jQuery)$(document).ready = jQuery(document).readySyntactically the same
Problem: '$' is used as shorthand for other JavaScript library objects
There's a way to get around this: jQuery noConflict() methodEx. var jq = jQuery().noConflict();
jq(document).ready( function () { jq("p").hide(); });
![Page 7: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/7.jpg)
Event Handlers jQuery methods called when an event is "triggered" or "fired"
It's common to put most jQuery functions within $ (document).ready(function) This waits until the entire page is loaded
$(document).ready(function() {
$("p.change").click(function() {
//do something here
});
});
![Page 8: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/8.jpg)
jQuery SelectorsAllow you to manipulate/traverse HTML DOM element
There are 3 types of jQuery Selectors(Think of the CSS lectures!)
![Page 9: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/9.jpg)
Element SelectorsjQuery uses CSS to select HTML elements
$("h1") - selects all <h1> elements
$("p.fname") - selects all <p> with the class = "fname"
$("h2#lname") - selects the <td> with the id = "lname"
$("#contact") - selects all elements with id = "contact" (There should only be one!)
element-selectors.html
![Page 10: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/10.jpg)
Attribute SelectorsjQuery uses XPath to select elements with the given
attributes$("[href]") - selects all elements with the href attribute$("[name = 'fname']") - selects all elements where the
name attribute is equal to "fname"$("[href !='#']") - selects all elements with href attribute
does NOT equal "#"
attribute-selectors.html
![Page 11: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/11.jpg)
CSS SelectorsChanges the CSS properties of the HTML elements
$(selector).css("css-property", "value"); Can pass just the property to get the current value (the first matched
element is returned) Can pass multiple properties
$("h1").css("color", "green") - changes the color of all h1 elements to green
$("h1").css({"background-color":"yellow","font- size":"200%"}) - changes all h1 elements to have a background color yellow and font size to 200%
css-selectors.html
![Page 12: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/12.jpg)
jQuery HTML ManipulationjQuery gives you some methods to manipulate the DOM
.addClass() - lets you add one or more classes to the element
.html() - sets or returns the content (innerHTML) of a element
.before() - adds content before the given element
.val() - sets or gets the value of a (form) element html-manipulation.html
![Page 13: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/13.jpg)
jQuery HTML ManipulationCont.
Ok cool, but what about this:
You dynamically add a new element (via jQuery or some other method) and want to bind an event to it.
You can use the .on() method $(parent-element-to-monitor).on("event(s)", "element- to-attach-event",
eventHandler()); Ex.
$(document).on( "click", "p", function(event) {
alert("Cool text here!");
});
jq-on.html
![Page 14: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/14.jpg)
jQuery EffectsThe "old" way to do hide, show, slide, toggle, fade, and
animate. (A lot of this can be done with CSS3 now).
$("p#hideme").hide() - hides the p element with the id
$("h1").fadeIn() - does a fade in animation to all h1 elements
![Page 15: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/15.jpg)
jQuery Effects (Callbacks) cont.
The callback parameter
Waits to execute a function until after the parent function is executed
Useful since JavaScript is a interpreted languageSince JS executes line by line
![Page 16: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/16.jpg)
jQuery Effects (Callbacks) cont.
What's the difference between these two functions?$("p").hide(1000); alert("The paragraph is now hidden");
$("p").hide(1000,function(){alert("The paragraph is now hidden");});
callback.html
![Page 17: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/17.jpg)
jQuery UIOfficial jQuery user interface library
Basically a set of useful/"official" jQuery plugins
Convient UI interactions
Useful widgets
Cool effects
Easy to use theme framework
![Page 18: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/18.jpg)
Using jQuery UILastest stable version is 1.8.17
http://jqueryui.com/download
Lets you download only things you want
Just have to include the .js and .css files on your pages
![Page 19: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/19.jpg)
Some basic UI interactionsDraggable - lets you make any DOM elements draggable
Resizable - lets you resize any DOM element
Selectable - makes a DOM element, or group of elements, selectable
jqui-interactions.html
![Page 20: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/20.jpg)
Useful widgetsDatepicker - A highly configurable UI datepicker
Autocomplete - Allows a Google Search like autocomplete function
Button - Makes making things that aren't typically buttons be buttons
Tabs - Used to break content into different sections
Dialog - Similar to JS alert, but more configureable
jqui-widgets.html
![Page 21: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/21.jpg)
jQuery UI EffectsBasically some convenience methods that extend the
functionality of jQueryAnimate - extends the core jQuery animate function to
animate by colorHide/Show - enables animation for the effectsswitchClass - lets you switch from one class to another
![Page 22: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/22.jpg)
jQuery UI ThemesjQuery UI plugins are all styled by CSS (both the core
jQuery UI style and plugin specific style)
Makes it easy to keep the look and feel consistent
Given the ability to create your own customized theme
http://jqueryui.com/themeroller/
![Page 23: Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event](https://reader035.vdocuments.site/reader035/viewer/2022062805/5697c0251a28abf838cd512f/html5/thumbnails/23.jpg)
</class>examples.html for all the examples and more resources.