Notice
Recent Posts
Recent Comments
Links
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Today
In Total
관리 메뉴

A Joyful AI Research Journey🌳😊

[20] 230126 Ch. 12 jQUERY, Ajax, JSON: 6. jQUERY를 이용한 DOM 변경 · 7. CSS 조작 [K-디지털 트레이닝 20일] 본문

🌳Bootcamp Revision✨/JavaScript, jQuery, Ajax, JSON

[20] 230126 Ch. 12 jQUERY, Ajax, JSON: 6. jQUERY를 이용한 DOM 변경 · 7. CSS 조작 [K-디지털 트레이닝 20일]

yjyuwisely 2023. 1. 26. 12:48

230126 Thu 20th class

Ch. 12 jQUERY, Ajax, JSON
진도: p. 414 참고
p. 473 ~ (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국)

 

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 웹프로그래밍 초보자도 쉽게 배우는 웹 개발 지침서!이 책은 웹프로그래밍을 처음 배우는 초보자들을 위해 기초부터 차근차근 설명한다. 1~3장에

product.kyobobook.co.kr


오늘 배운 것 중 기억할 것을 정리했다.

지난 수업 때 배운 것 중 다시 기억할 것

반환하다 = return

마우스 우클릭 후 "페이지 소스 보기" 클릭해서 전체 코드를 볼 수 있다.

<input> 태그의 value 속성은 <input> 요소의 초깃값(value)을 명시합니다.

value 속성은 <input> 요소의 type 속성값에 따라 다른 용도로 사용됩니다.
- “button”, “reset”, “submit” : 버튼 내의 텍스트를 정의함.
- “hidden”, “password”, “text” : 입력 필드의 초깃값을 정의함.
- “checkbox”, “image”, “radio” : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의함.

또한, <input> 요소의 type 속성값이 “file”인 경우에는 value 속성을 사용할 수 없습니다.
참고: http://www.tcpschool.com/html-tag-attrs/input-value

2023.01.03 - [1. Revision 2023/CSS3] - [5] 230103 Ch. 4 CSS3 스타일 시트 기초: CSS 개념, 선택자, CSS를 삽입하는 방법, 색상, 폰트, 텍스트 스타일 설정

1.4 클래스 선택자 (. )

. 를 이용해서 정의된다. 몇 개의 요소를 하나의 클래스로 묶어서 스타일을 지정하려고 할 때 사용된다. 
여러 개를 요소를 한꺼번에 선택할 수 있다. 
요소를 정의할 때 클래스 이름을 부여할 수 있다.
동일 이름 된다. 

ex) 클래스가 target인 요소를 선택한다.

.target { color : red }

Ch. 12 jQUERY, Ajax, JSON

책의 목차
-jQuery
-첫 번째 jQuery 프로그램
-jQuery 문장의 구조
-jQuery를 이용한 이벤트 처리
-jQuery를 이용한 애니메이션 효과
-jQuery를 이용한 DOM 변경
-jQuery를 이용한 CSS 조작
-Ajax 개요
-jQuery를 이용하여 Ajax 사용하기
-JSON

6. jQuery를 이용한 DOM 변경 p. 473

<요약> 

$("선택자").text(): 텍스트만 가져온다.
$("선택자").text("내용"): 내용(텍스트만)을 보낸다.

$("선택자").html(): (HTML 태그들도) 가져온다.
$("선택자").html("내용"): 내용(HTML 태그들도)을 보낸다.

$("선택자").val(): 입력 요소의 값 가져온다. (입력 필드의 값을 반환한다.)
$("선택자").val("내용"): 내용(입력 요소의 값)을 보낸다.

attr(): 요소의 속성을 가져오거나 변경할 수 있다.

$("선택자").attr(속성명): 속성명의 값을 가져온다.
$("선택자").attr(속성명, 속성값): 속성명의 값을 보낸다. (교재에 없는 내용)

