학원 day61. jquery 선택자, 이벤트 처리

 jquery 선택자

p:first  →  p이면서 첫번째 엘리먼트 선택

#box-1 div p:first  →  첫번째 박스 안의 div 내부에 있는 p이면서 첫번째 엘리먼트 선택 

p:last  →  p이면서 마지막번째 엘리먼트 선택

 

p:first  →  p이면서 첫번째 엘리먼트 선택

p:first-child  →  p이면서 첫번째 자식인 엘리먼트 선택

p:last-child  →  p이면서 마지막번째 자식인 엘리먼트 선택

#box-1 div p:nth-child(2)  →   첫번째 박스 안의 div 내부에 있는 p이면서 둘째 자식인 엘리먼트 선택

<div class="container">
	<h1>jQuery 선택자 연습</h1>
	 <div id="box-1"  class="border mb-3 p-3">
  		<h3>첫번째 박스</h3>
  		<p>첫번째 박스의 p입니다.</p>
  		<div class="border p-3">
  			<p class="text-primary">div 내부에 있는 p입니다.</p>
  			<p>div 내부에 있는 p입니다.</p>	
  			<p>div 내부에 있는 p입니다.</p>	
  			<p>div 내부에 있는 p입니다.</p>	
  			<p>div 내부에 있는 p입니다.</p>	
  		</div>
  </div> 
  <div id="box-2" class="border mb-3 p-3">
  		<h3>두번째 박스</h3>
  		<p>두번째 박스의 p입니다.</p>
  		<div class="border p-3">
  			<p class="text-primary">div 내부에 있는 p입니다.</p>
  			<p class="text-primary">div 내부에 있는 p입니다.</p>
  			<p>div 내부에 있는 p입니다.</p>	
  			<p>div 내부에 있는 p입니다.</p>	
  			<p>div 내부에 있는 p입니다.</p>	
  			<p>div 내부에 있는 p입니다.</p>	
  		</div>
  </div> 
   
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	
	//부모엘리먼트를 기준으로 첫번째 자식 엘리먼트 선택하기
	$("p:first").css("background-color", "lightgreen");
	$("p:first-child").css("border", "2px solid red");
	$("h3:first-child").css("background-color", "pink");
	//부모엘리먼트를 기준으로 마지막번째 자식 엘리먼트 선택하기
	$("p:last").css("background-color", "orange");
	$("p:last-child").css("border", "2px solid blue");

---

순서 필터 선택자

- 순서 필터 선택자는 0번째부터 시작한다. 

- eq →  equal

- lt →  less than

- gr → greater than

- p:lt(2) 는 3번째 엘리먼트 이전의 모든 p 엘리먼트이다.

- p:gt(2) 는 3번째 엘리먼트 다음의 모든 p 엘리먼트이다. 

---

기타 필터 선택자

<div class="container">
   	<h1>jQuery 선택자</h1>
   	
   	<div id="box-1" class="border p-3 mb-3">
      <h3>기타 선택자</h3>
      <div class="border p-3 mb-3">
         <p>아래의 메뉴를 확인하고 주문해 주세요</p>
      </div>
      <div class="border p-3 mb-3">
         <h4>커피</h4>      
         <p>커피종류가 다양하게 준비되어 있습니다.</p>
         <ul>
            <li>아메리카노</li>
            <li>라떼</li>
            <li>바닐라  라떼</li>
            <li>카페 모카</li>
         </ul>
      </div>
      <div class="border p-3 mb-3">
         <h4>케이크</h4>      
         <p>맛있는 케이크가 준비되어 있습니다.</p>
         <dl>
            <dt>케이크</dt><dd>치즈 케이크</dd><dd>딸기 케이크</dd><dd>생크림 케이크</dd>
            <dt>티라미수</dt><dd>치즈 티라미수</dd><dd>초코 티라미수</dd>
         </dl>
      </div>
   </div>
   	
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	// 지정된 텍스트를 포함하고 있는 엘리먼트 선택하기
	$("li:contains('라떼')").css("background-color", "orange");
	// 지정된 선택자에 해당하는 자손을 포함하고 있는 엘리먼트 선택하기
	$("#box-1 div:has('dl')").css("background-color", "lightgreen");
	// 지정된 선택자에 해당하지 않는 엘리먼트 선택하기
	//$("#box-1 div:not(:last-child)").css("background-color", 'lightblue');
	$("#box-1 div:not(:has('dl'))").css("background-color", "lightblue");

