Home >>jQuery Tutorial

jQuery Tutorial

jQuery Tutorial

jQuery is known as the fastest and most concise JavaScript library and this jQuery tutorial for beginners will provide you the desired knowledge about this technology. The creator of this JavaScript Library is John Resig, he created this library in the year 2006 and since then it is simplifying the HTML document traversing, animating, event handling and the Ajax interactions for Rapid Web Development.

Let's get to know that for whom this tutorial is beneficial and what the prerequisites is that should be known to grasp the most of this jQuery Tutorial

What is jQuery?

As discussed above, jQuery is basically a JavaScript Library that has been created by John Resig in the year 2006 and it is known to be one of the fastest and concise JavaScript libraries. The motto of the creator behind developing it was extremely simple that consists of the idea of less code and more output. This is basically simple toolkit of the JavaScript that is designed in order to simplify different tasks by the method of less written code.

Features supported by the jQuery

Here are some of the most important core features that are supported by this library:

  • Event Handling : An extremely extraordinary way is offered by the jQuery to capture a wide array of events like a click on the link by the user. And this excludes the need of cluttering the HTML code in itself with the event handlers.
  • Lightweight : This library is known to be the lightest weighted library of the programming language world. It’s about 19 KB in size.
  • AJAX Support : A website that is most responsive and feature rich can be built using AJAX technology and this library helps you a lot in doing this.
  • DOM Manipulation : With this library, now it is easy to select DOM elements, negotiate them and do some modification in their content by the use of Sizzle that is basically a cross-browser open source selector engine.
  • Animations : There are plenty of animations that are built-in this library and can be used in developing one's website.
  • Latest Technology : This is the latest technology in the field as it supports the basic XPath syntax and the CSS3 selectors.
  • Cross Browser Support :This library offers cross-browser support as it is compatible with various browsers like IE6.0+, Chrome, Opera9.0+ and Safari 3.0+.

Let's understand to use the jQuery

There are basically two main ways by which this library can be used:

  • Local Installation : This can be downloaded your local machine and can be included in your HTML code.
  • CDN Based Version : This library can be downloaded in to the HTML code of yours directly from the Content Delivery Network (CDN).

1. Local Installation

In order to install this through local installation please follow these steps:

  • Log on to the website https://jquery.com/download/ in order to download the latest version of the jQuery.
  • After the file is downloaded, put this jquery-2.1.3.min.js file in the directory of your website.

2. CDN Based Version

This Library can be included in to the HTML code directly from the Content Delivery Network (CDN). The latest version of the content deliver is provided by the Microsoft and Google.

PHPTPOINT is the most leading tutorial website that is known for its excellent content of the various subjects. It is referred as the most preferred jQuery tutorial point on the web. Learn our jQuery tutorial for beginners that is in depth of the topic and delivers you the knowledge and facts along with examples on every case possible that will make you a competent learner of jQuery. Along with jQuery tutorial, our website have all the major programming language's tutorial including the AJAX Tutorial.

Here is a simple example of the jQuery for your understanding that will give you an idea about the nature of the jQuery:

 <html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>
 

Audience

Any tutorial is designed on the base of the audiences of the subject matter. This tutorial is developed by the subject matter experts having prestigious experience on the subject and hence, the software programmers can learn jQuery from the basics and understand its programming concepts in extremely simple method. This tutorial consists of the descriptive examples and all the components of the depicted language or JavaScript Library.

Prerequisite

There are certain things that the students of this tutorial should have learned first in order to grasp every word of this tutorial and increase their efficiency to the optimum. The things in the prerequisite includes: HTML (basic level), JavaScript, Document Object Model (DOM), Text editor (it be any of them), and CSS. These applications or languages are required for this tutorial as through this tutorial you are stepping a level up in the development of web based application using this JavaScript Library hence, the outcome will be incredibly fruitful if you have the understanding of the above-mentioned languages.


jQuery Tutorial Index