append(): 선택된 요소의 끝(end)에 새로운 콘텐츠를 추가한다. 선택된 노드의 마지막 자식 노드로 새로운 콘텐츠를 추가한다.
prepend(): 선택된 요소의 처음(beginning)에 새로운 콘텐츠를 추가한다.
after(): 선택된 요소의 뒤에 콘텐츠를 삽입한다.
선택된 노드의 형제 노드로 새로운 노드를 추가한다. 
before(): 선택된 요소의 앞에 콘텐츠를 삽입한다. 

remove(): 선택된 요소와 함께 그 자식 요소들도 전부 삭제한다.
empty(): 선택된 요소는 그대로 두고 자식 요소들만 삭제한다.

css(): 선택된 요소의 스타일 속성을 설정하거나 반환할 수 있다.
요소의 스타일 속성을 가져오거나 변경할 수 있다.
addClass(): 선택된 요소에 하나 이상의 클래스를 추가한다.
removeClass(): 선택된 요소에 하나 이상의 클래스를 삭제한다.

width(): 요소의 가로 크기를 반환한다. 패딩, 경계, 마진은 들어가지 않는다. 
height(): 요소의 세로 크기를 반환한다. 

jQuery를 이용해서 할 수 있는 작업은 다음과 같다.

1) 요소의 내용을 가져오거나 변경
- text(): 선택된 요소의 텍스트를 반환한다.
- html(): 선택된 요소의 HTML 태그가 포함된 콘텐츠를 반환한다.  

2) 요소의 속성을 가져오거나 변경
- attr(): 요소의 속성을 반환한다. 
ex) <a href = "http://www.naver.com">네이버</a>
<img src="image/coffee.jpg">

3) 요소의 스타일 속성을 가져오거나 변경
- css(): 요소의 스타일 속성을 반환한다.

4) 요소를 추가하거나 삭제
- append()
- remove()


- val(): 입력 필드의 값을 반환한다.
- position(): 요소의 위치를 반환한다. 

6.1 요소의 콘텐츠 가져오기 p. 475

jQuery에서 특정 요소의 내용(콘텐츠)를 얻으려면 다음과 같은 메서드를 사용한다.
HTML 요소 중에 id가 "target"인 요소의 텍스트를 가져오는 문장이다. 

$("#target").text();

$("target"): 요소를 선택하는 선택자
.text(): id가 "target"인 요소의 텍스트를 가져온다. 

단순히 텍스트만을 반환하는 text()와 달리, html()은 콘텐츠 안에 포함된 HTML 태그들도 함께 반환한다. 

예제) 버튼이 눌러지면 id="target"인 요소의 text()와 hmtl()을 경고 상자로 출력한다.

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
	// text() 버튼을 클릭하면
	$("#text").click(function(){
		// p 요소의 내용을 가져와라!
		alert($("#target").text());
	});
	// html() 버튼을 클릭하면
	$("#html").click(function(){
		// p 요소의 내용을 가져와라!
		alert($("#target").html());
	});
});
</script>
</head>
<body>
<p id="target">이것은 <strong>하나의 </strong>단락입니다.</p>
<button id="text">text()</button>
<button id="html">html()</button>
</body>

결과) text()는 단순히 텍스트만을 반환하고, html()은 HTML 태그들도 함께 반환한다. 

text() 클릭&nbsp;후
html() 클릭&nbsp;후

6.2 요소의 콘텐츠 변경하기 p. 477

요소의 콘텐츠를 변경하고 싶으면 원하는 콘텐츠를 인수로 전달한다.

$("#target").text("안녕하세요?");

$("#target"): id가 "target"인 요소를 선택한다.
text("안녕하세요?"): 선택된 요소의 콘텐츠를 변경한다.

예제)