---

속성 선택자 & 폼 선택자

<div class="container">
	<h1>jQuery 선택자</h1>
	<form class="border bg-light p-3">
      <div class="mb-2">
         <label class="form-label">이름</label>
         <input type="text" class="form-control" name="name" id="user-name"/>
      </div>
      <div class="mb-2">
         <label class="form-label">아이디</label>
         <input type="text" class="form-control" name="id" id="user-id"/>
      </div>
      <div class="mb-2">
         <label class="form-label">비밀번호</label>
         <input type="password" class="form-control" name="pwd" id="user-pwd"/>
      </div>
      <div class="mb-2">
         <label class="form-label">이메일</label>
         <input type="text" class="form-control" name="email" id="user-email"/>
      </div>
      <div class="mb-2">
         <label class="form-label">전화번호</label>
         <input type="text" class="form-control" name="tel" id="user-tel"/>
      </div>
      <div class="mb-2">
         <label class="form-label">생일</label>
         <input type="date" class="form-control" name="birth" id="user-birth"/>
      </div>
      <div>
      	<label class="form-label">보유기술</label>
  		<div>
            <div class="form-check form-check-inline">
                 <input class="form-check-input" type="checkbox" name="skill" value="java" id="skill-1">
                 <label class="form-check-label">자바</label>
            </div>
            <div class="form-check form-check-inline">
                 <input class="form-check-input" type="checkbox" name="skill" value="python" id="skill-2">
                 <label class="form-check-label">파이썬</label>
            </div>
            <div class="form-check form-check-inline">
                 <input class="form-check-input" type="checkbox" name="skill" value="db" id="skill-3">
                 <label class="form-check-label">데이터베이스</label>
            </div>
            <div class="form-check form-check-inline">
                 <input class="form-check-input" type="checkbox" name="skill" value="javascript" id="skill-4">
                 <label class="form-check-label">자바스크립트</label>
            </div>
            <div class="form-check form-check-inline">
                 <input class="form-check-input" type="checkbox" name="skill" value="react" id="skill-5">
                 <label class="form-check-label">리액트</label>
            </div>
            <div class="form-check form-check-inline">
  				<input class="form-check-input" type="checkbox" name="skill" value="vuejs" id="skill-6" checked>
  				<label class="form-check-label">뷰</label>
			</div>
			<div class="form-check form-check-inline">
  				<input class="form-check-input" type="checkbox" name="skill" value="vallina" id="skill-7" checked="checked">
  				<label class="form-check-label">바닐라스크립트</label>
			</div>
         </div>
         <div class="mb-2">
         	<label class="form-label">근무지</label>
         	<select class="form-select" name="city">
         		<option value="" selected disabled> 선택하세요</option>
         			<option value="seoul">서울</option>
         			<option value="incheon">인천</option>
         			<option value="kyungi">경기</option>
         			<option value="sejong">세종</option>
         	</select>
         	</div>
         	<div class="mb-2">
         		<label class="form-label">기타 사항</label>
         		<textarea rows="5" class="form-control" name="memo"></textarea>
         	</div>
         </div>  
   	</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	// 속성선택자로 엘리먼트 선택하기
	$("input[name=birth]").val("2022-11-30");
	// $("#user-birth").val("2022-11-30");
	
	// 속성선택자로 엘리먼트 선택하기
	$("input[name=pwd]").prop("disabled", true);
	// $("#user-pwd").prop("disabled", true);
	
	// 속성선택자로 엘리먼트 선택하기
	$("input[name=email]").prop('readOnly', true);
	// $("#user-email").prop("readOnly", true);
	
	// 속성선택자로 엘리먼트 선택하기
	// 모두 체크하기를 원한다면 아이디로 찾는 것보다 속성선택자를 쓰는 것이 효율적이다.
	$("input[name=skill]").prop("checked", true);
	// 아이디로 모두 체크하는걸 제어하려면 불편함. 아이디를 다 적어야 하고, 아이디가 늘어나면 또 아이디를 적어줘야 함.
	// $("#skill-1, #skill-2, #skill-3, #skill-4, #skill-5").prop("checked", true);
	
	// $("input").prop("disabled", true);   // 태그명이 input인 엘리먼트를 선택하고 비활성화 시킨다.
	// 폼필터 선택자
	// $(":input").prop("disabled", true);    // 모든 입력필드를 선택하고 비활성화 시킨다.

