링크 · http://api.jquery.com/class-selector/


Class Selector (“.class”) - 클래스 선택자 (“.클래스명”)

설명: 해당 클래스명이 부여 된 모든 요소를 찾습니다.

자바스크립트의 getElementsByClassName() 와 같습니다.


예제: 현 문서의 모든 요소를 찾아 갯수를 구하고 빨간선으로 표시하여 보여 줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class demo</title>
  <style>
  div, span {
    width: 120px;
    height: 40px;
    float: left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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" );
// 코드해설: 클래스명이 "myCalss" 인 요소를 찾아 빨간선으로 표시합니다.
</script>
 
</body>
</html>


저작자표시 비영리 변경금지

'!' 카테고리의 다른 글

[jQuery]:ID Selector ("#id")  (0) 2018.04.15
[jQuery]:Element Selector ("tag")  (0) 2018.04.15
[jQuery]:All Selector ("*")  (0) 2018.04.15
[jQuery]:animated Selector  (0) 2018.04.01
Oracle 기초 2  (0) 2015.11.23
할배전할배 님의 블로그입니다.

+ Recent posts

티스토리툴바