JQuery - Tutorialspoint
jQueryi
jQueryAbout the TutorialjQuery is a fast and concise JavaScript library created by John Resig in 2006. jQuerysimplifies HTML document traversing, event handling, animating, and Ajax interactions forRapid Web Development.AudienceThis tutorial is designed for software programmers who wants to learn the basics of jQueryand its programming concepts in simple and easy ways. This tutorial will give you enoughunderstanding on components of jQuery with suitable examples.PrerequisitesBefore proceeding with this tutorial, you should have a basic understanding of HTML, CSS,JavaScript, Document Object Model (DOM) and any text editor. As we are going to developweb based application using jQuery, it will be good if you have understanding on howinternet and web based applications workCopyright & Disclaimer Copyright 2015 by Tutorials Point (I) Pvt. Ltd.All the content and graphics published in this e-book are the property of Tutorials Point (I)Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republishany contents or a part of contents of this e-book in any manner without written consentof the publisher.We strive to update the contents of our website and tutorials as timely and as precisely aspossible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of ourwebsite or its contents including this tutorial. If you discover any errors on our website orin this tutorial, please notify us at contact@tutorialspoint.comi
jQueryTable of ContentsAbout the Tutorial . iAudience . iPrerequisites . iCopyright & Disclaimer. iTable of Contents . ii1.OVERVIEW. 1What is jQuery? . 1How to use jQuery? . 1Local Installation . 2CDN Based Version . 2How to Call a jQuery Library Functions? . 3How to Use Custom Scripts?. 4Using Multiple Libraries . 5What is Next ? . 62.BASICS . 7String . 7Numbers . 7Boolean . 7Objects . 8Arrays. 8Functions . 8Arguments . 9Context . 9Scope . 10Callback . 10ii
jQueryClosures . 11Proxy Pattern . 12Built-in Functions . 12The Document Object Model . 133.SELECTORS . 15The () Factory Function . 15How to Use Selectors?. 17jQuery - Element Name Selector . 17jQuery - Element ID Selector . 19jQuery - Element Class Selector . 20jQuery - Universal Selector . 22jQuery - Multiple Elements Selector . 24Selectors Examples . 264.JQUERY ATTRIBUTES. 31Get Attribute Value . 31Set Attribute Value. 32Applying Styles . 33Attribute Methods . 34attr( properties ) Method . 35attr( key, func ) Method . 37removeAttr( name ) Method . 39hasClass( class ) Method . 40removeClass( class ) Method . 42toggleClass( class ) Method . 43html( ) Method . 44html( val ) Method . 46text( ) Method . 47iii
jQuerytext( val ) Method . 48val( ) Method . 50val( val ) Method . 515.DOM TRAVERSING . 55Find Elements by Index . 55Filtering Out Elements . 57Locating Descendent Elements . 58JQuery DOM Filter Methods . 59eq( index ) Method. 60filter( selector ) Method . 61filter( fn ) Method . 63is( selector ) Method . 64map( callback ) Method. 66not( selector ) Method . 68slice( start, end ) Method . 70JQuery DOM Traversing Methods . 71add( selector ) Method . 73andSelf( ) Method . 75children( [selector] ) Method . 76closest( selector ) Method . 77contents( ) Method . 79end( ) Method . 80find( selector ) Method . 81next( [selector] ) Method . 83nextAll( [selector] ) Method . 84offsetParent() Method . 85parent( [selector] ) Method . 86iv
jQueryparents( [selector] ) Method . 88prev( [selector] ) Method . 89prevAll( [selector] ) Method . 91siblings( [selector] ) Method . 926.CSS SELECTOR METHODS . 94Apply CSS Properties . 94Apply Multiple CSS Properties . 94Setting Element Width & Height . 96JQuery CSS Methods . 97css( name ) Method . 98css( name, value ) Method . 100css( properties ) Method . 101height( val ) Method. 103height( ) Method . 105innerHeight( ) Method . 106innerWidth( ) Method . 108offset( ) Method . 110offsetParent( ) Method . 112outerHeight( [margin] ) Method . 114outerWidth( [margin] ) Method . 116position( ) Method . 118scrollLeft( val ) Method . 120scrollLeft( ) Method . 121scrollTop( val ) Method . 123scrollTop( ) Method . 125width( val ) Method . 128width( ) Method . 129v
jQuery7.DOM MANIPULATION. 132Content Manipulation . 132DOM Element Replacement . 133Removing DOM Elements . 135Inserting DOM Elements . 136DOM Manipulation Methods . 138after( content ) Method . 140append( content ) Method . 141appendTo( selector ) Method . 143before( content ) Method . 144clone( bool ) Method . 146clone( ) Method. 148empty( ) Method . 149html( val ) Method . 151html( ) Method . 152insertAfter( selector ) Method . 155insertBefore( selector ) Method . 157prepend( content ) Method . 159prependTo( selector ) Method . 160remove( expr ) Method . 162replaceAll( selector ) Method . 164replaceWith( content ) Method . 165text( val ) Method . 167text( ) Method . 169wrap( elem ) Method . 172wrap( html ) Method . 174wrapAll( elem ) Method . 175vi
jQuerywrapAll( html ) Method. 177wrapInner( elem ) Method . 179wrapInner( html ) Method . 1818.EVENTS HANDLING . 184Binding Event Handlers . 184Removing Event Handlers . 186Event Types . 186The Event Object . 188The Event Attributes . 188The Event Methods . 191preventDefault() Method . 192isDefaultPrevented() Method. 193stopPropagation() Method . 195isPropagationStopped() Method . 196stopImmediatePropagation() Method. 198isImmediatePropagationStopped() Method . 200Event Manipulation Methods . 202bind( type, [data], fn ) Method . 203off( events [, selector ] [, handler(eventObject) ] ) Method . 205hover( over, out ) Method . 207on( events [, selector ] [, data ], handler ) Method . 208one( type, [data], fn ) Method . 210ready( fn ) Method . 212trigger( event, [data] ) Method . 213triggerHandler( event, [data] ) Method . 215unbind( [type], [fn] ) Method . 216Event Helper Methods . 218vii
jQueryTrigger Methods . 218Binding Methods . 2189.AJAX . 222Loading Simple Data . 222Getting JSON Data . 223Passing Data to the Server . 225JQuery AJAX Methods . 226JQuery AJAX Events . 24910. EFFECTS . 264Showing and Hiding Elements . 264Toggling the Elements . 266JQuery Effect Methods . 267UI Library Based Effects . 300viii
1. OVERVIEWjQueryWhat is jQuery?jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nicemotto: Write less, do more. jQuery simplifies HTML document traversing, event handling,animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkitdesigned to simplify various tasks by writing less code. Here is the list of important corefeatures supported by jQuery: DOM manipulation: The jQuery made it easy to select DOM elements, negotiate themand modifying their content by using cross-browser open source selector engine calledSizzle. Event handling: The jQuery offers an elegant way to capture a wide variety of events,such as a user clicking on a link, without the need to clutter the HTML code itself withevent handlers. AJAX Support: The jQuery helps you a lot to develop a responsive and feature-richsite using AJAX technology. Animations: The jQuery comes with plenty of built-in animation effects which you canuse in your websites. Lightweight: The jQuery is very lightweight library - about 19KB in size (Minified andgzipped). Cross Browser Support: The jQuery has cross-browser support, and works well inIE 6.0 , FF 2.0 , Safari 3.0 , Chrome and Opera 9.0 Latest Technology: The jQuery supports CSS3 selectors and basic XPath syntax.How to use jQuery?There are two ways to use jQuery. Local Installation You can download jQuery library on your local machine andinclude it in your HTML code. CDN Based Version You can include jQuery library into your HTML code directlyfrom Content Delivery Network (CDN).9
jQueryLocal Installation Go to the https://jquery.com/download/ to download the latest version available. Now, insert downloaded jquery-2.1.3.min.js file in a directory of your website, e.g./jquery.ExampleNow, you can include jquery library in your HTML file as follows: html head title The jQuery Example /title script type "text/javascript" src "/jquery/jquery-2.1.3.min.js" /script script type "text/javascript" (document).ready(function(){document.write("Hello, World!");}); /script /head body h1 Hello /h1 /body /html This will produce the following result Hello, World!10
jQueryCDN Based VersionYou can include jQuery library into your HTML code directly from Content Delivery Network(CDN). Google and Microsoft provides content deliver for the latest version.We are using Google CDN version of the library throughout this tutorial.ExampleNow let us rewrite above example using jQuery library from Google CDN. html head title The jQuery Example /title script type "text/javascript"src /jquery.min.js" /script script type "text/javascript" (document).ready(function(){document.write("Hello, World!");}); /script /head body h1 Hello /h1 /body /html This will produce the following result:Hello, World!11
jQueryHow to Call a jQuery Library Functions?As almost everything, we do when using jQuery reads or manipulates the document o
jQuery i About the Tutorial jQuery is a fast and concise JavaScript library created by John Resig in 2006. jQuery simplifies H
Chapter 1: Getting started with jQuery 2 Remarks 2 Versions 2 Examples 3 jQuery Namespace ("jQuery" and " ") 3 Getting Started 3 Explanation of code 4 Include script tag in head of HTML page 5 Avoiding namespace collisions 6 Loading jQuery via console on a page that does not have it. 8 The jQuery Object 8 Loading namespaced jQuery plugins 8 .
jQuery is the starting point for writing any jQuery code. It can be used as a function jQuery(.) or a variable jQuery.foo. is an alias for jQuery and the two can usually be interchanged for each other (except where jQuery.noConflict(); has been used - see Avoiding namespace collisions). Assuming we have this snippet of HTML -
jQuery is the starting point for writing any jQuery code. It can be used as a function jQuery(.) or a variable jQuery.foo. is an alias for jQuery and the two can usually be interchanged for each other (except where jQuery.noConflict(); has been used - see Avoiding namespace collisions). Assuming we have this snippet of HTML -
To get started with the jQuery UI library, you'll need to add the jQuery script, the jQuery UI script, and the jQuery UI stylesheet to your HTML. First, download jQuery UI; choose the features you need on the download page.
browsers. However, the jQuery team has taken care of this for us, so that we can write AJAX functionality with only one single line of code jQuery - AJAX load() Method jQuery load() Method The jQuery load() method is a simple, but powerful AJAX method. The load() method loads data from a server and puts the returned data into the selected element.
jQuery UI 1.8.16 jQuery Timepicker Addon 1.4.5 jquery-2.1.0 jQuery-ui-1.10.4 jquery-2.1.0 jQuery.event.drag - v 2.2 . WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH T
elements to operate upon with the jQuery library methods. Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips. A jQuery statement typically follows the syntax pattern: by any sibling of tag name E. (selector).methodName();
Implementing JQuery Plugins Implementing jQuery plugins into your site is fairly easy, and as you move through this lecture, you'll notice a pattern in implementing a jQuery plugin. Once you link to the the main jQuery library in your HTML document, using a plugin usually involves the following steps: 1.
