이론/자바 풀스택 국비수업

220519 jQuery 4

달거북씨 2022. 7. 13. 02:08

1. 요소 대체하기

선택한 요소를 지정된 요소로 치환하는 기능

replaceAll()과 replaceWith() 모두 동일한 기능을 하지만, 소스와 타깃 위치가 반대이다.

 

1-1. replaceAll()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
	p{
		background-color : tomato;
		margin: 6px 0;
	}
</style>
</head>
<body>
	<p>Hello</p>
	<p>javaScript</p>
	<p>world</p>
	
	<script>
 		$("<b>jQuery</b>").replaceAll("p");
	</script>
</body>
</html>

 

[출력 결과]

p태그에 지정되어 있던 스타일까지 모두 사라진다.

 

 

 

1-2. replaceWith()

$("p").replaceWith("<b>JSP</b>");

▶ replaceAll()과 소스와 타겟 위치가 반대

 

[출력 결과]

replaceAll()과 마찬가지로 p태그에 걸려있던 스타일이 없어진다.

 

 

 

 

2. 클래스 속성 변경

addClass() 지정한 요소에 클래스를 추가
removeClass() 지정한 요소에 클래스를 제거
hasClass() 지정한 요소에 클래스 유무 확인(boolean타입 반환)
toggleClass() 지정한 요소에 클래스를 추가/제거

 

