Joslynn의 하루

MSA Full-Stack 개발자 양성 과정 - jQuery trigger 함수, DOM 조작_220928 본문

MSA Full-Stack 개발자 양성과정/JavaScript

MSA Full-Stack 개발자 양성 과정 - jQuery trigger 함수, DOM 조작_220928

Joslynn 2022. 9. 28. 14:48

trigger 함수

: $(selector).trigger("이벤트 종류"); 

: selector가 가지고 있는 이벤트를 강제로 호출

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
button {
	margin: 10px;
}

div {
	color: blue;
	font-weight: bold;
}

span {
	color: red;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>

<script>
	$(function() {
		$("button:first").on("click", function() {
			//alert("첫번째");
			increament($("span:first"));
		})
        
		$("button:eq(1)").on("click", function() {
			increament($("span:last"));
			//$(selector).trigger("이벤트 종류"); : selector가 가지고 있는 이벤트를 강제로 호출
			$("button:first").trigger("click");
		})

		//숫자를 증가시키는 함수
		function increament(obj) { // obj는 span 대상 전달
			let i = parseInt(obj.text())+1;
			obj.text(i);
		}

	});//ready End
</script>

</head>
<body>
	<h1>trigger 함수</h1>
	<button>Button #1</button>
	<!-- form에 감싸져있으면 전송 기능 가짐, form에 쌓여있지 않으면 그냥 버튼 기능을 담당 -->
	<button>Button #2</button>
	<div>
		<span>0</span> Button #1 clicks.
	</div>
	<div>
		<span>0</span> Button #2 clicks.
	</div>

</body>
</html>

 

each를 통한 동적 DOM 생성

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>

<script>
	$(function() {
		let arr = [{href:"https://www.naver.com/", title:"네이버"},
			       {href:"https://www.daum.net/", title:"다음"},
				   {href:"https://www.google.com/", title:"구글"},
				   {href:"https://www.kosta.or.kr/", title:"KOSTA"},
				   {href:"https://www.hrd.go.kr/", title:"고용노동부"}
				  ]; // {} 중괄호 안 key:value 나열 ---> Json문서 형식

		let str = "";
		$.each(arr,function(index, item){
			str += `<a href='${item.href}'>${item.title}</a><br>`;
		}); //item: index에 해당하는 값, {} 내부의 키값 접근: item.keyName
		
		$("div").html(str);
		$("a").css("textDecoration", "none");
		
	})
</script>
</head>
<body>
	<h3>each를 통한 동적 DOM 생성</h3>
	<div>
		<a href=""></a>
	</div>
</body>
</html>

 

DOM 조작 - ADD

: preappend, append, before, after 함수 이용

: preappend, append //하위 노드 추가

: before, after // 형제 노드 추가

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	img{width:50px;height:40px}
</style>
<script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		let color = ['powderblue', 'pink', 'yellow', 'green'];
		
		//h3 태그에 순서대로 바탕색을 변경한다.
		$("h3").each(function(index, item) {
			$(this).css({backgroundColor: color[index]});
		});
		
		let img = "<img src = 'img/heart.png'>";
		$("#pre").click(function() {
			$(".a").prepend(img); // 하위노드
		});
		
		$("#app").click(function() {
			$(".b").append(img); // 하위노드
		});
		
		$("#before").click(function() {
			$(".c").before(img); // 형제 노드
		});
		
		$("#after").click(function() {
			$(".d").after(img); // 형제 노드
		});
		
	})

</script> 

</head>
<body>
	<h1>DOM 조작 - ADD</h1>
	<input type="button" id="pre" value="prepend"/>
	<input type="button" id="app" value="append"/>
	
    <input type="button" id="before" value="before"/>
	<input type="button" id="after" value="after"/>
	
	<h3 class="a">prepend 영역</h3> <!-- 특정 element를 기준으로 하위 element로 추가(자식 element) -->
	<h3 class="b">append 영역</h3>
	
	<h3 class="c">before 영역</h3> <!-- 특정 element 기준으로 형제 노드 추가 -->
	<h3 class="d">after 영역</h3>
</body>
</html>

 

