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

,