728x90
이벤트 등록 메서드
- 이벤트 관련 메서드는 이벤트명칭으로 메서드가 구성되어 있다.
- 이벤트 종류 : click, blur, change, keyup, keydown, keypress
- 이벤트등록은 이벤트 메서드를 활용하거나, on메서드를 활용하여 이벤트를 등록 시킬 수 있다.
- 선택자.이벤트메서드(function(){});
<input type="text" id="searchInput">
<script type="text/javascript">
//선택자.이벤트메서드(function(){});
$('#searchInput').keyup(function(){
//선택된 대상의 value 속성값을 가지고 오거나 변경 시키는 메서드는 val();
console.log($(this).val());
});
</script>더보기
실습. 버튼 클릭시 해당행의 .my-text라는 클래스를 찾아 상위 article 태그를 제거 하시오.
<ul>
<li>
<article>
<section>
<button type="button" class="mybtn">클릭</button>
</section>
</article>
<article>
<span class="my-text">한국스마트정보교육원</span>
</article>
</li>
<li>
<article>
<section>
<button type="button" class="mybtn">클릭</button>
</section>
</article>
<article>
<span class="my-text">한국스마트정보교육원</span>
</article>
</li>
<li>
<article>
<section>
<button type="button" class="mybtn">클릭</button>
</section>
</article>
<article>
<span class="my-text">한국스마트정보교육원</span>
</article>
</li>
</ul>풀이
$(function(){
$('.mybtn').click(function(){
$(this).parents('li').find('.my-text').parents('article').remove();
});
});
on메서드를 활용하여 이벤트 등록
- 선택자.on('이벤트종류', function( ){});
- 이벤트를 한꺼번에 여러개 등록할 수 있음
<select id="mySelect">
<option value=""> :: 선택 :: </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>
<script>
$('#mySelect').on('change',function(){
console.log($(this).val());
});
</script>더보기
실습. 버튼 클릭시 해당 행의 .myinput 찾아 value 속성값을 ksmart로 변경하시오.
<ul>
<li>
<article>
<button type="button" class="mybtn02">클릭</button>
</article>
<article>
<input type="text" class="myinput" value="한국스마트정보교육원"></input>
</article>
</li>
<li>
<article>
<button type="button" class="mybtn02">클릭</button>
</article>
<article>
<input type="text" class="myinput" value="한국스마트정보교육원"></input>
</article>
</li>
<li>
<article>
<button type="button" class="mybtn02">클릭</button>
</article>
<article>
<input type="text" class="myinput" value="한국스마트정보교육원"></input>
</article>
</li>
</ul>풀이
$(function(){
$('.mybtn02').on('click', function(){
$(this).parents('li').find('.myinput').val('ksmart');
});
});
이벤트 등록 해제 메서드
- off( ) -> 선택된 객체의 전체 이벤트 제거
- off('이벤트명) -> 선택된 객체에 인수에 삽입된 이벤트만 제거
<button type="button" id="myBtn">클릭</button>
<script type="text/javascript">
var myBtn = $('#myBtn');
myBtn.on('click', function(){
console.log('클릭1');
});
myBtn.off();
myBtn.on('click', function(){
console.log('클릭2');
});
</script>
이벤트 트리거
- 등록된 이벤트 행위를 행하는것
- trigger('이벤트명'); -> 인수에 해당되는 행위 실행
<button type="button" id="btn01">클릭01</button>
<button type="button" id="btn02">클릭02(btn01 트리거)</button>
<script type="text/javascript">
$(function(){
$('#btn01').click(function(){
console.log('btn01 클릭');
});
$('#btn02').click(function(){
//btn02버튼 클릭시 btn01클릭 행위 실행
//이벤트 메서드에 인수인 함수가 없을 경우 트리거 발생
$('#btn01').click();
$('#btn01').trigger('click');
});
});
</script>
배열 관련 메서드
- 검색된 객체는 배열로 반환된다.
- 배열로 반환된 객체를 쉽게 원소에 접근할 수 있도록 만들어진 메서드가 있다.
each
- 선택자로 검색된 배열 객체를 each 메서드로 통하여 원소를 하나씩 접근 할 수 있도록 도와주는 메서드
- $('선택자').each(function(){})
<div class="mydiv">mydiv</div>
<div class="mydiv">mydiv</div>
<div class="mydiv">mydiv</div>
<div class="mydiv">mydiv</div>
<script type="text/javascript">
//반복문을 써서 풀어야 하는 경우
var mydiv = $('.mydiv');
for(var i=0; i<mydiv.length; i++){
console.log(mydiv[i], 'for');
}
//each() 메서드를 쓰는 경우
$('.mydiv').each(function(i, obj){ //매개변수로 인덱스값 까지 넘어옴(콜백함수)
console.log(this, i, obj, 'each');
});
</script>
index
- 인수에 삽입된 객체를 앞에 검색된 객체와 비교하여 일치하는 객체의 index를 찾아 반환
- $('선택자').index('직접선택자 or 인접관계선택자로 찾아진 배열 객체 중 1개')
<button type="button" class="btn01">클릭</button>
<button type="button" class="btn01">클릭</button>
<button type="button" class="btn01">클릭</button>
<button type="button" class="btn01">클릭</button>
<script type="text/javascript">
var btn01 = $('.btn01');
btn01.click(function(){
var index = btn01.index(this);
console.log(index);
});
</script>
그 외
| 사용법 | 설명 |
| $.map(Array, function) | 배열에 저장된 데이터 수 만큼 메서드 반복 실행 후, 반환된 데이터는 새 배열에 순서대로 저장되고, 새로 저장된 배열 객체를 반환 |
| $.grep(Array, function) | 배열에 저장된 데이터 수만큼 메서드 반복 실행 후, 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되고, 그 배열 반환 |
| $.inArray(data, Array, (start index)) | 배열 안에서 데이터를 찾고, 데이터를 찾으면 맨 앞 데이터의 인덱스를 반환, 찾지 못하면 -1 반환. start index 값 지정 시 해당 위치부터 데이터 찾기 시작) |
| $.isArray(object) | 입력한 객체가 배열 객체라면 true, 아니면 false 반환 |
| $.merge(Array1. Array2) | 인자값으로 입력한 2개의 배열 객체를 하나로 그룹화 |
더보기
실습1. 아래의 버튼을 클릭시 체크된 대상의 값을 합산하여 result에 출력하도록 하여라.
<label>
<input type="checkbox" class="price" value="1000"> 사과
</label>
<label>
<input type="checkbox" class="price" value="2000"> 배
</label>
<label>
<input type="checkbox" class="price" value="3000"> 포도
</label>
<button type="button" id="sumBtn">계산</button>
<br>
<input type="text" class="result" value="0">풀이
$(function(){
$('#sumBtn').on('click', function(){
var result = 0;
$('.price').each(function(){
if(this.checked){
result += Number($(this).val());
}
});
$('.result').val(result);
});
});선생님 풀이
$(function(){
var result = $('.result');
$('#sumBtn').click(function(){
var sum=0;
$('.price:checked').each(function(){ //조건문 안쓰고 가상선택자
sum += Number($(this).val());
});
result.val(sum);
});
});
실습2. btn01버튼 클릭시 해당 행을 제거와 동시에 #ul02의 동일한 행을 제거하시오.
<ul id="ul01">
<li>
<button type="button" class="btn01">제거</button>
</li>
<li>
<button type="button" class="btn01">제거</button>
</li>
<li>
<button type="button" class="btn01">제거</button>
</li>
</ul>
<ul id="ul02">
<li>안녕하세요</li>
<li>안녕하세요</li>
<li>안녕하세요</li>
</ul>풀이
$(function(){
var btn01 = $('.btn01'); //인덱스의 값을 계속 다시 찾아야돼서 변수에 대입하면 안됨
var i= 0;
btn01.click(function(){
console.log(btn01.index(this));
$(this).parent().remove();
i = btn01.index(this);
$('#ul02').children('li')[i].remove(); //선택자에 and조건으로 나열해도 됨
})
});
//두번째
$(function(){
$('.btn01').click(function(){
//console.log(btn01.index(this));
var i = $('.btn01').index(this);
$(this).parent().remove();
$('#ul02 li')[i].remove();
})
});>> 두개까지는 삭제되는데 버튼을 변수지정해둬서 마지막 행의 인덱스값은 불러오지 못해 오류가 남, 그리고 인덱스를 행이 삭제되기 전에 대입해야할것 같음
선생님풀이
$(function(){
$('.btn01').click(function(){
var index = $('.btn01').index(this);
$(this).parent().remove();
$('#ul02 li').eq(index).remove();
//eq() -> 내가 찾는 인덱스값 반환
//first()첫번째 반환, last() 마지막 반환
})
})
실습3. 아래의 버튼 클릭시 모든 행의 텍스트를 ksmart로 변경하시오.
<ul id="ul01">
<li>안녕하세요.</li>
<li>안녕하세요.</li>
<li>안녕하세요.</li>
</ul>
<button type="button" id="btn01">클릭</button>풀이
$(function(){
$('#btn01').on('click',function(){
$('#ul01').children().each(function(){
$(this).text('ksmart');
})
});
});
조작 메서드
요소 조작 메서드
- 텍스트 요소 및 html 요소 조작
- JavaScript 의 innerText, innerHTML 등
- text( ) -> 선택된 객체의 텍스트 요소를 가지고 오거나 변경
- html( ) -> 선택된 객체의 html 요소를 가지고 오거나 변경
<button type="button" id="textM">텍스트요소삽입</button>
<button type="button" id="textH">html요소삽입</button>
<script type="text/javascript">
//text 메서드는 하위 텍스트 요소 전체를 가지고 온다.
console.log($('#ul01').text(), 'text 메서드');
//html 메서드는 하위 html 요소 및 텍스트 요소 전체를 가지고 온다.
console.log($('#ul01').html(), 'html 메서드');
$('#textM').click(function(){
// 텍스트 요소 교체
$('#ul01').text('<li>ksmart</li>');
});
$('#textH').click(function(){
//html 요소로 교체
$('#ul01').html('<li>ksmart</li>');
});
</script>
더보기
실습1. #guguBtn 버튼 클릭시 #gugu하위에 아래의 형태의 html이 출력되도록 하시오.
<ul id="gugu">
</ul>
<button type="button" id="guguBtn">2단 구구단</button>
<h3>완성될 결과물</h3>
<ul>
<li>2 x 1 = 2</li>
<li>2 x 2 = 4</li>
<li>2 x 3 = 6</li>
<li>2 x 4 = 8</li>
<li>2 x 5 = 10</li>
<li>2 x 6 = 12</li>
<li>2 x 7 = 14</li>
<li>2 x 8 = 16</li>
<li>2 x 9 = 18</li>
</ul>풀이
$(function(){
$('#guguBtn').click(function(){
var i=1;
var s = '';
while(i<10){
s += '<li>2 x '+ i + ' = ' + (2*i)+ '</li>';
i++;
}
$('#gugu').html(s);
});
});
실습2. 아래의 버튼 클릭시 같은 행의 '미완료'라고 표기된 텍스트를 '완료', '완료'라고 표기된 텍스트는 '미완료'로 바꾸도록 하시오. (toggle 기능?)
<table border="1">
<tbody>
<tr>
<td class="check-text">미완료</td>
<td>
<button type="button" class="checks">확인</button>
</td>
</tr>
<tr>
<td class="check-text">미완료</td>
<td>
<button type="button" class="checks">확인</button>
</td>
</tr>
<tr>
<td class="check-text">미완료</td>
<td>
<button type="button" class="checks">확인</button>
</td>
</tr>
<tr>
<td class="check-text">미완료</td>
<td>
<button type="button" class="checks">확인</button>
</td>
</tr>
<tr>
<td class="check-text">미완료</td>
<td>
<button type="button" class="checks">확인</button>
</td>
</tr>
</tbody>
</table>풀이
//요소 삭제 안되면 변수로 선언 해도 됨
$(function(){
$('.checks').click(function() {
var s =$(this).parents('tr').find('.check-text');
if(s.text().trim() == '미완료'){
s.text('완료');
}else {
s.text('미완료');
}
});
});
실습3. 아래의 객체들의 값들이 변경시 #totalPrice에 계산하여 값을 출력 하도록 하시오.
<table>
<tbody>
<tr>
<td>상품 기본가격</td>
<td>
<span style="color: #f00;">10000</span>원
<input type="hidden" id="goodsPrice" value="10000">
</td>
</tr>
<tr>
<td>상품 수량</td>
<td>
<input type="number" id="goodsNum" value="0">
</td>
</tr>
<tr>
<td>상품 옵션</td>
<td>
<select id="goodsOption">
<option value="0"> ::크기선택:: </option>
<option value="1000"> 라지(+1000) </option>
<option value="500"> 미디움(+500) </option>
</select>
</td>
</tr>
<tr>
<td>총 합산가격</td>
<td>
<input type="hidden" id="totalPrice">
<span id="totalPriceText" style="color: #f00; font-size: 20px;">0</span>원
</td>
</tr>
</tbody>
</table>풀이
$(function(){
/*
합산가격
goodsPrice * goodsNum + goodsOption
*/
console.log($('#totalPriceText').text());
var price = $('#goodsPrice'),
num = $('#goodsNum'),
op = $('#goodsOption'),
total = $('#totalPriceText');
num.change(function(){
console.log($(this).val());
//수량에 음수 입력 못하게 조건
if(Number($(this).val())<0)
$(this).val('');
if(total.text()=='0'){
total.text(price.val()*$(this).val()+Number(op.val()));
}else{
total.text(Number(price.val()*$(this).val())+Number(op.val()));
}
});
op.change(function(){
console.log($(this).val());
num.trigger('change');
});
});>> 처음에 시간이 부족해서 변수에 지정할 생각 못하고, 이벤트마다 똑같은 조건문 쓰고 시간 남으면 함수로 선언해서 뺄 생각이었는데 쓰다보니 goodsNum의 기본값이 0이라 곱하면 0이 나오면 문제 아닌가?(아님) 라는 생각에 사로잡혀서 식도 하나하나 생각하면서 썼다... 선생님이 대상이 삭제되는게 아니라면 변수에 선언해도 되고, 같은 코드를 쓸 땐 함수로 빼서 호출하거나 트리거를 사용하면 된다고 해서 goodsNum의 값을 변경했을때의 이벤트에 조건문 써주고 옵션 값 변경햇을때의 이벤트에는 그냥 트리거 걸어주기..
객체 조작 메서드
- 제이쿼리 메서드를 활용하여 document 객체 조작이 가능하다.(element 객체)
- JavaScript의 appendChild, cloneNode 등
| $(요소선택).append(새요소) | 선택된 객체에 인수에 삽입된 객체를 제일 마지막 요소로 추가 |
| $(새요소).appendTo(요소선택) | |
| $(요소선택).prepend(새요소) | 선택된 객체에 인수에 삽입된 객체를 제일 첫번째 요소로 추가 |
| $(새요소).prependTo(요소선택) | |
| clone( ) | 선택한 요소 복제, 인수에 true가 있을 경우 이벤트까지 포함하여 복제(동적바인딩 가능) |
| remove( ) | 선택한 요소 제거 |
| empty( ) | 선택한 요소의 모든 하위 요소 제거 |
append, prepend
- 새로 객체 생성이 아닌 기존에 존재하는 객체를 검색 후 다른 위치에 append, prepend메서드를 통하여 객체 삽입할 경우 객체 위치만 변경 된다.
<ul id="ul01">
</ul>
<button type="button" id="btn01">마지막 요소에 삽입</button>
<button type="button" id="btn02">첫번째 요소에 삽입</button>
<button type="button" id="btn03">객체 생성 후 마지막 요소에 삽입</button>
<script type="text/javascript">
$(function() {
var cnt=0, $ul01=$('#ul01');
//선택된 객체 하위 마지막 요소에 객체 삽입
$('#btn01').click(function() {
var htmlStr='<li>ksmart' + cnt + '</li>';
$ul01.append(htmlStr);
cnt++;
});
//선택된 객체 하위 첫번째 요소에 객체 삽입
$('#btn02').click(function() {
var htmlStr='<li>ksmart' + cnt + '</li>';
$ul01.prepend(htmlStr);
cnt++;
});
//객체 생성후 선택된 객체 하위 마지막번째 요소에 객체 삽입
$('#btn03').click(function() {
var $li = $('<li></li>'); //화면에 보이진 않지만 제이쿼리 객체로 생성되어 저장됨
console.log($li);
$li.text('ksmart'+cnt);
$ul01.append($li);
cnt++;
});
});
</script>
<ul id="ul02">
<li>
<button type="button" class="btn01">이동</button>
</li>
</ul>
----------------------------------------------------------
<ul id="ul03"></ul>
<script type="text/javascript">
$(function(){
var
$ul02 = $('#ul02'),
$ul03 = $('#ul03');
//toggle로
$('.btn01').click(function() {
var
$parentLi = $(this).parent(),
$parentUl = $parentLi.parent();
if($parentUl.attr('id') == 'ul02'){
$ul03.append($parentLi);
}else{
$ul02.append($parentLi);
}
});
});
</script>
clone, remove
<ul id="ul04">
<li>
<button type="button" class="btn02">복제</button>
<button type="button" class="btn03">이벤트 포함 복제</button>
<button type="button" class="btn04">제거</button>
</li>
</ul>
<script type="text/javascript">
$(function() {
var $ul04 = $('#ul04');
//이벤트 제외한 하위요소 포함하여 복제
$('.btn02').click(function(){
var $clone = $(this).parent().clone();
$ul04.append($clone);
});
//이벤트를 포함한 하위요소 포함하여 복제
$('.btn03').click(function(){
var $clone = $(this).parent().clone(true);
$ul04.append($clone);
});
$('.btn04').click(function(){
$(this).parent().remove();
});
});
</script>더보기
실습1. 아래의 추가 버튼 클릭시 행을 복제 하여 행추가, 제거 버튼 클릭시 행 제거를 하도록 하시오.
(input의 값은 초기화, 삭제는 행 2개 이상일 경우에만 삭제 가능하도록)
<table border="1">
<tbody>
<tr>
<td>
<input type="text" class="msg">
</td>
<td>
<button type="button" class="addBtn">추가</button>
<button type="button" class="delBtn">제거</button>
</td>
</tr>
</tbody>
</table>풀이
$(function() {
$('.addBtn').click(function() {
var cloneTr = $(this).parents('tr').clone(true);
cloneTr.find('.msg').val('');
$('table').append(cloneTr);
});
$('.delBtn').click(function() {
if($('tr').length >= 2){
$(this).parents('tr').remove();
}else {
alert('삭제할 수 없습니다.');
}
});
});>> 제이쿼리 객체 변수 지정할 때 $변수명으로 지정해주기, 돌아가긴 하지만 페이지에 table이 여러가지가 있을경우 이벤트 제대로 작동 안할수도 있어서 id를 지정해주거나, 이벤트 대상의 parent로 찾아야함. 이 문제에선 id가 따로 주어지지 않았기 때문에 parent 메서드 이용해야됨
선생님풀이
$(function() {
$('.addBtn').click(function() {
var $tbody = $(this).parents('tbody');
var $tr = $(this).parents('tr').clone(true);
$tr.find('.msg').val('');
$tbody.append($tr);
});
$('.delBtn').click(function() {
var $tbody = $(this).parents('tbody');
if($tbody.find('tr').lenght > 1)
$(this).parents('tr').remove();
}else {
alert('삭제할 수 없습니다.');
}
});
});
속성 조작 메서드
- 하나의 객체가 가지고 있는 속성을 등록, 수정, 삭제
- html 속성, css(style), class 속성, 상태속성 조작
- 선택한 객체가 배열이며, 배열의 원소가 여러개일 경우 조작 및 행위에 관련된 메서드 실행 모든 원소가 영향을 받는다
- 부분적으로 조작이나 행위를 해야할 경우 원소에 접근하여 조작 및 행위 메서드를 별도로 실행해야한다.
- JavaScript의 getAttribute, setAttribute, classList, style 등
| attr('속성명' ) attr('속성명' ,'새 값' ) |
선택한 요소의 지정한 속성값을 가져오거나 변경 |
| removeAttr('속성명') | 선택한 요소의 지정한 속성 제거 |
| prop('상태 속성명' ) prop('상태 속성명' ,'새 값') |
선택한 요소의 상태 속성값을 가져오거나 변경 상태속성: checked, selected , 값: true/false |
| val( ) | 선택한 요소의 value값 가져오거나 변경 |
| css('속성명') css('속성명','새값') |
선택한 요소의 지정한 스타일 속성값 가져오거나 변경 |
| addClass('class값') | 선택한 요소의 class 속성에 새 값 추가 |
| removeClass('class값') | 선택한 요소의 class 속성에서 지정한 값 제거 |
| toggleClass('class값') | 선택한 요소의 class 값에 지정한 값이 포함되어 있으면 제거하고 없으면 추가 |
| hasClass('class값') | 지정한 class값의 포함여부에따라 true/false 반환 |
attr, removeAttr
<button type="button" id="btn01" data-myName="홍길동">속성확인</button>
<button type="button" id="btn02">속성삽입</button>
<button type="button" id="btn03" data-myAddr="전주">속성제거</button>
<script type="text/javascript">
$(function() {
$('#btn01').click(function(){
//속성 id값 가지고 오기
console.log($(this).attr('id'));
//속성 data-myName값 가지고 오기
console.log($(this).attr('data-myName'));
});
$('#btn02').click(function() {
//data-age 추가와 data-age 속성에 20값 삽입
$(this).attr('data-age', 20);
console.log(this);
});
$('#btn03').click(function() {
//data-age 추가와 data-age 속성에 20값 삽입
$(this).removeAttr('data-myAddr');
console.log(this);
});
});
</script>더보기
실습. 회원선택버튼 클릭시 회원의 정보를 아래의 표에 출력하도록 하여라(.jsp)
<table border="1">
<tbody>
<%
for(UserDto u: userList){
%>
<tr>
<td><%=u.getUserName() %></td>
<td><%=u.getUserAddr() %></td>
<td><%=u.getUserAge() %></td>
<td>
<button type="button" class="userPrint"
data-userName="<%=u.getUserName() %>"
data-userAddr="<%=u.getUserAddr() %>"
data-userAge="<%=u.getUserAge() %>"
>
회원선택
</button>
</td>
</tr>
<%
}
%>
</tbody>
</table>풀이
$(function() {
$('.userPrint').click(function() {
var
$name = $(this).attr('data-userName'),
$addr = $(this).attr('data-userAddr'),
$age = $(this).attr('data-userAge');
$('#choiceUserName').text($name);
$('#choiceUserAddr').text($addr);
$('#choiceUserAge').text($age);
});
});
prop
<input type="checkbox" class="my-check">
<input type="checkbox" class="my-check">
<input type="checkbox" class="my-check">
<button type="button" id="btn04">선택</button>
<button type="button" id="btn05">해제</button>
<script type="text/javascript">
$(function() {
var $myCheck = $('.my-check');
$('#btn04').click(function() {
//상태 속성 값 확인하기
//배열 객체의 상태 속성 확인임으로 첫번째 원소만 확인
console.log($myCheck.prop('checked'));
//정상적인 확인을 위해서 원소에 접근하여 확인해야 한다.
console.log($myCheck.eq(1).prop('checked'),'eq(1)');
console.log($myCheck.eq(2).prop('checked'),'eq(2)');
//상태 속성 변경하기
$myCheck.prop('checked', true);
//선택한 객체(배열)의 원소가 여러개일 경우 행위 혹은 조작에 관련된 메서드 실행 일괄 적용
$myCheck.attr('data-mydata', 1);
});
$('#btn05').click(function() {
$myCheck.prop('checked', false);
});
});
</script>더보기
1. 전체선택 체크박스 클릭시 아래의 행 전체 선택이 되도록하고, 전체체크 클릭시 체크가 해제가 되었다면 아래의 행 전체가 선택 해제 되도록 하여라.
2. 반전 버튼 클릭시 체크된 대상은 해제, 해제된 대상은 체크 되도록 하여라.
3. 또한 선택된 대상 제거 버튼 클릭시 선택된 행을 제거 하도록 하여라.
<table border="1">
<thead>
<tr>
<th>
<label><input type="checkbox" id="allCheck">전체선택</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="checks">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checks">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checks">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checks">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="checks">
</td>
</tr>
</tbody>
</table>
<button type="button" id="checksDel">선택 행 제거</button><br>
<button type="button" id="checksReversal">선택 반전</button>
첫번째 문제 풀이
$(function() {
var $allCheck = $('#allCheck');
$allCheck.change(function() {
if ($allCheck.prop('checked') == true) {
$('.checks').prop('checked', true);
} else {
$('.checks').prop('checked', false);
}
});
$('#checksReversal').click(function() {
$('.checks').each(function() {
if ($(this).prop('checked') == true) {
$(this).prop('checked', false);
} else {
$(this).prop('checked', true);
}
});
});
$('#checksDel').click(function() {
$('.checks').each(function() {
if ($(this).prop('checked') == true) {
$(this).parents('tr').remove();
}
});
$allCheck.prop('checked', false);
});
});>> 전체선택 체크박스가 바뀌었을 때, 반전 선택 버튼을 눌렀을 때, 선택행 제거 버튼을 눌렀을 때 3가지의 이벤트를 걸어줌. 그리고 안에 각각 조건문을 줬는데 버튼을 누르는 이벤트의 경우에는 checks라는 클래스를 가진 checkbox들이 배열형태로 가져와지기 때문에 each 메서드로 각각 조건문을 돌려줌
문제를 다 풀고 나서... 갑자기 의문이 들었음 휴대폰 갤러리나, 회원가입 정보동의 창에서 전체선택을 체크했다가 하나의 체크박스라도 풀게되면 전체선택 체크박스도 자동으로 풀어지게 되는데 그것도 구현해야 하나? 근데 어떻게 하지? 하고 선생님한테 질문했는데 상관없다고 하심 근데.. 나는 너무 하고 싶었다 굳이
선생님 풀이
$(function() {
var
$allCheck = $('#allCheck'),
$checksDel = $(';#checksDel'),
$checksReversal = $('#checksReversal');
$allCheck.click(function() {
$('.checks').prop('checked', $(this).prop('checked'));
});
$checksReversal.click(function() {
$('.checks').each(function() {
$(this).prop('checked', !($(this).prop('checked')));
});
});
$checksDel.click(function() {
$('.checks:checked').each(function() {
$(this).parents('tr').remove();
});
});
});>> 위에 썼던 상태속성값이 true면 false로 바꾸고 하며 주절주절 썼던 조건문을 !연산자로 깔끔하게 바꾸고..
계속 prop 메서드를 사용했는데 그냥 가상선택자를 이용해도 됐던...
위에서 들었던 의문은 아래 게시물에 따로 정리
css
- $('선택자').css({'속성명':'속성값', '속성명':'속성값', '속성명':'속성값'}) -> 객체에 삽입된 css style 일괄 적용
<button type="button" id="btn06" style="color: #f00">css 정보 가지고 오기</button>
<button type="button" id="btn07">css 적용</button>
<button type="button" id="btn08">css 일괄 적용</button>
<script type="text/javascript">
$(function(){
var
$body = $('body'),
cssObj = {
'backgorund-color' : '#f00',
'color' : '#fff'
};
$('#btn06').click(function() {
console.log($(this).css('color'));
console.log($(this).css('font-size'));
console.log($(this).css('background'));
});
$('#btn07').click(function() {
$body
.css('background-color', '#f00')
.css('color', '#fff');
});
$('#btn08').click(function() {
$body.css(cssObj);
});
});
</script>
728x90
'{ "Hello World!" }; > JavaScript／jQuery' 카테고리의 다른 글
| (jQuery) 동적바인딩 (0) | 2022.01.27 |
|---|---|
| js/ 속성 조작 메서드(prop) 실습 (0) | 2022.01.23 |
| (jQuery) 제이쿼리 함수, 선택자 (0) | 2022.01.14 |
| (JavaScript) 콜백 함수, cloneNode 동적바인딩 (0) | 2022.01.14 |
| (JavaScript) document 객체 (0) | 2022.01.08 |