ㅁ 뭐가 자바스크립트 방식이고 뭐가 jQuery 방식인지 구분할 수 있어야 한다.
회사에서는 섞어서 쓴다.
ㅁ 연습문제 (총 12문제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>연습</h2>
<div id="practice">
<h4>h4요소</h4>
<h4 class="cls">h4요소</h4>
<ul>
<li>li요소1</li>
<li class="cls">li요소2</li>
<li class="cls">li요소3</li>
<li>li요소4</li>
<li>li요소5</li>
</ul>
<input type="text" placeholder="이름"> <br>
<input type="text" placeholder="아이디"> <br>
<input type="text" placeholder="비밀번호"> <br>
<input type="checkbox">
<input type="checkbox"> <br>
<input type="submit" onmouseenter="fnMouseEnter();" onmouseout="fnMouseOut();" onclick="fnClick();">
<div>div요소
<span class="inner-box">box 안 span요소</span>
</div>
<span>box 밖 span요소</span>
</div>
<script>
$(document).ready( function(){
// 하단의 내용들은 모두 #practice 내의 하위 요소들이 선택될 수 있도록 하시오.
// 1. h4요소들 : 'jQuery수업'으로 문구변경, 배경색 orange으로 변경
// 2. li요소들 : '안녕하세요1~5'로 문구변경, 글자색 red, 밑줄그어 표현
// 3. 클래스가 cls인 요소 : 글자 크기를 32px, 글자 굵게 표현
// 4. 클래스가 cls인 h4요소 : 테두리 2px dotted red로 변경
// 5. text type의 input요소 : 배경색을 pink색으로 변경
// 6. 이름 입력란 input요소 : 홍길동이 기재되도록, 글자색 blue로 변경
// 6. 비밀번호 입력란 input요소 : type을 password으로 변경
// 7. chekcbox 중 두번째 요소 : checked 되도록 설정, 가로길이 50px, 세로길이 50px로 수정
// 8. submit 버튼 : 배경색을 파란색으로, 테두리 없애기, 문구를 취소 로 수정
// 9. 클래스가 inner-box인 요소의 부모 div : 테두리 2px dashed green으로
// 10. 9번요소 뒤에 있는 span요소(box 밖 span요소) : 글자 기울여서 표현
} )
// submit 타입의 버튼 보면 각각 이벤트 발생시 호출하는 함수 써놨음
// 해당 함수를 정의해서 아래의 문제를 푸시오.
// 11. submit 버튼 : 마우스올렸을때(mouseenter) 글자색 흰색으로, 마우스나가면(mouseout) 글자색 초기화
// 12. submit 버튼 : 클릭시 alert로 아이디 입력란에 쓰여진 값 출력
</script>
</body>
</html>
ㅁ 풀이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>연습</h2>
<div id="practice">
<h4>h4요소</h4>
<h4 class="cls">h4요소</h4>
<ul>
<li>li요소1</li>
<li class="cls">li요소2</li>
<li class="cls">li요소3</li>
<li>li요소4</li>
<li>li요소5</li>
</ul>
<input type="text" placeholder="이름"> <br>
<input type="text" placeholder="아이디"> <br>
<input type="text" placeholder="비밀번호"> <br>
<input type="checkbox">
<input type="checkbox"> <br>
<input type="submit" onmouseenter="fnMouseEnter();" onmouseout="fnMouseOut();" onclick="fnClick();">
<div>div요소
<span class="inner-box">box 안 span요소</span>
</div>
<span>box 밖 span요소</span>
</div>
<script>
$(document).ready( function(){
// 하단의 내용들은 모두 #practice 내의 하위 요소들이 선택될 수 있도록 하시오.
// 1. h4요소들 : 'jQuery수업'으로 문구변경, 배경색 orange으로 변경
$('#practice h4').html('jQuery수업').css('backgroundColor', 'orange');
// 2. li요소들 : '안녕하세요1~5'로 문구변경, 글자색 red, 밑줄그어 표현
$('#practice li').html(function(index, html) {
return '안녕하세요' + (index+1);
})
$('#practice li').css( { textDecoration : 'underline', color : 'red' });
// 3. 클래스가 cls인 요소 : 글자 크기를 32px, 글자 굵게 표현
$('#practice .cls').css( { fontSize : '32px', fontWeight: 900 });
// 4. 클래스가 cls인 h4요소 : 테두리 2px dotted red로 변경
$('#practice .cls').filter('h4').css( 'border', '2px dotted red');
// 5. text type의 input요소 : 배경색을 pink색으로 변경
$('#practice :text').css('backgroundColor', 'pink');
id가 practice인 요소 내의 input 요소들 중에서 type이 text인 요소들 선택.
// 6. 이름 입력란 input요소 : 홍길동이 기재되도록, 글자색 blue로 변경
$('#practice :text').first().val('홍길동').css('color', 'blue');
// 6. 비밀번호 입력란 input요소 : type을 password으로 변경
$('#practice :text').last().attr('type', 'password');
// 7. checkbox 중 두번째 요소 : checked 되도록 설정, 가로길이 50px, 세로길이 50px로 수정
$('#practice :checkbox').eq(1).prop('checked', true).css( {width : 50, height : 50});
// true 대신 'checked' 줘도 정상작동함.
// css 메소드의 인자값으로 css 속성을 숫자 50이 아닌 문자열 '50px'을 줘도 정상작동함.
// .prop('width', '350px')은 이미지가 사라졌었다. attribute는 문자열, property는 숫자로 담겨있다.
// .css() 메서드는 CSS 속성을 설정하며, 숫자와 문자열 모두 유효합니다.
// .prop() 메서드는 DOM 요소의 속성을 설정하며, 보통 숫자를 사용
// .attr() 메서드는 HTML 요소의 속성을 설정하며, 문자열을 사용합니다.
// 8. submit 버튼 : 배경색을 파란색으로, 테두리 없애기, 문구를 취소 로 수정
$('#practice :submit').val('취소').css( { backgroundColor : 'blue', border : 'none' });
// submit 버튼의 테두리를 없애려면 CSS의 border 속성을 none으로 설정하면 된다.
// 9. 클래스가 inner-box인 요소의 부모 div : 테두리 2px dashed green으로
$('#practice .inner-box').parent('div').css('border', '2px dashed green');
// 10. 9번요소 뒤에 있는 span요소(box 밖 span요소) : 글자 기울여서 표현
$('#practice .inner-box').parent('div').next().css('font-style', 'italic'); // fontStyle도 됨.
} )
// submit 타입의 버튼 보면 각각 이벤트 발생시 호출하는 함수 써놨음
// 해당 함수를 정의해서 아래의 문제를 푸시오.
// 11. submit 버튼 : 마우스올렸을때(mouseenter) 글자색 흰색으로, 마우스나가면(mouseout) 글자색 초기화
function fnMouseEnter() {
$(':submit').css('color', 'white');
}
function fnMouseOut() {
$(':submit').css('color', 'black');
}
// 12. submit 버튼 : 클릭시 alert로 아이디 입력란에 쓰여진 값 출력
function fnClick() {
alert( $(':text').eq(1).val() );
}
</script>
</body>
</html>
- #practice 의 하위 요소 h4를 선택.
1) 선택자 사용 $('#practice h4')
2) 탐색 메소드 사용 $('#practice').find('h4')도 가능.
- html 메소드에 callback 함수 줄 때 매개변수 이름 index 대신 a, html 대신 b 줘도 상관없다.
그리고 익명함수로 작성되는 부분은 다 화살표 함수로도 가능하다.
// 2. li요소들 : '안녕하세요1~5'로 문구변경, 글자색 red, 밑줄그어 표현
$('#practice li').html(function(index, html) {
return '안녕하세요' + (index+1);
}).css( {
textDecoration : 'underline',
color : 'red'
});
메소드 체이닝 이렇게 연달아서 작성할 수 있다.
- 태그 선택자와 클래스 선택자를 같이 기술할 수 있다.
"클래스가 cls인 h4 요소"를 선택할 때
$('#practice .cls').filter('h4') 말고 $('#practice h4.cls')로 작성 가능하다.
이렇게 선택자를 제시하면 h4 요소들 중에 클래스가 cls인 요소들이 선택된다.
- 6번.
attr 대신 prop 써도 동일하게 작동한다.
attribute도 property도 속성명이 type으로 동일하게 가지고 있다.
- 8번.
type이 submit인 input 요소는 value 속성을 생략하면 기본값이 '제출'이다.
이 버튼의 value 속성값은 '제출'로 되어있는데 문구를 수정하고 싶으면
html 메소드가 아니라 val 메소드를 써야 한다.
- 9번.
$('#practice .inner-box')이 아닌 $('.inner-box')만 써도 동일하게 작동한다.
다만 이러면 id가 practice 내에 있는 클래스 이름이 inner-box인 요소만 선택되는 것이 아니다.
만약 클래스 이름이 inner-box인 요소가 id가 practice인 div 외에 더 있으면 그것들도 선택된다.
parent 메소드는 부모요소 (하나) 선택.
parents 메소드는 모든 부모, 조상 요소 전부 선택.
$('#practice .inner-box').parent('div').css('border', '2px dashed green');
$('#practice .inner-box').parent().css('border', '2px dashed green');
이렇게 parent 메소드 인자값으로 선택자를 안 줘도 div가 선택된다.
- parent() 메서드는 선택한 요소의 직계 부모 요소를 선택합니다.
- parent(): 부모 요소를 선택합니다. 여기서 parent('div')는 부모가 div일 때만 선택합니다. 이 경우에는 항상 부모가 div이므로 필터링 없이도 정상 작동합니다.
- parent(): 선택된 요소의 부모가 어떤 요소든 상관없이 부모를 반환합니다.
- 11번.
css로 직접 줘도 되지만 이렇게도 가능.
<style>
.white{color:white;}
</style>
function fnMouseEnter() {
$('#paractice :submit').addClass('white');
}
function fnMouseOut() {
$('#paractice :submit').removeClass('white');
}
- 12번.
function fnClick() {
alert( $(':text').val() );
}
이러면 alert로 '홍길동'이 뜬다.
선택된 요소가 여러개다.
선택된 요소가 여러개인 경우 val 메소드의 경우 첫번째 요소의 value 값을 반환함.
==============================================================================
ㅁ 자바스크립트 data 속성
특정 요소에 어떤 data를 저장시켜두고자 할 때 쓰는 속성
특정 요소에 data-*해서 속성명을 쓰고 원하는 데이터를 숨겨둘 수 있었다.
- attribute로 대소문자를 섞어 써도 property로는 소문자로 반영됨.
- dash로 여러 단어를 쓰면 property로는 camel case로 기록됨.
- property로 접근해서 데이터를 꺼내오고자 한다면 해당 객체의 dataset 속성에 접근해서 속성명을 제시해서 조회하거나 수정할 수 있었다.
ㅁ jQuery로도 data 속성값을 가져오거나 부여할 수 있다.
ㅁ < data-* 속성 관련 메소드 >
(1) 요소.data('data속성') : 해당 data 속성값 반환
(2) 요소.data('data속성', 'data속성값') : 해당 data 속성 추가 혹은 수정(이미 있는 경우)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>data-* 속성</h2>
<div id="user" data-name="Go Gildong" data-home-address="Seoul" data-zipCode="12345">고길동</div>
<script>
$(document).ready(function() {
// data 속성 가져오기
console.log( $('#user').data('name') );
console.log( $('#user').data('homeAddress'), $('#user').data('home-address') );
console.log( $('#user').data('zipcode'), $('#user').data('zipCode') );
})
</script>
</body>
</html>
- jQuery에서는 dash 구분자를 이용해서 attribute를 작성한 경우, camel case로도 되고 dash 구분자 그대로도 data 속성에 접근 가능하다.
- jQuery에서 attribute를 대소문자를 섞어서 작성한 경우에는 무조건 소문자로만 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>data-* 속성</h2>
<div id="user" data-name="Go Gildong" data-home-address="Seoul" data-zipCode="12345">고길동</div>
<script>
$(document).ready(function() {
// data 속성 추가 및 수정하기
$('#user').data('homeAddress', 'Busan');
$('#user').data('mobile', '010-1111-2222');
console.log( $('#user').data('homeAddress') );
console.log( $('#user').data('mobile') );
})
</script>
</body>
</html>
※ 참고 - 자바스크립트로 data 속성 접근 및 조작하기