Sr.No. Topics
1 jQuery History
2 jQuery Example
3 jQuery Selectors
4 jQuery – Effects
5 jQuery animate() Method
6 jQuery delay() Method
7 jQuery dequeue() Method
8 jQuery fadeIn() Method
9 jQuery fadeOut() Method
10 jQuery fadeTo() method
11 jQuery clearQueue() Method
12 jQuery fadeToggle() Method
13 jQuery finish() Method
14 jQuery hide() Method
15 jQuery show() Method
16 jQuery slideDown() Method
17 jQuery slideToggle() Method
18 jQuery slideUp() Method
19 jQuery stop() Method
20 jQuery toggle() Method
21 jQuery queue() Method
22 jQuery HTML / CSS Methods
23 jQuery addClass() Method
24 jQuery after() Method
25 jQuery append() Method
26 jQuery appendTo() Method
27 jQuery attr() Method
28 jQuery before() Method
29 jQuery clone() Method
30 jQuery css() Method
31 jQuery detach() Method
32 jQuery empty() Method
33 jQuery hasClass() Method
34 jQuery height() Method
35 jQuery innerHeight() Method
36 jQuery innerWidth() Method
37 jQuery insertAfter() Method
38 jQuery insertBefore() Method
39 jQuery offset() Method
40 jQuery offsetParent() Method
41 jQuery html() Method
42 jQuery outerHeight() Method
43 jQuery outerWidth() Method
44 jQuery position () Method
45 jQuery prepend() Method
46 jQuery prependTo() Method
47 jQuery prop() Method
48 jQuery remove() Method
49 jQuery removeAttr() Method
50 jQuery removeClass() Method
51 jQuery removeProp() Method
52 jQuery replaceAll() Method
53 jQuery replaceWith() Method
54 jQuery scrollTop() Method
55 jQuery scrollLeft() Method
56 jQuery text() Method
57 jQuery val() Method
58 jQuery wrapInner() Method
59 jQuery toggleClass() Method
60 jQuery unwrap() Method
61 jQuery width() Method
62 jQuery wrap() Method
63 jQuery wrapAll() Method
64 jQuery Events
65 jQuery click() Events
66 jQuery bind() Events
67 jQuery blur() Events
68 jQuery change() Events
69 jQuery dblclick() Events
70 jQuery delegate() Events
71 jQuery event.currentTarget Property
72 jQuery event.data Property
73 jQuery event.isDefaultPrevented() Method
74 jQuery event.isImmediatePropagationStopped() Method
75 jQuery event.isPropagationStopped() Method
76 jQuery event.namespace Property
77 jQuery event.pageX() Property
78 jQuery event.pageY() Property
79 jQuery event.preventDefault() Method
80 jQuery event.relatedTarget Property
81 jQuery event.result Property
82 jQuery event.stopPropagation() Method
83 jQuery event.stopImmediatePropagation() Method
84 jQuery event.target Property
85 jQuery event.timeStamp Properties
86 jQuery event.type Property
87 jQuery event.which Properties
88 jQuery focus() Method
89 jQuery focusin() Method
90 jQuery focusout() Method
91 jQuery hover() Method
92 jQuery keydown() Method
93 jQuery keypress() Method
94 jQuery keyup() Method
95 jQuery live() Method
96 jQuery mousedown() Method
97 jQuery mouseenter() Method
98 jQuery mouseleave() Method
99 jQuery mousemove() Method
100 jQuery mouseout() Method
101 jQuery mouseover() Method
102 jQuery mouseup() Method
103 jQuery $.proxy() Method
104 jQuery off() Method
105 jQuery on() Method
106 jQuery one() Method
107 jQuery ready() Method
108 jQuery resize() Method
109 jQuery scroll() Method
110 jQuery select() Method
111 jQuery submit() Method
112 jQuery toggle() Property
113 jQuery trigger() Method
114 jQuery triggerHandler() Method
115 jQuery Selector Lists
116 jQuery #id Selector
117 jQuery * Selector
118 jQuery .class Selector
119 jQuery multiple classes Selector
120 jQuery element Selector
121 jQuery multiple elements Selector
122 jQuery :first Selector
123 jQuery :last Selector
124 jQuery :even Selector
125 jQuery :odd Selector
126 jQuery :first-child Selector
127 jQuery :first-of-type Selector
128 jQuery :last-child Selector
129 jQuery :last-of-type Selector
130 jQuery :nth-child() Selector
131 jQuery :nth-last-child() Selector
132 jQuery :nth-of-type() Selector
133 jQuery :nth-last-of-type() Selector
134 jQuery :only-child Selector
135 jQuery :only-of-type Selector
136 parent < child
137 jQuery Parent Descendant Selector
138 jQuery element + next Selector
139 jQuery element ~ siblings Selector
140 jQuery :eq() Selector
141 jQuery :gt() Selector
142 jQuery :lt() Selector
143 jQuery :header Selector
144 jQuery :not() Selector
145 jQuery :animated Selector
146 jQuery :focus Selector
147 jQuery :contains() Selector
148 jQuery :has() Selector
149 jQuery :empty Selector
150 jQuery Parent Selector
151 jQuery hidden Selector
152 jQuery visible Selector
153 jQuery root Selector
154 jQuery lang() Selector
155 jQuery attribute Selector
156 jQuery [attribute=value] Selector
157 jQuery [attribute!=value] Selector
158 jQuery [attribute$=value] Selector
159 jQuery [attribute|=value] Selector
160 jQuery [attribute^=value] Selector
161 jQuery [attribute~=value] Selector
162 jQuery :input Selector
163 jQuery :text Selector
164 jQuery [attribute*=value] Selector
165 jQuery Password Selector
166 jQuery radio Selector
167 jQuery checkbox Selector
168 jQuery submit Selector
169 jQuery reset Selector
170 jQuery button Selector
171 jQuery image Selector
172 jQuery file Selector
173 jQuery enabled Selector
174 jQuery disabled Selector
175 jQuery selected Selector
176 jQuery checked Selector
177 jQuery Traversing Methods
178 jQuery add() Method
179 jQuery children() Method
180 jQuery closest() Method
181 jQuery contents() Method
182 jQuery each() Method
183 jQuery eq() Method
184 jQuery filter() Method
185 jQuery find() Method
186 jQuery first() Method
187 jQuery has() Method
188 jQuery is() Method
189 jQuery last() Method
190 jQuery next() Method
191 jQuery nextAll() Method
192 jQuery nextUntil() Method
193 jQuery not() Method
194 jQuery parent() Method
195 jQuery parents() Method
196 jQuery parentsUntil() Method
197 jQuery prev() Method
198 jQuery prevAll() Method
199 jQuery prevUntil() Method
200 jQuery siblings() Method
201 jQuery slice() Method
202 jQuery AJAX Methods
203 jQuery $.ajax() Method
204 jQuery $.ajaxSetup() Method
205 jQuery $.get() Method
206 jQuery $.getJSON() Method
207 jQuery $.getScript() Method
208 jQuery $.param() Method
209 jQuery $.post() Method
210 jQuery ajaxComplete() Method
211 jQuery ajaxError() Method
212 jQuery ajaxSend() Method
213 jQuery ajaxStart() Method
214 jQuery ajaxStop() Method
215 jQuery ajaxSuccess() Method
216 jQuery load() Method
217 jQuery serialize() Method
218 jQuery serializeArray() Method