1. 자기 자신 this
- 이벤트에 의해서 실행되는 함수 영역안에서는 특수 키워드 this를 사용할 수 있다.
이 키워드를 jquery $() 함수에 전달하면, 이벤트가 발생한 자기 자신을 감지
할 수 있다.
1-1. 나는 몇 번째 요소인가?
- 특정 객체에 대하여 index() 함수의 리턴값을 사용하면 자신이 속한 부모태그 안에서 태그 종료의 구분 없이 자신이
몇 번째 요소인지를 알 수 있다. - index()함수는 요소를 0 부터 카운트한다.
<div>
<button>...</button> : index = 0
<button>...</button> : index = 1
<a>...</a> : index = 2
</div><body>
<div>
<button type="button" id="single">클릭하세요</button>
</div>
<hr>
<div>
<button type="button" class="multi">button0(0번 클릭됨)</button>
<button type="button" class="multi">button1(0번 클릭됨)</button>
<button type="button" class="multi">button2(0번 클릭됨)</button>
</div>
<script>
let counter = 0;
let multiCnt = { multi:[0, 0, 0] };
$("#single").click(function(){
counter++;
$(this).html(counter + "번 클릭하셨습니다.");
});
$(".multi").click(function(){
let idx = $(this).index();
multiCnt.multi[idx]++;
$(this).html("button" + idx
+"(" + multiCnt.multi[idx] + "번 클릭됨) ");
});
</script>
</body>2. 속성값 읽기
-
HTML 태그 요소의 특정 속성값을 얻기 위해서는 attr()함수를 사용한다.
$(요소).attr("속성이름");
-
속성 값 변경/추가
$(요소).attr("속성이름", "값");
-
다중 처리 가능
$(요소).attr({
속성이름: 값,
속성이름: 값,
속성이름: 값
});
<style>
/* 전체 여백 제거 */
* { margin: 0; padding: 0; }
/* 목록정의 태그 */
ul { list-style: none; }
/* float 처리용 클래스 및 마감제 클래스 정의 */
.pull-left { float: left; }
.clearfix:after { display: block; content: ''; clear: both; float: none; }
/* 바깥의 박스 */
.preview-box { margin: auto; width: 470px; border: 3px solid #d5d5d5; padding: 10px; }
/* 큰 이미지 영역 */
.preview { width: 100%; height: 470px; margin-bottom: 5px; }
/* 목록정의 아이템 크기, 여백설정(왼쪽마진) */
.item { width: 70px; height: 70px; margin-left: 10px; }
/* 목록정의 첫 번째 항목은 왼쪽마진 제거 */
.item:first-child { margin-left: 0; }
/* 작은 크기의 이미지 사이즈 설정 및 마우스 커서 모양 설정 */
.thumbnail { width: 100%; height: 100%; cursor: pointer; }
</style>
</head>
<body>
<div class='preview-box'>
<img src="img/1.jpg" class="preview" id="target"/>
<ul class="list clearfix">
<li class='item pull-left'><img src="img/1.jpg" class='thumbnail' /></li>
<li class='item pull-left'><img src="img/2.jpg" class='thumbnail' /></li>
<li class='item pull-left'><img src="img/3.jpg" class='thumbnail' /></li>
<li class='item pull-left'><img src="img/4.jpg" class='thumbnail' /></li>
<li class='item pull-left'><img src="img/5.jpg" class='thumbnail' /></li>
<li class='item pull-left'><img src="img/6.jpg" class='thumbnail' /></li>
</ul>
</div>
<script>
$(".thumbnail").click(function(){
let img = $(this).attr('src');
$("#target").attr('src', img);
});
</script>
</body>3. CSS 속성 제어
-
속성값 읽어오기
$(요소).css("속성이름");
-
속성값 적용
$(요소).css("속성이름", "값");
-
css 클래스의 적용 여부
-> hasClass( ) 메서드의 리턴값(boolean)으로 파악할 수 있다.
$(요소).hasClass("클래스이름");
-
클래스의 적용
-> 두 개 이상의 클래스를 한번에 적용할 경우 공백으로 구분하여 지정
$(요소).addClass("클래스이름");
-
클래스의 제거
-> 두 개 이상의 클래스에 대한 처리일 경우 공백으로 구분한다.
$(요소).removeClass("클래스이름");
-
$(요소).toggleClass("클래스이름");
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
.box1 {
margin: 10px auto; border: 5px solid #ccc; padding: 30px; text-align: center;
}
.box2 {
margin: 10px auto; border: 10px solid #ff00ff; background-color: #ff0;
padding: 25px; text-align: left;
}
</style>
</head>
<body>
<div id="box" class="box1"><h1>테스트 영역 입니다.</h1></div>
<input type="button" id="btn1" value="(폰트) red" />
<input type="button" id="btn2" value="(폰트) green" />
<input type="button" id="btn3" value="(폰트) blue" />
<input type="button" id="btn4" value="(배경) red" />
<input type="button" id="btn5" value="(배경) green" />
<input type="button" id="btn6" value="(배경) blue" />
<input type="button" id="btn7" value="width=50%" />
<input type="button" id="btn8" value="width=auto" />
<script>
$("#btn1").click(function(){ $("#box").css("color","red"); });
$("#btn2").click(function(){ $("#box").css("color","green"); });
$("#btn3").click(function(){ $("#box").css("color","blue"); });
$("#btn4").click(function(){ $("#box").css("background-color","red"); });
$("#btn5").click(function(){ $("#box").css("background-color","green"); });
$("#btn6").click(function(){ $("#box").css("background-color","blue"); });
$("#btn7").click(function(){ $("#box").css("width","50%"); });
$("#btn8").click(function(){ $("#box").css("width","auto"); });
</script>
</body>
</html>
개발자로 진로 변경을 위해 준비하고 있습니다