Class Name

Syntax

$('.myclass')

Description

Select all elements that have a class of myclass.

Examples

SelectorSelects
$('.myclass')selects all elements that have a class of myclass
$('p.myclass')selects all paragraphs that have a class of myclass
$('.myclass.otherclass')selects all elements that have a class of both myclass and otherclass

Finds the element with the class "myClass".

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $(".myClass").css("border","3px solid red");

        });
    </script>
  </head>
  <body>
    <body>
          <div class="myClass">div class="myClass"</div>

          <span class="myClass">span class="myClass"</span>
    </body>
</html>
Click to view the demo

Select by class name

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        a.test { font-weight: bold; color:red;}
    </style>

    <script type="text/javascript">
     $(document).ready(function(){
        $("input.buttonA").click(function(){$("div.contentToChange").find("p").not(".alert").append("<strong>&nbsp;Appended</strong>")});
        $("input.buttonB").click(function(){$("strong").remove()});
     });

    </script>
  </head>
  <body>
    <input type="button" value="Add" class="buttonA" />
    <input type="button" value="Remove" class="buttonB" />
    <div style="background:#eee;" class="contentToChange">
        <h2>Header 2</h2>
       
        <p class="firstparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        
        <p class="secondparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        
        <p class="thirdparagraph">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <em>commodo</em> consequat. Duis autem vel eum iriure dolor in hendrerit in <em>vulputate</em> velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te <strong>feugait</strong> nulla facilisi.</p>
        
        <p class="fourthparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <strong>quis</strong> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        
        <p class="fifthparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        
        <p class="sixthparagraph">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <strong>molestie</strong> consequat, vel illum <strong>dolore</strong> eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing</strong> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        
    </div>

  </body>
</html>
Click to view the demo

Select from nested classes

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
    $(".myClass.myOtherClass").css("border","1px solid red");
  });
    </script>
  </head>
  <body>
      <div class="notMe">div </div>
      <div class="myClass">div</div>
      <span class="myClass myOtherClass">span</span>
  </body>
</html>
Click to view the demo
Home 
  JavaScript Book 
    jQuery  

Selector:
  1. jQuery Selector
  2. DOM Element Selection
  3. Filter Selectors
  4. Selecting by Position
  5. Filtering by Content
  6. Filtering by Relationships
  7. Escape characters
  8. ID attribute
  9. Tag Name
  10. Class Name
  11. Descendant
  12. Child (E > F)
  13. General sibling (E ~ F)
  14. Multiple expressions (E, F, G)
  15. Universal (*)
  16. Numbered child (:nth-child(n/even/odd/expr))
  17. First child (:first-child)
  18. Last child (:last-child)
  19. Only child (:only-child)
  20. Not (:not(E))
  21. Empty (:empty)
  22. Attribute selectors
  23. Attribute ([attr])
  24. Attribute equals ([foo=bar])
  25. Attribute does not equal ([foo!=bar])
  26. Attribute begins with ([foo^=bar])
  27. Attribute ends with ([foo$=bar])
  28. Attribute contains ([foo*=bar])
  29. Attribute contains word ([foo~=bar])
  30. Attribute contains prefix ([foo|=bar])
  31. Attribute exists $("[attributeName*='value']");
  32. Form selectors (:input)
  33. Form text fields (input:text)
  34. Form Password field (input:password)
  35. Form Radio button (input:radio)
  36. Form Checkbox (input:checkbox)
  37. Form Submit button (input:submit)
  38. Form Image button (input:image)
  39. Form Reset button (input:reset)
  40. Form button (input:button)
  41. Form File upload (input:file)
  42. Form Enabled form element (input:enabled)
  43. Form Disabled form element (input:disabled)
  44. Form Checked box (input:checked)
  45. Form Selected option (input:selected)
  46. Element at index (:eq(n))
  47. Greater than (:gt(n))
  48. Less than (:lt(n))
  49. First (:first)
  50. Last (:last)
  51. Even element (:even)
  52. Odd element (:odd)
  53. Is parent (:parent)
  54. Contains text (:contains(text))
  55. Contains element (:has(E))
  56. Visible (:visible)
  57. Hidden (:hidden)
  58. Header element (:header)
  59. Currently animating (:animated)
  60. $(this)
  61. Custom User Selectors