[예제 코드 - addClass(), removeClass(), hasClass()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
	p{
		margin: 4px;
		font-size: 16px;
		font-weight: bolder;
		cursor: pointer;
	}
	.blue{
		color: blue;
	}
	.highlight{
		background-color: yellow;
	}
</style>
</head>
<body>
	 <p class="blue">클래스 속성 변경</p>
	 <p class="blue highlight">highlight</p>
	 <p class="blue">on these</p>
	 <p class="blue">class</p>
	 
	 <script type="text/javascript">
	 	$("p").click(function(){
			$(this).addClass("highlight");	 		
	 	});
	 	$("p").click(function(){
	 		if($(this).hasClass("highlight")){
				$(this).removeClass("blue");	 		
	 		}
	 	});
	 </script>
</body>
</html>

 

[출력 결과]

클릭 시 하이라이트 클래스가 추가됨. 하이라이트 클래스가 있다면(hasClass) 파란색 글씨가 제거됨

 

[예제 코드 - toggleClass()]

$("p").click(function(){
	$(this).toggleClass("highlight");	 		
});

토글이란, 하나의 설정 값으로부터 다른 값으로 전환하는 것이다.

두 가지 상태밖에는 없는 상황에서, 스위치를 한 번 누르면 한 값이 되고, 다시 한 번 누르면 다른 값으로 변하는 것을 의미한다.

 

[출력 결과]

하이라이트 클래스가 있다면 제거하고 없다면 추가한다. 클릭 시 마다 상태가 변환된다.

 

 

 

 

3. 속성제어

attr() 입력한 값과 일치하는 속성 값을 가져오거나 추가할 때 사용한다.
attr(attribute)는 prop(property)와 유사하나 HTML 입장에서의 속성이란 것을 유의해야 한다.
Javascript 속성을 검색하려고 한다면 prop()을 사용해야 한다.
prop() 입력한 값과 일치하는 속성 값을 가져오거나 추가할 때 사용한다.
prop(property)는 attr(attribute)와는 유사하나 Javascript 입장에서의 속성이란 것을 유의해야 한다.
HTML 속성을 검색하려고 한다면 attr()을 사용해야 한다.
removeAttr() attr() 메서드로 설정한 값이나 HTML에서 추가한 속성 값을 제거할 수 있다.
removeProp() prop() 메서드로 설정한 값이나 javascript 속성 값을 제거할 수 있다.
val() val() 메서드는 속성(value) 값을 가져오거나 변경한다.

 

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	 attr() 테스트 <input type="text" id="attr" value="some text">
	 <p></p>
	 prop() 테스트 <input type="text" id="prop">
     
	<script>
	// attr()
	 	$(document).ready(function(){
	 		let value = $("#attr").attr("value");
			$("p").text("attr() : " + value);
	 	});	
		// >>> p태그 안에 attr() : some text 출력됨
	 	
	 // removeAttr()
	 	$(document).ready(function(){
	 		$("#attr").removeAttr("value");
	 	});	
		// >>> p태그 안 text 제거됨
	 	
	 // prop()
	 	$(document).ready(function(){
	 		$("#prop").prop("value", "some text");
	 	});	
		// >>> id="prop"인 input칸 안에 some text라는 value가 할당된다.
	 	
	 // removeProp()
	 	$("#prop").click(function(){
	 		$("#prop").removeProp("value");
	 	});	
		// >>> 클릭 시 id="prop"인 input칸 안의 value가 제거된다.
		// 기존에 이미 존재하고 있는 속성은 제거하지 못한다.
	 	
	// val()
	 	$("#attr").keyup(function(){
	 		let value = $(this).val();
			$("p").text(value);
	 	});
        	// >>> 키보드 이벤트가 발생하면, 해당 value를 val()이 가져와 p태그 자리에 출력한다.
	 </script>
</body>
</html>

 

 

 

 

4. 이벤트 관련 메소드

.focus() 자바스크립트의 "focus" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focus" 이벤트를 발생시킴
.blur() 자바스크립트의 "blur" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "blur" 이벤트를 발생시킴
.change() 자바스크립트의 "change" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "change" 이벤트를 발생시킴
.select() 자바스크립트의 "select" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "select" 이벤트를 발생시킴

 

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<p>
		<input type="text">
		<span></span>
	</p>

	<script>
		$("input").focus(function(){	// 커서가 놓일 때
			$(this).next("span").html("focus");
		}).blur(function(){	// 커서가 빠져나올 때
			$(this).next("span").html("blur");
		}).change(function(event){	// 변화가 생긴 뒤 커서가 밖으로 빠져나오면 인식된다.
			alert("change!! : " + $(event.target).val());	
		}).select(function(){	// 드래그 하면 인식된다.
			$(this).next('span').html("select");
		});
	</script>
</body>
</html>

 

[출력 결과]

 

 

 

 

5. 애니메이션

구분 종류 설명
숨김 .fadeOut() 요소가 점점 투명해지면서 사라짐
.hide() 요소를 숨김
.slideUp() 요소가 위로 접히며 숨겨짐
노출 .fadeIn() 숨겨진 요소가 점점 선명해짐
.show() 숨겨진 요소가 노출됨
.slideDown() 숨겨진 요소가 아래로 펼쳐짐

 

[예제 코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    span{
        color: tomato;
        cursor: pointer;
    }
    div{
        margin: 3px;
        width: 80px;
        height: 80px;
        background: powderblue;
    }
</style>
</head>
<body>
    <input type="button" id="fadeout" value="fade out"> 
    <input type="button" id="fadein" value="fade in"> 
    <input type="button" id="hide" value="hide"> 
    <input type="button" id="show" value="show"> 
    <input type="button" id="slidedown" value="slide down"> 
    <input type="button" id="slideup" value="slide up"> 
    <input type="button" id="mix" value="mix"> 
    <div id="target">
		target
	</div>
    
<script>
    $('input[type="button"]').click(function(e){
    	let targetEvent = $(e.target);
    	switch (targetEvent.attr('id')){
    	case 'fadeout':
            $('#target').fadeOut('slow');
            break;
   		case 'fadein':
            $('#target').fadeIn('slow');
            break;
    	case 'hide':
            $('#target').hide('slow');
            break;
   		case 'show':
            $('#target').show('slow');
            break;
    	case 'slidedown':
            $('#target').hide().slideDown('slow');
            break;
    	case 'slideup':
            $('#target').slideUp('slow');
            break;
    	case 'mix':
            $('#target').fadeOut('slow').fadeIn('slow').delay().slideUp().slideDown('slow', function(){
            	alert("end");
        	});
        	break;
	}
    });
</script>
</body>
</html>

▶ mix case처럼 여러 개의 효과를 섞어 사용할 수도 있다.

 

[출력 결과]

 

728x90
저작자표시 비영리 변경금지 (새창열림)
댓글수0