* 그냥 input은 input 태그를 뜻하고, :input은 input태그를 뜻하는게 아니라, 모든 입력필드를 뜻한다. (input, textarea 등)

 

- val : value의 약자

- prop : property의 약자로, input박스 대상으로 readonly, disabled, checked 여부를 변경할 때 쓰인다. 

- selected disabled checked readonly는 속성값(=" ")을 적지 않아도 prop으로 관리할 수 있다.

- 아이디로 찾아도 되고 속성선택자로도 찾을 수 있다. 상황에 따라 효율적인 것을 고르면 된다.

---

 

자바스크립트 이벤트 처리 

1. 인라인 이벤트 처리

<button onclick="handler()">버튼</button>

function handler() {

      이벤트처리 코드

}

 

2. 엘리먼트의 이벤트 프로퍼티에 이벤트 핸들러 등록

<button id="btn-del-user">버튼</button>

var el = document.getElementById("btn-del-user");

el.onclick = function() {

          이벤트처리 코드

}

// el 에 onclick이라는 프로퍼티가 있고 그것을 변수라고 생각하고 이벤트핸들러함수를 등록하는 것임.

 

3. 엘리먼트의 addEventListener 메소드로 이벤트 핸들러 등록

<Button id="btn-del-user">버튼</button>

var el = document.getElementById("btn-del-user");

el.addEventListener('click', function() {

    이벤트 처리 코드

});

// 매개변수에 문자열, 함수를 전해주는 방법이다.

-------------------------------------------------------------------------------------------------------------------------

jQuery 이벤트 처리

* 엘리먼트에서 특정 이벤트 발생시 실행될 콜백함수를 구현하고, 엘리먼트에 부착시키는 처리

* jQuery는 브라우저의 종류에 상관없이 일관된 방식으로 이벤트처리가 가능하도록 추상화된 이벤트 처리 관련 메소드를 제공한다.

 

1. .on메소드로 이벤트 핸들러 등록

<button id="btn-del-user">버튼</button>

$('#btn-del-user').on('click', function() {

     이벤트 처리 코드

});

 

// $('#btn-del-user')는 아이디가 btn-del-user인 제이쿼리 객체가 찾아진다.

객체 안에는 선택된 엘리먼트와 엘리먼트를 조작할 수 있는 다양한 메소드가 들어있다.

메소드 중에 on이라는 메소드가 있다. 메소드 안에 이벤트이름과 콜백함수를 적는다.

 

2. 개별 이벤트전용 메소드로 이벤트 핸들러 등록

<button id="btn-del-user">버튼</button>

$('#btn-del-user').click(function() {

      이벤트처리 코드

})

// 아이디가 btn-del-user라는 엘리먼트를 선택했고, 그 엘리먼트에서 클릭이벤트가 발생하면 제이쿼리가 함수를 실행시킨다. 

---

