jQuery에서는 굉장히 많은 메서드를 제공하고 있습니다. 그 많은 메서드를 다 외워서 사용하기에는 불가능할 것이라 생각됩니다. 저 역시도 이제 막 새롭게 시작하다보니 메서드를 거의 외우지 못하고 있습니다.
제가 다른 컴퓨터 언어(Delphi, C, C++, C# )등을 공부할떄 기본 문법만 익히고 나서 나머지 함수(function 등)은 함수 목록을 한번 훑어보고 이러한 기능을 하는 함수들이 있구나 하고 넘어가고 실제 개발할 때 그 함수 목록을 검색하면서 개발을 했고, 지금도 그렇게 개발을 하고 있습니다.
따라서 jQuery를 공부하는데 있어서도 마찬가지 방법으로 공부를 하면 될 것이라고 생각하고 있으며, 지금은 jQuery를 이용하여 복잡한 개발을 할 생각은 없고 단지 운영하고 있는 블로그에 간단하게 몇가지만 적용할 계획인 관계를 가장 많이 사용되고 , 가장 필수적으로 사용되는 jQuery 메서드들만 우선적으로 공부하고 정리할 생각입니다.
오늘은 jQuery에서 CSS를 제어하는 기본적은 메서드를 정리해보려고 합니다.
먼저 HTML 문서의 스타일을 제어하는데 사용되는 API를 정리해 보도록 하겠습니다.
.addClass()
$("selector").addClass("ClassName") 의 형태로 사용되어 셀렉터를 통해 가져온 객체에 ClassName의 CSS 클래스를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .addClass test</title>
<style>
.noListStyle
{
list-style-type:none;
}
.horizontal
{
float:left;
width:120px;
height:100px;
border:1px solid black;
margin:10px;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type = "text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<ul>
<li> jQuery addClass 테스트입니다.</li>
<li> jQuery는 가볍고 사용하기 쉬운 javascript Library입니다.</li>
<li> jQuery를 이용하여 블로그에 적용하고 싶어서 jQuery를 공부하고 있습니다.</li>
</ul>
</body>
</html>
위 이미지를 보면 <body> 태그 내부를 보면 속성을 하나도 주지 않았기 때문에 스타일이 적용이 되지 않았습니다.
<script type = "text/javascript">
$(document).ready(function () {
$("li").addClass("noListStyle");
$("li").addClass("horizontal");
});
</script>
이제 위와 같이 .addClass를 사용하여 스타일을 적용시켜 주면 다음과 같은 이미지처럼 변하게 됩니다.
다음은 function 파라미터를 통한 클래스를 제어에 대해 정리해보겠습니다.
.addClass(function(index, currentClass))는 jQuery 버전 1.4에서 추가되었으며 함수가 추가되면서 추가적인 기능을 수행할 수 있습니다.
-index : element의 위치를 function으로 전달 (Returns the index position of the element in the set)
-currentClass : element의 현재 class를 function으로 전달(Returns the current class name of the selected element)
저는 저렇게 이해를 했습니다. index와 currentClass가 function으로 매개변수로 해서 전달되어 function 내부에서 사용이 되는거 같습니다.(제가 잘못 이해 할 수 있습니다.)
addClass 함수가 실행되는 방식은 element에 class를 추가하기 전에 function이 먼저 실행됩니다.
index는 현재 선택된 요소(element)의 위치를 의미하며 currentClass는 선택된 요소(element)에서 사용된 클래스를 의미합니다.
예제를 보면 이해가 빠를 것이라 생각합니다. index는 문서내에서 selector "div" 요소의 순서를 의미합니다. 그리고 currentClass는 그 요소(element)의 현재 class를 의미하며, 그 index와 현재 클래스를 function을 전달하는 것입니다.
함수 내부를 보시면 if(currentClass ="red" && index == 2) 부분을 보시면 이해가 금방 될 것입니다. 문서 내 div 태그의 순서가 세번째이고 그 currentClass가 "red"인 경우 class 이름을 "green"을 리턴하여 전체 div 태그 중 두번째 요소(element)에 클래스를 추가하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery CSS 제어하기</title>
<style>
div { background: white; }
.red { background: red; }
.red.green { background: green; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span> jQuery 사이트를 방문해보세요. </span>
<div class="red">This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes.
It would be red if the addClass function failed.</div>
<div class="red">This div should be white</div>
<p>There are zero green divs</p>
<script>
$("div").addClass(function(index, currentClass) {
var addedClass;
if ( currentClass === "red" && index == 2 ) {
addedClass = "green";
$("p").text("There is one green div");
}
return addedClass;
});
</script>
</body>
</html
.css
스타일을 가져오거나 적용합니다.
$("p").css("background-color"); 의 "P" 문서내의 전체 "P"태그 중 첫번째 객체의 배경색상을 가져옵니다.
새로운 스타일을 적용하고 싶으면 css(propertyname, value) 메서드를 사용하면 됩니다. 이 메서드를 사용하여 스타일을 적용하면 됩니다.
문서내의 파란색 배경의 Paragraph가 빨간색 배경을 변경이 되었습니다.
.css(propertyname, function(index,value)) 의 형식으로 확장하여 사용할 수 있습니다. index와 value가 있습니다. index의 경우 선택한 객체의 순서, vaule는 해당 객체의 현재 스타일 속성값입니다.
다음의 예제를 보시면 이해가 빠르실 것이라 생각합니다.
|
|
.hasClass(className)
선택된 개체에 className과 같은 클래스가 있는지 검사하여 결과를 true/false로 반환합니다.
<p class="intro">This is a paragraph.</p>
$("P").hassClass("intro"); ==> true 를 반환합니다.
$("P").hassClass("intro1"); ==> false 를 반환합니다.
.removeClass(className)
addClass()와 반대로 해당 객체의 className을 삭제합니다.
.toggleClass()
선태간 객체를 스위치처럼 켯다(addClass()), 껏다(removeClass())하는 기능을 하는 메서드입니다.
$("p").toggleClass("intro")
선택한 객체에 intro가 적용 시 intro를 삭제하고, intro가 미적용시 intro를 추가하는 역할을 합니다.
toggleClass(className, switch)
두번째 파라미터 switch 값을 통해 사용자가 toggle 상태를 지정할 수 있습니다. true라면 addClass와 같은 효과를 반대라면 removeClass와 같은 효과를 나타냅니다.
이 메서드 역시 function을 통한 확장된 제어가 가능합니다.
이전 메서드와 같이 동일한 형태를 취하고 있는 걸 확인할 수 있습니다. function의 역할은 toggle할 클래스명이 리턴 될 것 같습니다.
.position() .width() .height()
메서드 이름만 봐도 어떤 역할을 하는지 금방 알거 같습니다.
|
01 |
02 |
03 | ||
|
.position 개체의 위치값을 반환 |
width() 가로의 길이 반환 및 설정 |
height() 세로의 길이 반환 및 설정 |
개체의 가로길이를 가져올때는 $("p").width(), 세로 길이를 가져올 떄는 $("p").height() 의 형태로 사용하면 됩니다.
가로길이나 세로길이를 설정하려면 .width(100), .height(100)의 형식으로 사용하면 됩니다.
jQuery에서 CSS 스타일을 제어하는 방법은 아주 간단합니다. jQuery 메서드는 아주 많이 있습니다. 모든 메서드를 외울 수는 없을 것입니다. 저 역시도 그렇게 정리하도록 할 것입니다. 많이 사용하는 메서드 위주로 정리하고 나머지는 메서드는 jquery.com에서 검색해서 사용하는 것이 좋을거 같습니다.
'IT > jquery' 카테고리의 다른 글
| jQuery Form 관련 메서드 정리 (0) | 2012.12.17 |
|---|---|
| jQuery element(요소)의 속성 관련 메서드 정리 (0) | 2012.12.13 |
| [jQuery]jQuery Core 란? (0) | 2012.11.26 |
| jQuery 문법 (0) | 2012.11.23 |
| [jQuery]jQUERY란? (0) | 2012.11.21 |
