Hello guys! Welcome to a new section of my tutorials on jQuery. In this tutorial, we are going to be talking a look at the various Css Selectors Methods and how to implement them.
The jQuery library supports almost all the basic selectors included in the Cascading Style Sheets specification 1 and 3, as outlined in the world wide web consortium's site.
By using jQuery web developers can enhance their websites without worrying browsers and their versions as long the browsers actually has JavaScript enabled in them.
Most the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements.
The jQuery library supports almost all the basic selectors included in the Cascading Style Sheets specification 1 and 3, as outlined in the world wide web consortium's site.
By using jQuery web developers can enhance their websites without worrying browsers and their versions as long the browsers actually has JavaScript enabled in them.
Most the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements.
You can also read our tutorial post on: jQuery DOM Traversing Methods with examples
Applying CSS Properties
Its a simple process to apply any CSS property using jQuery method.
Syntax
Below is the syntax for this method -
selector.css( PropertyName, PropertyValue );
You can pass the PropertyName as a JavaScript string and based on its value, PropertyValue could be string or integer.
Example
The following below is an example which adds font color to the second list item -
<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( ) {
$( "li" ).eq( 2 ).css( "color", "green" );
} );
</script>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</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( ) {
$( "li" ).eq( 2 ).css( "color", "green" );
} );
</script>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
You can also read our tutorial post on: The Practical Guide to jQuery Attribute Methods
Applying Multiple CSS Properties
You can apply multiple CSS properties using a single jQuery method CSS({key1:val1, key2:val2 ....} ). You can apply as many properties as you like in a single call.
Syntax
Below is the syntax for this method -
selector.css( {key1: val1, key2: val2........keyN: valN} );
You can pass key as the property and val as its value as described in the above syntax.
Example
The following below is an example which adds font color as well as the background color to the second list item -
<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( ) {
$( "li" ).eq( 2 ).css( {"color" : "green", "background-color" : "yellow"} );
} );
</script>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</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( ) {
$( "li" ).eq( 2 ).css( {"color" : "green", "background-color" : "yellow"} );
} );
</script>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
You can also read our tutorial post on: JavaScript Browser Compatibility Test
Setting Element Width and Height
The width( Val ) and height( val ) method can be used to set the width and height respectively of any element.
Example
The following below is an example which sets the width of first division element, where as the rest of the elements have their width set by style sheet -
<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( ) {
$( "div:first" ).width( 40 );
$( "div:first" ).css( "background-color", "yellow" );
} );
</script>
<style>
div {
width: 40px; height: 60px; float: left;
margin: 4px; background: blue; cursor: pointer;
}
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</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( ) {
$( "div:first" ).width( 40 );
$( "div:first" ).css( "background-color", "yellow" );
} );
</script>
<style>
div {
width: 40px; height: 60px; float: left;
margin: 4px; background: blue; cursor: pointer;
}
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>
Output
Below is the output of the above example.
d
d
d
d
jQuery CSS Methods
The following table lists down all the methods which you can make use of to set different CSS properties -
| Sr.No. | Method & Description |
|---|---|
| 1 | css( name )
Return a style property on the first matched element.
|
| 2 | css( name, value )
Set a single style property to a value on all matched elements.
|
| 3 | css( properties )
Set a key/value object as style properties to all matched elements.
|
| 4 | height( val )
Set the CSS height of every matched element.
|
| 5 | height( )
Get the current computed, pixel, height of the first matched element.
|
| 6 | innerHeight( )
Gets the inner height (excludes the border and includes the padding) for the first matched element.
|
| 7 | innerWidth( )
Gets the inner width (excludes the border and includes the padding) for the first matched element.
|
| 8 | offset( )
Get the current offset of the first matched element, in pixels, relative to the document.
|
| 9 | offsetParent( )
Returns a jQuery collection with the positioned parent of the first matched element.
|
| 10 | outerHeight( [margin] )
Gets the outer height (includes the border and padding by default) for the first matched element.
|
| 11 | outerWidth( [margin] )
Get the outer width (includes the border and padding by default) for the first matched element.
|
| 12 | position( )
Gets the top and left position of an element relative to its offset parent.
|
| 13 | scrollLeft( val )
When a value is passed in, the scroll left offset is set to that value on all matched elements.
|
| 14 | scrollLeft( )
Gets the scroll left offset of the first matched element.
|
| 15 | scrollTop( val )
When a value is passed in, the scroll top offset is set to that value on all matched elements.
|
| 16 | scrollTop( )
Gets the scroll top offset of the first matched element.
|
| 17 | width( val )
Set the CSS width of every matched element.
|
| 18 | width( )
Get the current computed, pixel, width of the first matched element.
|
Alright guys! We have come to the end of this tutorial post on jQuery Css Selectors Methods. In my next tutorial post, i will be using series of examples to explain all the methods i just listed out in the above table.
Feel free to ask your questions where necessary via the comment box below and they will be attended to as soon as possible. Follow us on our various social media platforms and also do subscribe to our newsletter to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary via the comment box below and they will be attended to as soon as possible. Follow us on our various social media platforms and also do subscribe to our newsletter to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.