<div class="container">
	<h1>콜백 함수의 사용</h1>

	<div>
		<button class="btn btn-primary btn-sm" id="btn-1">버튼1</button>
		<button class="btn btn-primary btn-sm" id="btn-2">버튼2</button>
		<button class="btn btn-primary btn-sm" id="btn-3">버튼3</button>
	</div>
	
	<div>
		<button class="btn btn-primary btn-sm" id="btn-4">버튼4</button>
		<button class="btn btn-primary btn-sm" id="btn-5">버튼5</button>
		<button class="btn btn-primary btn-sm" id="btn-6">버튼6</button>
	</div>
	
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
	
	// .addEventListener 메소드로 이벤트 핸들러 등록하기
	var el1 = document.getElementById("btn-1");
	var el2 = document.getElementById("btn-2");
	var el3 = document.getElementById("btn-3");
	
	// click이라는 이벤트가 발생하면 실행될 콜백함수 function()을 등록하는 것이다.
	// 이벤트 발생시 수행할 작업을 익명함수로 구현해서 엘리먼트에 바인딩 시킨다.
	el1.addEventListener('click', function() {
		alert("버튼1 클릭됨");
	});
	el2.addEventListener('click', function() {
		alert("버튼2 클릭됨");
	});
	el3.addEventListener('click', function() {
		alert("버튼3 클릭됨");
	});
		
	// jQuery의 .on() 메소드로 이벤트 핸들러 등록하기, jQuery 객체 안에 on이라는 메소드가 있는 것이다.
	// var jQueryObject = $("#btn-4");
	// jQueryObject.on("click", function() {})
	
	// 이름없는 함수 
	$("#btn-4").on('click', function() {
		alert('버튼4 클릭됨')
	});
	$("#btn-5").on('click', function() {
		alert('버튼5 클릭됨')
	});
	$("#btn-6").on('click', function() {
		alert('버튼6 클릭됨')
	});
	
</script>

콜백함수

- 콜백함수는 운영체제, 가상머신, 브라우저가 (실행할 조건이 갖춰졌을 때) 자동으로 실행하는 메소드다. (필요한 시점에서 호출되는 함수, 고객이 언제 함수를 호출할지 모름)
- 콜백함수는 이벤트핸들러와 같이 특정 이벤트에 바인딩 시켜서 해당 이벤트가 발생했을 때 브라우저가 실행시키는 함수가 대표적인 콜백함수다.

이벤트처리에서 콜백함수의 사용
엘리먼트.addEventListener("이벤트이름", 콜백함수)
* 해당 엘리먼트에서 지정된 이벤트가 발생하면 실행될 콜백함수를 등록하는 것

var element = document.querySelector('#btn-delete');
element.addEventListener('click', function() {
  수행문;
  수행문;
})

 

내부구조

---

자주 사용하는 코드는 이름있는 함수로 만들어서 쓰는게 편하다. 이름만 적어서 쓰면 되니까.

$("#btn-4").on('click', handler1);

function handler1() {
alert("버튼4 클릭됨")
}

 

그런데 이벤트는 일반적으로 독립적인 기능을 사용한다.

따라서, 이벤트처리처럼 한군데에서만 사용하는건 이름없는 함수로 직접 구현하여 만든다.

$("#btn-4").on('click', function() {
alert('버튼4 클릭됨')
});

---

함수 = 객체와 독립적인 것

메소드 = 객체 안에 정의되어 있는 것.

 

$()는 함수이고, .on()이 메소드이다. 

 

$(".btn-outline-danger").on('click', function() {
     alert("댓글을 삭제합니다.");
});

 

jQuery 의 이점으로, jQuery 객체에 있는 on이라는 메소드는 선택된 엘리먼트에 다 적용시킨다. for문을 돌릴 필요 없다.

-----------------------------------------------------------------

$(".btn-outline-danger").on('click', function() {
// jQuery의 이벤트핸들러함수에서 this는 이벤트가 발생한 엘리먼트 객체다.
    console.log(this);
});

 

자바스크립트에서 this는 메소드를 호출한 제이쿼리 객체(".btn-outline-danger")를 가져오지만,

jQuery에서는 이벤트가 발생한 엘리먼트 객체(<button class="btn btn-outline-danger btn-sm">삭제</button>)를 가져온다.

 

button이 조작할 대상을 알고있어야 하기 때문에 data-reply-target="#box-10" 이라고 적는 것임.

data-reply-target 이라는 이름은 내 맘대로 적어도 된다.

