Scribd
Upload
5 views

Introduction_to_jQuery_with_Notes

The document provides an introduction to jQuery, a fast and feature-rich JavaScript library created in 2006 that simplifies DOM manipulation, event handling, animations, and AJAX. It covers core features, selectors, methods, event handling, effects, AJAX, and plugins, emphasizing jQuery's ease of use and cross-browser compatibility. While modern frameworks are gaining popularity, jQuery remains useful for quick solutions and maintaining legacy projects.

Uploaded by

AR Needyou
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Introduction_to_jQuery_with_Notes

The document provides an introduction to jQuery, a fast and feature-rich JavaScript library created in 2006 that simplifies DOM manipulation, event handling, animations, and AJAX. It covers core features, selectors, methods, event handling, effects, AJAX, and plugins, emphasizing jQuery's ease of use and cross-browser compatibility. While modern frameworks are gaining popularity, jQuery remains useful for quick solutions and maintaining legacy projects.

Uploaded by

AR Needyou
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

INTRODUCTION

TO JQUERY
PRESENTED BY

RUKAIYA AKRAM 22011556-052

HADIQA TUL ZAHRA 22011556-002

SYEDA AMINA BAQIR 22011556-049


INTRODUCTION TO JQUERY

• Created in 2006 by John Resig


• Fast, small, and feature-rich JavaScript library
• Simplifies DOM Manipulation, Event Handling,
Animations, and Ajax
CORE FEATURES OF JQUERY

• DOM Manipulation
• Event Handling
• AJAX Support
• Effects and Animations
• Cross-browser Compatibility
• Plugins
SELECTORS IN JQUERY

• Basic Selectors
• Hierarchy Selectors
• Attribute Selectors
FILTER SELECTORS IN JQUERY

• :first, :last
• :even, :odd
• :hidden, :visible
JQUERY VS. JAVASCRIPT:
SELECTORS
• By ID: $("#id01") vs.
document.getElementById("id01")
• By Tag Name: $("p") vs.
document.getElementsByTagName("p")
• By Class: $(".intro") vs.
document.getElementsByClassName("intro")
• By CSS Selector: $("p.intro") vs.
document.querySelectorAll("p.intro")
JQUERY METHODS

• jQuery methods are used to interact with and


manipulate HTML content, attributes, and CSS
properties.
COMMON JQUERY METHODS

Examples:
• html(), text(), val()
• attr(), removeAttr()
• css(), addClass(), removeClass()
MANIPULATING HTML

Example:
• $('#element').html('<p>New
Content</p>');
• $('#inputField').val('New Value');
DOM TRAVERSAL METHODS

Examples:
• parent(), children(), siblings()
Example:
$('#child').parent();
EVENT HANDLING IN JQUERY

• Event handling in jQuery allows responding to


user interactions like clicks, key presses, and
form submissions.
• Binding Events with on()
• Mouse Events
• Keyboard Events
• Form Events
COMMON EVENT TYPES

Examples:
• Mouse events: click(), hover()
• Keyboard events: keypress(), keyup()
• Form events: submit(), focus(), blur()
BINDING EVENTS

• The on() Method


Example:
• $('#button').on('click', function() {
alert('Button clicked!');
});
EVENT HANDLING EXAMPLE

Example of Click Event:


• $('#button').click(function() {
console.log('Button clicked');
});
JQUERY EFFECTS AND
ANIMATIONS
jQuery makes it easy to add visual effects with
minimal code.
• Basic Effects
• Fading Effects
• Sliding Effects
BASIC JQUERY EFFECTS

Examples:
• show(), hide(), toggle()
show(): Displays hidden elements. $
("button").click(function(){
$("p").show();
});
FADING EFFECTS

Examples:

• fadeIn(), fadeOut(), fadeToggle()


fadeOut(): Gradually hides an element. $
("button").click(function(){

$("p").fadeOut();

});
SLIDING EFFECTS

Examples:

• slideUp(), slideDown(), slideToggle()


slideDown(): Slides an element down (makes
it visible). $("button").click(function(){

$("p").slideDown();

});
CUSTOM ANIMATIONS

The animate() Method


• Example:
 $("button").click(function(){

$("div").animate({left: '250px'});

});
METHOD CHAINING

• Chaining Methods:
$
("#p1").css("color","red").slideUp(2000).slid
eDown(2000);
WHAT IS AJAX?

• AJAX stands for asynchronous JavaScript and XML


• AJAX ins’t programming language,. Rather it’s a set of
existing technologies.
• AJAX helps in fetching data asynchronously without
interfering with the existing page.
• No page reload/restore.
• Modern websites use JSON instead of XMLfor data
transfer.
 $.ajax() is used to perform HTTP requests (GET, POST, etc.)
 Example: $.ajax({ url: 'https://example.com/data', type:
'GET' })
WHY AJAX?

• No page reload/restore.
• Better use experience.
• Saves network bandwidth.
• Very interactive.
HOW IT WORKS?

• AJAX uses XMLHttpRequest object (also called


xhr object).
• Modern websites use JSON instead of XML for
data transfer.
• Data can be transferred in any format or
protocol (Not always Http necessarily).
PLUGINS IN JQUERY

• jQuery is famous for its plugins


• jQuery plugins extend the library's functionality.
• Plugins can be reused and are easy to integrate.
• Example: $('#element').pluginName()
EXAMPLE

• Adding a Map on a website:


• As there’s not coding, only map function is
plugged in, that’s why plugin is called so.
• Download map plugin file
• Call map plugin function
• Pass parameter with location.
As there’s not coding, only map function is plugged in,
that’s why plugin is called so.
JQUERY UI

• UI stands for user-interface i.e. the front end of the


website, where the user interacts.
• jQuery UI is a jQuery & javascript library.
• jQuery UI is built using JavaScript, jQuery and CSS;
especially meant to enhance user interface of our
websites.
• jQuery UI provides ready-to-use components for
interactive UIs.
• Common components: Datepicker, Dialog, Slider, Tabs.
BEST PRACTICES AND FUTURE
OF JQUERY
• Best Practices:
• Use the latest version of jQuery.
• Minimize jQuery in favor of native JS when possible.
• Future of jQuery: Modern frameworks (React, Vue) are
more popular.
CONCLUSION

• jQuery is a lightweight, feature-rich library that simplifies


DOM manipulation, event handling, and animations with
cross-browser compatibility.
• Its powerful selectors and methods make targeting and
manipulating HTML elements easier and more efficient.
• Features like AJAX, plugins, and jQuery UI extend
functionality and enable dynamic, interactive web
applications.
• While modern frameworks are more popular, jQuery remains
valuable for quick solutions and maintaining legacy projects.

You might also like