01. jQuery란
jQuery
- 크로스 브라우징(호환성), 애니메이션 효과 등을 쉽게 구현 할 수 있는 자바스크립트 라이브러리이다.
- css 선택자를 활용하여 객체 조작이 가능하다.
- 라이브러리임으로 외부파일을 내 프로젝트(작업페이지)에 삽입해야한다.
💡CDN 방식➡️ 네트워크 차단된 프로젝트에서는 쓰일 수 없다.
💡다운로드 방식➡️ 제이쿼리 사이트에서 js 파일 다운로드 후 프로젝트에 삽입한다.
제이쿼리 예제1
<!-- 제이쿼리 다운로드 방식 --> <script src="js/jquery-3.7.0.js"></script> <script type="text/javascript"> console.log(jQuery, 'jQuery 출력'); console.log($, 'jQuery 출력 $'); jQuery(); // 함수명 대신 $로 호출 가능 $(); </script>
02. 선택자(직접선택자)
제이쿼리 선택자
- 제이쿼리는 css 선택자로 객체 검색이 가능하다.
- 제이쿼리 함수 인수에는 css 선택자가 삽입되어 요소를 취득한다.
- 제이쿼리 문서(html) 로드 순서 상관 없이 쓸 수 있도록 제공되는 메소드가 존재한다. (ready())
- 조회된 요소노드에 메소드(이벤트) 적용 시 조회된 모든 객체에 이벤트를 자동 바인딩한다.
💡구문➡️ $(’선택자’) : 제이쿼리 함수에 인수값을 선택자를 넣어 실행하면 검색된 제이쿼리 객체가 반환된다.
➡️ 제이쿼리 객체가 반환이 되었다면 체이닝기법으로 제이쿼리 메소드 혹은 속성을 사용 가능하다.
💡선택자(직접선택자)➡️ $(’#아이디’) : document 객체의 아이디 값을 조회하여 일치하는 객체 1개 반환
➡️ $(’.클래스명’) : document 객체의 클래스 값을 조회하여 일치하는 객체 반환
➡️ $(’태그명’) : document 객체의 태그명을 조회하여 일치하는 객체 반환
➡️ $(’[속성명]’) : document 객체의 각 태그에 해당 속성이 있는 모든 객체를 조회하여 일치하는 객체 반환. 조회된 요소노드는 메소드 적용 시 조회된 모든 객체에 이벤트를 자동 바인딩
➡️ $(’[속성명=속성값]’) : document 객체의 각 태그에 해당 속성과 속성의 값이 일치하는 객체를 조회하여 반환
💡문서로딩 완료 이후 실행되는 메소드가 있다.제이쿼리 함수 인수에는 css 선택자가 삽입되어 요소를 취득한다.
제이쿼리 예제2
<h2> 직접 선택자 </h2> - 제이쿼리 함수를 실행시키면서 css 선택자를 인수로 삽입 <br> - css 선택자에 해당되는 객체가 있던 없던 제이쿼리 객체는 무조건 반환 <br> - 체이닝 기법으로 쓰일 메서드는 직접 선택자에서 검색된 기준으로 메서드(이벤트, 객체조작, 속성조작, 인접관계선택자) 호출 할 수 있다. <br> ([body, h1, div] -> 클릭 -> 검색된 모든 대상에 click 이벤트가 등록) <script src="js/jquery-3.7.0.js"></script> <h3> 직접 선택자로 찾아진 객체에 이벤트 걸어보기</h3> <button type="button" class="myBtn1">버튼1</button> <button type="button" class="myBtn">버튼2</button> <button type="button" class="myBtn">버튼3</button> <button type="button" class="myBtn">버튼4</button> <button type="button" class="myBtn">버튼5</button> <script type="text/javascript"> // jquery를 활용하여 요소 취득할 경우, // 취득하는 요소 수와 관계없이 직접 조작이 가능하다. $('button').click(function() { alert('알림'); }); /* 자바스크립트의 경우는 반환하는 배열에 직접적인 조작이 불가하므로 반복문 혹은 반복 메소드를 이용하여 요소 하나씩 조작해야함 const $buttonEles = document.querySelectorAll('button'); $buttonEles.forEach(item => { item.addEventListener('click', function() { alert('알림'); }); }); */ </script> <h2>onload -> ready 메서드</h2> - 문서 로딩 완료 이후에 실행되는 메서드 <script type="text/javascript"> // body 요소가 렌더링 되기전에 요소를 취득할 때 console.log($('h1')); // body 요소가 모두 렌더링 되고 난 후 실행 $(document).ready(function() { console.log($('h1')); $('h2').css('background-color', 'red'); // foreach로 순회 안해도 전부 반영 // == document.querySelector('h2').style['backgroundColor'] = 'red'; }); // body 요소가 모두 렌더링 되고 난 후 실행 $(function() { console.log($('h1')); }); </script>
03. 인접관계,위치 탐색 선택자
제이쿼리 인접관계 선택자, 위치 탐색 선택자
💡부모 객체 검색- 이미 선택된 객체에서 부모 요소를 검색 할 수 있는 메소드이다.
➡️ $(’선택자’).parent() : 검색된 객체에서 한단계 위 부모 요소를 검색한다.
➡️ $(’선택자’).parents(’선택자’) : 검색된 객체에서 인수값에 해당되는 부모 요소를 검색한다.
➡️ $(’선택자’).closest(’선택자’) : 검색된 객체에서 조상 요소 탐색 시 가장 인접한 요소를 취득한다.
💡자식 객체 검색- 검색된 객체에서 자식 요소를 검색 할 수 있는 메소드이다.
➡️ $(’선택자’).children() : 검색된 객체에서 자식 요소 1단계 아래 객체 전체를 검색한다.
➡️ 타겟요소.prev() : 타겟 요소의 이전 형제 요소를 검색한다.
➡️ 타겟요소.next() : 타겟 요소의 다음 형제 요소를 검색한다.
➡️ $(’선택자’).find(’선택자’) : 검색된 객체에서 인수값에 해당되는 자식요소 전체를 검색한다.
💡위치 탐색 선택자- 검색된 객체 중 인덱스로 객체 검색 혹은 첫번째와 마지막 객체를 검색할 수 있는 메소드이다.
- 이외 홀수 짝수 배수 등 다양한 객체를 검색 가능하다.
➡️ $(’선택자’).first() : 검색된 객체에서 첫번째 요소를 선택한다.
➡️ $(’선택자’).eq(idx) : 검색된 객체 중에서 인수 값에 해당되는 인덱스 객체를 검색한다.
➡️ $(’선택자’).last() : 검색된 객체에서 마지막 요소를 선택한다.
제이쿼리 예제3
<h2>인접 관계 선택자</h2> - 상하요소 검색 <br> - parentElement -> .parent(), .parents('부요 요소 선택자') <br> - querySelector, querySelectorAll -> .find('선택자'), .children() <br> <ul class="ul1"> <li> <ul class="ul2"> <li class="li1"> <button type="button" class="liBtn">클릭</button> </li> <li class="li2"> <button type="button" class="liBtn">클릭</button> </li> <li class="li3"> <button type="button" class="liBtn">클릭</button> </li> </ul> </li> </ul> <script src="js/jquery-3.7.0.js"></script> <script type="text/javascript"> $('.liBtn').click(function() { // 상위요소 취득 console.log($(this).parent()); // 조상요소 취득 console.log($(this).parents('ul')); // 조상요소의 가장 인접한 요소 취득 console.log($(this).closest('ul')); // 자식요소 취득 console.log($('.ul2').children()); // 자식요소 중 선택자에 일치하는 요소 취득 console.log($('.ul2').find('li')); console.log($('.ul2').find('li.li2')); console.log($('.ul2').find('button')); // 형제요소 취득 // 타겟 요소의 첫번째 형제 요소 console.log($('.ul2').children().first()); // 타겟 요소의 인덱스번째 형제 요소 console.log($('.ul2').children().eq(1)); // 타겟 요소의 이전 형제 요소 console.log($('.ul2').children().eq(1).prev()); // 타겟 요소의 이후 형제 요소 console.log($('.ul2').children().eq(1).next()); // 타겟 요소의 마지막 형제 요소 console.log($('.ul2').children().last()); }); </script>
04. 이벤트 등록,제거,트리거 메소드
제이쿼리 이벤트
💡이벤트 등록 메소드- 검색된 객체에 이벤트 메소드를 활용하여 등록 가능하다.
- click, change, keypress, keyup, keydown, blur, hover 등의 다양한 메소드가 존재한다.
➡️ $(’선택자’).이벤트메소드(function() {…});
➡️ $(’선택자’).인접관계선택자메소드().이벤트메소드(function() {});
➡️ $(’선택자’).on(’이벤트명’, function() {});
➡️ 이벤트 발동 시점에서 발동 대상은 this 키워드를 활용하여 선택이 가능하며, this는 document 객체임으로 $(this)로 변환하여 쓰게되면 제이쿼리 객체로 변환하여 사용이 가능하다.
💡이벤트 제거 메소드- 등록된 이벤트를 제거할 수 있다.
➡️ $(’선택자’).off() : 전체 이벤트 제거
➡️ $(’선택자’).off(’이벤트타입’) : 인수값에 해당되는 이벤트를 제거
💡이벤트 트리거 메소드- 등록된 이벤트를 강제 실행을 할 수 있다.
➡️ $('#myBtn01').click();
➡️ $('#myBtn01').trigger(’이벤트명’);
제이쿼리 예제4
<h2>이벤트 메서드</h2> - 검색된 모든 대상에 이벤트 등록이 된다. <br> - 이벤트 등록은 이벤트 관련 메서드 혹은 on 메서드로 할 수 있다. <br> - 많이 쓰이는 이벤트 종류 : click, change, blur, keyup, keydown, keypress... 등 <br> <button type="button" id="myBtn01">버튼</button> <input type="text" id="myInput"> <script src="js/jquery-3.7.0.js"></script> <script type="text/javascript"> $('#myBtn01').click(function () { let myInputValue = $('#myInput').val(); // input에 있는 value값을 가져온다. alert(myInputValue); }); $('#myBtn01').on('click', function () { //'click dbclick...' 한번에 여러 이벤트 타입 가능 console.log(this); console.log($(this)); console.log($(this).text()); // button에 있는 텍스트 검색 }); // 한 요소에 여러 이벤트 등록 가능 $('#myBtn01').on({ 'input' : function() { console.log('input 이벤트 핸들러 실행'); }, 'blur' : function() { console.log('blur 이벤트 핸들러 실행'); } }); // 페이지가 로드될 때 자동으로 강제 호출 $('#myBtn01').click(); $('#myBtn01').trigger('click'); // 이벤트 핸들러 제거 $('#myBtn01').off(); $('#myBtn01').off('input'); </script>
05. 배열관련 메소드
제이쿼리 배열
💡배열- 다중 검색된 객체를 배열관련 메소드로 반복문 처럼 활용할 수 있다.
➡️ $(’선택자’).each(function() { });
콜백함수의 매개변수 값 : idx, item
idx → 인덱스값 전달 / item → 타겟요소
➡️ map, grep 등
➡️ grep(filter)와 map의 차이
grep : 보여주고 싶은 값만 필터링해서 반환
map : 함수를 사용해서 값을 변환해서 반환
제이쿼리 예제5
<h2>배열관련 메서드</h2> - 검색된 요소들을 .each 메서드 활용하여 요소 하나씩 순차적으로 접근 한다. <ul id="myUl"> <li>안녕하세요1.</li> <li>안녕하세요2.</li> <li>안녕하세요3.</li> <li>안녕하세요4.</li> <li>안녕하세요5.</li> </ul> <button type="button" id="ulBtn">클릭</button> <script src="js/jquery-3.7.0.js"></script> <script type="text/javascript"> // javascript forEach() == jquery each() $('#myUl li').each(function (idx, item) { console.log(`${idx} || ${$(item)}`); console.log(idx); console.log($(item)); }); $.each($('#myUl li'), function (idx, item){ console.log(idx); console.log(item); }); const exMap = $('#myUl li').map(function (idx, item) { if($(item).text() == '안녕하세요1.') return item; // jquery를 사용 }); console.log(exMap); // javascript map VS jquery map const arr = []; for(let i=1; i<10; i+=1) { const obj = {}; obj.userName = `홍0${i}`; obj.userEmail = `홍0${i}@email`; arr.push(obj); } console.log(arr); // javascript map -> 빈 값도 새로운 배열에 넣어서 반환. const newArr1 = arr.map(function (item, idx) { if(item.userName == '홍01') return item; }); console.log(newArr1); // jaquery map -> 값이 없으면 배열에 넣지 않고 반환. const newArr2 = $.map(arr, function (item, idx) { if(item.userName == '홍01') return item; }); console.log(newArr2); // javascript filter() == jquery grep() const newArr3 = arr.filter(function (item) { return (item.userName == '홍02'); }); console.log(newArr3); const newArr4 = $.grep(arr, function(item) { return (item.userName == '홍02'); }); console.log(newArr4); </script>
06. 속성 상태에 따른 탐색 선택자
제이쿼리 속성에 따른 선택자
💡속성 상태에 따른 선택자- 선택한 요소 중 속성 상태에 따라 요소를 선택
- hidden, checked, selected에 해당되는 객체를 선택할 수 있다.
➡️ $(’:hidden’) : 선택된 객체가 display:none 되어 있는 객체를 선택한다.
➡️ $(’:checked’) : 선택된 객체가 checked 되어 있는 객체를 선택한다.
➡️ $(’:selected’) : 선택된 객체가 selected 되어 있는 객체를 선택한다.
➡️ $(’선택자:속성상태’) : 직접 선택자와 같이 쓰인다.
➡️ is(’선택자:속성상태’) : 위의 속성상태의 진위여부를 파악 할 수 있다. 반환값(boolean)
제이쿼리 예제6
<h2>속성 조작 메서드</h2> - 선택된 대상의 속성을 생성, 소멸, 변경 시킬 수 있다. <br> - 속성 > 상태 속성(:checked, :selected, :hidden), 속성 <br> - 주로 자주 다루는 속성들은 별도의 메서드가 제공된다.(class) <br> <select class="selectNum"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="checkbox" name="kor" checked>멋쟁이 <input type="checkbox" name="blog">힘내요 <script> const selectValue = $('.selectNum:selected').val(); console.log(selectValue); let isChecked1 = $('input[name="kor"]').is(':checked'); let isChecked2 = $('input[name="blog"]').is(':checked'); console.log(isChecked1); console.log(isChecked2); </script>
07. 속성 및 요소 조작 메소드
제이쿼리 조작 메소드
💡요소 조작 메소드- 선택한 객체의 자식요소의 정보를 가지고 오거나 변경한다.
➡️ html() : 선택된 객체의 자식 html요소를 가지고 오거나 변경 한다. (innerHTML)
➡️ text() : 선택된 객체의 자식 text요소를 가지고 오고나 변경 한다. (innerText)
💡속성 조작 메소드- attr(), removeAttr() : 선택한 객체의 속성을 생성, 변경, 제거 한다.
➡️ attr(’속성명’) : 선택한 객체의 속성의 값을 가지고 온다.
➡️ attr(’속성명’, ‘속성값’) : 선택한 객체의 속성을 생성 혹은 변경한다.
➡️ removeAttr(’속성명’) : 선택한 객체에 인수값에 해당되는 속성을 제거한다.
- prop() : 선택한 객체의 상태속성의 값을 가지고 오거나 변경한다.
➡️ prop(’상태속성명’) : 선택된 객체의 상태속성을 확인하여 결과를 boolean값으로 반환한다.
➡️ prop(’상태속성명’, true or false) : 선택된 객체의 상태속성을 변경한다.
- val() : 선택된 객체에 value의 속성이 있다면 value의 값을 반환한다.
➡️ val(’값’) : 선택된 객체에 value의 속성이 있다면 value속성에 값을 삽입한다.
- css()
➡️ css(’style 속성명’) : 선택된 객체에 적용된 인수값에 해당되는 style 속성의 값을 반환한다.
➡️ css(’style 속성명’, ‘style 속성의 값’) : 선택된 객체에 style 속성을 부여한다.
➡️ css({’style 속성명’: ‘style 속성의 값’, ’style 속성명’: ‘style 속성의 값’}) : 선택된 객체에 style 속성을 여러개 적용시킬 때 사용한다.
- addClass(), remvoeClass(), toggleClass(), hasClass()
➡️ addClass(’클래스명’) : 선택된 객체에 클래스를 추가한다.
➡️ removeClass(’클래스명’) : 선택된 객체에 인수값에 해당되는 클래스를 제거한다.
➡️ toggleClass(’클래스명’) : 선택된 객체에 해당 클래스명이 없으면 추가하고, 두번째 인수에 false 하면 해당 클래스명이 있으면 제거한다.
➡️ hasClass(’클래스명’) : 선택된 객체에 인수값에 해당되는 클래스가 있는지 확인하여 boolean 형태의 값으로 반환한다.
제이쿼리 예제7
<h2>요소 조작 메서드</h2> - 선택된 대상의 하위 요소 조작(변경) <br> innerText - > .text(); > (인수가 있다면 인수로 하위요소 교채, 없다면 하위 요소값 가지고 오기) <br> innerHTML - > .html(); > (인수가 있다면 인수로 하위요소 교채, 없다면 하위 요소값 가지고 오기) <br> <div id="myDiv"> <label id="myLabel" style="color:crimson">멋쟁이</label> </div> <script> let labelText = $('#myLabel').text(); console.log(labelText); $('#myLabel').text('멋쟁이v의 블로그'); let divHtml = $('#myDiv').html(); console.log(divHtml); let html = ''; html += '<span>멋쟁이 blog</span>'; $('#myDiv').html(html); $('#myDiv').text(html); // 태그까지 포함하여 텍스트로 출력 </script> <h3>attr, removeAttr</h3> getAttribute, setAttribute : attr('속성명', '속성값') -> 첫번째 인수만 있다면 첫번째 인수에 해당되는 속성의 값만 가지고 온다. 인수가 2개라면 첫번째 인수값에 해당되는 속성을 2번째 인수값으로 삽입 <br> removeAttribute : removeAttr('제거 할 속성') -> 첫번째 인수에 해당되는 속성을 찾아 제거<br> <label> <input type="radio" class="userList" name="userList" value="0001" data-user-name="홍길동" data-user-age="20" > </label> <label> <input type="radio" class="userList" name="userList" value="0002" data-user-name="이순신" data-user-age="25" > </label> <script type="text/javascript"> $('.userList').click(function(){ let userAge = $(this).attr('data-user-age'); //alert(userAge); //$(this).attr('data-user-age', 30); this.dataset.userAge = 30; // jquery data() vs javascript dataset // jquery data() -> 선택한 요소의 데이터속성을 가져오나 // 새로운 객체를 생성하여 가져온다. // 데이터 속성의 값을 변경하더라도 // 선택한 요소의 데이터속성의 값이 변동되지 않음. $(this).data('userAge', 40); userAge = $(this).data('userAge'); console.log(userAge); // 값이 변경되지만 요소의 속성의 값은 변경되지 않음. // removeAttr('속성명') // 선택한 요소의 속성을 제거하는 메소드 $(this).removeAttr('data-user-name'); }); </script> <h3>prop</h3> - 상태 속성(가상선택자 - :checked, :selected, :hidden) 조작<br> <input type="checkbox" id="allCheck"> 전체 선택 <br> <input type="checkbox" class="checks">선택1<br> <input type="checkbox" class="checks">선택2<br> <input type="checkbox" class="checks">선택3 <script type="text/javascript"> $('#allCheck').click(function(){ let isAllChecked = $(this).prop('checked'); $('.checks').prop('checked', isAllChecked); }); $('.checks').click(function(){ const checkedEle = $('.checks:checked'); if($('.checks').length == $('.checks:checked').length){ $('#allCheck').prop('checked', true); }else{ $('#allCheck').prop('checked', false); } }); </script> <h3>val</h3> - value 속성을 다루는 메서드 > form 요소 <br> - 인수가 없다면 value 속성값을 가지고 온다. <br> - 인수가 있다면 value 속성에 값을 대입한다. <br> <form id="addMemberForm" action="#" method="get"> <table border="1"> <tbody> <tr> <td> <label for="memberId">회원아이디</label> </td> <td> <input type="text" id="memberId" name="memberId"/> </td> </tr> <tr> <td> <label for="memberLevel">회원등급</label> </td> <td> <select id="memberLevel" name="memberLevel" style="width: 100%;"> <option value="">===회원등급을 선택하시오===</option> <option value="1">관리자</option> <option value="2">회원</option> </select> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <button type="button">회원가입</button> </td> </tr> </tbody> </table> </form> <script> $('#addMemberForm button').click(function () { let memberId = $('#memberId').val(); let memberLevel = $('#memberLevel').val(); // memberId 유효성 검사 if(typeof memberId == 'undefined' || memberId == null || memberId == '') { let label = $('#memberId').closest('tr').find('label').text(); let msg = `${label}을 입력해주세요.`; alert(msg); $('#memberId').focus(); return false; } // memberLevel 유효성 검사 if(typeof memberLevel == 'undefined' || memberLevel == null || memberLevel == '') { let label = $('#memberLevel').closest('tr').find('label').text(); let msg = `${label}을 입력해주세요.`; alert(msg); $('#memberLevel').focus(); return false; } // form 전송 $('#addMemberForm').submit(); }); </script> <h3>css</h3> - style 속성을 조작하는 메서드 <br> - 인수가 1개 일 경우 해당 인수에 해당되는 css 속성의 값을 가지고 온다. <br> - 인수가 2개 일 경우 첫번째 인수에 해당되는 css 속성에 2번째 인수의 값을 대입한다. <br> <!-- <style> body{ background-color: darkcyan; background-color: darkorange; } </style> --> <button type="button" id="bgChange">배경색</button> <script type="text/javascript"> $('#bgChange').click(function(){ $('body').css({ 'backgroundColor' : 'darkcyan', 'color':'darkorange' }); }); </script> <h2>addClass, removeClass, hasClass, toggleClass</h2> - 선택된 대상의 클래스 속성을 조작하는 메서드들 <br> classList.add -> addClass('클래스명') <br> classList.remove - > removeClass('제거할 클래스') <br> classList.contains -> hasClass('확인할 클래스') <br> classList.toggle -> toggleClass('토글할 클래스') <br> <button type="button" id="classTarget" class="my-re01">클래스 메서드 확인</button> <script type="text/javascript"> $('#classTarget').click(function(e){ let targetEle = e.target; console.log(targetEle); $(targetEle).addClass('exClass'); console.log($(targetEle).attr('class')); $(targetEle).removeClass('exClass'); console.log($(targetEle).attr('class')); $(targetEle).toggleClass('exClass'); console.log($(targetEle).attr('class')); $(targetEle).toggleClass('exClass', false); console.log($(targetEle).attr('class')); console.log($(targetEle).hasClass('exClass')); }); </script>
08. 객체 조작 메소드
제이쿼리 객체 조작
💡html() : 기존의 선택된 요소안의 모든 태그들을 지우고 실행된다.append() : 요소안에 모든 태그들은 유지 시킨뒤 마지막부분에 붙는다.
clone() : 선택된 객체를 복제한다.
➡️ 객체조작 메소드를 활용하여 객체 이동을 할 수 있다.
- 생성된 객체들은 주소값을 참조를 할 수 있는 객체임으로 주소값을 이동시킨다. (복제가 아님)
➡️ 동적 바인딩
- 동적으로 생성된 객체에 이벤트를 등록 할 수 있다.
- on 메소드에 3개의 인수값이 들어가며, 1번째는 이벤트명, 2번째는 선택자, 3번째는 함수가 들어간다. ex) $(document).on(’이벤트명’, ‘선택자’, function () {..});
제이쿼리 예제8
<h2>html() vs append()</h2> - html() 및 append() 활용해서 동적으로 요소 추가<br> <div id="divEx"> </div> <button type="button" id="insertEleBtn">동적 요소 추가</button> <script> $('#insertEleBtn').click(function(){ //$('#divEx').html(''); $('#divEx').empty(); // html('')와 같은 역할 const newEle1 = $('<label>멋쟁이v의 개발일지</label>'); const newEle2 = $('<label/>',{style:'color:red;'}).text('멋쟁이'); $('#divEx').append(newEle1); $('#divEx').append(newEle2); }); </script> <h2>clone()</h2> - 선택된 대상을 복제한다.(요소선택)<br> - 인수 true -> 이벤트까지 복제<br> <ul id="ulEle"> <li> <button type="button" class="add">추가</button> <button type="button" class="del">삭제</button> </li> </ul> <script> $('#ulEle li').click(function(){ alert('이벤트 발동'); }) $(document).on('click', '.add', function(){ const targetEle = $(this).closest('li'); const liEle = targetEle.clone(false); targetEle.closest('ul').append(liEle); }); $(document).on('click', '.del', e => { const eventTargetEle = e.target; const liLength = $(eventTargetEle).closest('ul').children().length; if(liLength > 1) $(eventTargetEle).closest('li').remove(); }); </script>
09. 제이쿼리 실습
jquery 실습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery 실습</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <h1>인접관계 선택자 실습</h1> <h2>실습1</h2> 실습. 아래의 버튼 클릭시 클릭한 대상의 행을 제거하도록 하시오. <ul> <li> <button type="button" class="delBtn">행제거</button> </li> <li> <button type="button" class="delBtn">행제거</button> </li> <li> <button type="button" class="delBtn">행제거</button> </li> </ul> <script type="text/javascript"> $('.delBtn').click(e => { const targetEle = e.target; const liEles = $(targetEle).closest('ul').children(); if(liEles.length > 1) $(targetEle).closest('li').remove(); }); </script> <h2>실습2</h2> 실습. .cBtn 클릭시 해당 행의 .text 객체에 텍스트 요소를 ksamrt 로 변경하도록 하시오. innerText - > .text(); > (인수가 있다면 인수로 하위요소 교채, 없다면 하위 요소값 가지고 오기) <br> innerHTML - > .html(); > (인수가 있다면 인수로 하위요소 교채, 없다면 하위 요소값 가지고 오기) <br> <ul> <li> <div class="text">클릭해주세요.</div> <div> <button type="button" class="cBtn">클릭</button> </div> </li> <li> <div class="text">클릭해주세요.</div> <div> <button type="button" class="cBtn">클릭</button> </div> </li> <li> <div class="text">클릭해주세요.</div> <div> <button type="button" class="cBtn">클릭</button> </div> </li> </ul> <script type="text/javascript"> $('.cBtn').click(function(){ $(this).parent().parent().find('.text').text('ksmart'); //$(this).parents('li').children().eq(0).text('ksmart'); //$(this).closest('li').find('.text').text('ksmart'); //$(this).parent().prev().text('ksmart'); }); </script> <h2>실습3</h2> 실습. #allCheck 클릭시 선택이 되었다면 .checks 요소 전체 선택, 해제가 되었다면 .checks 요소 전체 선택 해제 되도록 하여라. 또한 #delCheckBtn 클릭시 선택된 .checks 요소의 행을 전체 제거 하도록 하여라. <table border="1"> <thead> <tr> <th> <input type="checkbox" id="allCheck">전체체크 </th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" class="checks">행1 </td> </tr> <tr> <td> <input type="checkbox" class="checks">행2 </td> </tr> <tr> <td> <input type="checkbox" class="checks">행3 </td> </tr> </tbody> </table> <button type="button" id="delCheckBtn">선택된 대상 행 제거</button> <script type="text/javascript"> $('#allCheck').click(function(){ let isAllChecked = $(this).prop('checked'); $('.checks').prop('checked', isAllChecked); }) $('.checks').click(function(){ let checkedLength = $('.checks:checked').length; let checksLength = $('.checks').length; if(checkedLength == checksLength){ $('#allCheck').prop('checked', true); }else{ $('#allCheck').prop('checked', false); } }) $('#delCheckBtn').click(function(){ $('.checks:checked').closest('tr').remove(); }); </script> <h2>실습4</h2> 실습. 아래의 버튼 클릭시 body 의 배경색이 빨강, 파랑, 초록으로 순환되도록 하여라. <br> <button type="button" id="bgChange">배경색 변환</button> <script> const colorList = ['red', 'blue', 'green', 'violet']; const change = (cnt => () => cnt++)(0); $('#bgChange').click(e =>{ let length = colorList.length; $('body').css('background-color', colorList[change()%length]); }); </script> <h2>실습5</h2> 실습. 아래의 화면을 보고 기능을 완성하시오. <br> - 기능 1: 숫자 입력 후 다중행추가 버튼 클릭 시 숫자만큼 다중행 추가 <br> - 기능 2: 구분 체크 후 선택삭제 버튼 클릭 시 선택된 행 삭제 <br> - 기능 3: 추가 버튼 클릭 후 새롭게 추가된 행은 추가 기존 행은 삭제 버튼으로 변경( 삭제 버튼 클릭시 삭제) <br> - 기능 4: 구분 체크 후 선택 등록 버튼 클릭 시 유효성 검사 진행 후 json 형태로 console.log() 로 출력 형식 {name: value} <br> - 기능 5: 다중 등록 클릭 시 유효성 검사 진행 후 json 형태로 console.log() 로 출력 형식 {name: value} <br> - JSON 포맷 방식 : JSON.stringify(객체 혹은 배열); - JSON 변환 : JSON.parse('문자열'); <style> .memberDiv{ margin-top: 20px; width: 900px; padding-bottom: 10px; } .memberDiv input{ width: 45px; } .memberDiv > #addCheckedMembers{ float: right; margin-right: 10px; } .memberDiv > #addMembers{ float: right; } #addMemberForm{ width: 900px; } #addMemberForm > table{ border: 1px solid black; width: 900px; table-layout: auto; text-align: center; } #addMemberForm > table th{ border: 1px solid black; background-color: cornflowerblue; color: azure; height: 30px; } #addMemberForm > table td { border: 1px solid black; height: 30px; } </style> <div class="memberDiv"> <input type="number" id="trCount" min="0" value="0"/> <button id="addRows">다중행추가</button> <button id="removeRows">선택삭제</button> <button id="addMembers">다중등록</button> <button id="addCheckedMembers" >선택등록</button> </div> <form id="addMemberForm"> <table> <colgroup> <col width="10%" /> <col width="16%"/> <col width="16%"/> <col width="16%"/> <col width="16%"/> <col width="16%"/> <col width="10%" /> </colgroup> <thead> <tr> <th>구분</th> <th>아이디</th> <th>비밀번호</th> <th>이름</th> <th>주소</th> <th>이메일</th> <th>추가</th> </tr> </thead> <tbody id="addMemberBody"> <tr> <td> <input type="checkbox" class="memberCheck"/> </td> <td> <input type="text" name="memberId" /> </td> <td> <input type="text" name="memberPw" /> </td> <td> <input type="text" name="memberName" /> </td> <td> <input type="text" name="memberAddr" /> </td> <td> <input type="text" name="memberEmail" /> </td> <td> <button class="delButton" type="button">삭제</button> </td> </tr> <tr> <td> <input type="checkbox" class="memberCheck"/> </td> <td> <input type="text" name="memberId" /> </td> <td> <input type="text" name="memberPw" /> </td> <td> <input type="text" name="memberName" /> </td> <td> <input type="text" name="memberAddr" /> </td> <td> <input type="text" name="memberEmail" /> </td> <td> <button class="addButton" type="button">추가</button> </td> </tr> </tbody> </table> </form> <script> // 유효성 검사(값이 없을 경우) 함수 const isValid = value => { let isValid = true; if( typeof value == 'undefined' || value == null || value == '' ){ isValid = false; } return isValid; } function addMembers(elements){ // 1. 최종 JSON 객체 const membersArr = []; // 2. 아이디 중복 체크 여부 확인 배열 const idCheckArr = []; // 3. 유효성 여부에 따른 중단여부 결정 let isBrake = false; // 요소가 없다면 함수 종료 if(elements.length == 0) return; for(let i=0; i<elements.length; i+=1){ const memberInfoEle = $(elements[i]).closest('tr').find('input[type="text"]'); //4. 유효성검사 후 배열에 담을 객체 선언 및 초기화 const memberInfo = {}; memberInfoEle.each(function(idx, item){ let inputName = $(item).attr('name'); let inputValue = $(item).val(); // 5. id 중복체크 -> 중복시 return false; // 중복 x id => idCheckArr if(inputName == 'memberId'){ if($.inArray(inputValue, idCheckArr) > -1){ alert('중복된 아이디가 존재합니다.'); $(item).focus(); isBrake = true; return false; } idCheckArr.push(inputValue); } // 6. validation 체크(빈값확인) 빈값 -> return false; // 빈값x -> 객체에 담는다. isBrake = !isValid(inputValue); if(isBrake){ const theadTr = $(item).closest('table').find('thead').children().eq(0); const cateName = theadTr.children().eq(idx+1).text(); let msg = `${cateName} 입력해주세요`; alert(msg); $(item).focus(); return false; } memberInfo[inputName] = inputValue; }); if(isBrake) break; // 7. 회원의정보(객체) -> 배열에 담는다. membersArr.push(memberInfo); } //8. isBrake를 활용해서 JSON.stringfy()를 호출할 지? 안할지? if(!isBrake) console.log(JSON.stringify(membersArr)); } $('#addRows').click(function(){ let trCountVal = $('#trCount').val(); if(Number(trCountVal) > 0){ for(let i=0; i<trCountVal; i+=1){ const targetTr = $('#addMemberBody').children().last(); const copyTr = targetTr.clone(true); copyTr.find('input').val('') targetTr.find('button').toggleClass('addButton') .addClass('delButton') .text('삭제'); $('#addMemberBody').append(copyTr); } } $('#trCount').val(0); }); $('#removeRows').click(function(){ const trEles = $('#addMemberBody').children(); const checks = $('.memberCheck:checked'); if(trEles.length == checks.length){ alert('전체 행을 삭제할 수 없습니다.'); checks.prop('checked', false); return false; } $('.memberCheck:checked').parents('tr').remove(); const lastEle = $('#addMemberBody').children().last(); lastEle.find('button').toggleClass('delButton') .addClass('addButton') .text('추가'); }); $(document).on('click', '.addButton', function(){ const newRow = $(this).closest('tr').clone(true); newRow.find('input').val(''); $(this).attr('class', 'delButton').text('삭제'); $('#addMemberBody').append(newRow); }); $(document).on('click', '.delButton', function(){ $(this).closest('tr').remove(); }); // 선택등록 $(document).on('click', '#addCheckedMembers', function(){ // 1. 기능에 맞는 Elements const checkedEle = $('.memberCheck:checked'); // 2. 유효성 검사후 JSON 포맷 방식으로 변환 console.log(checkedEle); addMembers(checkedEle); }); // 전체등록 $(document).on('click', '#addMembers', function(){ // 1. 기능에 맞는 Elements const allEle = $('.memberCheck'); // 2. 유효성 검사후 JSON 포맷 방식으로 변환 addMembers(allEle); }); </script> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
tag : #jQuery #선택자 #인접관계 #이벤트 #등록 #제거 #트리거 #메소드 #속성 #요소 #탐색 #객체조작
Uploaded by N2T
