728x90
불금~~ 😁😸
JavaScript
문서 객체(document object) : component를 JS 객체화
WebStorm에 jQuery Library 추가
jQuery 문법
$로 시작
1. Universal Selector(전체 선택자) : HTML 안에 있는 모든 Element를 선택, 기호는 * 이용
2. Tag Selector : 태그명을 이용하여 선택
3. ID Selector : ID Attribute를 이용하여 선택, 중복 불가, 기호는 # 이용
4. Class Selector : Class Attribute를 이용하여 선택, 중복 가능, 기호는 . 이용
5. 부모, 자식, 후손, 형제 관계 : 기호 >는 자식 선택, 공백(space)은 후손 선택
6. 동위 선택자 : 형제 선택자, 기호 +는 바로 다음 형제를 선택, ~ 다음 형제들 모두 선택
7. Attribute Selector : 속성을 이용하여 선택, 기호는 [] 이용
function my_func() {
$('*').css('color','red'); // 1. Universal Selector, *
alert($('div').text()); // 2. Tag Selector. text() 태그 사이의 문자열을 조회
$('div').text('호호호'); // text() 태그 사이의 문자열을 인자로 변경
$('li').css('color','blue');
$('#seoul').remove(); // 3. ID Selector, #. remove() 삭제
$('.myClass').css('color','yellow'); // 4. Class Selector, .
$('ul > li').css('color','violet') // 5. 자식 선택자, >
$('ul li').css('color','violet') // 5. 후손 선택자, 공백(space)
$('#seoul + li').css('color', 'red') // 6. 동위(형제) 선택자, + 바로 다음 형제
$('#seoul ~ li').css('color', 'red') // 6. 동위(형제) 선택자, ~ 바로 다음 형제 모두
$('[value]').remove() // 7. Attribute Selector, []
$('[value="클릭클릭!"]').remove() // 속성을 지정
}text() : 메서드 안에 인자가 없으면 태그 사이의 문자열을 조회, 있으면 문자열을 변경
attr() : 메서드 안에 인자가 없으면 속성의 값을 조회, 있으면 속성의 값을 변경
val() : 메서드 안에 인자가 없으면 사용자가 입력한 값을 조회, 있으면 입력한 값을 변경
function my_func() {
console.log($('ul > li.Mylist').text()) // 자식 + Class Selector, 참외
console.log($('ul > *[class]').text()) // 자식 + Attribute Selector, 참외
console.log($('[type=text]').attr('size')) // type이 text인 element의 size(속성) 값을 조회
console.log($('[type=text]').attr('size', 30)) // 속성의 값을 변경
alert($('[type=text]').val()) // 사용자가 입력한 값을 조회
$('[type=text]').val('변경해요!!') // 메서드 안에 인자가 있으면 값을 변경
}특수 선택자 : first/last/eq()
function my_func() {
console.log($('ol > li:first').text()) // 특수 선택자. ol의 첫번째 자식
console.log($('ol > li:last').text()) // ol의 마지막 자식
console.log($('ol > li:first + li').text()) // 자식 + 특수 + 형제 Selector
console.log($('ol > li:eq(0)').text()) // eq(인덱스) 0부터 시작
}<select><option> ~ </option></select> : 선택 박스 옵션
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jQuery03.js"></script>
</head>
<body>
<select onchange="my_func()"> <!--선택 박스. 값이 바뀔 때마다 함수 실행-->
<option>아이유</option>
<option>김연아</option>
<option>신사임당</option>
<option>홍길동</option>
</select>
<div>여기에 선택한 사람이 출력되요!!</div>
<!--<input type="button" value="클릭" onclick="my_func()">-->
</body>
</html>특수 선택자 : selected
function my_func() {
console.log('변경되었어요!')
$('select > option:selected').text() // 특수 선택자. 선택된 옵션 값을 선택
$('div').text($('select > option:selected').text()) // 선택된 옵션 값을 div tag 사이의 문자열로 변경
}<input type="checkbox"> : 체크박스 텍스트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jQuery04.js"></script>
</head>
<input type="checkbox"><span>아이유</span><br>
<input type="checkbox"><span>김연아</span><br>
<input type="checkbox"><span>홍길동</span><br>
<input type="checkbox"><span>신사임당</span><br>
<input type="button" value="클릭클릭!" onclick="my_func()">
</body>
</html>특수 선택자 : checked
function my_func() {
// 텍스트는 선택된 체크박스와 동등한 위치에 있는 속성이기 때문에, 텍스트를 span tag로 감싸주고 +로 span 출력
console.log($('[type=checkbox]:checked + span').text())
// 하지만 선택한 체크박스 하나씩이 아니라 모두 출력됨
// $('selector').each() // 선택된 element가 여러 개면 그 각각에 대해서 each 안에 들어있는 람다함수를 호출함
// idx는 0부터 1씩 증가하는 index 값
// item은 현재 선택된 Element의 Document Object(jQuery 객체가 아님)
$('[type=checkbox]:checked + span').each(
function(idx, item) {
console.log($(item).text())
})
}CSS 파일 연동
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jQuery05.js"></script>
<link rel="stylesheet" href="css/jQuery05.css"> <!--css()를 여러번 사용하지 않고 css 파일 연동시켜 style 적용-->
</head>
<body>
<ul>
<li>아이유</li>
<li>김연아</li>
<li>홍길동</li>
<li>신사임당</li>
</ul>
<input type="button" value="클릭!" onclick="my_func()">
</body>
</html>JavaScript 내에서 css() 메서드는 각 줄마다 작동해야 하기 때문에,
주로 addClass()를 사용하여 css 파일로 스타일 한꺼번에 적용함
removeClass()는 class 속성을 삭제함
function my_func() {
// $('ul>li:eq(1)').css('color','red')
// $('ul>li:eq(1)').css('background-color','yellow')
$('ul > li:eq(1)').addClass('myStyle')
// $('ul > li:ep(1)').removeClass('myStyle')
}CSS 파일
.myStyle {
color: red;
background-color: yellow;
}
| 1. 1/17 월 | 2. 1/18 화 | 3. 1/19 수 | 4. 1/20 목 | 5. 1/21 금 |
| 취업 특강 | 파이썬 환경 설정 (파이참, 아나콘다, 주피터 노트북) |
파이썬 데이터 타입 (list, tuple) |
파이썬 데이터 타입 (range, string, dictionary, set, bool) |
파이썬 사용자 정의 함수, 객체지향, 사용자 정의 클래스 |
| 6. 1/24 월 | 7. 1/25 화 | 8. 1/26 수 | 9. 1/27 목 | 10. 1/28 금 |
| 파이썬 사용자 정의 클래스, 사용자 정의 모듈 |
DB(MySQL) DBMS, MySQL 환경 설정, DB/테이블 생성, DB 입력·활용, Index |
DB(MySQL) View, 백업과 복원, DB 모델링, 관계(PK, FK), DML(CRUD), 데이터 타입 |
DB(MySQL) DML(CRUD), WHERE 조건, 패턴 매칭, SubQuery, 정렬, 그룹핑, 집계 함수, 트랜잭션(ACID 특성) |
DB(MySQL) JOIN, UNION, NOT IN, WEB |
| 11. 2/3 목 | 12. 2/4 금 | 13. 2/7 월 | 14. 2/8 화 | 15. 2/9 수 |
| WEB WebStorm 환경 설정, HTML, CSS, JavaScript, jQuery CDN |
WEB jQuery 문법, Selector, Method |
WEB jQuery Method, Bootstrap, AJAX |
GitHub 특강 | GitHub 특강 |
* DOM 개념을 이해하자!
728x90
