[Jquery] Jquery 사용하기, 함수 호출 방법, radio / checkbox / select 알아보기

 Jquery 

자바스크립트를 간단하게

Jquery에서 중요한건 Ajax 이다.

다시 말해서 Ajax를 쓰려면 jquery 문법을 알아야 한다!

 

자바스크립트 를 '경량화' 또는 '간략화' 시켜놓은 게 Jquery이다.

자바스크립트에서 getElementsByTagname 와 같이 긴~~ 코드를 경량화 시켜서 접근가능하게 만드는 역할을 한다.

 

🎈 자바스크립트에서는 valu값을 이렇게 넘겨받았다

 let name = document.getElementById('name').value;

🎃 Jquery에서는 value값을 이렇게 넘겨받는다

let name = $("#name").val();
let age = $("#age").val();
let address = $("#address").val();

 

Jquery의 단점 

- 자바스크립트는 버전이 없는데 Jquery 는 버전에 예민하다.

- 회사별로 버전에 다르게 쓰여서 구동에 단점이 있다.

jquery 주소 추가 방법

방법1.

https://www.w3schools.com/

w3school에서 튜토리얼- Jquery들어간다

W3Schools Free Online Web Tutorials

2. Jquery의 아무 코드에서 아래 url을 복사한다.

3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">

4. 코드를 붙여넣고 코드 짠다 ~~ ( 이클립스에서는 주로 head 부분에 복붙)

 

방법2. 프로그램이 커질때 하는 방법(더 빠름)

1. 다운로드 받은 파일(jquery.min.js )을 이클립스에 import 한다 

2. src 부분에 파일 이름을 넣는다.

<script src="./jquery.min.js"></script>

 

방법3.

1. https://jquery.com/

jQuery

jQuery 사이트 - Blog - Download - https://code.jquery.com/jquery-3.6.3.min.js   의 링크를 copy 한다

2. src 부분에 주소를 넣는다.

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

 

기존문법과 jquery 문법 비교

<기존문법>

document.getElementById().innerText = "hello" //setter
let str = document.getElementById().innerText; //getter

< Jquery 문법 > 

$(태그 또는 id 또는 class 또는 name).핸들러함수(매개변수)

 

 *핸들러함수란 ? onclick, onchange 등이고 자바스크립트에서는 onclick = "func()" 이런식으로 사용했다.

---

 용어정리

- DOM ( Document Object Model)

 

- Ajax (나중에 따로 배움)

 

- Jquery-UI : Button, input(text), slide... (사용하는 회사 거의 없음)

 

- Bootstrap : 반응형 

요즘은 Jquery보다 부트스트랩을 더 많이 사용한다. ui를 하나만 만들고 모바일에도, pc에도 적용 가능하도록 '반응형'으로 만든게 부트스트랩이다.

 

반면 Jquery-ui 는 반응형이 아니다.

 

프레임워크 : 누군가가 편하게 쓰라고 만들어놓은 것 (spring 같은)

 

---

getter / setter

getter  :  불러오기 

setter  :  세팅하기 (= 값 바꾸기)

// input의 값을 가져오기 (getter)
let text = $("#text").val();

// input에 입력하기 (setter)
$("#text").val("나는 할 수 있다");

css 함수 쓸 때 seeter /  getter 

	// setter    property      value  
	$("h3").css("background", "#ffff00");
		
	// getter : property명 만으로 얻어올 수 있다.
	let color = $("h3").css("background");
	alert(color);
	});

 

html / text

🎈html

- html은 tag 값도 반환한다.

	$("p").html("<b>새로운 문자열</b>");

출력값: 새로운 문자열

             p 태그의 문자열을 새로운 문자열로 바꾸고 <b> 태그로 "굵게" 적용

---

$(".cls").html("<i>I can do it</i>");

출력값 : I can do it

 

🎈text

- text는 문자열만 반환한다

- tag 값 반환하지 못한다

$("p").text("<b>new string</b>");

출력값:  <b>new string</b>

---

