J query presentation
28
jQuery is a JavaScript Library -By Akanksha Sawarkar
-
Upload
sawarkar17 -
Category
Technology
-
view
411 -
download
0
Transcript of J query presentation
jQuery is a JavaScript Library
-By Akanksha Sawarkar
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.
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.
Features & Benefits with JQuery
• The jQuery library contains the following features:• HTML/DOM manipulation• CSS manipulation• HTML event methods• Effects and animations• AJAX• Utilities
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
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
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...});
• 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".
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(); });});
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.10.2/jquery.min.js"></script><script src="my_jquery_functions.js"></script></head>
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
• 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();});
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:
• 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()
• 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);
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);
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
Add New HTML ContentWe 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.
Manipulating CSSjQuery 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 attributeTo set a specified CSS property, use the following syntax:
• css("propertyname","value");
Dimensions• jQuery has several important methods for
working with dimensions:• width()• height()• innerWidth()• innerHeight()• outerWidth()• outerHeight()
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()
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
ADVANTAGES AND DISADVANTAGESAdvantages:
• Ease of useThis 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 libraryJQuery 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 tutorialsThe 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 supportJQuery 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
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 requiredThe 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.
Thank You
