Text Input KeyUp Function
<body>
<tr>
<th>연락처</th>
<td>
<select id="hp1">
<option>010</option>
<option>017</option>
<option>019</option>
</select>
<b>-</b>
<input type="text" id="hp2" maxlength="4">
<b>-</b>
<input type="text" id="hp3" maxlength="4">
</td>
</tr>
</body>- 전화번호 입력을 위한 text 타입의 input 버튼 생성
- 맨 앞 3 자리는 고정 선택지 중 선택, 뒤의 각 4 자리는 입력
- maxlength 속성은 입력 가능한 최대 text 개수를 의미
<script>
//핸드폰 4글자 입력시 다음칸으로 이동
$("#hp2").keyup(function(){
if($(this).val().length==4)
$("#hp3").focus();
});
</script>- keyup() 함수는 키보드의 키를 눌렀다 뗄 때 이벤트 발생
- text 타입의 input 버튼은 text의 글자 혹은 숫자의 개수만큼 length 값 발생
- focus() 함수는 대상 태그에 커서를 깜빡이게 함
- 즉 2번째 자리 숫자 4개를 입력 시 3번째 자리로 자동적으로 넘어가게 하는 코드
Transform Attribute
<body>
<img src="<!--이미지 경로-->">
<img src="<!--이미지 경로-->">
<img src="<!--이미지 경로-->">
</body>- 이미지 3개 생성
<script>
$("img:eq(0)").hover(function(){
//45도 회전(deg,rad,grad,turn(1회전,360deg)등이있다)
$(this).css("transform","rotate(45deg)");
},function(){
$(this).css("transform","rotate(0deg)");
});
</script>- transform 속성은 style 속성이므로 css로 속성 부여 가능
- x도 시계 방향 회전을 위해서는 속성 값으로 rotate(xdeg) 부여
- deg, rad, grad는 회전을 위한 동일한 의미의 단위
- rotate(0deg)는 원래 상태 의미
<script>
$("img:eq(0)").hover(function(){
//왼쪽으로 회전
$(this).css("transform","rotate(-45deg)");
},function(){
$(this).css("transform","rotate(0deg)");
});
</script>- rotate(-xdeg)는 시계 반대 방향으로 x도 회전 의미
<script>
$("img:eq(1)").hover(function(){
//transform scale(확대,축소)
$(this).css("transform","scale(2,2)"); //가로세로2배확대
},function(){
$(this).css("transform","scale(1,1)"); //원래대로
});
</script>- 가로 방향으로 x배, 세로 방향으로 y배 확대하기 위해서는 속성 값 scale(x,y) 부여
<script>
$("img:eq(2)").hover(function(){
$(this).css("transform","translate(50px,50px)"); //(x축,y축)이동
},function(){
$(this).css("transform","translate(0px,0px)"); //원래대로
});
</script>- x축, y축으로 이동하기 위해서는 속성 값 translate(x축,y축) 부여
- translateX(x)는 오른쪽으로 x만큼 이동 의미(x가 음수면 왼쪽으로 이동)
- translateY(y)는 아래로 y만큼 이동
Tag Appearing & Disappearing Effect
<body>
<div id="msg">제이커리 공부중</div>
<img src="<!--이미지 경로-->" id="img">
<button type="button" id="btn1">Effect</button>
<button type="button" id="btn2">Effect</button>
<button type="button" id="btn3">Effect</button>
</body>- 텍스트와 이미지, 버튼 각각 생성
hide(), show(), toggle()
<script>
$("#btn1").click(function(){
$("#msg").hide();
$("#img").hide('slow'); //fast
});
$("#btn2").click(function(){
$("#msg").show();
$("#img1").show('slow');
});
$("#btn3").click(function(){
$("#msg").toggle();
$("#img1").toggle('slow');
});
</script>- hide() 함수는 대상 태그 숨김 처리
- show() 함수는 숨겨진 대상 태그 재등장
- toggle() 함수는 hide()와 show()를 번갈아 실행
slideUp(), slideDown()
<script>
$("#btn1").click(function(){
$("#msg").slideUp();
$("#img").slideUp('slow'); //fast
});
$("#btn2").click(function(){
$("#msg").slideDown();
$("#img1").slideDown('slow');
});
$("#btn3").click(function(){
$("#msg").slideToggle();
$("#img1").slideToggle('slow');
});
</script>- slideUp()과 slideDown()은 각각 대상 태그를 슬라이드 형식으로 숨김, 재등장
- slideToggle()은 매번 위의 두 함수 번갈아 실행
fadeOut(), fadeIn()
<script>
$("#btn1").click(function(){
$("#msg").fadeOut();
$("#img").fadeOut('slow'); //fast
});
$("#btn2").click(function(){
$("#msg").fadeIn();
$("#img1").fadeIn('slow');
});
$("#btn3").click(function(){
$("#msg").fadeToggle();
$("#img1").fadeToggle('slow');
});
</script>- fadeOut()과 fadeIn()은 투명도를 조절하며 숨김과 재등장
- fadeToggle()은 위의 두 함수 번갈아 실행
fadeTo()
<script>
$("#btn1").click(function(){
$("#msg").fadeTo(3000,0.5,function(){ //3000=3초,투명도 0.5
$(this).css("border","10px dotted pink");
});
$("#img1").fadeTo(2000,0.2,function(){
$(this).css("opacity","1").css("border","10px dashed cyan"); //opacity속성은 투명도,1은 원래상태
});
});
</script>- fadeTo() 함수는 투명도를 조절하며 사라지다가 결과적으로 지정한 이벤트 발생
- fadeTo(x, y, function( ) { }); : x만큼의 시간 후에 실행, y만큼의 투명도까지 투명도 변경, 최종적으로 { }의 함수 실행
Additional Selectors
- parent() : 대상 태그의 부모 태그(상위)
- siblings() : 대상 태그의 형제 태그(동위)
- children() : 대상 태그의 자식 태그(하위)
<body>
<div class="board one">
<b>게시판 내용_1</b>
<div class="ans">
<h5>게시판 내용_1에대한 댓글1</h5>
<h5>게시판 내용_1에대한 댓글2</h5>
<h5>게시판 내용_1에대한 댓글3</h5>
</div>
</div>
<div class="board two">
<b>게시판 내용_2</b>
<div class="ans">
<h5>게시판 내용_2에대한 댓글1</h5>
<h5>게시판 내용_2에대한 댓글2</h5>
<h5>게시판 내용_2에대한 댓글3</h5>
</div>
</div>
<div class="board three">
<b>게시판 내용_3</b>
<div class="ans">
<h5>게시판 내용_3에대한 댓글1</h5>
<h5>게시판 내용_3에대한 댓글2</h5>
<h5>게시판 내용_3에대한 댓글3</h5>
</div>
</div>
</body>- <b>태그와 <div class=”ans”>태그는 동위이므로 형제 관계
<script>
$("div.board>b").click(function(){
$(this).siblings().find("h5").show('slow');
$(this).parent().siblings().find("h5").hide('slow');
})
</script>- 각 ‘게시판 내용’ 클릭 시 자신의 게시판의 ‘내용에 대한 댓글’만 등장하고, 다른 게시판의 ‘댓글’은 숨김 처리되도록 코드 작성
- siblings()와 parent()의 관계가 어떠한지 살펴보기
Array & Loop in JQuery
Normal Array
<script>
var data=["red","orange","gray","blue","pink"];
$.each(data,function(i,ele){ //i:인덱스 ele:엘리먼트(i에 해당하는 아이템값)
var s="<h2 style='color: "+ele+"; width: 200px'>"+ele+"</h2>";
document.write(s);
});
</script>- jquery의 반복문 : $.each(배열명,function(인덱스,각 엘리먼트) { });
- 배열명의 배열의 length만큼 반복문 실행
- 일반 배열 생성 시 element는 index에 해당하는 배열명[index] 의미
Array with Attributed Elements
<body>
<div id="show"></div>
</body>- 속성 값을 지닌 element를 가진 배열 생성 후 작업을 위한 태그
<script>
var info=[{name:"김영준",hp:"010-1111-2222",addr:"서울시"},
{name:"송주영",hp:"010-2222-4444",addr:"제주시"},
{name:"최진평",hp:"010-3333-5555",addr:"경기도"}];
var s="";
$.each(info,function(i,elt){
s+="<div class='box'>";
s+="이름: "+elt.name+"<br>";
s+="핸드폰: "+elt.hp+"<br>";
s+="주소: "+elt.addr+"<br>";
s+="</div>";
});
$("#show").html(s);
</script>- info 배열은 각 element에 name, hp, addr 속성과 그 속성 값을 부여
- $.each 반복문 내에서 element(elt)는 각자 가진 속성을 통해 index(i)에 해당하는 속성 값 호출 가능
- html() 함수는 대상 태그의 html 요소를 태그 적용한 채로 해당 함수의 인자 값으로 변경
초보개발자