DOM 조작 - Remove & Empty

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
div {
	background-color: pink;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#removeId").click(function() {
			$("div").remove(); // div 태그 포함 삭제
			$("div").html("<h3>출력 불가</h3>");
		});

		$("#emptyId").click(function() {
			$("div").empty(); // div 영역 내부의 요소 비우기
			$("div").html("<h3>출력 가능</h3>");
		});
	})
</script>
</head>
<body>
	<h1>remove() 와 empty()</h1>
	<div>
		<p>JavaScript</p>
		<p>NodeJs</p>
	</div>
	<input type="button" id="removeId" value="remove" />
	<input type="button" id="emptyId" value="empty" />

</body>
</html>

 

DOM 요소 속성 추가 - attr() 함수

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		//$("img").mouseover(function(){}).mouseout(function() { });
		//$("img").on("mouseover", function(){}).on("", function() { });	
		//$("img").on({event종류:function(){}, event종류:function(){},...});

		$("img").on({
			mouseover : function() {
				let nowSrc = $(this).attr("src");
				//console.log("nowSrc = "+nowSrc);

				//현재 가로, 높이 (HTML의 값 가져오기)
				let w = $(this).attr("width");
				let h = $(this).attr("height");

				$(this).attr({
					src : "img/star.png",
					width : w * 2,
					height : h * 2
				});
			},
			mouseout : function() {
				$(this).attr("src", function(index, currentSrc) {
					//기능
					console.log(index + " = " + currentSrc)
					return "img/heart.png";
				}).attr("height", function(index, currentW) {
					console.log(index + "=" + currentW);
					return currentW/2;
				}).attr("width", function(index, currentH) {
					//$(selector).attr(attribute,function(index,oldvalue))
					console.log(index +"="+currentH);
					return currentH/2;
				});
			}
		});

	});
</script>
</head>
<body>
	<h1>Dom요소 속성 추가</h1>
	<img src="img/heart.png" id="img" width="75" height="75" />

</body>
</html>

**참고자료

 

 

jquery -- - 요소 속성 변경 attr() 방법

[js, jQuery] JavaScript, jQuery 기초 javascript : 객체 문서 객체 모델 : Document Object Model, 웹 문서 자체(document), 이미지 img 등... 브라우저 관련 객체: Browser Model Object : BOM, 웹 브라우저에서 사용하는 정보 sc

intrepidgeeks.com

 

**Property와 Atrribute 차이점

 

attribute 와 property 의 차이

웹 퍼블리싱을 하면서 접했던 혼돈되는 용어 중에

medium.com

 

** attr() 함수와 val() 함수의 구분

 

 

[ JQuery ] 제이쿼리 함수 ( attr, val, data 등 )

JQuery 는 태그 등 엘리먼트에서 값이나 스타일, 또는 속성 등을 조작하기 위한 함수들을 정말 많은 방법으로 지원하는데 어떤 함수들이 있는지 살펴보도록 하자. attr ( ) attr 은 엘리먼트의 속성

mjn5027.tistory.com

 

CSS Classes

  • addClass() - Adds one or more classes to the selected elements
  • removeClass() - Removes one or more classes from the selected elements
  • toggleClass() - Toggles between adding/removing classes from the selected elements
  • css() - Sets or returns the style attribute

addClass(), removeClass() 실습

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.h1Css{background-color:yellow;border:1px solid red;} 
</style>
<script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(function() {
	$("h1").hover(function() {
		$(this).addClass("h1Css");
	}, function() {
		$(this).removeClass("h1Css");
	})
})
</script>
</head>
<body>
<h1>
	마우스를 올려보세요.
</h1>   
</body>
</html>

 

toggleClass() 실습

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.hidden{display:none;}
	
</style>
<script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#btn").click(function() {
			$("#myLayer").toggleClass("hidden");
		});
	});
</script>
</head>
<body>
<h1>toggleClass 실습</h1>
	<input type="button" value="클릭하세요." id="btn"> <p>
	<img src="img/jpup_id.jpg" id="myLayer"/>
    
</body>
</html>

 

저작자표시 비영리 변경금지

'MSA Full-Stack 개발자 양성과정 > JavaScript' 카테고리의 다른 글

JavaScript 보충 정리  (0) 2022.09.28
MSA Full-Stack 개발자 양성 과정 - jQuery 기초_220927  (0) 2022.09.27
'MSA Full-Stack 개발자 양성과정/JavaScript' Related Articles more
Comments