EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

jQuery Tutorial

Home » Software Development » Software Development Tutorials » jQuery Tutorial

Basic

What is jQuery?

Uses Of JQuery

How to Install Jquery?

jQuery Attributes

jQuery plugins

jQuery Widgets

Cheat sheet JQuery

jQuery Array

jQuery Array

jQuery array filter

jQuery array each

jQuery serializeArray

Effects

jQuery Effects

jQuery show( )

jQuery hide()

jQuery Hide Show

jQuery delay()

Slide in jQuery

Animate in jQuery

jQuery val()

jQuery slideUp()

jQuery fadeIn()

jQuery fadeOut()

jQuery fadeTo()

JQuery fadeToggle

jQuery toggle()

jQuery Slidetoggle()

jQuery slideDown()

JQuery Blur()

jQuery Chaining

jQuery is Visible

Events

jQuery Events

jQuery delegate( )

jQuery hover()

jQuery keydown()

jQuery keyup()

jQuery Keypress()

jQuery focus()

jQuery load()

jQuery onload

jQuery unload()

jQuery change()

jQuery mouseenter()

jQuery mouseover()

jQuery mousedown

jQuery mouseout()

jQuery mouseleave()

JQuery closest

jQuery ready

jQuery Slider

jQuery redirect

jQuery bind()

jQuery submit()

jQuery serialize()

JQuery noConflict

jQuery HTML/CSS

jQuery html()

jQuery Clone()

jQuery detach()

jQuery height()

jQuery innerHeight()

jQuery outerHeight()

jQuery wrapInner()

jQuery position()

jQuery draggable()

jQuery after()

jQuery remove()

jQuery prepend()

jQuery addClass()

jQuery wrapAll()

jQuery unwrap()

jQuery append()

jQuery toggleClass()

jQuery empty()

jQuery Outerwidth()

jQuery insertAfter()

jQuery innerWidth()

jQuery before()

jQuery appendTo()

jQuery text()

jQuery scrollTop()

jQuery scrollLeft

jQuery nextUntil

jQuery prev

jQuery undefined

jQuery Merge

jQuery has

jQuery prependTo

jQuery replaceAll

Jquery Confirm

Advanced

JQuery Modal

jQuery Select Value

jQuery Easing

jQuery replace string

jQuery Elements

JQuery attr()

jQuery next()

jQuery prop( )

jQuery wrap()

jQuery Timer

jQuery Parent

jQuery Methods

JQuery Progress Bar

jQuery Select Option

Types of Selector in JQuery

jQuery querySelector

jQuery checkbox Selector

jQuery id Selector

Callback Function in jQuery

jQuery Visibility 

Jquery IF Statement

jQuery siblings

Responsive Menu jQuery

JQuery InputMask

jQuery isNumeric

jQuery Validate

jQuery validate errorplacement

jQuery click preventDefault

jQuery replace div contents

jQuery Zoom

jQuery JSONP

jQuery getJSON()

jQuery Autocomplete

jQuery hasClass()

jQuery switchClass()

jQuery Datepicker

jQuery filter

jQuery find child

jQuery first child

jQuery children selector

jQuery trim

jQuery off

jQuery when

jQuery promise

jQuery index

jQuery indexOf

jQuery zindex

jQuery width

jQuery JSON encode

jQuery background color

jQuery extend

jQuery Reference

jQuery contains

jQuery Tooltip

jQuery Sortable

jQuery Data Table

jQuery Disable Button

Form

jQuery Form Validation

jQuery UI

jQuery UI

jQuery UI effect()

jQuery UI Button

jQuery UI Tabs

jQuery UI Dialog

jQuery UI Selectmenu

jQuery UI Selectable

jQuery UI Droppable

Interview Questions

jQuery Interview Questions

jQuery Ajax

jQuery Ajax Methods

jQuery ajax upload file

jQuery ajax timeout

jQuery ajax headers

jQuery ajax beforeSend

jQuery Tutorial

This tutorial is designed to guide you to learn jQuery from the scratch. jQuery is a JavaScript library that has simplified JavaScript programming. It has also contributed towards simplification of HTML document traversing, event handling, animation and AJAX interaction etc.

This tutorial aims to cover all the topics about jQuery providing wide range of examples, for easy and fast understanding.

Why do we need to learn jQuery?

Web technology is becoming essential sustain in the digital era. Hence the demand for jobs for this platform is also booming. Especially it is useful when you work with:

  • WordPress or similar content management system
  • Any legacy code which depends on jQuery
  • App or browser which targets on old browsers

jQuery come very handy. Hence it makes development, cost-effective, as this library comes free. It is light and small in size and hence server response time gets reduced. It can be integrated with visual studio IDE easily which enable us to update libraries, tools for visual studio projects that use .net framework. Hence it has been popular among .net developers.

Hence, if you are planning to build your career with web technology (especially useful for front-end development) which is high in demand nowadays in IT industry, definitely learning jQuery will add to your skill.

Applications of jQuery

jQuery is a lightweight JavaScript library which is included just in a single .js file. Yet it provides many built-in functions which enable the tasks to be accomplished easily and quickly. It is suitable:

  • To develop Ajax-based applications.
  • To make, creating special effects on the web, simple and fast, by means of various plugins that are available with jQuery.
  • To enrich the site with responsive and featured behavior to make the site interactive, attractive and user-friendly using its built-in animation effects.
  • To get cross-browser support for web applications
  • To develop SEO (Search engine optimized) sites.
  • To work with content management systems such as WordPress.
  • To have easy client-side scripting of HTML
  • To achieve fast loading webpage design

Example

Here is small example which illustrates about using jQuery with HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("Click event is called.");
});
});
</script>
</head>
<body>
<p>Click here.</p>
</body>
</html>

Output:

Screen1: When the page is loaded.

When the page is loaded

Screen2: The session’Click here’ is clicked.

session’Click here’

Prerequisites

jQuery is easy to learn. Yet it is advisable to get some know-what about HTML, CSS and Document object model(DOM) to speed up the learning. Having knowledge about JavaScript programming and the use of any text editor, knowing about how internet and web applications work- is an additional advantage.  Try out developing some sample projects to get some hands-on experience. It will make your learning jQuery easy and fast.

Target Audience

This tutorial is designed for beginners as well as for professionals. If you are a beginner, you can start your learning from scratch. If you are professional and looking for additional information about jQuery in-depth, you have reached at the right place!

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) Learn More