jQuery

ID Selector (“#id”) 와 Class Selector (“.class”)

IT 2011. 1. 6. 17:09
ID Selector ("#id")는 javascript의 document.getElementById() 와 같이 특정ID값을 가지고 있는 element를 찾을 때 사용한다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 300px;
    float:left;
    padding: 2px;
    margin: 3px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div id="myID.entry[0]">id="myID.entry[0]"</div>
  <div id="myID.entry[1]">id="myID.entry[1]"</div>
  <div id="myID.entry[2]">id="myID.entry[2]"</div>
  <script>

   $("#myID\\.entry\\[1\\]").css("border","3px solid red");

  </script>
</body>
</html>
위 예제에서 myID.entry[1]라는 ID를 가지고 있는 element에 border css를 부여하고 있다.
ID값에 . [ ] 등 특수기호가 들어가면 \\를 앞에 추가해야 인식한다.


Class Selector (".class")는 javascript의 getElementsByClassName() 과  같이 특정 Class 명을 가지고 있는 element를 찾을 때 사용한다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 100px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div class="notMe">div class="notMe"</div>
  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
  <script>

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

  </script>
</body>
</html>
위 예제에서 myClass라는 class명을 가지고 있는 element에 대해 border css를 부여하고 있다.

다중 클래스명을 가지고 있는 element를 찾고자 할 때는 .class명.class명 으로 찾는다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 100px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div class="myclass">div class="notMe"</div>
  <div class="myclass otherclass">div class="myClass"</div>
  <span class="myclass otherclass">span class="myClass"</span>
  <script>

   $(".myclass.otherclass").css("border","13px solid red");

  </script>
</body>
</html>

저작자표시 비영리 동일조건