Jquery PPT_Finalfgfgdfgdr5tryeujkhdwappt

 jQuery is a library of JavaScript Functions.
 jQuery is a lightweight "write less, do more"
JavaScript library.
 The jQuery library contains the following features:
◦ HTML element selections
◦ HTML element manipulation
◦ CSS manipulation
◦ HTML event functions
◦ JavaScript Effects and animations
◦ HTML DOM traversal and modification
◦ AJAX
◦ Utilities
What is jQuery?

 jQuery is the most popular JavaScript framework.
 jQuery is designed to change the way that you
write JavaScript (jQuery website
http://jquery.com/)
 jQuery is a fast and concise JavaScript Library that
simplifies HTML document traversing, event
handling, animating, and Ajax interactions for
rapid web development.
What is jQuery?

 You write less code - what would take 20 lines
or more of JavaScript can be achieved in just
two or three lines of jQuery.
 The same code runs in all browsers - there's no
need to write special code for Internet Explorer.
 It uses CSS selectors, leveraging knowledge
that most web designers already have.
What is jQuery?

 jQuery is a JavaScript Library.
 jQuery greatly simplifies JavaScript
programming.
 jQuery is easy to learn.
What is jQuery?

 The jQuery library is stored as a single
JavaScript file, containing all the jQuery
methods.
 It can be added to a web page with the
following mark-up:
<head>
<script type="text/javascript"
src="jquery.js"></script>
</head>
Adding the jQuery Library to Your
Pages

 Adobe Dreamweaver has full code hinting for
jQuery, making it even easier to use.
jQuery and DreamWeaver

 jQuery Mobile (https://jquerymobile.com/)
 Backbone.js (http://backbonejs.org/)
 Node.js (https://nodejs.org/en/)
 Express.js (http://expressjs.com/en/index.html)
 Underscore.js (http://underscorejs.org/)
 AngularJS (https://angularjs.org/)
 CoffeeScript (http://coffeescript.org/)
 Prototype (http://www.prototypejs.org/)
 Dojo Toolkit (http://dojotoolkit.org/)
 Moo Tools (http://mootools.net/)
 Yahoo! UI Library (http://yuilibrary.com/)
 Adobe Spry framework (http://labs.adobe.com/technologies/spry/)
Other JavaScript Libraries

 jQuery works in all current browsers, including
Internet Explorer 6+, Firefox 2+, Safari 3+,
Chrome, and Opera 9+.
 It's free, open source code dual-licensed under
the MIT License and
GNU General Public License.
Why jQuery?

 It's estimated that three out of every four
websites that use a JavaScript library have
adopted jQuery.
 Leading companies that use jQuery include
Amazon.com, Bank of America, BBC, and
Twitter.
 It's relatively easy to learn.
Why jQuery?

 Link to the latest version of the library hosted on
a content distribution network (CDN).
 Download a copy of the library and store it with
the files in your own site.
 Details of both methods can be found at jQuery
docs (
http://docs.jquery.com/Downloading_jQuery)
How to get jQuery

<p>This paragraph is part of the original
HTML markup.</p>
<script type="text/javascript" src="js/jquery-
2.1.4.min.js"></script>
</body>
Linking to JQuery Library

$(document).ready(function(){
});
</script>
Document Ready Handler
Long Version

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
Try it yourself
Example 1

<html>
<head>
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Basic jQuery Example
Example 2

 Two versions of jQuery are available for
downloading: one minimalised and one
uncompressed (for debugging or reading).
 Both versions can be downloaded from
jQuery.com
Downloading jQuery

 If you don't want to store the jQuery library on
your own computer, you can use the hosted
jQuery library from Google or Microsoft.
 Google
<head>
src="http://ajax.googleapis.com/ajax/libs/jq
uery/1.4.2/jquery.min.js"></script>
</head>
Alternatives to Downloading

 Microsoft
<head>
src="http://ajax.microsoft.com/ajax/jque
ry/jquery-1.4.2.min.js"></script>
</head>
Alternatives to Downloading

 The jQuery syntax is tailor made for selecting HTML
elements and perform some action on the element(s).
 Basic syntax is: $(selector).action()
◦ A dollar sign to define jQuery
◦ A (selector) to "query (or find)" HTML elements
◦ A jQuery action() to be performed on the element(s)
jQuery Syntax

Examples:
 $(this).hide() - hides current element.
 $("p").hide() - hides all paragraphs
 $("p.test").hide() - hides all paragraphs with
class="test"
 $("#test").hide() - hides the element with id="test”
jQuery Syntax

 All jQuery methods are inside a document.ready()
function:
◦ $(document).ready(function(){
// jQuery functions go here...
})
 This is to prevent any jQuery code from running before
the document is finished loading (is ready).
The Document Ready Function

 Here are some examples of actions that can fail
if functions are run before the document is fully
loaded:
◦ Trying to hide an element that doesn't exist
◦ Trying to get the size of an image that is not loaded
The Document Ready Function

 jQuery selectors allow you to select and
manipulate HTML elements as a group or as a
single element.
 jQuery selectors are required at every step while
using jQuery. Selectors allow you to get the exact
element/attribute you want from your HTML
document.
 jQuery supports the existing CSS Selectors, and in
addition, it has some own custom selectors.
 All type of selectors in jQuery, start with the dollar
sign and parentheses: $().
jQuery Selectors

 $("*") selects all elements
 $("p") selects all <p> elements
 $("p.intro") selects all <p> elements with class="intro"
 $("p#intro") selects the first <p> elements with
id="intro"
 $(":animated") selects all elements that are currently
animated
 $(":button") selects all <button> elements and
<input> elements of type="button"
 $(":even") selects even elements
 $(":odd") selects odd elements
Examples of jQuery Selectors

 The jQuery event handling methods are core
functions in jQuery.
 Event handlers are methods that are called
when "something happens" in HTML. The term
"triggered (or "fired") by an event" is often
used.
 It is common to put jQuery code into event
handler methods in the <head> section:
jQuery Event Functions

<html>
<head>
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

 In the example above, a function is called when
the click event for the button is triggered:
$("button").click(function() {..some code... } )
 The method hides all <p> elements:
$("p").hide();

 If your website contains a lot of pages, and you
want your jQuery functions to be easy to
maintain, put your jQuery functions in a
separate .js file:
<head>
src="my_jquery_functions.js"></script>
</head>
Functions In a Separate File

Jquery PPT_Finalfgfgdfgdr5tryeujkhdwappt

More Related Content

Similar to Jquery PPT_Finalfgfgdfgdr5tryeujkhdwappt (20)

More from shubhangimalas1 (8)

Recently uploaded (20)

Jquery PPT_Finalfgfgdfgdr5tryeujkhdwappt