Hello guys! Welcome to a new section of my tutorial on jQuery. In my last tutorial post, I gave a comprehensive list of all the Selectors that can be found in jQuery. So now in this tutorial, i will be using few examples to explain some of those selectors listed in my previous tutorial.
I will be starting with the Name selector and i will give a proper illustration of how this selector can be implemented using jQuery. I will advice you take your time and read through carefully.
I will be starting with the Name selector and i will give a proper illustration of how this selector can be implemented using jQuery. I will advice you take your time and read through carefully.
Element Name Selector
The element selector selects all the elements that have a tag name of T.
Syntax
Below is the syntax to use this selector -
$( 'tagname' )
Parameter Details
Here is the description of all the parameters used by this selector -
- tagname - Any standard HTML tag name like p, li, img, div etc.
Return Value
Like any other jQuery selector, this selector also returns an array filled with the found elements.
Example
- $('p') - Selects all elements with a tag name of p in the HTML document.
- $('div') - Selects all elements with a tag name of div in the HTML document.
The following example below would select all the divisions and will apply grey color to their background -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This will select all the divisions */
$( "div" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This will select all the divisions */
$( "div" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
This is the first division of the DOM.
This is the second division of the DOM.
This is the third division of the DOM.
You can also read our tutorial post on: Understanding the Basics of jQuery
Element ID Selector
The element selector selects a single element with the given id attribute.
Syntax
Below is the syntax to use this selector -
$( '#elementid' )
Parameter Details
Here is the description of all the parameters used by this selector -
- elementid - This would be an element ID. If the id contains any special characters like periods or colons, you have to escape those characters with backslashes.
Return Value
Like any other jQuery selector, this selector also returns an array filled with the found elements.
Example
- $('#myid') - Selects a single element with the given id myid.
- $('div#yourid') - Selects a single division with the given id yourid.
The following example below would select the second division and will apply grey color to its background -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This will select the second division only */
$( "#div2" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This will select the second division only */
$( "#div2" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
This is the first division of the DOM.
This is the second division of the DOM.
This is the third division of the DOM.
You can also read our tutorial post on: JavaScript Switch Case
Element Class Selector
The element selector selects all the elements which matches with the given class of the elements.
Syntax
Below is the syntax to use this selector -
$( '.classid' )
Parameter Details
Here is the description of all the parameters used by this selector -
- classid - This is the class ID available in the HTML document.
Return Value
Like any other jQuery selector, this selector also returns an array filled with the found elements.
Example
- $('.big') - Selects all the elements with the given class ID big.
- $('p.small') - Selects all the paragraphs with the given class ID small.
- $('.big.small') - Selects all the elements with the class of big and small.
The following example below would select all the divisions with the class .big and will apply grey color to its background -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This will select the first division only */
$( ".big" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This will select the first division only */
$( ".big" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
This is the first division of the DOM.
This is the second division of the DOM.
This is the third division of the DOM.
You can also read our tutorial post on: JavaScript Operators
Universal Selector
The universal selector selects all the elements in the document.
Syntax
Below is the syntax to use this selector -
$( '*' )
Parameter Details
Here is the description of all the parameters used by this selector -
- * - A symbolic star.
Return Value
Like any other jQuery selector, this selector also returns an array filled with the found elements.
Example
- $('*') - Selects all the elements available in a HTML document.
The following example below would select all the elements and would apply grey color to their background. Try to understand that this selector will select every elements including head, body, etc.
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This will select all the elements */
$( "*" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
/* This will select all the elements */
$( "*" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
This is the first division of the DOM.
This is the second division of the DOM.
This is the third division of the DOM.
You can also read our tutorial post on: Python on OS X
Multiple Element Selector
Multiple Element selector selects the combined results of all the specified selectors X, Y or Z.
You can specify any number of selectors to that will be combined into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical.
You can specify any number of selectors to that will be combined into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical.
Syntax
Below is the syntax to use this selector -
$( 'X, Y, Z, .........' )
Parameter Details
Here is the description of all the parameters used by this selector -
- X - Any valid selector.
- Y - Any valid selector.
- Z - Any valid selector.
Return Value
Like any other jQuery selector, this selector also returns an array filled with the found elements.
Example
- $('div, p') - Selects all the elements matched by div or p.
- $('p strong, .myclass') - Selects all elements that is matched by strong that are descendants of an element matched by p as well as all of the elements that have a class of myclass.
- $('p strong, #myid') - Selects a single element matched by strong that is a descendant of an element matched by p as well as elements that its id is myid.
The following example below would select all the elements with class ID big and also element with ID div3 and will apply grey color to its back - ground -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( ".big, #div3" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( ".big, #div3" ).css( "background-color", "grey" );
} );
</script>
</head>
<body>
<div class = "big" id = "div1">
<p>This is the first division of the DOM.</p>
</div>
<div class = "medium" id = "div2">
<p>This is the second division of the DOM.</p>
</div>
<div class = "small" id = "div3">
<p>This is the third division of the DOM.</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
This is the first division of the DOM.
This is the second division of the DOM.
This is the third division of the DOM.
Alright guys! We have come to the end of this tutorial on jQuery Selectors. In my next tutorial, i will be talking about jQuery attributes.
Feel free to ask your questions where necessary, and i will attend to them as soon as possible. Do follow us on our various social media platforms available.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary, and i will attend to them as soon as possible. Do follow us on our various social media platforms available.
Thanks for reading and bye for now.