id, class  ,name 에 접근하기

id = #

id 는 #으로 접근한다.

 

class = .

- class 는 . 으로 접근한다.

- 호출시 태그 다음에 띄어쓰기를 해야한다.

	$("div .cls").click(function() {
		alert('p tag click');
	});
    
    	$("div p.cls").click(function() {
		alert('p tag click');
	});

name = [name=  ]

- name에 접근하려면 [name = name이름]을 적어야 한다.

- 태그와 같이 쓰려면 p[name=name이름] 이라고 쓴다.

// name명이 냄냄인 p태그를 숨기기
$("p[name=냄냄]").hide();

---

함수 호출하기

정석대로 호출하는 방법과 간단하게 호출하는 방법이 있다.

 

<정석 함수 호출>

정석 호출방법은 2가지가 있다.

1. 문서 로딩 후 실행 : $(document).ready(function() { '함수 구현 부분'  }); 

이 경우에는 document가 준비되면 실행된다. 즉, 문서가 로딩된 다음 실행된다.

 

2. 페이지 로딩 전 실행 : $(function() {  '함수 구현 부분'   });

이 경우는 페이지 로딩 되기 전에 실행된다.

 

# 함수 자동 호출

 함수는 호출을 해줘야 실행된다.

function func() { }

라는 함수는 호출 없이 실행될 수 없다.

그러나 jquery 에는 자동호출 기능이 있다.

$(function() {  '함수 구현 부분'   });

위의 문장처럼 $를 붙이고  ,  함수 구현 부분을   {       }); 로 감싸면 함수가 자동으로 호출된다.

<간단 함수 호출>

이렇게 태그를 선언하고 바로 함수를 호출할 수도 있다.

$("#btn").click(function () { 
	let text = $("#text").val();
	$("#text").val("나는 할 수 있다");
});

---

jquery 함수

1. on 함수

$("button").on("click", function () {
alert('button on click'); 
});

 ↱ on 함수를 쓰지 않아도 동일한 출력값을 가지는 경우

	$("button").click(function() { 
		alert('button click'); 
	});

---

자바스크립트 함수를 jquery의 on 함수로 호출하는 방법

// 자바스크립트 함수
function btnFunc() {
	alert('button on click'); 
}

//jquery 의 on 을 써서 함수 호출하기
$("button").on("click", btnFunc);   // ("함수", 함수이름)

2. val() 함수

자바스크립트에서는 input 등의 사용시 value를 사용한다.

jquery에서는 val()함수를 사용한다

<input type="text" id="text">

...함수생략...
// input의 값을 가져오기 (getter)
let text = $("#text").val();

// input에 입력하기 (setter)
$("#text").val("나는 할 수 있다");

3. css( , ) 함수

- 태그에 css값을 추가하고 싶을 때 사용한다.

