<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../resources/jquery/jquery.min.js"></script>
</head>
<body>
<div id="page">
<h1 id="header">목록</h1>
<h2>구입물품 목록</h2>
<ul>
<li id="one" class="hot"><em>따뜻한 </em>라떼</li>
<li id="two" class="cold">냉동만두</li>
<li id="three" class="cold">우유</li>
<li id="four" class="hot">피자</li>
</ul>
</div>
<script type="text/javascript">
// jQuery 기본 선택자
// 1. 전체 선택자
// $("*") : html 문서 내의 모든 엘리먼트를 선택한다.
$("*").css("color", "lightgreen");
// 2. 태그 선택자
// $("태그명") : html 문서에서 태그명에 해당하는 모든 엘리먼트를 선택한다.
$("h1").css("color", 'red');
$("li").css('color', "maroon");
// 3. 아이디 선택자
// $("#아이디") : html 문서에서 아이디에 해당하는 첫 번째 엘리먼트를 선택한다.
$('#one').css('background-color', 'lightgrey');
$('#three').css('background-color', 'orange');
// 4. 클래스 선택자
// $(".클래스") : html 문서에서 class 속성값이 지정된 클래스를 포함하고 있는 모든 엘리먼트를 선택한다.
$(".hot").css("border", '2px solid red').css("padding", '10px');
// 5. 다중 선택자
// $("선택자, 선택자") : html 문서에서 제시된 각각의 선택자에 해당하는 모든 엘리먼트를 선택한다.
$(".cold, h2").css('border', '2px solid blue');
// 6. 필터링하기
// $(선택자1선택자2) :선택자1로 선택된 엘리먼트 중에서 선택자2에 해당하는 것만 선택한다.
$('li.cold') // li이면서 클래스가 cold인 엘리먼트 선택 --> 2개 선택됨
$('ul.cold') // ul이면서 cold인 엘리먼트 선택 --> 선택된 엘리먼트 없음
// $('').css();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연습</title>
<script type="text/javascript" src="../resources/jquery/jquery.min.js"></script>
</head>
<body>
<h1>뉴스</h1>
<div id="breaking-news">
<h3>속보</h3>
<ul id="breaking-news-box">
<li>전세계에 좀비 바이러스 창궐</li>
<li>주요국 지도자들 지하벙커로 피신</li>
<li>전 지구적인 교통망, 통신망 회생 불가능 상태로 파괴</li>
</ul>
</div>
<div id="news-box">
<h3>주요 뉴스</h3>
<div class="box">
<h3>스포츠 뉴스</h3>
<ul id="sports-box">
<li>누구누구 무슨무슨 상 수상</li>
<li>U-20 월드컵 한국 결승 진출</li>
<li>누구누구 피파 올해의 선수상 수상</li>
</ul>
</div>
<div class="box">
<h3>연예 뉴스</h3>
<ul id="ent-box">
<li>그룹 누구누구 멤버간 불화로 해체</li>
<li>누구누구 개인 회생 신청</li>
<li>누구누구 그래미상 주요 부문 모두 수상</li>
</ul>
</div>
</div>
<div id="movie-box">
<h3>영화 뉴스</h3>
<div class="box">
<h3>개봉영화</h3>
<ul id="ranking-box">
<li>1위, 기생충</li>
<li>2위, 알라딘</li>
<li>3위, X맨, 다크 피닉스</li>
</ul>
</div>
</div>
<script type="text/javascript">
// 계층 선택자
// 1. 자손 선택자(하위 선택자)
// $("선택자1 선택자2") : 선택자1의 하위 엘리먼트 중에서 선택자2에 해당하는 엘리먼트를 선택한다.
// 속보만 빨갛게 표시하기
// id="breaking-news-box"인 ul 하위의 li를 선택한다.
$('#breaking-news-box li').css('color', 'red');
// 주요 뉴스, 스포츠 뉴스, 연예 뉴스 제목을 파랗게 표시하기
$("#news-box h3").css('color', 'blue');
// 2. 자식 선택자
// $("선택자1 > 선택자2") : 선택자1의 자식 엘리먼트 중에서 선택자2에 해당하는 엘리먼트를 선택한다.
// 주요 뉴스 제목만 밑줄 표시하기
// id="breaking-news-box"의 자식 엘리먼트 h3 찾기
$('#news-box > h3').css("text-decoration", "underline");
// 3. 동생 선택자(next 선택자)
// $("선택자1 + 선택자2") : 선택자1의 엘리먼트 바로 다음에 오는 엘리먼트가 선택자2에 해당할 때 선택한다.
// 주요 뉴스 중에서 스포츠 뉴스 관련 div를 선택해서 테두리 표시하기
// id="news-box"의 자식 엘리먼트 h3과 인접한 div 찾기
$("#news-box > h3 + div").css('border', "3px solid red");
// 4. 동생들 선택자
// $("선택자1 ~ 선택자2") : 선택자1의 동생 엘리먼트들 중에서 선택자2에 해당하는 엘리먼트를 모두 선택한다.
// $("선택자1 ~ 선택자2") : 선택자1의 동생 엘리먼트들 중에서 선택자2에 해당하는
// 스포츠 뉴스와 연예 뉴스에만 배경색 넣기
// id="news-box"인 엘리먼트의 하위 엘리먼트 중에서 div를 찾아서 배경색 넣기
$("#news-box div").css("background-color", 'yellow');
// id="news-box"인 엘리먼트의 하위 엘리먼트 중에서 클래스가 box인 엘리먼트를 찾아서 배경색 넣기
$("#news-box .box").css('background-color', 'yellow');
// id="news-box"의 자식 엘리먼트 h3의 동생들 중에서 div를 찾아서 배경색 넣기
$("#news-box > h3 ~ div").css('background-color', 'yellow');
// id="news-box"의 자식 엘리먼트 h3의 동생들 중에서 클래스가 box인 엘리먼트를 찾아서 배경색 넣기
$("#news-box > h3 ~ .div").css('background-color', 'yellow');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연습</title>
<script type="text/javascript" src="../resources/jquery/jquery.min.js"></script>
</head>
<body>
<h1>뉴스</h1>
<div id="breaking-news">
<h3>속보</h3>
<ul id="breaking-news-box">
<li>전세계에 좀비 바이러스 창궐</li>
<li>주요국 지도자들 지하벙커로 피신</li>
<li>전 지구적인 교통망, 통신망 회생 불가능 상태로 파괴</li>
</ul>
</div>
<div id="news-box">
<h3>주요 뉴스</h3>
<div class="box">
<h3>스포츠 뉴스</h3>
<ul id="sports-box">
<li>누구누구 무슨무슨 상 수상</li>
<li>U-20 월드컵 한국 결승 진출</li>
<li>누구누구 피파 올해의 선수상 수상</li>
</ul>
</div>
<div class="box">
<h3>연예 뉴스</h3>
<ul id="ent-box">
<li>어떤 그룹 멤버간 불화로 해체</li>
<li>누구누구 개인 회생 신청</li>
<li>누구누구 그래미상 주요 부문 모두 수상</li>
</ul>
</div>
</div>
<div id="movie-box">
<h3>영화 뉴스</h3>
<div class="box">
<h3>개봉영화</h3>
<ul id="ranking-box">
<li>1위, 기생충</li>
<li>2위, 알라딘</li>
<li>3위, X맨, 다크 피닉스</li>
</ul>
</div>
</div>
<div id="movie-list-box">
<table id="movie-table" style="border: 1px solid black; width: 100%">
<thead>
<tr>
<th>순위</th>
<th>제목</th>
<th>개봉일</th>
<th>관객수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>기생충</td>
<td>6.10</td>
<td>5,000,000</td>
</tr>
<tr>
<td>2</td>
<td>알라딘</td>
<td>6.5</td>
<td>1,000,000</td>
</tr>
<tr>
<td>3</td>
<td>다크 피닉스</td>
<td>5.26</td>
<td>800,000</td>
</tr>
<tr>
<td>4</td>
<td>맨인블랙</td>
<td>6.12</td>
<td>4,000</td>
</tr>
<tr>
<td>5</td>
<td>맨인블랙</td>
<td>6.12</td>
<td>4,000</td>
</tr>
<tr>
<td>6</td>
<td>맨인블랙</td>
<td>6.12</td>
<td>4,000</td>
</tr>
<tr>
<td>7</td>
<td>맨인블랙</td>
<td>6.12</td>
<td>4,000</td>
</tr>
<tr>
<td>8</td>
<td>맨인블랙</td>
<td>6.12</td>
<td>4,000</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
// 기본 필터 선택자
// 1. 첫 번째 요소 선택자
// $('선택자:first')
$("li:first").css("color", 'red');
// 2. 마지막 요소 선택자
// $('선택자:last')
$("li:last").css('color', 'red');
// 3. 홀수 번째 요소 선택자
// $('선택자:odd')
$('li:odd').css('background-color', 'yellow');
// 4. 짝수 번째 요소 선택자
// $('선택자:even')
$('li:even').css('background-color', '#ddd');
// 5. 지정된 인덱스번째 요소 선택자
// $('선택자:eq(인덱스)') *인덱스는 0부터 시작
$('#sports-box li:first').css('border', '2px solid green');
$('li:eq(2)').css("font-size", '25px');
// <li> 2위, 알라딘 </li>을 매진처리하기
$('#ranking-box li:eq(1)').css('text-decoration', 'line-through');
// 6. 지정된 인덱스번째의 이전 요소들 선택자
// $('선택자:lt(인덱스)') *인덱스는 0부터 시작
// 영화순위가 1, 2, 3위 tr를 선택해서 글자를 빨갛게 표시하기
$('#movie-table tbody tr:lt(3)').css('color', 'red');
// 7. 지정된 인덱스번째의 이후 요소들 선택자
// $('선택자:gt(인덱스)') *인덱스는 0부터 시작
// 영화 순위가 4, 5, 6, 7, 8위 tr를 선택해서 글자를 흐리게 표시하기
$('#movie-table tbody tr:gt(3)').css('color', 'grey');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연습</title>
<script type="text/javascript" src="../resources/jquery/jquery.min.js"></script>
</head>
<body>
<h1>사이트 목록</h1>
<div id="sns-box">
<h3>SNS 사이트</h3>
<ul>
<li><a href="https://www.instagram.com" title="사진공유">인스타그램</a></li>
<li><a href="https://www.facebook.com/" title="일상, 사진공유">페이스북</a></li>
<li><a href="https://twitter.com" title="소식 공유">트위터</a></li>
<li><a href="https://www.kakaostory.co.kr" title="한국의 sns">카카오스토리</a></li>
</ul>
</div>
<div id="search-site-box">
<h3>검색 사이트</h3>
<ul>
<li><a href="https://www.google.com" title="최대 검색 사이트">구글</a></li>
<li><a href="https://www.daum.net" title="국내 2위 업체">다음</a></li>
<li><a href="https://www.naver.com" title="국내 1위 업체">네이버</a></li>
<li><a href="https://www.yahoo.com" title="일본 최대 검색 사이트">야후</a></li>
</ul>
</div>
<h3>새 사이트 등록</h3>
<form action="">
<label>사이트 주소</label> <input type="text" name="siteurl"><br />
<label>사이트 이름</label> <input type="text" name="sitename" id="sitename"><br />
<label>사이트 종류</label> <input type="checkbox" name="sitetype" id="ck-1"> sns
<input type="checkbox" name="sitetype" id="ck-2"> 검색
<input type="checkbox" name="sitetype" id="ck-3"> 커뮤니티
<input type="checkbox" name="sitetype" id="ck-4"> 웹툰
<input type="checkbox" name="sitetype" id="ck-5"> 포탈<br />
<label>사이트 소개</label> <textarea rows="5" cols="60" name="desc"></textarea><br />
<button type="submit">등록</button>
</form>
<script type="text/javascript">
// 속성 선택자
// 1. 지정된 속성을 가지고 있는 요소를 선택
// #('[속성명]')
// title 속성을 가지고 있는 요소를 선택하기
$("[title]").css('background-color', 'lightgreen');
// 2. 지정된 속성/속성값이 일치하는 요소를 선택
// $("[속성명='속성값']")
// 타입 속성이 text인 것 선택
$("[type='text']").css('border', '2px dashed red');
// href 속성이 https://www.daum.net인 것 선택
$("[href='https://www.daum.net']").css('font-size', '30px');
// 타입속성이 checkbox인 것 선택
$("[type='checkbox']").prop("checked", true);
// name 속성이 sitetype인 것 중에서 첫 번째 것 선택
$("[name='sitetype']:first").prop("checked", true);
// 3. 속성이 지정된 속성값으로 시작하는 요소를 선택
// $("[속성명^='속성값']")
// 검색 사이트 중에서 국내 검색 사이트 검색
// title의 속성값이 "국내"로 시작하는 것 검색
$("#search-site-box [title^='국내']").css("border", '2px dashed maroon');
// 4. 속성이 지정된 속성값으로 끝나는 요소를 선택
// $("[속성명$='속성값']")
// 링크의 주소값이 'com'으로 끝나는 것 검색
$("a[href$='com']").css('color', 'white');
// 5. 속성이 지정된 속성값을 포함하고 있는 요소를 선택
// $("[속성명*='속성값']")
$("[title*='공유']").css('font-size', '9px');
// 6. 속성이 지정된 속성값을 분리된 단어로 포함하고 있는 요소를 선택
// $("[속성명~='속성값']")
$("[title~='공유']").css('padding-right', '200px');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연습</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery 연습</h1>
<div class="movie-box">
<h3>영화 랭킹</h3>
<table border="1" style="width:100%;">
<thead>
<tr>
<th>순위</th>
<th>제목</th>
<th class="number-field">관객수</th>
<th>개봉일</th>
</tr>
</thead>
<tbody>
<tr class="top">
<td>1</td>
<td>기생충</td>
<td class="number-field">7,373,743</td>
<td>2019.05.30</td>
</tr>
<tr>
<td>2</td>
<td>알라딘</td>
<td class="number-field">4,113,400</td>
<td>2019.05.23</td>
</tr>
<tr>
<td>3</td>
<td>맨 인 블랙</td>
<td class="number-field">3,140</td>
<td>2019.06.12</td>
</tr>
<tr>
<td>4</td>
<td>엑스맨: 다크 피닉스</td>
<td class="number-field">793,192</td>
<td>2019.06.05</td>
</tr>
<tr>
<td>5</td>
<td>이웃집 토토로</td>
<td class="number-field">110,845</td>
<td>2001.07.28</td>
</tr>
</tbody>
</table>
</div>
<div id="movie-detail-box">
<h3>영화 상세 정보</h3>
<dl>
<dt class="movie-title-field">영화제목</dt><dd>이웃집 토토로</dd>
<dt>영어제목</dt><dd>My Neighbor Totoro</dd>
<dt class="movie-title-field">평점</dt><dd>9.0</dd>
<dt class="movie-title-field">쟝르</dt><dd>애니메이션/드라마</dd>
<dt>제작국가</dt><dd>일본</dd>
<dt class="movie-title-field">개봉일</dt><dd>2001.07.28</dd>
<dt>상영시간</dt><dd>80분<span>(1시간 20분)</span></dd>
<dt>감독</dt><dd><span>미야자키 하야오</span></dd>
</dl>
</div>
<div id="movie-form-box">
<h3>신규 영화 등록</h3>
<form id="movie-form">
<p><label>영화제목</label> <input type="text" name="name" /></p>
<p><label>영어제목</label> <input type="text" name="title" /></p>
<p><label>영화평점</label> <input type="text" name="point" /></p>
<p><label>영화장르</label> <input type="checkbox" name="genre" />드라마
<input type="checkbox" name="genre" />액션
<input type="checkbox" name="genre" />애니메이션
<input type="checkbox" name="genre" />스릴러
<input type="checkbox" name="genre" />공포
<input type="checkbox" name="genre" />환타지
<input type="checkbox" name="genre" />SF
<input type="checkbox" name="genre" />코메디
<input type="checkbox" name="genre" />뮤지컬
</p>
<p><label>제작국가</label> <input type="radio" name="nation" />한국
<input type="radio" name="nation" />미국
<input type="radio" name="nation" />일본
<input type="radio" name="nation" />중국
<input type="radio" name="nation" />유럽
<input type="radio" name="nation" />기타
</p>
<p><label>개봉일자</label> <input type="date" name="opendate" /></p>
<p><label>상영시간</label> <input type="number" name="runningtime" /></p>
<p><label>감독이름</label> <input type="text" name="director" /></p>
<p><button type="submit">등록</button><button type="reset">취소</button></p>
</form>
</div>
<script type="text/javascript">
// 1. jQuery 연습의 글자색을 빨갛게 바꾸기
$("h1").css('color', 'red');
// 2. 영화랭킹, 영화상세정보, 신규영화등록을 파랗게 바꾸기
$("h3").css('color', 'blue');
// 3. 영화랭킹, 영화상세정보, 신규영화등록 각각의 블록에 테두리를 추가
$("div").css('border', '1px solid');
// 4. 영화랭킹의 순위, 제목, 관객수, 개봉일의 배경색을 회색으로 바꾸기
$(".movie-box th").css('background-color', 'grey');
// 5. 영화랭킹에서 순위가 1위인 영화의 정보를 빨갛게 바꾸기
$(".movie-box .top").css('background-color', 'red');
// 6. 영화 랭킹에서 순위가 1위인 영화제목의 글자 크기를 30px로 설정하기
$(".movie-box .top td:eq(1)").css('font-size', '30px');
// 7. 영화 랭킹 정보에서 영화 정보 전체를 가운데 정렬하기
$(".movie-box tbody").css('text-align', 'center');
// 8. 영화랭킹 정보에서 모든 관객수 컬럼을 오른쪽 정렬하기
$(".movie-box .number-field").css('text-align', 'right');
// 9. 영화상세 정보에서 제목, 평점, 장르, 개봉일의 글자색을 빨갛게 바꾸기
$("#movie-detail-box .movie-title-field").css('color', 'red');
// 10. 영화 상세 정보에서 감독 이름을 파랗게 표시하기
$("#movie-detail-box dd:last span").css('color', 'blue');
// 11. 영화 상세 정보에서 상영 시간을 시간 단위로 표시한 내용만 녹색으로 표시하기
$("#movie-detail-box dd:eq(6) span").css('color', 'green');
// 12. 신규영화등록에서 각 필드의 명칭(label)을 파랗게 표시하기
$("#movie-form label").css('color', 'blue');
// 13. 신규영화등록에서 영화제목, 영어제목, 영화평점 입력칸의 테두리만 빨갛게 표시하기
$("#movie-form [type=text]:lt(3)").css('border', 'red 1px solid');
// 14. 신규영화등록에서 개봉일자 입력칸에 '2019-06-15'를 값으로 설정하기
$("[name='opendate']").val('2019-06-15');
// 15. 신규영화등록에서 상영시간 입력칸에 "150"을 값으로 설정하기
$("[name='runningtime']").val('150');
// 16. 신규영화등록에서 감독이름 입력칸에 "홍길동"을 값으로 설정하기
$("[name='director']").val('홍길동');
// 17. 신규영화등록에서 영화장르체크박스에서 드라마가 체크되어 있게 하기
$("[name='genre']:first").prop("checked", true);
// 18. 신규영화등록에서 제작국가에 한국이 체크되어 있게 하기
$("[name='nation']:first").prop("checked", true);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연습</title>
<script type="text/javascript" src="../resources/jquery/jquery.min.js"></script>
</head>
<body>
<h1>jQuery 연습</h1>
<div id="singer-box">
<h3>좋아하는 가수</h3>
<ul>
<li>마왕</li>
<li>악동뮤지션</li>
<li>신승훈</li>
<li>에픽하이</li>
</ul>
</div>
<div class="fruit-box">
<h3>좋아하는 과일</h3>
<ul>
<li>딸기</li>
<li>방울토마토</li>
<li>참외</li>
<li>수박</li>
<li>매론</li>
</ul>
</div>
<div id="food-box">
<h3>좋아하는 음식</h3>
<ul>
<li>초밥</li>
<li>닭가슴살</li>
<li>미역국</li>
<li>목살</li>
</ul>
</div>
<div id="snack-box">
<h3>좋아하는 과자</h3>
<ul>
<li>시장에서 파는 오감자같이 생긴 거</li>
<li>고구마 말랭이 같이 생긴 거</li>
<li>동부</li>
<li>몽쉘</li>
<li>참깨스틱</li>
<li>빠다코코넛</li>
<li>아이비</li>
<li>맛동산</li>
<li>김과자</li>
</ul>
</div>
<script type="text/javascript">
// 자식요소 선택자
// 1. 부모 요소의 첫 번째 자식을 선택한다.
// $("선택자:first-child") : 선택자로 선택된 엘리먼트 중에서 부모의 첫 번째 자식인 것만 선택한다.
// 2. 부모 요소의 마지막 번째 자식을 선택한다.
// $("선택자:last-child") : 선택자로 선택된 엘리먼트 중에서 부모의 마지막 번째 자식인 것만 선택한다.
// 3. 부모 요소의 n 번째 자식을 선택한다.
// $("선택자:nth-child(n)") : 선택자로 선택된 엘리먼트 중에서 부모의 n번째 자식인 것만 선택한다.
// * n은 1부터 시작한다.
// 모든 li 중에서 첫 번째 것 찾기
$("li:first").css('background-color', 'yellow');
// 모든 li 중에서 마지막 번째 것 찾기
$("li:last").css('background-color', 'lightgreen');
// 모든 li 중에서 2번째 것 찾기
$("li:eq(1)").css('background-color', 'pink');
// 모든 li 중에서 부모의 첫 번째 자식 찾기
$("li:first-child").css('font-size', '30px');
// 모든 li 중에서 부모의 마지막 번째 자식인 것 찾기
$("li:last-child").css('font-size', '8px');
// 모든 li 중에서 부모의 2번째 자식인 것 찾기
$("li:nth-child(2)").css('font-size', '50px');
// 1번째, 4번째, 7번째 과자 선택
$("#snack-box li:nth-child(3n+1)").css('color', 'red');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연습</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery 연습</h1>
<h3>신규 영화 등록</h3>
<form id="movie-form">
<p><label>영화제목</label> <input type="text" name="name" /></p>
<p><label>영어제목</label> <input type="text" name="title" /></p>
<p><label>트레일러</label> <input type="file" name="video" /></p>
<p><label>영화평점</label> <input type="text" name="point" /></p>
<p><label>영화등급</label><select name="grade">
<option value="0">전체관람가</option>
<option value="12">12세 이상 관람가</option>
<option value="15" selected="selected">15세 이상 관람가</option>
<option value="19">19세 이상 관람가</option>
</select></p>
<p><label>영화장르</label> <input type="checkbox" name="genre" />드라마
<input type="checkbox" name="genre" checked="checked"/>액션
<input type="checkbox" name="genre" />애니메이션
<input type="checkbox" name="genre" checked="checked"/>스릴러
<input type="checkbox" name="genre" checked="checked"/>공포
<input type="checkbox" name="genre" />환타지
<input type="checkbox" name="genre" />SF
<input type="checkbox" name="genre" />코메디
<input type="checkbox" name="genre" />뮤지컬
</p>
<p><label>제작국가</label> <input type="radio" name="nation" />한국
<input type="radio" name="nation" checked="checked"/>미국
<input type="radio" name="nation" />일본
<input type="radio" name="nation" />중국
<input type="radio" name="nation" />유럽
<input type="radio" name="nation" />기타
</p>
<p><label>개봉일자</label> <input type="date" name="opendate" /></p>
<p><label>상영시간</label> <input type="number" name="runningtime" /></p>
<p><label>감독이름</label> <input type="text" name="director" /></p>
<p><label>영화소개</label> <textarea rows="5" name="summary"></textarea></p>
<p><button type="submit">등록</button><button type="reset">취소</button></p>
</form>
<script type="text/javascript">
// 폼 요소 필터 선택자
// <form> 태그 내의 input, checkbox, radio, select, textarea 등을 선택할 때 사용한다.
// 1. $(":input") : 모든 입력요소를 선택한다.
// * input, checkbox, radio, select, textarea를 선택
// 2. $(":text"), $(':password'), $(":radio"), $(":checkbox"), $(":file"), $(":submit"), $(":reset")
// : type을 기준으로 대응되는 폼요소를 선택한다.
// 트레일러 입력필드를 선택해서 비활성화시키기
$(":file").prop('disbled', true); // $("[type=file]")
// 텍스트입력필드 비활성화시키기
$(":text").prop('disabled', true); // $("[type=text]")
// 3. $(":selected") : <select>에서 선탠된 옵션을 찾는다.
// 현재 선택된 영화등급을 선택해서 선택된 값 조회하기
var grade = $(":selected").text();
alert(grade);
// 4. $(":checked") : radio, checkbox에서 체크된 것들을 찾는다.
// 현재 체크된 영화장르를 선택해서 비활성화 시키기
$(":checkbox:checked").prop('disabled', true);
// 5. $(":enabled"), $(":disabled") : 폼 요소에서 활성화, 비활성화된 것을 찾는다.
// 비활성화된 요소를 전부 찾아서 활성화시키기
$(":disabled").prop('disabled', false);
</script>
</body>
</html>