<script>
$(document).ready(function(){
	// text() 버튼을 클릭하면
	$("#text").click(function(){
		// p 요소의 내용을 가져와라!
		//alert($("#target").text());
		// p 요소로 내용을 보내라!
		$("#target").text("안녕하세요")
	})
	// html() 버튼을 클릭하면
	$("#html").click(function(){
		// p 요소의 내용을 가져와라!
		//alert($("#target").html());
		// p 요소로 내용을 보내라!
		$("#target").html("<b>안녕하세요</b>")
	})
});
</script>
</head>
<body>
<p id="target">이것은 <strong>하나의 </strong>단락입니다.</p>
<button id="text">text()</button>
<button id="html">html()</button>
</body>

결과)

text() 클릭 후
html() 클릭 후

6.3 입력 필드의 값 읽어오기

입력 양식 안에 포함된 입력 요소의 값을 읽어볼 때는 val() 함수를 사용한다.
사용자가 입력 필드에 입력한 값을 읽어올 때, 사용하면 좋다.
예제) $("#target).val()은 id="target"인 입력 필드 요소의 값을 가져온다.

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function (){
		alert($("#target").val());
	});
});
</script>
</head>
<body>
이름: <input type="text" id="target" value="홍길동"><br>
<button id="target">val()</button>
</body>

결과)

val() 클릭 후

예제 2) 클릭했을 때  input 요소로 내용을 보낸다.

		//input 요소로 내용을 보내라!
		$("#target").val("홍길동");

결과)

val() 클릭 후

6.4 요소의 속성 가져오기 p. 479

attr() 메서드는 선택된 요소의 속성 값을 가져온다. 

$(selector).attr( attributeName );

attributeName: 값을 알고 싶은 속성의 이름 

ex) id="myImage"인 요소의 "src" 속성값을 가져온다. 즉 이미지의 파일 이름을 가져온다.

$("#myImage").attr("src")

id="target"인 요소의 "href" 속성을 가져온다.

$("#target").attr("href")

예제)  "src"속성값, 즉 이미지의 파일 이름을 가져온다.

<style>
#coffee{width:120px; height:100px;}
</style>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		alert($("#coffee").attr("src"));
	});
});
</script>
</head>
<body>
<img src="D:\221229\html\WebContent\image\coffee.jpg" id="coffee"><br>
<button>attr()</button>
</body>

 

결과)

attr() 클릭 후

예제 2) img 요소로 src 속성의 값을 보낸다. "이미지 변경"을 누르면 새로운 이미지가 뜬다. 
$("선택자").attr(속성명): 속성명의 값을 가져온다.
$("선택자").attr(속성명, 속성값): 속성명의 값을 보낸다.

<style>
#coffee{width:120px; height:100px;}
</style>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
	//$("#attr").click(function(){
		//img요소의 src속성의 값을 가져온다.
		//alert($("#coffee").attr("src"));
		//이미지 변경 버튼을 클릭하면,
		$("#change").click(function(){
		//img요소의 src속성의 값을 보낸다.
		$("#coffee").attr("src","D:\221229\html\WebContent\image\Landscape.jpg");	
		})
});
</script>
</head>
<body>
<img src="D:\221229\html\WebContent\image\coffee.jpg" id="coffee"><br>
<button id="attr">attr()</button>
<button id="change">이미지 변경</button>
</body>
</html>

6.5 DOM에 요소 추가하기 p. 480

- append(): 선택된 요소의 끝(end)에 새로운 콘텐츠를 추가한다.
선택된 노드의 마지막 자식 노드로 새로운 콘텐츠를 추가한다.
ex) 네이버 댓글을 쓴 경우 [등록] 눌렀을 때 댓글 추가된다. 
댓글 삭제의 경우 remove, empty 사용한다. 

- prepend(): 선택된 요소의 처음(beginning)에 새로운 콘텐츠를 추가한다.

- after(): 선택된 요소의 뒤에 콘텐츠를 삽입한다.
선택된 노드의 형제 노드로 새로운 노드를 추가한다. 

- before(): 선택된 요소의 앞에 콘텐츠를 삽입한다. 

