함수 복습 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
<script type="text/javascript">
/*
실습1. 아래의 함수 호출부가 있다. 호출부를 보고 선언부를 완성시켜라.
선언부에서 인수값 전체를 합산시키는 코드 작성.
var arr = [10,20,30];
myFunction(20,30,arr);
*/
var arr = [10,20,30];
//익명함수
var myFunction = function(n1, n2, arr){
var re = 0;
for(var i = 0; i < arr.length ; i++){
re += arr[i];
}
re += n1+n2;
return re;
}
//기본형
function myFunction(n1, n2, arr){
var re = 0;
for(var i = 0; i < arr.length ; i++){
re += arr[i];
}
re += n1+n2;
return re;
}
//호출
myFunction(20,30,arr);
/*
실습2. 아래의 함수 호출부가 있다. 호출부를 보고 선언부를 완성시켜라.
(함수 호출시 리턴 없이 콘솔로 매개변수 출력)
myFunction2('한국스마트정보교육원');
*/
//익명함수
var myFunction2 = function (str) {
console.log(str);
}
//기본형
function myFunction2 (str) {
console.log(str);
}
//호출
myFunction2('한국스마트정보교육원');
/*
실습3. 아래의 함수 호출부가 있다. 호출부에 1개의 넘버형 인수가 들어가고 선언부에는 매개변수값으로 구구단을 출력하는 코드가 들어가있다.
선언부를 완성시켜라.(함수 호출시 리턴없이 콘솔로 결과값 출력)
myFunction3(2);
*/
var myFunction3 = function(n) {
for(var i = 1; i<=9 ; i++){
console.log (i * n);
}
}
function myFunction3(n) {
for(var i =1; i<=9 ; i++){
console.log(i*n);
}
}
myFunction3(2);
</script>
</head>
<body>
</body>
</html>
Jquery 선택자
<!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">
/*
DOM 객체를 먼저 읽은 후 readt메서드의 함수 실행
1.
$(document).ready(function(){
})
2.
$(function(){
})
*/
//제이쿼리가 DOM객체 읽기를 완료한 후에 실행할 준비가 되었다. (동적으로 생성한 html은 읽지 못한다.)
$(function(){
// 선택자 - $('선택자') -> 제이쿼리 함수를 실행하면서 인수값으로 css선택자 삽입
/*********************************************************************************
1. 직접선택자
제이쿼리 함수에 선택자를 인수값으로 삽입하여 실행
* $('#아이디') - 아이디의 객체를 검색하여 객체 반환 (단 하나)
* $('.클래스') - 인수값과 일치하는 클래스를 모두 선택하여 객체 반환
* $('[속성명]') - 인수값과 일치하는 속성명을 모두 선택하여 객체 반환
* $('[속성명=속성값]') - 인수값과 일치하는 속성명=속성값 을 모두 선택하여 객체 반환
$('태그명') - 인수값과 일치하는 태그를 모두 선택하여 반환
$('선택자1,..,선택자n') - 인수값 전체에 해당되는 객체를 선택하여 객체 반환
$('선택자1 선택자2') - 첫번째 선택자의 하위인 두번째 선택자를 선택하여 객체 반환
$('태그명선택자') - 태그명과 일치하면서 선택자와 일치하는 객체를 반환
ex) $('h1.title') h1태그이면서 title이라는 클래스를 가진 객체
$('h1#title') h1태그이면서 title이라는 아이디를 가진 객체
$('h1[class]') h1태그이면서 class라는 속성을 가진 객체
2. 메서드 활용
제이쿼리 선택자로 하여 객체가 반환될 경우 각종 메서드를 사용할 수 있다.
3. 인접관계 선택자
직접선택자로 선택 후 상세하게 객체를 검색할 수 있다.
$('선택자').parent(); - 선택된 객체의 부모 객체를 검색하여 객체 반환
ex) $('article').parent();
$('선택자').parents(); - 선택된 객체의 부모 객체 전체를 검색하여 객체 반환
인수값이 있을 경우 선택된 객체의 인수값과 일치하는 부모 객체만 반환
ex) $('article').parents();
$('article').parents('body');
$('선택자').children(); - 선택된 객체의 자식요소를 검색하여 객체 반환
ex) $('article').children();
$('선택자').find('자식요소 선택자'); - 선택된 객체의 자식요소 중 find 메서드의 인수값과 일치하는 객체를 반환
$('선택자').prev(); - 선택된 객체의 동일선상 이전 객체를 선택하여 객체 반환
ex) $('body').prev();
$('선택자').next(); - 선택된 객체의 동일선상 다음 객체를 선택하여 객체 반환
ex) $('head').next();
4. 속성 상태에 따른 선택자
선택된 객체의 상태를 표기하여 상태에 일치하는 객체를 선택하여 반환
('checked','selected','hidden')
$('선택자:checked')
$('선택자:selected')
$('선택자:hidden')
5. 속성 상태를 확인하는 메서드
is(':속성 상태') - 속성 상태를 확인하는 메서드 true 혹은 false 반환
prop('속성상태',true or false) - 속성상태를 확인하거나 적용하는 메서드
*********************************************************************************/
$('#btn').click(function(){
$('.check:checked').each(function(){
console.log($(this).val());
//val() == value 속성을 가진 폼태그의 value 값을 가지고 오거나 삽입
//val('값') == 값 삽입, val() == 값 가지고 오기
})
});
$('#btn1').click(function(){
$('.check').prop('checked', true);
});
$('#btn2').click(function(){
$('.check').prop('checked', false);
});
$('#btn3').click(function(){
$('.check').each(function(){
if($(this).prop('checked')){
console.log($(this).val());
}
})
})
});
</script>
</head>
<body>
<input type="checkbox" class="check" value=1 />1
<input type="checkbox" class="check" value=2 />2
<input type="checkbox" class="check" value=3 />3
<button type="button" id="btn">확인</button>
<button type="button" id="btn3">확인2</button>
<button type="button" id="btn1">전체 체크</button>
<button type="button" id="btn2">체크 해제</button>
</body>
</html>JQuery 탐색선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 탐색 선택자, 배열 관련</title>
<script type="text/javascript">
/*
<탐색선택자>
- 선택자로 이미 선택된 객체를 한번 더 검색하여 객체를 반환
$('선택자').first(); - 선택된 객체 중 첫번째 객체 요소 반환
$('선택자').last(); - 선택된 객체 중 마지막 요소 반환
$('선택자').eq(index); - 선택된 객체중 인수값과 일치하는 인덱스 요소 선택 반환
$('선택자').filter('선택자')- 선택된 객체중 filter 메서드의 인수값인 선택자와 일치하는 객체를 선택하여 반환
ex) $('article').filter('.post-7') >> article 객체 중에서 .post-7인 article 객체 반환
(vs. 인접관계 선택자 혼동하지 않기.)
<배열 관련 메서드>
- 다중으로 선택된 객체를 반복문 형태와 비슷하게 풀 수 있다.
$('선택자').each(); - 다중으로 선택된 객체를 하나씩 풀어 함수를 실행
ex) $('선택자').each(function(){});
$.each($('선택자'), function(){});
$('선택자').index('객체') -다중으로 선택된 객체 중 index메서드의 인수객체와 동일한 객체를 검색하여 인덱스 반환.
*/
</script>
</head>
<body>
</body>
</html>
Jquery 선택자 실습1
(https://api.jquery.com/에서 test)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제이쿼리 선택자, 인접관계선택자 실습</title>
<script type="text/javascript">
/*
실습4. 제이쿼리 사이트의 api 메뉴에 있는 article 태그 클릭시 클릭한 article 내의 a태그의 모든객체를 제거하시오.
$('article').click(function(){
//최종적으로 선택된 객체에 remove() 메서드 활용시 선택된 객체 제거
//$(this) 는 선택된 article의 태그임으로 인접관계 선택자를 활용하여 자식 및 부모객체를 선택할 수 있음
})
*/
$('article').click(function(){
$(this).find('a').remove();
})
/*
실습5. 제이쿼리 사이트의 api 메뉴에 있는 .entry-summary 클릭 시
.entry-summary의 상위인 article 객체가 제거되도록 하시오.
*/
$('.entry-summary').click(function(){
$(this).parents('article').remove();
})
/*
실습6. 제이쿼리 사이트의 api 메뉴에 있는 .entry-summary 클릭 시
article > .entry-title > a태그 텍스트를 '한국스마트정보교육원'으로 변경하시오.
*/
$('.entry-summary').click(function(){
$(this).parents('article').find('.entry-title').find('a').text('한국스마트정보교육원');
})
</script>
</head>
<body>
</body>
</html>
Jquery 선택자 실습2
<!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">
$(function(){
$('.del-input-group').click(function(){
$(this).parents('.input-group').remove(); // == $(this).parent().remove();
})
});
</script>
</head>
<body>
<!--
실습6.
.del-input-group 클릭시 .input-group이 제거되도록 하시오.
-->
<div class = "input-wrap">
<div class = "input-group">
<input type="text" name="memberName">
<button type="button" class = "del-input-group">제거</button>
</div>
<div class = "input-group">
<input type="text" name="memberName">
<button type="button" class = "del-input-group">제거</button>
</div>
<div class = "input-group">
<input type="text" name="memberName">
<button type="button" class = "del-input-group">제거</button>
</div>
<div class = "input-group">
<input type="text" name="memberName">
<button type="button" class = "del-input-group">제거</button>
</div>
<div class = "input-group">
<input type="text" name="memberName">
<button type="button" class = "del-input-group">제거</button>
</div>
</div>
</body>
</html>each, 속성 상태 확인 메서드 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each, 속성 상태 확인 메서드 실습</title>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
실습8. #btn 클릭시 .check의 객체가 체크가 되었다면 체크해제, 체크가 해제되었다면 체크를 하는 코드를 작성하시오.
*/
$(function(){
$('#btn').click(function(){
$('.check').each(function(){
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
})
});
</script>
</head>
<body>
<input type="checkbox" class="check" value=1 /> 1
<input type="checkbox" class="check" value=2 /> 2
<input type="checkbox" class="check" value=3 /> 3
<button type="button" id="btn">확인</button>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JQuery] 객체 편집 메서드 실습 (0) | 2020.03.31 |
|---|---|
| [JQuery] 속성 조작 메서드 / 객체 편집 메서드 / 동적바인딩 (0) | 2020.03.30 |
| [JQuery] 라이브러리 연동 / callback 함수 (0) | 2020.03.23 |
| [JavaScript] 문자열 객체 / 브라우저 객체 모델 (0) | 2020.03.23 |
