jquery selector

jquery selectors select elements to add behavior to those elements.

jquery selector is a function which makes use of expressions to find out matching elements from a dom based on the given criteria.

jquery selector is a powerful set of tools for matching a set of elements in a document.

all type of selectors in jquery, start with the dollar sign and parentheses: $(selector).


the universal selector

the *(universal) selector selects all elements in the document, including html,head,body.

if the *(universal) selector is used together with another element, it selects all child elements within the specified element.

the syntax:-

                    $("*")  or   jquery("*")

example

                 <script>
                   
                   $(document).ready(function(){
                   
                   $("body>*").css("background-color","orange");
                   
                      });    </script>
               

the element selector

the jquery element selector is used to selects elements based on their tag names.

jquery can now restrict the search to div element only.

the syntax:-

          $("element")   or   jquery("element")

example

                <script>
                   
                   $(document).ready(function(){
                   
     $("li").css({"background-color":"yellow","border":"1px dotted pink"});
                   
                                }); 
                                                             
        </script>
               

the #id selector

the jquery #id selector uses the id attribute of an html tag to find the specific element.

tip:- html #id attributes are unique in every page and even all browsers can locate a single element very quickly.

the syntax:-

         $("#id") or  jquery("#id")

example

                <script>
             
                   $(document).ready(function(){
                   
   $("#head").css({"background-color":"#4a3b9c","color":"#ffffff"});
                   
   $("#disc").css({"background-color":"yellow","border":"1px dotted pink"});
                   
                        }); 
                                                     
     </script>
               

the class selector

the jquery class selector finds element with a specific class.

the class selector will run quickly in modern browsers.

the syntax :-

          $(".class")     or    jquery(".class")

the class selector will be more efficient if we qualify it with a tag name e.g.

     $( "div.myclass" );

example

               
                   $(document).ready(function(){
                   
     $(".head").css({"background-color":"#4a3b9c","color":"#ffffff"});

     $(".disc").css({"background-color":"yellow","border":"1px dotted pink"});

         });    </script>

jquery selectors