UNIT-II
CHAPTER -2
JQUERY
CONTENTS
1. Introduction
2. Syntax
3. Selectors
4. Events
5. Effects
6. Working with HTML
7. References
1. INTRODUCTION
jQuery is a lightweight, "write less, do more", JavaScript library.
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
Adding jQuery to the web page:
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
o Development Version: This is used for development and testing
purposes.
o Production Version: This is used for live websites.
The library is entailed in a single JavaScript file and it is specified in the <script>
tag of the HTML. Since it is metadata for the HTML, hence it must be placed in
the <head> tag.
<head>
<script src=“jQuery-3.3.1.min.js”></script>
</head>
Include jQuery from a Content Delivery Network (CDN), like Google or
Microsoft.
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
</head>
<head>
<script src=“https://ajax.aspnetcdn.com/ajax/jQuery/jQuery-3.3.1.min.js”></script>
</head>
2. SYNTAX
In jQuery, HTML elements are “selected” or queried so that an action can be
performed using them.
The standard format for a jQuery syntax is
$(selector).action()
$ - accesses jquery
selector – searches for the specified HTML elements
action – executes task on the selected elements
Ex: $(“p”).hide();
3. SELECTORS
HTML elements are manipulated through selectors in jQuery.
They “select” or search for elements via their id, classes, types, attributes, or
simply by their name.
Selectors begin with “$” sign and a set of parentheses “( )”.
Element Selector:
To find an HTML element, the element selector is used.
Ex: $(“p”)
#id selector:
$(“pid1”).hide()
Class Selector:
$(“.hd”)
4. EVENTS
Syntax:
$(“h1”).click();
Jquery Event Methods:
• click()
• Dblclick()
• mouseenter()
• mouseleave()
5. Effects
hide() and show()
o hide() and show() function can take two optional arguments:
speed and callback
Toggle() - To turn on or turn off a functionality like showing or hiding
HTML elements
Fading
o fadeIn()
o fadeout()
o fadeToggle()
o fadeTo()
Sliding
o slideUp()
o slideDown()
o slideToggle()
Animation
$(selector).animate({params}, speed, callback);
Stop Animation
$(selector).stop(stopAll, goToEnd); - where the arguments are
optional
Callback function
$(“h1”).hide(3000, function(){
alert(“The heading has disappeared.”);
});
6. Working with HTML
The text() method is used to assign or return any piece of text for the
selected HTML elements.
The html() method is used to assign or return the content for the selected
elements (markup included).
The val() method is used to assign or return any value from the fields in
the HTML forms.
7. References
1. TB2: Uttam K. Roy, Web Technologies, OXFORD University press, 2010.
2. https://www.w3schools.com/jquery/
3. https://api.jquery.com/