- css함수의 인수가 1개짜리일때는 getter , 2개짜리일 때는 setter이다.

	$("p").click(function () {
			 	property      value  
		 $("#demo").css("background", "#ff0000");
		 $(this).css("background", "#ff0000");
         
//	위에서 한 것을 json 형태로 한꺼번에 집어넣을 수 있다.
	$('button').click(function(){
	$("p").css( {'background' : '#ff0000', 'color' : '#ff0000' })

4. hide(), show 함수

$("p").hide() : p태그의 값을 숨긴다.

$("p").show() : p태그의 값을 보여준다.

// h3 태그를 클릭하면, p태그가 전부 보이도록 구현하라.

$("p").hide();

$("h3").click(function() {
	$("p").show();
});

< hide : 여러가지 활용 예제> 

<p> Hello Jquery</p>

<p id="id"> Hello Jquery id </p>

<p class = "cls"> Hello Jquery class </p>

<p name = "name"> Hello Jquery name </p>

<button type ="button" > button </button>

<script type = "text/javascript">
$(document).ready(function(){
	$("button").click(function(){
	
		
//p, id, class, name, 모든 태그 숨기는 연습	
//	 p태그를 다 숨기기
		 $('p').hide();

//	 id가 id인 태그 숨기기
		 $("#id").hide();
		
//	 class가 cls인 태그 숨기기 (p 생략 가능)
		$("p.cls").hide();
		
//	 name이 name인 태그 숨기기 - 잘 쓰지 않음.
		$("p[name=name]").hide();
		
//	 모든 태그를 다 숨기기
		 $('*').hide();

 

5.hover 기능 : mouseover() mouseout() 함수

mouseover() : 마우스 커서가 태그 위로 올라갔을 때

mouseout() : 마우스 커서가 아웃됐을 때

td에 hover기능 적용하기

mouseover 일때 배경색 초록색으로
    $('td').mouseover(function() {
		$(this).css('background', '#00ff00');
	});
    
mouseout 일때 배경색 흰색으로  
	$('td').mouseout(function() {
		$(this).css('background', '#ffffff');
	});
    
class가 hover인 것에 hover 기능 적용하기
   $('tr.hover').mouseover(function(){
   $(this).css('background', 'green');
 });
 
   $('tr.hover').mouseout(function(){
   $(this).css('background', 'white')
}); */

https://devjhs.tistory.com/140

[jquery] hover() - 마우스가 올라왔을 때,떠났을 때

https://jjyloves.tistory.com/24

 

<dl> <dt>  <dd> 태그

https://aboooks.tistory.com/211

[html/css]정의 목록 <dl><dt><dd> 태그

 

attr / prop

 

https://redcow77.tistory.com/326

[jQuery] 속성 값 가져오거나 제어하기 - .attr()

https://devlogofchris.tistory.com/58

[$,JQuery] .attr()과 .prop()의 차이점

---

attr와 prop 비교

• .attr()는HTML의속성을 취급
• .prop()는JavaScript프로퍼티를 취급

<attr> 

attr (attribute)를 사용해 추가 입력할 수 있다.

 

- 이때, 추가한 것이 구현되게 하려면 함수 호출시 on 함수를 사용해 동시 입력 해야한다.

 

attr 를 활용한 예제1 - 태그에 class attribute를 추가하기

p태그에 id (attribute)를 추가하는 방법
	
<style type="text/css">
.mycss{
	background-color: #ff0000;
	color: #ffff00;
	border: 1px solid;	
}
</style>  

//attr 활용 : 위에 있는 css를 p태그에 추가하는 방법
$("p").attr("class", "mycss");  // p태그에 css class 추가
});

attr 를 활용한 예제2 - 태그에 id  attribute를 추가하기

// attr 활용 : id=pid를 추가하기
$("p").attr("id", "pid" ); // p 태그에 id=pid 추가

on 함수 동시입력의 예시

- attr로 나중에 추가했을 경우 아래와 같이 호출시 호출되지 않는다.

$("#pid").click(function () {
	alert('pid click');
});

- attr 로 추가한 것이 구현되게 하려면 함수 호출시 on 함수를 사용해 동시 입력 해야한다.

//on 함수 활용 : click 시에 id=pid 인 것을 실행하라
	$(document).on("click", "#pid", function () {
		alert('pid click');
		
		let id = $("p").attr("id");
		alert(id);
	});

<prop>

- 체크박스에서 많이 활용된다.

// attr
	$("#ch1").attr("checked", "checked"); // (checked = checked)

// prop
// 체크박스는 attr보다 prop를 더 많이 씀 (true라는 boolean 변수 사용)

	$("#ch1").prop("checked", true); // (checked = true)

---

link 함수

link 함수의 종류는 3가지가 있다.

html 에서는 1) a   2) form 이렇게 두가지   ,  javascript 에서는 1) location.href   을 사용할 수 있다.

사용방법은 다음과 같다.

 

1. <a href=""

-이동

<a href="NewFile.jsp">NewFile로 이동</a>

- 이동이 아니라 링크만 입히는 방법 (파란줄 치고 선택이 되게 하는방법)

- # : 맨 위로 올려주기

<a href="#" class="delete-link">삭제</a>

2. <form action=""
- 보편적으로 가장 많이 쓰인다.

- name을 사용한다 ( id 미사용 )

 <form action ="url"> : form 을 사용하는 오리지널 방법 

<form action="/examples/media/action_target.php">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>

<form id="아이디"> : 자바스크립트에서 action 추가하는 방법

<form id="frm">
	이름:<input type="text" name="name"><br>
	나이:<input type="text" name="age"><br>
	주소:<input type="text" name="address"><br>
	
	<!-- <input type="submit"> -->
	<button type="button" id="btn">전송</button>
</form>

//자바스크립트
<script type="text/javascript">
$(document).ready(function() {
	$("#btn").click(function() {
		// 검사  : action 어트리부트 추가하고 NewFile 로 경로지정, submit함수 추가
			$("#frm").attr("action", "NewFile.jsp").submit();	
	});
})

--> 예제 해설

<input type = "submit"> 으로는 조사(빈칸조사, 유효값조사) 하지 못한다.

<form> 태그에서 <button type = "button">을 써주면 조사가 가능해지므로, button 태그를 이용한다.

 

이때, <form action ="" 에서 action 을 지우고 아래 함수에서 action을 사용한다.

 

3. location.href=""

1. <a href ="" 
- 입력에 들어간 문자열을 검사할 수 있다.

- &를 사용하여 주소를 입력한다.                        ,,,,                                                                                                                                                                                                                                                                      

	let name = $("#name").val();
	let age = $("#age").val();
	let address = $("#address").val();
		
	location.href = "NewFile.jsp?name=" + name + "&age=" + age + "&address=" + address;		
	});

 

radio / checkbox / select

https://blog.naver.com/heartflow89/221164211964

[HTML] checkbox radio 체크박스 라디오 <label>

🎄radio : 하나만 선택 가능

- name만 사용한다 ( id 사용 불가)

<ul>
	<li><input type="radio" name="radioTest" value="사과" checked="checked">사과</li>
	<li><input type="radio" name="radioTest" value="배">배</li>
	<li><input type="radio" name="radioTest" value="바나나">바나나</li>
</ul>

<button type="button" id="btn">선택</button>

<script type="text/javascript">
$(document).ready(function() {	
	$("#btn").click(function() {
		
// 🎈getter : 체크된 값 가져오기
//   *주의* :checked 형태, input은 value값 -> Jquery에서는 val();
		let radioVal = $("input[name='radioTest']:checked").val();
		alert(radioVal);
		
// 🎈setter : 사과 -> 배
// defalut값이 사과로 되어있음 -> val에 입력한 값으로 변경하기
// 규칙 : val 함수 안에 변경할 값을 '배열식'으로 쓴다.
		$("input[name='radioTest']").val(["바나나"]);
	}); });

🎄checkbox : 여러개 선택 가능 (독립적)

- 보편적으로 id를 사용한다 ( name도 사용 가능)

- is 함수 사용한다.

   -> is(":checked");  // true/ false 로 반환

- attribute보다 property를 더 많이 쓴다

<input type="checkbox" id="ch1" name="ch">그림그리기
<input type="checkbox" id="ch2" name="ch">음악듣기
<br>
<button type="button" id="cbtn">첵크</button>

<script type="text/javascript">
$(document).ready(function() {
	
	$("#cbtn").click(function() {
// 🎈 getter
// 방법01 :id로 접근 
		let check = $("#ch1").is(":checked"); // true/ false 반환
		alert(check); //체크됐으면 true 체크 안 됐으면 false반환
// 방법02 :input 으로 접근
		let check = $("input:checkbox[id='ch2']").is(":checked"); // true/ false 반환
		alert(check); //체크됐으면 true 체크 안 됐으면 false반환
	
// setter
	//	$("#ch1").attr("checked", "checked"); // (checked = checked)
	// 체크박스는 attr보다 prop를 더 많이 씀 (true라는 boolean 변수 사용)
		$("#ch1").prop("checked", true); // (checked = true)
});});

🎄select 

- select는 option문을 사용한다.

- 셀렉트 중간에 추가할 때는 비우고 다시 쓰는게 낫다.

   -> 비우는 함수: empty()     --->    $("#food").empty(); 하고 나서 처음부터 다시 집어넣음

<select id="food">
	<option value="햄버거"> 햄버거 </option>
	<option value="피자" selected="selected"> 피자 </option>
	<option value="치킨"> 치킨 </option>			
</select>

<p id="demo">p demo</p>

<button type="button" id="sbtn">선택</button>
<button type="button" id="append">추가(뒤)</button>
<button type="button" id="prepend">추가(앞)</button>

<script type="text/javascript">

$("#food").change(function() {
	let val = $(this).val();
	$("#demo").html(val);  // html 이나 text를 사용한다.
});

$("#sbtn").click(function() {
	 alert( $("#food").val() ); //선택한 value값 반환
	
	// $("#food").empty();
});

// select 박스에 데이터 추가하기

// append : 뒤에 추가
$("#append").click(function() { // 추가(뒤) 버튼을 누르면
	//$("#demo").append("<h3>h3 태그 (뒤)추가</h3>"); // 실험 : p태그 뒤에 추가
	$("#food").append("<option value='스테이크'>  스테이크  </option>");
});

// prepend : 앞에 추가
$("#prepend").click(function() {
	//$("#demo").prepend("<h3>h3 태그 (앞)추가</h3>"); // 실험: p태그 앞에 추가
	$("#food").prepend("<option value='떡볶이'>  떡볶이  </option>");
});

 

 

정렬 : <li> 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/li#%EC%A0%95%EB%A0%AC_%EB%AA%A9%EB%A1%9D

<li> - HTML: Hypertext Markup Language | MDN

HTML <li> 요소는 목록의 항목을 나타냅니다. 반드시 정렬 목록(<ol>), 비정렬 목록(<ul>, 혹은 메뉴(<menu>) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다.

정렬 목록

<ul>
	<li><input type="radio" name="radioTest" value="사과" checked="checked">사과</li>
	<li><input type="radio" name="radioTest" value="배">배</li>
	<li><input type="radio" name="radioTest" value="바나나">바나나</li>
</ul>

---

추가 함수 append/ prepend

* append (90% 이상 사용) :뒤에 추가

* prepend : 앞에 추가

// append : 뒤에 추가
$("#append").click(function() { // 추가(뒤) 버튼을 누르면
	//$("#demo").append("<h3>h3 태그 (뒤)추가</h3>"); // 실험 : p태그 뒤에 추가
	$("#food").append("<option value='스테이크'>  스테이크  </option>");
});

// prepend : 앞에 추가
$("#prepend").click(function() {
	//$("#demo").prepend("<h3>h3 태그 (앞)추가</h3>"); // 실험: p태그 앞에 추가
	$("#food").prepend("<option value='떡볶이'>  떡볶이  </option>");
});

테이블 추가

<table border="1" id="table">
<col width="50"><col width="170"><col width="100">
<tr>
	<th>번호</th><th>제목</th><th>작성자</th>
</tr>
 
</table>

<script type="text/javascript">

$("#table").append(
			$("<tr>").append( 
					$("<th>").append(1), //숫자 1 추가
					$("<td>").append("오늘은 금요일입니다"),
					$("<td>").append("Tom")
			) 
);

데이터 추가  - 문자열, 자바스크립트, Jquery 비교

<div id = "demo"> 
<button type = "button">버튼</button>
</div>


<script type="text/javascript">
$(document).ready(function(){
	
	$("button").click(function(){
		
//01. 문자열로 추가 (간결해서 가장 많이 쓰인다)
	// id가 pid인 p태그 추가
		let str = "<p id='pid'> p태그를 추가합니다</p> "
		$('#demo').append(str);
		
//02. 자바스크립트로 추가
	// id가 pid인 h3태그 추가
		let jsStr= document.createElement("h3"); //<h3> </h3>
		jsStr.setAttribute("id", "pid"); //(name, value)
		jsStr.innerHTML = "h3태그를 추가합니다";
		$("#demo").append(jsStr);
		
//03. Jquery로 추가
	//id가 spanid인 span태그 추가
		let jqStr = $("<span></span>").text("span태그를 추가합니다");
		jqStr.attr("id", "spanid");
		$("#demo").append(jqStr);
	
});	});

</script>
</body></html>

 

Jquery UI  맛보기

https://jqueryui.com/

jQuery UI

 

Jquery Ui  더 이쁘게 작성할 수 있어서 사용하는데, 반응형이 아니라 사용빈도가 떨어진다. 

부트스트랩을 훨씬 더 많이 사용한다.

 

사용방법 - 클릭하면 날짜 얻어오는 Datepicker

 

1. type을 date로 설정한다.

Datepicker는 date 함수로 불러올 수 있다.

<input type="date" id="date">
<button type="button" id="btn">button</button>

<script type="text/javascript">
$("button").click(function() {
	alert( $("#date").val() );
});

2. https://jqueryui.com/datepicker/ 사이트에서 주소를 가져와서 사용한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- 1번 주소  -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- 2번 주소 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

</head>
<body>

<input type="text" id="date" placeholder="선택일">
<br><br>

연도:<span id="year"></span><br>
월:<span id="month"></span><br>
일:<span id="day"></span>

<script type="text/javascript">
$(document).ready(function() {
	
	let week = ["일","월","화","수","목","금","토"];
	
	$("#date").datepicker({  // datepicker를 입력하면 불러올 수 있다.
		dateFormat: "yy/mm/dd",
		dayNamesMin: week,
		monthNames: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
		onSelect: function( d ){
	// alert(d);
			
	// d로 잘라준다. 토큰은 '/' -> 0번지: year, 1번지 :month, 2번지 : day 
			let date = d.split('/');
			
			$("#year").html(date[0]);
			$("#month").html(date[1]);
			$("#day").html(date[2]);	
			
			if(d == "2023/02/11" || d == "2023/02/12"){
				alert('정상적으로 입력!');
			}else{
				alert('다시 입력!');
			}	}		});});
</script>
</body>
</html>

결과값:

우편번호 반환 코드 

- 카카오 우편번호 사이트에서 코드 얻어오기

 

http://postcode.map.daum.net/guide#sample

Daum 우편번호 서비스

사이트에서 예제코드보기 들어가서 코드 얻을 수 있다.

 

 

 

---

Q. 태그 내용 변경, input에 값 입력하기

<!--	<p>Hello</p>
	<p id="demo">Jquery</p>
	<p class="cls">world</p>
	<h3 class="cls">Hello Jquery</h3>
	<input type="text" id="name">
	<button type="button" id="btn">버튼</button> -->
	
	$("#btn").click(function () {
		
//입력하고 버튼을 클릭하면 h3 태그 내용이 입력한 글자로 변경되도록 하기		
	//	let name = $("#name").val();		
	//	$("h3.cls").text( name );
	
// 반대로 버튼 클릭하면 h3 태그 내용이 input에 들어가도록 하기	
		let text = $("h3.cls").text();
		$("#name").val( text );	
	});

 

Q. 댓글 입력창 만들기

'답글입력' 창 누르면 댓글 입력할 수 있는 칸과 '답글등록' 버튼이 나오게 해라 

방법1. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<!--  답글입력창 누르면 답글 입력할 수 있는 창과 답글등록 버튼이 나오게 해라 
방법1. -->
<h3>detail view</h3>

<textarea rows="2" cols="20">기본글입니당 </textarea>
<br><br>

<button type="button" id="answerBtn">답글입력</button>
<br>

 
<div id="answerFrom">
	<!-- 입력창, 등록버튼 -->
</div>


<p id="demo"></p>
 
<script type="text/javascript">
$(document).ready(function() { // 정석 함수 호출
	
	
	$("#answerBtn").click(function() {
		
	let input = "<br>답글:<input type='text' id='answerText'>";
				$("#answerFrom").append(input); 
				// html 써도 되지만 버튼 추가해야되므로 append로 넣음
		
	let btn = "<br><br><button type='button' id='answer'>답글등록</button>";
				$("#answerFrom").append(btn);
					
	});
/* 이 방법으론 출력되지 않는다.
	//답글등록창을 누르면 답글에 입력한 값이 txt에 들어간다		
	$("#answer").click(function () {
		let txt = $("#answerText").val();	
// txt값을 demo에 넣어서 출력한다
		$("#demo").text( txt );
	}); */
	
/* 왜 출력되지 않는지? 	
이 페이지에서는 document (html)에 input, button이 등록되어 있지 않았고,
나중에 함수 아래에 추가로 input과 button을 추가했기때문에 
답글 input창에 사용자가 text 입력 후 답글등록 버튼을 눌렀을 때 서버가 인식하지 못한다
따라서 "document (html) 를 다시 읽은 다음에 clikc과 id에 접근해라" 라는 아래 함수를 입력한다. */

	$(document).on("click", "#answer", function () {
		let txt = $("#answerText").val();		
		$("#demo").text( txt );
	});

});
</script>

</body> </html>

방법2. hide, show 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<!--  답글입력창 누르면 답글 입력할 수 있는 창과 답글등록 버튼이 나오게 해라 
방법2. hide, show-->

 <h3>detail view</h3>

<textarea rows="2" cols="20">기본글입니당2 </textarea>
<br><br>

<button type="button" id="answerBtn">답글입력</button>
<br>
<!-- 아래 답글창을 숨겨놔야하니까 div로 묶어준다. -->
 <div id="answerFrom">
	<br>
	답글:<input type='text' id='answerText'>
		<br><br>
		<button type='button' id='answer'>답글등록</button>
</div> 

<p id="demo"></p>
 
 <script type="text/javascript">
 
 $(document).ready(function() { // 정석 함수 호출
//div를 숨기기 위해 div id인 answerFrom를 불러온다.	
		$("#answerFrom").hide();
 
// 답글입력창을 누르면 div가 보인다.
		$("#answerBtn").click(function() {
			$("#answerFrom").show();		
		});
//답글등록창을 누르면 답글에 입력한 값이 txt에 들어간다	
//방법1과 다르게 바로 등록되는 이유는 documeent(html)에 이미 데이터가 들어있기때문
		$("#answer").click(function () {
			let txt = $("#answerText").val();	
	// txt값을 demo에 넣어서 출력한다
			$("#demo").text( txt );
		});
 });
 </script>
</body>
</html>

 

---

과제01.

 

 

---

과제02.

과제 힌트 : https://chlee21.tistory.com/139

[jQuery] 속성 값에 사진의 제목을 설정하고 이미지를 클릭하면 속성 값을 취득하여 출력하기 / 사

picname을 사용하기

https://angielee.tistory.com/47

[JQuery] 속성 값 지정 -2 ( 이미지를 클릭하면 속성 값 취득하여 출력)

 

 

 

 

---

과제03.

 

https://yeon6852.tistory.com/193

[JQuery] 이미지 삭제(클릭시 자동 삭제)

 

 

 

---

🎈🎈🎈 과제04.

과제 힌트 : colgroup 태그

https://webisfree.com/2015-10-31/%ED%85%8C%EC%9D%B4%EB%B8%94-%ED%83%9C%EA%B7%B8-colgroup-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

테이블 태그 colgroup 알아보기

colgroup 이란?

colgroup 태그는 사용되는 테이블의 컬럼(td 태그)에 적용할 스타일 width와 bakcground를 해당 태그에서 미리 적용할 수 있게 합니다. 특히 각 컬럼의 길이를 설정하는데 가장 많이 쓰입니다. 예를들어 아래와 같은 테이블에서 각각의 컬럼들이 width와 background를 각각 다음과 같이 사용하려고 한다면 어떻게 작성할까요?
1. 첫번째 컬럼 : 번호 td - 50px, red
2. 두번째 컬럼 : 제목 td - 200px, blue
3. 세번째 컬럼 : 이름 td - 100px, green이때 colgroup을 사용하여 테이블 코드는 아래의 예제와 같이 설정할 수 있습니다.

colgroup 사용 이유
colgroup의 경우 html5에서 공식적으로 지원되지 않습니다. 생각해보면 스타일과 태그 요소의 분리를 위해 즉 의존성을 의해서는 가급적 css를 사용하는게 좋을 것입니다. 하지만 그럼에도 불구하고 많이 사용되는 이유는 그 만큼 사용이 편리하기 때문입니다. 간단한 코드의 경우에는 오히려 이 방법이 빠르고 쉽죠.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<!--  1번째 테이블 : 동적테이블 -->
<h1>동적테이블</h1>

<table border="1" id="list_table">
<colgroup>
	<col style="width: 70px;"/>
	<col style="width: 200px;"/>
	<col style="width: 300px;"/>
	<col style="width: 200px;"/>
</colgroup> 

<thead>
<tr>
	<th>번호</th><th>이름</th><th>생년월일</th><th>Action</th>
</tr>	
</thead>

<tbody>
<tr>
	<th>1</th>
	<td>홍길동</td>
	<td>2001/03/12</td>
	<td>
<!-- # 는 '맨 위로 올려준기' -->
		<a href="#" class="delete-link">삭제</a>
	</td>
</tr>
</tbody>
</table>

<br/><br/>

<h3>추가입력</h3>
<!--  2번째 테이블 : 추가입력 
라인 없는 테이블 : border을 적지 않는다. -->
<table id="append_table">
<colgroup>
	<col style="width: 70px;"/>
	<col style="width: 200px;"/>
	<col style="width: 300px;"/>
	<col style="width: 200px;"/>
</colgroup> 

<thead>
<tr> 
	<th>번호</th><th>이름</th><th>생년월일</th><th>Action</th>
</tr>
</thead>

<tbody>
<tr align="center">
	<td><input type="text" id="add_no"/></td>
	<td><input type="text" id="add_name"/></td>
	<td><input type="text" id="add_birth"/></td>
	<td><button type="button" id="append_row">데이터추가</button></td>
</tr>
</tbody>

</table>

<script type="text/javascript">
$(document).ready(function() {
	
	$("#append_row").click(function() {
		
		$("#list_table").append(
// <tr>만 적어도 되는데 <tr></tr> 이렇게 같이 적어도됨.
			$("<tr></tr>").append(
				
				$("<th></th>").append( $("#add_no").val()  ),
				$("<td></td>").append( $("#add_name").val()   ),
				$("<td></td>").append( $("#add_birth").val()   ),
				$("<td></td>").append( 
// <a href="#" class="delete-link">삭제</a> 를 Jquery로 넣는 방법
					$("<a></a>").attr("href","#")
								.attr("class", "delete-link")
								.append("삭제") //append : <a> </a> 사이에 넣는다.

)	// $("<td></td>").append 끝			
)	// $("<tr></tr>").append 끝
);	// 	$("#list_table").append 끝
}); // click(function() 끝
	
/* 이 방식은 나중에 추가한 것(자바스크립트로 추가) 은 인식 못함.
	$(".delete-link").click(function() {
		alert('delete-link click');
	});
	*/
	
// on함수 : 나중에 추가한 것 인식 가능하게 하기
	$(document).on("click", ".delete-link", function () {
		// alert('delete-link click');
		
// <tr>태그를 다 지워야함 -> <a>는 <td>태그의 자식태그 / <td>태그는 <tr>의 자식태그
// 즉, <td>태그는 <a>의 부모태그 / <tr>태그는 <td>태그의 부모태그
// 현재 <a>를 클릭할 때 실행되는 함수이므로 <a> = (this)
		$(this).parent().parent().remove();
	});
// this의 자식태그는 $(this).children() 이라고 쓰면 된다.
	
});
</script>
</body>
</html>