ドキュメント

Selectors/class

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Selectors

.class

Matches all elements with the given class.
Arguments:
classString
A class to search for. An element can have multiple classes, one of them must match.
Examples:

Finds the element with the class "myClass".

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $(".myClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div class="notMe">div class="notMe"</div>
  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
</body>
</html>

NameType

.class.class

Matches all elements with the given classes.
Arguments:
classString
One of the classes to search for. An element can have multiple classes, one of them must match this one.
classString
The other class to search for. An element can have multiple classes, one of them must match this one too.
Examples:

Finds the element with both classes "myClass" and "myOtherClass".

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $(".myClass.myOtherClass").css("border","3px solid red");
  });
  </script>
  <style>
  div,span {
    width: 150px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div class="myClass">div class="myClass"</div>
  <div class="myOtherClass">div class="myOtherClass"</div>
  <div class="myClass myOtherClass">div class="myClass myOtherClass"</div>
</body>
</html>

NameType