Monday, May 4, 2020

The Complete List of jQuery CSS Selectors Methods



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.

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>

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>

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>

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
1css( name )
Return a style property on the first matched element.
2css( name, value )
Set a single style property to a value on all matched elements.
3css( properties )
Set a key/value object as style properties to all matched elements.
4height( val )
Set the CSS height of every matched element.
5height( )
Get the current computed, pixel, height of the first matched element.
6innerHeight( )
Gets the inner height (excludes the border and includes the padding) for the first matched element.
7innerWidth( )
Gets the inner width (excludes the border and includes the padding) for the first matched element.
8offset( )
Get the current offset of the first matched element, in pixels, relative to the document.
9offsetParent( )
Returns a jQuery collection with the positioned parent of the first matched element.
10outerHeight( [margin] )
Gets the outer height (includes the border and padding by default) for the first matched element.
11outerWidth( [margin] )
Get the outer width (includes the border and padding by default) for the first matched element.
12position( )
Gets the top and left position of an element relative to its offset parent.
13scrollLeft( val )
When a value is passed in, the scroll left offset is set to that value on all matched elements.
14scrollLeft( )
Gets the scroll left offset of the first matched element.
15scrollTop( val )
When a value is passed in, the scroll top offset is set to that value on all matched elements.
16scrollTop( )
Gets the scroll top offset of the first matched element.
17width( val )
Set the CSS width of every matched element.
18width( )
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.
Share:

0 comments:

Post a Comment