CSS속성을 읽거나 바꾸는 함수드들을 알아봅시다.
<--CSS 읽기/바꾸기-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$('#content').ready(function(){
var B_ground = $(".test").css("background-color");
$(".test").css("background-color", '#FE0037');
alert(B_ground);
});
</script>
<style type="text/css">
.test{
background-color: blue;
}
</style>
</head>
<body>
<div class = "test">
Blue Text!
</div>
</body>
</html>
▲위 코드는 간단히 CSS의 값을 받아와 출력하는 것과 CSS 변경 하는 것을 보여준다.
△위 스크립트 코드 2번째(CSS변경 코드)를 이용하면 CSS를 추가도 가능하다.
var baseFont = $('body').css('font-size');
baseFont = parseInt(baseFont,10);
$('body').css('font-size',baseFont);
△위의 또다른 예제는 font크기를 다른 폰트에도 똑같이 적용하는 것을 보여준다.
▲왜 복잡 하냐면 font-size를 변수에 넣을떄 XX px 의 꼴로들어 가게되는데 px부분을 제거하기 위해서 parseInt를 사용한다.
<--여러개의 CSS속성을 바꾸기-->
위의 예제 처럼 하나하나 바꿔줘야 할 때도 있지만 한번에 여려개를 바꿔야하는 경우도 있습니다. 한번 알아보자!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$('body').ready(function(){
$('.test .syntax').css({'background-color' : 'red',
'font-size' : '20px',
'border' : '10px'});
});
</script>
</head>
<body>
<div class = "test">
<p class = "syntax">Test syntax!!</p>
</div>
</body>
</html>
▲2개 이상의 CSS속성을 줄때는 위 처럼 사용한다.
△css({'CSS' : '값' , 'CSS' : '값' , ....});
<--HTML 속성 읽고 설정하고 제거하기-->
HTML 속성 읽고 설정하는데에는 두개의 함수가 있습니다.
바로 attr(), removeAttr() 함수이다.
<--attr() & removeAttr()-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$('body').ready(function(){
var path = $('.test img').attr('src');
$('.test').append('<p>'+path+'</p>');
$('.test img').attr('src','http://postfiles6.naver.net/20150115_261/0314tnrud_1421325513038b1nCg_JPEG/%C4%AD%C4%DA%B7%B9_2%C8%AD_%289%29.jpg?type=w1');
});
$(function(){
$('.test #remove').click(function(){
$(".test img").removeAttr("src");
});
});
</script>
</head>
<body>
<div class = "test">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSBjR5_BavmJOTFrdKMFgi4xPZmbbY1gavKJO9UjNehmypOEI0I" width = "300" height="300">
<input type = "button" value = "remov img" id = "remove">
</div>
</body>
</html>
△처음 ready 함수는 append()로 원래 주소를 보여주고 attr()로 바꾼 이미지를 보여준다.
▲click()함수는 button을 클릭하면removeAttr()을 사용해 이미지가 사라지는 것을 보여준다.
<-- fadeOut() -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
<title>Meta tag</title>
<script type="text/javascript">
$(function(){
$('.test #remove').click(function(){
$(".test img").fadeOut();
});
});
</script>
</head>
<body>
<div class = "test">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSBjR5_BavmJOTFrdKMFgi4xPZmbbY1gavKJO9UjNehmypOEI0I" width = "300" height="300">
<input type = "button" value = "fade Out" id = "remove">
</div>
</body>
</html>
△fadeOut()적용 예제이다. 서서히 사라지는 것을 볼 수있다.
<-- Each와 익명 함수 -->
$(' ').each(function(){
//code
});
each는 함수의 시작을 알려주고, function()은 익명함수이다.
※책에 나오는 사용법으로는 주로 반복을 하는 코드일 때 사용한다고 나온다.
$('img').each(function(){
alert("img!");
});
△이미지가 한 10개 정도 있는 페이지에 저렇게 쓰면 10번 출력될 것 이다...사용예
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="http://"]').each(function(){
var extLink = $(this).attr('href');
alert(extLink);
});
});
</script>
</head>
<body>
<a href="http://www.naver.com/"></a>
<a href="http://www.daum.net/"></a>
<a href="https://www.google.co.kr/?gws_rd=ssl"></a>
</body>
▲위의 this는 $('a[href^="http://"]')를 가리키고 있다.
△순서 대로 찾으면서 하나씩 alert로 출력 해줄 것 이다.
'Programming > Java Script + jQuery' 카테고리의 다른 글
| jQuery 이벤트 사용하기! (0) | 2015.12.16 |
|---|---|
| jQuery 콘텐츠 추가! (0) | 2015.12.14 |
| jQuery 선택자 & 필터 (0) | 2015.12.11 |
| jQuery 시작! (0) | 2015.12.09 |
KimMinSung
