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.
