Updated April 13, 2023
Definition of jQuery Reference
In Jquery, reference is defined as a set provided by jquery which contains jquery events used for triggering methods, selectors, and properties, which are defined for selecting and converting HTML elements provided few methods for handling events for such selections which when the events are triggered when the methods are executed and this jquery reference have the ability where to make the navigation (top, down, right and left) of the HTML elements along with supporting of jquery effects such as sliding or fading or showing or any kind of animations in the web pages using HTML elements are all defined and are provided by the jquery reference in Jquery.
Working of Reference in jQuery
In this article, jquery reference is a set or list that can hold all of the jquery’s methods, selectors, properties, events, AJAX, effects, selectors, etc. In general, jquery reference can simply be defined as a set that can contain all the above properties which are used with HTML elements to make the web pages in the website more responsive such as using jquery event that triggers only when the jquery functions are executed (eg. Button click) so there are many such properties and selectors provided by the jquery references to make the websites more responsive and also these references provide few jquery utilities that used for completing the programming tasks using the particular format($ namespace).
Examples
In the below section let us take one by one element of the jquery reference that contains methods, events, effects, selectors, utilities, etc along with examples:
Events
jQuery reference provides events also as a part of a jquery reference set or list. These events functions in jquery provide us an option to handle events when any functions or methods are executed by adding event handlers to selections. These events functions have some mouse events like click, mouseenter, etc, keyboard events like keyup, keydown, etc, windows events like resize, scroll, etc.
Example
Code:
<!DOCTYPE html>
<html>
<head>
<title> Jquery reference - Event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
#circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: green;
margin: 200px 200px 200px 200px;
}
</style>
</head>
<body>
<h1> Click on the circle </h1>
<div id="circle"></div>
<script type="text/javascript">
$("div").click(function() {
alert("a circle was clicked!");
});
</script>
</body>
</html>Output:
In the above program, we have created a circle using style tag, and then to make the event happen we are using the click() function of mouse event where when this circle is clicked we get an alert message saying the “a circle was clicked” as shown in the above screenshot.
jQuery Reference manipulation methods
In this jquery has a variety of DOM manipulation methods to edit, delete, add any DOM elements to the web pages so some of the methods are after() this method adds content after the elements, before() adds the content before the elements, remove() deletes the elements, append() adds the content to the end of the elements, predend() adds content at starting of elements, replaceAll() this is used for replacing target elements with specific elements, wrap() for wrapping the elements with HTML structure., etc.
Example
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('#divb').before('<div style="background-color:yellow"> Adding content before second div </div>');
$('p').append('Educba ');
$('p').prepend('<h2>This is prepended paragraph</h2>');
$('h1').after('<h1 style="background-color:cyan"> Adding content after h1 elements </h1>');
});
</script>
<style>
div{
border: 2px solid;
background-color:blue;
margin: 5px 0 5px 0;
font-size:20px;
}
</style>
</head>
<body>
<h1>Demonstration of jQuery methods </h1>
<div id="diva"> first div
</div>
<div id="divb"> second div
</div>
<div> Hi Educba </div>
<p>Welcome to </p>
</body>
</html>Output:
In the above program, we can see we are using append(), prepend(), after(), and before() method where we have added the content after the h1 element which shown in cyan color, then we are adding content before second div tag which is shown in yellow color, then we add the content at beginning of the paragraph which gives prepended paragraph and then the paragraph content is appended with the word “Educba” and prints complete sentence “Welcome to Educba”. There are many such methods used for constructing such web pages.
Selectors
In jquery, it provides the main function which is used only when we are using jquery codes as we know before writing jquery code we start with $ symbol so this is called as factory function which has the syntax as “$()” where we can pass any name or element name, id, class, etc of tags that are defined in the HTML structure.
Example
Code:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<style type="text/css">
#circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: green;
margin: 10px;
}
.educbaclass
{
margin:50px;
border :10px solid;
}
</style>
</head>
<body>
<div id="circle"></div>
<p class ="educbaclass"> Hi Educba </p>
<script type="text/javascript">
$("div").click(function() {
alert("You clicked on a circle");
});
$("p").css("background-color", "yellow");
</script>
</body>
</html>Output:
In the above program, we can see we have declared a div tag and defined with id name as “circle” so we are using the selector on div tags which has id. Similarly, we have also defined a class name for paragraph “p” and we can see in the above code we are printing that selected paragraph with different CSS styles which can be done not only by the CSS syntax in HTML structure but also using jquery selector and function CSS() on paragraph tag. Therefore there are many such selectors that are used in jquery reference such as selecting multiple elements, selecting all the elements of DOM using universal selector, etc.
In jquery reference, there are effects which are used for animation effects in web pages such as animate(), fadIn(), fadeout(), hide(), show(), etc. In traversing reference can be used for movement of elements such as up, down, right, left, etc.
Conclusion
In this article, we conclude that the jquery reference is defined as a set of selectors, events, methods, effects, etc as a reference which in turn have many other methods in them. In the above we saw few examples of jquery reference such as an event with mouseclick event, then we saw manipulation methods example with append(), prepend(), before(), after() methods and we also saw an example of selectors such as selecting according to id name, class name, element name, etc. There are many other references in jquery which are used for making the web pages responsive.
Recommended Articles
This is a guide to jQuery Reference. Here we also discuss the Definition and Working of jQuery Reference in jQuery with Examples along with different examples and its code implementation. You may also have a look at the following articles to learn more –
