Scribd
Upload
56 views21 pages

Web Programming

jQuery is a JavaScript library that makes it easier to use JavaScript on websites. It allows programmers to select HTML elements and perform actions on them with single line code. Common jQuery features include HTML/DOM manipulation, CSS manipulation, event methods, effects/animations, AJAX, and utilities. Basic jQuery syntax uses the $ sign to define jQuery and (selector) to find elements to apply actions to like hide() or show(). Programmers add jQuery to a page by linking to the jQuery library in the head. Events are user actions a page can respond to, and jQuery methods like click(), mouseenter(), and change() attach functions to run on events.

Uploaded by

Manibharathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
56 views21 pages

Web Programming

jQuery is a JavaScript library that makes it easier to use JavaScript on websites. It allows programmers to select HTML elements and perform actions on them with single line code. Common jQuery features include HTML/DOM manipulation, CSS manipulation, event methods, effects/animations, AJAX, and utilities. Basic jQuery syntax uses the $ sign to define jQuery and (selector) to find elements to apply actions to like hide() or show(). Programmers add jQuery to a page by linking to the jQuery library in the head. Events are user actions a page can respond to, and jQuery methods like click(), mouseenter(), and change() attach functions to run on events.

Uploaded by

Manibharathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

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

You might also like