$("#target").append("<p>Test</p>");

$("#target"): id가 "target"인 요소를 선택한다.
append("<p>Test</p>"): <p> 요소를 id="target"인 끝에 삽입한다.

예제)

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
	//append()버튼을 클릭하면
	$("#button1").click(function(){
		//글자색이 빨간색이고 진한 Hello라는 문자열을 뒤에 추가한다.
		$("p").append("<b style='color:red'> Hello! </b>");
	});
	//prpend()버튼을 클릭하면
	$("#button2").click(function(){
		//글자색이 빨간색이고 진한 Hello라는 문자열을 앞에 추가한다.
		$("p").prepend("<b style='color:red'> Hello! </b>");
	});
});
</script>
</head>
<body>
<p>I would like to say : </p>
<button id="button1"> append() </button>
<button id="button2"> prepend() </button>
</body>

결과)

append() 클릭 후
prepend() 클릭 후
개발자 도구에 추가된 것을 알 수 있다.

 

6.6 콘텐츠 삭제하기 p. 482

- remove(): 선택된 요소와 함께 그 자식 요소들도 전부 삭제한다.
- empty(): 선택된 요소는 그대로 두고 자식 요소들만 삭제한다.

예제)

<style>
p{background-color:yellow;}
.container{height:80px;width:200px;border:1px dotted red;}
</style>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
	//remove() 버튼을 클릭하면,
	$("#button1").click(function(){
		//div 요소를 제거한다.
		$(".container").remove();
	});
});
$(document).ready(function(){
	//empty() 버튼을 클릭하면,
	$("#button2").click(function(){
		//div 요소를 제거한다.
		$(".container").empty();
	});
});
</script>
</head>
<body>
<button id = "button1"> remove() </button>
<button id = "button2"> empty() </button><br>
<div class = "container"> 
<p class = "hello"> Hello <p>
<p class = "goodbye"> Goodbye <p>
</div>
</body>

결과)

remove() 클릭 후 개발자 도구를 보면 선택된 요소 container와 함께 자식 요소들도 전부 삭제됨을 알 수 있다.
empty()를 클릭 후 개발자 도구를 보면 선택된 요소 "container"는 남아있는 걸 알 수 있다.

7. jQuery를 이용한 CSS 조작 p. 484 

- css(): 선택된 요소의 스타일 속성을 설정하거나 반환할 수 있다.
요소의 스타일 속성을 가져오거나 변경할 수 있다.
- addClass(): 선택된 요소에 하나 이상의 클래스를 추가한다.
- removeClass(): 선택된 요소에 하나 이상의 클래스를 삭제한다.

7.1 css() 

$("#target").css("color");

$("#target"): id가 "target"인 요소를 선택한다.
css("color"): 선택된 요소의 color 속성을 가져온다. 

$("#target").css("color", "blue");

css("color", "blue"): 선택된 요소의 color 속성을 "blue"로 지정한다.

예제)

<style>
div{width:60px;height:60px;background-color:blue;}
</style>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
	//css(element)버튼을 클릭하면,
	$("#button1").click(function(){
		//div요소에 현재 있는 css 값을 가져와서 color변수에 저장한다.
		var color = $("#div1").css("background-color");
		//가져온 값(color변수에 저장되어 있는 값)을 p요소에서 출력한다.
		$("#result").text("background-color: "+color);
	});
	//css(element)버튼을 클릭하면,
	$("#button2").click(function(){
		//현재 div요소에 적용되어 있는 css를 변경한다.(background-color:blue->background-color:red)
		$("#div1").css("background-color", "red");
	});
});
</script>
</head>
 
<body>
<div id="div1"></div>
<button id="button1">css(element)</button>
<button id="button2">css(element,style)</button>
<p id="result">여기에 결과가 표시됩니다.</p>
</body>

결과)

