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

Notice

Recent Posts

Recent Comments

Links

« 2024/11 »
일	월	화	수	목	금	토
					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

Archives

Today

In Total

관리 메뉴

A Joyful AI Research Journey🌳😊

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

🌳Bootcamp Revision 2023✨/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 태그들도 함께 반환한다.

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>

결과)

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>

결과)

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

		//input 요소로 내용을 보내라!
		$("#target").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>

결과)

예제 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>

결과)

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>

결과)

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>

결과)

개발자 도구를 보면 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>

결과)

기타

전체 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 2023✨ > 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 2023✨/JavaScript, jQuery, Ajax, JSON' Related Articles

Comments

A Joyful AI Research Journey🌳😊

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

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

Ch. 12 jQUERY, Ajax, JSON

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

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

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

6.3 입력 필드의 값 읽어오기

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

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

6.6 콘텐츠 삭제하기 p. 482

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

7.1 css()

7.2 addClass(), removeClass() p.485

7.3 요소의 크기 알기 p. 487

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

티스토리툴바