제이쿼리 객체 탐색기 및 탐색기 메서드 활용 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 객체 탐색기 및 탐색기 메서드 활용</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
실습1. 아래의 html 객체들이 있다.
#sum 버튼 클릭시 .num의 값을 가지고와 합산하고
그 결과값을 #text에 삽입하여라.
(.del 클릭시 .num-wrap 가 제거 되어야함)
-- 추가 설명 메서드
객체.val() <-- value라는 속성을 가진 html 객체의 값을 가지고 오거나 삽입한다.
객체.text() <-- 선택된 객체의 텍스트 요소를 가지고 오거나 삽입한다.
*/
$(function(){
//input box 에 숫자만 입력되도록 하는 jquery
$('input').keyup(function(){
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^0-9]/gi,'')); //정규식
})
$('#sum').click(function(){
var sig = 0;
$('.num').each(function(){
if($(this).val() == ''){
}else{
sig += parseInt($(this).val());
/* Number함수 : 값이 없을 경우 0 반환
parseInt : 값이 없을 경우 NaN, undefined 반환 */
}
})
$('#text').text(sig);
})
$('.del').click(function(){
$(this).parents('.num-wrap').remove();
})
})
</script>
</head>
<body>
<div class="num-wrap">
<input type="text" class="num">
<button type="button" class="del">제거</button>
</div>
<div class="num-wrap">
<input type="text" class="num">
<button type="button" class="del">제거</button>
</div>
<div class="num-wrap">
<input type="text" class="num">
<button type="button" class="del">제거</button>
</div>
<h1>
계산결과
</h1>
<div id="text"> 계산하기를 클릭해주세요.</div>
<button type="button" id="sum">계산하기</button>
</body>
</html>
https://tyson.tistory.com/119
속성 조작 메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
<속성 조작 메서드>
: 선택된 객체의 속성값을 가지고 오거나 변경이 가능한 메서드
<Parsing> ((cf. 형변환))
: 서로 다른 데이터를 변환하는 작업
- parser : 서로 다른 테이터를 변환하는 대상 혹은 도구 (플러그인, api(메서드))
1) $('선택자').html()
: 선택된 객체의 html요소를 가지고 오거나 삽입
ex) $('body').html(); 선택된 객체의 자식 html 요소 가지고 오기
$('body').html('<h1>안녕하세요</h1>'); 선택된 객체에 값 삽입
2) $('선택자').text()
: 선택된 객체의 하위 요소의 text를 가지고 오거나 삽입
ex) $('body').text(); body의 하위 텍스트 전체 가지고 오기
$('body').text('안녕하세요'); body의 하위 텍스트 전체 가지고 오기
*** 3) $('선택자').attr()
: 선택된 객체의 속성을 가지고 오거나 삽입한다.
웹표준에 존재하지 않는 속성도 삽입하거나 가지고 올 수 있다.
ex) $('body').attr('myName'); body에 myName 이라는 속성의 값을 가지고 온다.
$('body').attr('myName', '홍길동'); body에 myName 이라는 속성을 생성하고 속성 myName의 값으로 홍길동을 삽입한다.
4) $('선택자').removeAttr('속성명')
: 선택된 객체의 인수값에 해당되는 속성을 제거한다.
ex) $('body').removeAttr('myName'); body에 myName이라는 속성을 제거
5) $('선택자').prop()
: 선택된 객체의 상태속성을 확인하거나 변경한다. ('checked', 'selected', 'hidden' 등)
ex) $('body').prop('hidden', true); body 태그의 상태를 hidden으로 변경
$('body').prop('hidden', false); body 태그의 상태를 hidden 해제
$('body').prop('hidden'); body 태그의 상태 중 hidden의 상태값을 true / false로 가지고 온다.
6) $('선택자').val()
: 선택된 객체의 value 속성값을 가지고 오거나 변경한다.
ex) $('input').val(); input 태그의 value속성의 값을 가지고 온다.
$('input').val('홍길동'); input 태그의 value속성의 값을 '홍길동'으로 변경한다.
7) $('선택자').css()
: 선택된 객체의 css 속성을 적용 혹은 값을 가지고 온다.
ex) $('body').css('border', '1px solid #ff0000'); body에 border라는 css속성 1px solid #ff0099을 적용
$('body').css('border'); body에 적용된 css속성 border 값을 가지고 오기
ex2) 다중으로 css 속성 적용하기
$('body').css({
'border':'1px solid #ff0000',
'padding':'5px'
})
8) $('선택자').addClass('클래스명')
: 선택된 객체에 클래스를 추가 삽입
ex) $('body').addClass('syntaxhighlighter'); body에 클래스 속성의 값에 syntaxhighlighter를 추가한다.
9) $('선택자').removeClass('클래스명')
: 선택된 객체에 인수값에 해당하는 클래스를 제거
ex) $('body').removeClass('syntaxhighlighter'); body의 클래스 속성에 syntaxhighlighter 값이 있다면 syntaxhighlighter 제거
10) $('선택자').('클래스명')
:
ex)
*/
</script>
</head>
<body>
</body>
</html>
속성 조작 메서드 실습 css, addClass, removeClass
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 조작 메서드 실습 css, addClass, removeClass</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#bodyBorderChange').click(function(){
if($('body').is('.r-border')){
$('body').removeClass('r-border').addClass('b-border');
} else {
$('body').removeClass('b-border').addClass('r-border');
}
})
})
</script>
<style type="text/css">
.r-border{
border: 1px solid #ff0000;
}
.b-border{
border: 1px solid #0000ff;
}
</style>
</head>
<body class="r-border">
<!--
실습3. #bodyBorderChange 클릭시 .r-border와 .b-border가 토글되게 하라.
addClass, removeClass, is, attr
(is 메서드는 상태속성 및 아이디, 클래스를 확인할 수 있다. ex) $('body').is('.r-border'); >> true/false )
-->
<button type="button" id="bodyBorderChange">바디 보더 변경</button>
</body>
</html>
제이쿼리 css 메서드 활용 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 css 메서드 활용</title>
<style type="text/css">
body{padding: 0;}
ul{padding: 10px; margin: 0;}
ul, li{list-style-type: none;}
li{width: 100px; height: 100px; border: 1px dashed #000; padding: 1px; margin: 0;}
</style>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
실습4. #alignStart 버튼 클릭시 li테그를 왼쪽 정렬되게 하여라.
(row 형태로 존재하는 li를 col 형태로 재정렬)
*/
$(function(){
$('#alignStart').click(function(){
$('li').css('float','left')
})
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button type="button" id="alignStart">정렬하기</button>
</body>
</html>
객체 편집 메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 편집 메서드</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
<객체 편집 메서드>
: 선택한 객체의 옵션 (메서드에 위치 옵션 포함) 위치에 html 요소를 삽입
1) $('선택자').before('html 요소')
: 선택한 대상의 이전 위치에 html 삽입
2) $('선택자').after('html 요소')
: 선택한 대상의 이전 위치에 html 삽입
*** 3) $('선택자').append('html 요소')
: 선택한 대상의 자식요소 제일 끝에 html 삽입
*** 4) $('선택자').prepend('html 요소')
: 선택한 대상의 자식요소 제일 처음에 html 삽입
5) $('선택자').clone()
: 선택한 대상을 복제한다.
*/
$(function(){
$('#beforeAfterBtn').click(function(){
$('#center').before('<div>이전</div>')
$('#center').after('<div>다음</div>')
})
$('#appendBtn').click(function(){
var len = $('#addTr').find('tr').length;
$('#addTr').append('<tr><td> 마지막' + len + ' </td></tr>')
})
$('#prependBtn').click(function(){
var len = $('#addTr').find('tr').length;
$('#addTr').prepend('<tr><td> 처음' + len + ' </td></tr>')
})
$('#cloneBtn').click(function(){
//clone 변수에 #cloneTarget을 복제한다.
var clone = $('#cloneTarget').clone();
console.log(clone,'<<clone');
//clone() 메서드로 복제시 clone변수에 담긴 객체를 조회할 수 있다.
clone.find('h2').text('안녕하세요2');
console.log(clone.html(),'<<clone.html()')
$('#cloneCopy').html(clone.html());
})
})
</script>
</head>
<body>
<h1> before after </h1>
<div id="center">
중앙
</div>
<button type="button" id="beforeAfterBtn">다음과 이전 html 삽입</button>
<h1> append prepend</h1>
<table>
<tbody id="addTr">
<tr><td> 중앙 </td></tr>
</tbody>
</table>
<button type="button" id="appendBtn">append</button>
<button type="button" id="prependBtn">prepend</button>
<div id="cloneTarget">
<h2>안녕하세요.</h2>
</div>
<div id="cloneCopy"></div>
<button type="button" id="cloneBtn">복제</button>
</body>
</html>
동적바인딩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동적 바인딩</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
<동적 바인딩>
: html 실행 순서에 따라 dom 객체가 생성되기 때문에 이벤트 실행 완료 이후에 생성되는 html 에는 이벤트를 걸 수 없다.
때문에 동적으로 이벤트를 걸거나 객체 생성시에 이벤트를 걸어야 한다.
*/
$(document).on('click','.add',function() {
var clone = $(this).parent().clone();
$('body').append(clone);
})
$(document).on('click','.del',function() {
$(this).parent().remove();
})
</script>
</head>
<body>
<div class="btn-wrap">
<button type="button" class="add">생성</button>
<button type="button" class="del">제거</button>
</div>
</body>
</html>
객체 조작 메서드 활용 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 조작 메서드 활용 실습</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
실습5. .file-add 클릭시 파일을 더 추가할 수 있는 폼을 추가하고 .file-del 클릭시 파일을 첨부할 수 있는 폼을 제거하여라.
파일 추가 최대 갯수는 5개이고 1개 최소 1개는 존재해야한다.
*/
$(document).on('click','.file-add',function(){
console.log($('.file-add').parent().length)
if($('.file-add').parent().length <= 5){
var clone = $(this).parent().clone();
$('#file-warp').append(clone);
}
})
$(document).on('click','.file-del',function(){
console.log($('.file-del').parent().length)
if($('.file-del').parent().length > 1){
$(this).parent().remove();
}
})
</script>
</head>
<body>
<div id="file-warp">
<div class="file-group">
<input type="file">
<button type="button" class="file-add">파일 추가</button>
<button type="button" class="file-del">파일 제거</button>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 조작 메서드 활용 실습</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
실습5. .file-add 클릭시 파일을 더 추가할 수 있는 폼을 추가하고 .file-del 클릭시 파일을 첨부할 수 있는 폼을 제거하여라.
파일 추가 최대 갯수는 5개이고 1개 최소 1개는 존재해야한다.
*/
$(document).on('click','.file-add',function(){
var len = $('.file-group').length;
if(len<5){
var clone = $(this).parent().clone();
clone.find('input').val('');
$('#file-warp').append(clone);
} else {
alert('더 이상 추가할 수 없습니다.')
}
})
$(document).on('click','.file-del',function(){
var len = $('.file-group').length;
if(len>1){
$(this).parent().remove();
} else {
alert('더 이상 삭제할 수 없습니다.')
}
})
</script>
</head>
<body>
<div id="file-warp">
<div class="file-group">
<input type="file">
<button type="button" class="file-add">파일 추가</button>
<button type="button" class="file-del">파일 제거</button>
</div>
</div>
</body>
</html>