From Event to Action: Accelerate Your Decision Making with Real-Time Automation
J query presentation
1. jQuery is a JavaScript Library
-By Akanksha Sawarkar
2. What is jQuery?
• jQuery is a lightweight library.
• jQuery is a fast, small, and feature-rich JavaScript library.
• It makes things like HTML document traversal and
manipulation, event handling, animation. With a
combination of versatility and extensibility, jQuery has
changed the way that millions of people write JavaScript.
• jQuery takes a lot of common tasks that require many
lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
3. History of jQuery
• jQuery, the fantastic JavaScript library invented by John Resig.
• On August 22nd, 2005 First stable 1.0 version was released & latest one
i.e. jQuery 2.0 Beta 2 was realeased onMarch 1st, 2013 .
• jQuery 2.0 is intended for the modern web
• How 2.0 Changed
• No more support for IE 6/7/8
• Reduced size : The final 2.0.0 file is 12 percent smaller than the 1.9.1
• Custom builds for even smaller files
• jQuery 1.9 API equivalence: jQuery 2.0 is API-compatible with 1.9, which
means that all of the changes documented in the
jQuery 1.9 Upgrade Guide have been applied to jQuery 2.0 as well.
4. Features & Benefits with JQuery
• The jQuery library contains the following features:
• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
5. Why jQuery?
• There are a lots of other JavaScript frameworks out
there, but jQuery seems to be the most popular, and
also the most extendable.
• Many of the biggest companies on the Web use
jQuery, such as:
• Google
• Microsoft
• IBM
• Netflix
6. How to include a hosted copy of
jQuery
• go to the CDN Hosted jQuery section of the
download page and pick one of the different CDN
services available;
• copy the URL of your CDN of choice and paste it as
the value of the <script> tag's src attribute, like so:
• <script type="text/javascript"
src"yourCDNUrlAddressjQueryFile.js"></script>place
a <script> tag with a reference to your own
JavaScript file underneath the jQuery <script> tag
7. jQuery Syntax
• The jQuery syntax is tailor made for selecting HTML
elements and performing some action on the
element(s).
• Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
$(document).ready(function(){
// jQuery methods go here...
});
8. • Examples:
• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with
class="test".
• $("#test").hide() - hides the element with
id="test".
9. jQuery Selectors
• jQuery selectors allow you to select and manipulate HTML element(s).
• jQuery selectors are used to "find" (or select) HTML elements based on
their id, classes, types, attributes, values of attributes and much more. It's
based on the existing CSS Selectors, and in addition, it has some own
custom selectors.
• All selectors in jQuery start with the dollar sign and parentheses: $().
• You can select all <p> elements on a page like this:
• $("p")
• Example
• When a user clicks on a button, all <p> elements will be hidden:
• Example
• $(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
10. Functions In a Separate File
• If your website contains a lot of pages, and you want
your jQuery functions to be easy to maintain, you
can put your jQuery functions in a separate .js file.
• Example
• <head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.1
0.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
11. Events
• jQuery provides simple methods for attaching
event handlers to selections. When an event
occurs, the provided function is executed.
Inside the function, this refers to the element
that was clicked.
Mouse Events Keyboard Events Form Events Document/Window
Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
12. • click()
• The click() method attaches an event handler
function to an HTML element
• When a click event fires on a <p> element;
hide the current <p> element:
• Example
• $("p").click(function(){
$(this).hide();
});
13.
14. Effects
• jQuery makes it trivial to add simple effects to your
page. Effects can use the built-in settings, or provide
a customized duration. You can also create custom
animations of arbitrary CSS properties
• jQuery Effects
• Hide, Show, Toggle, Slide, Fade, and Animate.
jQuery hide() and show()
• With jQuery, you can hide and show HTML elements
with the hide() and show() methods:
15.
16. • jQuery toggle()
• With jQuery, you can toggle between the hide() and
show() methods with the toggle() method.
• jQuery Fading Methods
• With jQuery you can fade an element in and out of
visibility.
• jQuery has the following fade methods:
• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()
17.
18. • jQuery Sliding Methods
• With jQuery you can create a sliding effect on elements.
• jQuery has the following slide methods:
• slideDown()
• slideUp()
• slideToggle()
jQuery Effects – Animation
• The jQuery animate() method lets you create custom animations.
• Syntax:
• $(selector).animate({params},speed,callback);
jQuery stop() Method
• The jQuery stop() method is used to stop an animation or effect
before it is finished
• Syntax:
• $(selector).stop(stopAll,goToEnd);
19. Chaining
• Chaining allows us to run multiple jQuery
methods (on the same element) within a
single statement.
• that allows us to run multiple jQuery
commands, one after the other, on the same
element(s).
• Ex: $("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
20. DOM Manipulation
• DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML
documents:
"The W3C Document Object Model (DOM) is a platform
and language-neutral interface that allows programs and
scripts to dynamically access and update the content,
structure, and style of a document.“
Get Content - text(), html(), and val()
• Three simple, but useful, jQuery methods for DOM
manipulation are:
• text() - Sets or returns the text content of selected
elements
• html() - Sets or returns the content of selected elements
(including HTML markup)
• val() - Sets or returns the value of form fields
21. Add New HTML Content
We will look at four jQuery methods that are
used to add new content:
• append() - Inserts content at the end of the
selected elements
• prepend() - Inserts content at the beginning of
the selected elements
• after() - Inserts content after the selected
elements
• before() - Inserts content before the selected
elements
• remove() -method removes the selected
element(s) and its child elements.
22. Manipulating CSS
jQuery has several methods for CSS manipulation
• addClass() - Adds one or more classes to the
selected elements
• removeClass() - Removes one or more classes
from the selected elements
• toggleClass() - Toggles between adding/removing
classes from the selected elements
• css() - Sets or returns the style attribute
To set a specified CSS property, use the following
syntax:
• css("propertyname","value");
23. Dimensions
• jQuery has several important methods for
working with dimensions:
• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
24. Traversing
• jQuery traversing, which means "move
through", are used to "find" (or select) HTML
elements based on their relation to other
elements. Start with one selection and move
through that selection until you reach the
elements you desire.
• Three useful jQuery methods for traversing up
the DOM tree are:
• parent()
• parents()
• parentsUntil()
25. Plugins
• A jQuery plugin is simply a new method that we use to extend
jQuery's prototype object. By extending the prototype object
you enable all jQuery objects to inherit any methods that you
add. As established, whenever you call jQuery() you're creating a
new jQuery object, with all of jQuery's methods inherited.
• The idea of a plugin is to do something with a collection of
elements. You could consider each method that comes with the
jQuery core a plugin, like .fadeOut() or .addClass().
• Why to write plugin?
• Sometimes you want to make a piece of functionality available
throughout your code. For example, perhaps you want a single
method you can call on a jQuery selection that performs a series
of operations on the selection. Maybe you wrote a really useful
utility function that you want to be able to move easily to other
projects
26. ADVANTAGES AND DISADVANTAGES
Advantages:
• Ease of use
This is pretty much the main advantage of using JQuery, it is a lot more easy
to use compared to standard javascript and other javascript libraries. Apart
from simple syntax, it also requires much less lines of code to achieve the
same feature in comparison.
• Large library
JQuery enables you to perform hordes of functions in comparison to other
Javascript libraries.
• Strong opensource community. (Several jQuery plugins available)
JQuery, while relatively new, has a following that religiously devote their
time to develop and enhance the functionality of JQuery. Thus there are
hundreds of prewritten plugins available for download to instantly speed up
your development process. Another advantage behind this is the efficiency
and security of the script.
• Great documentation and tutorials
The JQuery website has a comprehensive documentation and tutorials to
get even an absolute beginner in programming to get the ball rolling with
this library.
• Ajax support
JQuery lets you develop Ajax templates with ease, Ajax enables a sleeker
interface where actions can be performed on pages without requiring the
entire page to be reloaded
27. Disadvantages
• Functionality maybe limited
While JQuery has an impressive library in terms of
quantity, depending on how much customization you
require on your website, functionality maybe limited
thus using raw javascript maybe inevitable in some
cases.
• JQuery javascript file required
The JQuery javascript file is required to run JQuery
commands, while the size of this file is relatively small
(25-100KB depending on server), it is still a strain on the
client computer and maybe your web server as well if
you intend to host the JQuery script on your own web
server.