클릭 안 했을 때
css(element) 클릭 후 파란색 값 rgb가 뜬다.
css(element,style) 클릭 후 red로 변경됐다.
css(element) 클릭 후 레드의 rgb값이 뜬다.

7.2 addClass(), removeClass() p.485

addClass(): 선택된 요소에 CSS 클래스를 적용한다. 기존 요소의 스타일을 어떤 클래스 스타일로 변경한다. 

removeClass(): 선택된 요소로부터 CSS 클래스를 삭제한다. 

예제) 버튼이 눌러지면 #div 요소에 "warning" 클래스 속성을 추가한다. 

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").addClass("warning");
	});
});
</script>
<style>
.warning{border:1px solid black; background-color:yellow;}
</style>
</head>
 
<body>
<div id="div1">
<p>예제 단락입니다.</p>
</div>
<br>
<button>addClass()</button>
</body>

결과) 

개발자 도구를 보면 div의 class가 없는 것을 알 수 있다.
addClass() 클릭 후
개발자 도구를 보면 class="warning"이 추가된 것을 알 수 있다.

7.3 요소의 크기 알기 p. 487

width(): 요소의 가로 크기를 반환한다. 패딩, 경계, 마진은 들어가지 않는다. 

height(): 요소의 세로 크기를 반환한다. 

<div> 요소의 가로와 세로 크기를 반환한다. 

$("button").click(function(){
	alert($("#div1").width()); //가로 크기
    alert($("#div1").height()); //세로 크기
});

브라우저의 폭이나 HTML 문서 전체의 폭도 알 수 있다.

$(window).width(); //브라우저 뷰포트의 폭
$(document).width(); //HTML 문서의 폭

예제) 5개의 사각형을 만들고 사각형을 누를 때마다, 사각형의 너비가 8픽셀만큼 줄어든다.

$(this).width(modWidth).addClass("next");

$("div")가 아닌 this(사용자가 선택함)를 쓴다. 
div가 1,2,3,4,5 상자 자체에 들어가는데 this를 써야 그 다음 사용자가 선택한 상자의 크기가 줄어든다.

<style>
/*float:left: 박스가 좌우로 배치된다.*/
div{width:70px;height:50px;float:left;margin:5px;background:red;}
.next{color:white;background:blue;}
</style>
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
 
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
$(document).ready(function(){
	var modWidth = 50;
	$("div").click(function(){
		//메서드 체이닝을 볼 수 있다. 
		//버튼이 눌릴 때마다 요소의 너비를 줄인다.
		//this: 사용자가 선택한, 현재 요소를 선택한다.
		$(this).width(modWidth).addClass("next");
		modWidth -= 8;
	});
});
</script>
</body>

 

결과)

클릭전
1에서 5까지 순서대로 클릭했다. 크기가 줄어들었다.

기타

전체 jQuery 메서드에 대한 참고 문헌 
https://api.jquery.com/

 

jQuery API Documentation

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t

api.jquery.com

728x90
반응형
저작자표시 비영리 동일조건

'🌳Bootcamp Revision✨ > JavaScript, jQuery, Ajax, JSON' 카테고리의 다른 글

[71] 230410 동기식, 비동기식, AJAX, Spring: 게시판 댓글 [K-디지털 트레이닝 71일]  (0) 2023.04.10
Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증: 연습 문제들 [K-디지털 트레이닝 16일~18일차]  (0) 2023.02.13
남은 챕터 리스트: Ajax, JSON, API, JSP [K-디지털 트레이닝 19일]  (0) 2023.01.25
[19] 230125 Ch. 12 jQUERY, Ajax, JSON: 1. jQuery, 2. 첫 번째 jQuery 프로그램, 3. jQuery 문장의 구조, 4. jQuery를 이용한 이벤트 처리 · 5. 애니메이션 효과 [K-디지털 트레이닝 19일]  (0) 2023.01.25
'🌳Bootcamp Revision✨/JavaScript, jQuery, Ajax, JSON' Related Articles more
Comments