[ .css() ]
적용된 스타일을 가져오거나, 새로운 스타일을 적용한다.
.css(propertyName)
css(propertyName, Value)
.css(propertyName, value)
.css(propertyName, function(index, value)
.css(map)
$(“div”).css(“background-color”, “red”);
위의 소스는 이미 적용된 스타일을 가져오는 것이고, 아래의 예는 배경 색을 빨간색으로 지정하는 소스이다.
$(“div”).css(“background-color”, function(index, value) { }); 와 같은 형식을 통해 자신이 원하는 기능을 확장하여 사용할 수 있는데, 이때 index와 value가 의미하는 것은 다음과 같다.
Index - 선택한 개체의 순서
value - 해당 개체의 현재 스타일 속성 값
이를 보면 알겠지만 한번에 개체의 스타일 값을 확인하고 변경할 수 있는 큰 장점이 있다.
[ .css 메소드 사용 예제 ]
<head>
<title>jQuery Selector</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
table { border:1px solid #AAA; }
td { border:1px solid #AAA; width:25px; height:25px; }
</style>
<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";
}
if(value == "rgb(0, 0, 255)"){
return "yellow";
}
});
});
</script>
</head>
<body style="padding:10px;">
<div>
<table>
<tr style="background-color:rgb(255,255,0)">
<td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
</tr>
<tr style="background-color:blue">
<td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
</tr>
<tr style="background-color:yellow">
<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 style="background-color:rgb(255,255,0)">
<td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
</tr>
</table>
</div>
</body>
</html>
tr태그의 배경색이 노란색을 골라 빨간색으로 수정해주고, 파란색을 골라서 노란색으로 수정해주는 소스이다.
한가지 재미있는 것은 value == "rgb(0, 0, 255)"로 조건을 주어 적용하면 style="background-color:blue"를 찾아내는데 반하여 value == "blue"로 조건을 주면 해당 조건을 정확하게 찾아내지 못한다.
[ .hasClass(className) ]
클래스의 유무를 확인
className 찾고자 하는 클래스명
클래스명이 일치하는 것이 있을 경우 true를 반환. 여러개가 같이 사용된 클래스에 속해 있을 경우에도 같은 결과를 나타낸다.
<div class=”myClass”>Content</div>
$(“div”).hasClass(“myClass”)의 경우 “true”를 반환
$(“div”).hasClass(“noClass”)의 경우 “false”를 반환
[ .hasClass() 사용 예제 ]
<head>
<title>jQuery</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
.selected { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
});
</script>
</head>
<body style="padding:10px;">
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
</body>
</html>
각 p태그의 ClassName이 selected인 것을 찾아 결과 (true/false)를 보여준다.
[ .addClass(className) ]
새로운 클래스를 추가
className 특정 조건에 추가할 하나 이상의 클래스 명
.addClass( function(index, class) )
function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있다.
css() 메소드의 경우 스타일에 대한 속성 값을 제어하고, addClass()의 경우 속성 값이 아닌 className에 대한 부분만 제어 한다는 차이만 있을 뿐 거의 동일한 동작을 한다.
function의 파라미터 또한 css() 메서드에서 설명 드린 부분과 동일하다. Index는 개체의 번호를 currentClass는 value와 같이 현재 개체의 className을 반환한다.
[ .addClass(className) 사용 예제 ]
<head>
<title>jQuery</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
table { border:1px solid #AAA; }
td { border:1px solid #AAA; width:25px; height:25px; }
.textStyle { font-weight:bold; color:White; }
.bgred { background-color : Red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("tr").addClass(function (index, currentClass) {
if (currentClass == "bgred") {
return "textStyle";
}
});
});
</script>
</head>
<body style="padding:10px;">
<div>
<table>
<tr class="bgred">
<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 class="bgred">
<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 class="bgred">
<td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
</tr>
</table>
</div>
</body>
</html>
class명이 bgred인 것을 찾아 해당 클래스에 textStyle 클래스를 추가한다.
[ .removeClass([className]) ]
특정 조건에 맞는 요소 집합에서 한개, 여러개, 모든 클래스를 제거할 수 있다.
className 특정 조건에 맞는 요소에서 제거될 클래스 명
.removeClass( function(index, class) )
function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있다.
.addClass()와는 반대로 해당 className을 삭제한다.
[ .removeClass() 사용 예제 ]
$(document).ready(function () {
$("tr").addClass(function (index, currentClass) {
if (currentClass == "bgred") {
return "textStyle";
}
});
$("tr:last").removeClass("textStyle");
});
</script>
위의 .addClass예제에서 위의 $("tr:last").removeClass("textStyle"); 를 추가해주었다.
"tr"태그 마지막에서 "textStyle" 클래스가 적용되지 않았음을 확인 할 수 있다.
[ .toggleClass(className) ]
특정한 클래스의 추가/제거를 한번에 처리할 수 있다.
className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명
.toggleClass( className, switch )
className 선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명
switch 클래스가 추가되거나 삭제될 조건문
.toggleClass( function(index, class), [ switch ] )
function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있다.
switch 클래스가 추가되거나 삭제될 조건문
이 함수는 하나 이상의 클래스명을 인자로 가질 수 있다.
이 함수가 맨 처음 실행되었을 때 해당 요소에 함수에 할당된 클래스명 인자가 이미 들어가 있다면 클래스가 제거되는 것부터 시작되고, 반대로 인자로 주어진 클래스가 없다면 추가가 된다. 아래 이미지를 보면 이해가 빠를 것이다.
[ .toggleClass 적용 예제 ]
<head>
<title>jQuery</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
table { border:1px solid #AAA; }
td { border:1px solid #AAA; width:25px; height:25px; }
.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 style="padding:10px;">
<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>
"td"안을 클릭하게 되면 toggleClass에 의하여 "selected" 클래스가 적용이 되었다가, 다시 선택하면 적용된 "selected" 클래스가 해제됨을 확인 할 수 있다.
원본 : http://www.sqler.com/387865, http://findfun.tistory.com/entry/jQuery-API-정복-상대-좌표-구하기-position
'Programming > JQuery' 카테고리의 다른 글
| jQuery checkbox 컨트롤 (0) | 2012.11.20 |
|---|---|
| jQuery - 폼 지원 메소드 (0) | 2012.04.27 |
| jQuery Event - Browser Events (0) | 2012.04.26 |
| jQuery Event - .one() & .live() & .die() (0) | 2012.04.24 |
| jQuery Event - .bind() & .unbind() (0) | 2012.04.24 |