<div class="container">
<h1>jQuery 이벤트 처리</h1>

<div class="border p-3 mb-3">
<%--
	<%
    for (Reply reply : replyList) {
    %>
        <div class="mb-1" id="box-<%=reply.getNo() %>">
            <%=reply.getContent() %>
            <button class="btn btn-outline-danger btn-sm" data-reply-target="<%=reply.getNo() %>감추기</button>
        </div>
    <%
    }
    %>		
 --%>
    <div class="mb-1" id="box-10">
        첫번째 댓글입니다 
        <button class="btn btn-outline-danger btn-sm" data-reply-target="#box-10">감추기</button>
    </div>
    <div class="mb-1" id="box-13">
        두번째 댓글입니다 
        <button class="btn btn-outline-danger btn-sm" data-reply-target="#box-13">감추기</button>
    </div>
    <div class="mb-1" id="box-21">
        세번째 댓글입니다 
        <button class="btn btn-outline-danger btn-sm" data-reply-target="#box-21">감추기</button>
    </div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
//$()함수로 이벤트를 등록할 엘리먼트를 선택하고, .on() 메소드로 이벤트핸들러함수를 바인딩시킨다.
$(".btn-outline-danger").on('click', function() {
    // jQuery의 이벤트핸들러햄수에서 this는 이벤트가 발생한 엘리먼트 객체다.
    // console.log(this);
    // el에는 이벤트가 발생한 엘리먼트 객체가 대입된다.
    // var el = this;
    // id에는 이벤트가 발생한 버튼 엘리먼트의 data-reply-target 속성값이 대입된다. '#box-10'
    // var id = el.getAttribute("data-reply-target");

    // $(this);   // this는 이벤트가 발생한 엘리먼트 객체다. $(this)를 실행하면 엘리먼트객체를 포함하고 있는 jQuery객체가 반환된다.
    // this    -> <button class="" data-reply-target="#box-10">감추기</button>
    // $(this) -> jQuery객체(<button class="" data-reply-target="#box-10">감추기</button>와 jQuery객체의 다양한 메소드)
    var targetId = $(this).attr("data-reply-target");
    //alert("targetId ->" + targetId);

    // targetId에는 "#box-10"
    $(targetId).hide();    // $("#box-10").hide()
});

    // $(":checkbox[name=all]").change(function() {		
    //});

</script>

* 복습하다가 궁금했던 점 해결기록

궁금증-> 굳이 버튼 태그 안에 data-reply-target="~" 을 써야 하나? 

 

<div class="mb-1" id="box-21">
   세번째 댓글입니다 
   <button class="btn btn-outline-danger btn-sm">감추기</button>
</div>

<script type="text/javascript">
$(".btn-outline-danger").on('click', function() {
   $("#box-21").hide();
});

 

위와 같이 코드를 짜면 감추기 버튼이 세가지 중 하나만 작동된다. 

따라서, 아래와 같이 코드를 작성한다.

<div class="mb-1" id="box-21">
   세번째 댓글입니다 
   <button class="btn btn-outline-danger btn-sm" data-reply-target="#box-21">감추기</button>
</div>

<script type="text/javascript">
$(".btn-outline-danger").on('click', function() {
   var targetId = $(this).attr("data-reply-target");
   $(targetId).hide();
});

 

data-reply-target이라는 속성을 jQuery코드에 attr("data-reply-target"); 이런식으로 적어줘야 하고,

html 작성부분에서, data-reply-target 속성 값에 button이 조작할 대상의 id를 적어줌으로써 연결시켜 놓는다.

그리고 jQuery에서 this를 통해 이벤트가 발생한 객체를 불러와서 hide()로 숨긴다.

 

* 자바스크립트, jsp 코딩을 잘하기 위해서는 아이디 전략을 잘 짜야 한다.

- value속성의 값을 id속성의 값에 넣어놓아서 서로 다른 책끼리 식별할 수 있도록 만든다.

- jsp코딩할 때 jQuery 코드를 염두해두고 짜는 것이다.