Web Programming
jQuery
jQuery
INTRODUCTION:
jQuery is a lightweight, "write less, do more",
JavaScript library
The purpose of jQuery is to make it much easier
to use JavaScript on your website.
jQuery takes a lot of common tasks that require
many lines of JavaScript code to accomplish, and
wraps them into methods that you can call with a
single line of code.
The jQuery library contains the following
features
HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
jQuery Syntax
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the
element(s)
• Examples:
• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with
class="test".
Starting JQurey
This is very simple to request setup to use jquery
library.
Go to the download page of http://jquery.com
Production version - this is for your live website
because it has been minified and compressed
Development version - this is for testing and
development (uncompressed and readable code)
jQuery latest virsion is jquery 3.4.1
Example program
• <!DOCTYPE html>
• <html>
• <head>
• <script type=“text/javascript” src=“js/jquery-1.11.1.min.js"></script>
• <script type=“text/javascript”>
• $(document).ready(function()
• {
• $("p").hide();
• });
• </script>
• </head>
• <body>
• <h2>This is a heading</h2>
• <p>This is a paragraph.</p>
• </body>
• </html>
output
Document Ready Event
• You might have noticed that all jQuery
methods in our examples, are inside a
document ready event:
• $(document).ready(function()
Jquery selector
jQuery selectors are one of the most
important part of the Jquery library.
jQuery selectors are used to “find”(or Select)
HTML elementsbased on their
id,classes,types,attributes and much more.
Jquery start with dollar sign and parentheses:$
()
Type of selector
The element Selector:
• The jQuery element selector selects elements based
on the element name.
• You can select all <p> elements on a page like this:
• $("p")
• For example for first program
The #id Selector
• The jQuery #id selector uses the id attribute of
an HTML tag to find the specific element.
• $("#test")
• When a user clicks on a button, the element
with id="test" will be hidden
.class selector
• The jQuery .class selector finds elements with
a specific class.
• To find elements with a specific class
• $(".test")
• When a user clicks on a button, the elements
with class="test" will be hidden:
Example program
• <!DOCTYPE html>
• <html>
• <head>
• <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
• <script>
• $(document).ready(function(){
• $("button").click(function(){
• $(".test").hide();
• });
• });
• </script>
• </head>
• <body>
• <h2 class="test">This is a heading</h2>
• <p class="test">This is a paragraph.</p>
• <p>This is another paragraph.</p>
• <button>Click me</button>
• </body>
• </html>
output
Other selectors
• $("*") Selects all elements
• $(this) Selects the current HTML element
• $("p:first") Selects the first <p> element
• $("p.intro") Selects all <p> elements with
class="intro"
jQuery Event
• All the different visitors' actions that a web
page can respond to are called events.
• Examples:
• moving a mouse over an element
• selecting a radio button
• clicking on an element
jQuery Event Methods
$(document).ready():
method allows us to execute a function when the
document is fully loaded.
click()
The function is executed when the user clicks on the
HTML element.
EX:
$("p").click(function(){
$(this).hide();
});
dblclick()
The dblclick() method attaches an event handler
function to an HTML element.
Mouseenter()
The mouseenter() method attaches an event handler
function to an HTML element.
mouseleave()
The mouseleave() method attaches an event handler
function to an HTML element.
Mousedown()
The mousedown() method attaches an event handler
function to an HTML element.
mouseup()
The mouseup() method attaches an event handler
function to an HTML element.
hover()
The hover() method takes two functions and is a
combination of
the mouseenter() and mouseleave() methods.
blur()
The blur() method attaches an event handler function
to an HTML form field.
• <!DOCTYPE html>
Example program
• <html>
• <head>
• <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
• <script>
• $(document).ready(function(){
• $("p").on({
• mouseenter: function(){
• $(this).css("background-color", "lightgray");
• },
• mouseleave: function(){
• $(this).css("background-color", "lightblue");
• },
• click: function(){
• $(this).css("background-color", "yellow");
• }
• });
• });
• </script>
• </head>
• <body>
• <p>Click or move the mouse pointer over this paragraph.</p>
• </body>
• </html>
Thank
you
