공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

제이쿼리 변수와 셀럭터의 조합

serpiko 2014. 1. 15. 10:20

   변수와 셀럭터의 조합


코드) 
<html>
<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<style>
		body #mask {position:absolute;width:700px;height:300px;overflow:hidden;}
		body img {width:300px;}
	</style>
</head>
<body>
	<div id="mask">
		<img id='imgID1' src="sample.jpg" label="hello1"/>
		<img id='imgID2' src="sample.jpg" label="hello2"/>
	</div>
	<script>
		$(document).ready(function(){
			var url = $('#imgID1').attr("label");
			console.log(url); //hello1 출력

			var maskVar = $('#mask');
			maskVar + $('#imgID2').css('opacity',0.5);
		});		
	</script>
</body>
</html>


19 ~ 20 : 이부분 
 var maskVar = $('#mask'); 
 maskVar + $('#imgID2').css('opacity',0.5);

결과)


5 : overflow:hidden 으로 인해 마스크 처리가됨. 유의할점은 두개의 이미지를 합친 width 보다 크거나 같아야 inline으로 쌓임


17 : attribute를 사용, 호출 테스트 'hello1' 이 출력된다.


19 : 변수로 등록하여


20 : 처럼 결합해서 쓴다.



저작자표시 비영리 동일조건 (새창열림)

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

02.드래그 - 축이동  (0) 2014.03.10
01.드래그 - 기초  (0) 2014.03.10
버튼핸들러  (0) 2014.01.06
length - Element 갯수 반환  (0) 2014.01.06
on() - selectstart, dragstart 로 마우스 드래그방지  (2) 2014.01.06
댓글