JQuery 기초, hasClass(), addClass(), removeClass(), toggleClass(), position(), width(), height()
jQuery 2016. 2. 19. 11:41jQuery(=$)
jQuery의 약자로 “$”를 사용한다.
$(html)
$(“<span>span tag 입니다.</span>”)
$(“<span/>”)
Query CSS
jQuery에서 CSS를 제어하는 방법
$("div").css("background-color", "")
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr").css("background-color", function(index, value) { // 인덱스, 값
if (value == "rgb(255, 255, 0)") { // 노란색일 때
return "red"; // 빨간색으로 변경
}
});
});
</script>
2. .hasClass(className)
선택된 개체에 className과 동일한 클래스가 존재 하는지에 대한 결과를 true/false 로 반환한다.
<div class=”myClass”>Content</div>
$(“div”).hasClass(“myClass”)의 경우 “true”를 반환한다.
$(“div”).hasClass(“noClass”)의 경우 “false”를 반환한다.
3. .addClass()
새로욲 클래스를 추가하는 메서드이다.
$(“div”).addClass(“className”) 셀렉터를 통해 가져온 개체에 className이라는 클래스를 추가한다.
4. .removeClass()
.addClass()와는 반대로 해당 className을 삭제 한다.
5. toggleClass()
선택한 개체를 마치 스위치처럼 껐다(removeClass()), 켯다(addClass())하는 기능을 하는 메서드이다.
$(“div”).toggleClass(“myClass”)
<style>
.selected {
font-weight: bold;
color: White;
background-color: Red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("td").click(function() {
var obj = $(this);
obj.toggleClass("selected"); // 토글 형식으로 클래스를 가져옴
});
});
</script>
</head>
<body>
<div>
<table>
<tr>
<td>#1</td>
<td>#2</td>
<td>#3</td>
<td>#4</td>
<td>#5</td>
</tr>
<tr>
<td>#6</td>
<td>#7</td>
<td>#8</td>
<td>#9</td>
<td>#10</td>
</tr>
<tr>
<td>#11</td>
<td>#12</td>
<td>#13</td>
<td>#14</td>
<td>#15</td>
</tr>
<tr>
<td>#16</td>
<td>#17</td>
<td>#18</td>
<td>#19</td>
<td>#20</td>
</tr>
<tr>
<td>#21</td>
<td>#22</td>
<td>#23</td>
<td>#24</td>
<td>#25</td>
</tr>
</table>
</div>
</body>
</html>
6. .position()
position() 선택된 개체의 위치값을 가지고 있는 개체를 반환한다.
var p = $("div").position();
var pTop = p.top;
var pLeft = p.left;
// div의 포지션을 p로 받아 top과 left값을 저장.
7. width(), height()
선택된 개체의 가로와 세로길이를 반환하거나 설정하는 메서드. 아무런 파라미터가 없을 경우 할당 값을 반환하며, 파라미터를 넣을 경우 각각의 값이 파라미터의 값으로 대체된다
개체의 가로,세로 길이를 구할 때
var width = $(“div”).width();
var height = $(“div”).height();
개체의 가로, 세로 길이를 지정 할 때
$(“div”).width(100);
$(“div”).height(100);
'jQuery' 카테고리의 다른 글
| jQuery Form API, 이벤트 메서드 (0) | 2016.02.19 |
|---|---|
| jQuery 속성 메서드: attr(), removeAttr(), val(), .text(), .html() (0) | 2016.02.19 |
| JQuery: find(), siblings() (0) | 2016.02.19 |
| JQuery: add(), andSelf(), contents(), end() (0) | 2016.02.19 |
| JQuery: 셀렉터로 CSS 변경 (0) | 2016.02.17 |
