들어가기에 앞서
라이브러리 의미 : 자주 사용되는 함수들의 모임(묶음)
jquery 배경 :
1) 웹브라우저(익스플러워, 크롬, 사파리 등) 간에 js 문법잘 동작을 안했음
(크로스 브라우저 문제 => jquery 등장)현재는 바닐라 js 가능
2) 바닐라 js 보다 코딩이 짧고 사용이 쉬움
단점 :
용량이 크고 , 성능이 떨어짐
jquery : 함수를 이용해서 DOM 조작
$(function() {jquery실행문} : html 위쪽에 넣어도 실행된다. => html 태그 보다 뒤 늦게 실행을 시켜주는 구문
- jquery cdn : 인터넷 주소로 자동 다운로드 입력 필수
<script src="
http://code.jquery.com/jquery-3.1.0.js
"></script>
- 사용법 :
$(function() {
$(css선택자).함수("속성명", "값");
});
jq selecter
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jquery 라이브러리 실행해보기</title>
</head>
<body>
<h1 id="title">제목</h1>
<!-- jquery cdn : 인터넷 주소로 자동 다운로드 -->
<script src="./js/01_jq_selecter.js"></script>
</body>
</html>
js
// TODO : jquery 라이브러리 맛보기
// TODO 라이브러리 의미 : 자주 사용되는 함수들의 모임(묶음)
// TODO jquery 배경 :
// 1) 웹브라우저(익스플러워, 크롬, 사파리 등) 간에 js 문법
// 잘 동작을 안했음(크로스 브라우저 문제 => jquery 등장)
// 현재는 바닐라 js 가능
// 2) 바닐라 js 보다 코딩이 짧고 사용이 쉬움
// 단점 :
// 용량이 크고 , 성능이 떨어짐
// jquery : 함수를 이용해서 DOM 조작
// $(function() {jquery실행문} : html 위쪽에 넣어도 실행된다.
// => html 태그 보다 뒤 늦게 실행을 시켜주는 구문
// 사용법 :
// $(function() {
// $(css선택자).함수("속성명", "값");
// });
$(function () {
$("#title").css("color", "skyblue");
});
결과
jq selecter2
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>전체 선택자 태그를 사용하여 외곽선 디자인 조작</title>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접선택자</h3>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// * : 전체 선택자
// 전체 태그를 선택해서 외곽선을 1px solid blue 해라
// jquery 함수 : $("*").css("속성", "값"); // 디자인 조작
$("*").css("border", "1px solid blue");
});
</script>
</body>
</html>
결과
jq css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>함수 동시 적용 메소드(함수)체이닝</title>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접선택자</h3>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// jquery 작성
// 예제 : 배경색:#ff0, border:2px solid black
// TODO: 메소드(함수) 체이닝
// 사용법 : $(css선택자).함수().함수()...
$("#tit")
.css("background-color", "#ff0")
.css("border", "2px solid black");
});
</script>
</body>
</html>
결과
jq css2
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>속성 동시적용 체이닝 예제1</title>
</head>
<body>
<!-- 연습문제 -->
<!-- 1) id tit 선택해서 -->
<!-- 2) background-color : #ff0 -->
<!-- 3) border : 2px dashed black -->
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접선택자</h3>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function() {
$("#tit")
.css("background-color","#ff0")
.css("border","2px dashed black")
})
</script>
</body>
</html>
결과
jq css3
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>
</head>
<body>
<!-- 연습문제 : h2 태그를 선택해서 디자인 적용하세요
background-color 속성 -> skyblue
border 속성 -> 2px dashed black
-->
<!-- 선택자 : $("h2") -->
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접선택자</h3>
<!-- jquery cdn -->
<script>
$(function () {
$("h2")
.css("background-color", "skyblue")
.css("border", "2px dashed black");
});
</script>
</body>
</html>
결과
jq css4
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>선택자 2개 속성 동시적용 체이닝</title>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit3">직접선택자</h3>
<h3>인접선택자</h3>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// 코딩 : 예제 : 2개를 선택해서 디자인 적용하기
// $(선택자, 선택자2).함수()
$("h1, #tit3")
.css("background-color", "#0ff")
.css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
jq css5
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>
</head>
<body>
<h1 class="tit">제이쿼리</h1>
<h1>선택자</h1>
<h3 class="tit">직접선택자</h3>
<!-- jquery cdn -->
<script>
// 일치 선택자 :
$("h1.tit").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
</script>
</body>
</html>
결과
exam jq css 1
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>
</head>
<body>
<!-- 연습문제 : #wrap 바로 밑에 h1 태그만 선택해서 디자인 적용
background-color: yellow
border: 2px dashed #f00
#wrap > h1(자식 선택자)
-->
<!-- 힌트 : $("#wrap > h1") -->
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
<!-- jquery cdn -->
<script>
$(function(){
// 코딩
$("#wrap > h1").css("background-color", "yellow")
.css("border", "2px dashed #f00");
})
</script>
</body>
</html>
jq parent
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>인접 관계(부모 태그) 체이닝</title>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li>
리스트1
<!-- 자식 목록 -->
<ul>
<li id="list_1">리스트1-1</li>
<li>리스트1-2</li>
</ul>
</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
// 인접 관계 선택자 :
$(function () {
// 코딩 : #list_1 에서 부모 태그 선택하기
// 사용법 : $(css선택자).parent().함수()
$("#list_1").parent().css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
jq children
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>인접 관계(자식 태그) 체이닝</title>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// #wrap > section 아래 자식 태그들 선택하기
$("#wrap > section")
.children()
.css("background-color", "yellow")
.css("border", "2px solid #f00");
});
</script>
</body>
</html>
결과
jq prev next
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>선택태그 앞/뒤에 태그 체이닝</title>
</head>
<body>
<div>
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// .txt 선택태그 앞/뒤에 태그 선택하기
// 함수 : 함수()
// 사용법 : $("css선택자").prev().함수(); // 앞에 태그 선택
$(".txt").prev().css("background-color", "#0ff");
// 사용법 : $("css선택자").next().함수(); // 뒤에 태그 선택
$(".txt").next().css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
jq prevAll nextAll
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>선택태그 앞/뒤에 모든 태그 체이닝</title>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// 앞/뒤 의 모든 태그 선택하기
// 사용법 : $(css선택자).prevAll().함수(); // 앞의 모든 태그 선택
$(".txt")
.prevAll()
.css("background-color", "#0ff")
.css("border", "2px dashed #f00");
// 사용법 : $(css선택자).nextAll().함수(); // 뒤의 모든 태그 선택
$(".txt")
.nextAll()
.css("background-color", "#ff0")
.css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
jq siblings
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>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
<!-- jquery cdn -->
<script>
$(function(){
// 코딩
// 예제 : .txt 의 형제 태그 선택해서 디자인 적용
// 사용법 : $("css선택자").siblings().함수();
$(".txt").siblings()
.css("background-color", "#0ff")
.css("border", "2px dashed #f00");
})
</script>
</body>
</html>
결과
jq prevUntil
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>선택태그부터 대상태그 디자인 적용 2가지</title>
</head>
<body>
<div id="wrap">
<h1 class="title">선택자</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
</div>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
// //선택태그(.txt3) 부터 대상태그(.title)앞까지만 선택하기(앞)
// // 사용법 : $(기준선택자).prevUntil("대상선택자").함수();
$(function () {
$(".txt3")
.prevUntil(".title")
.css("background-color", "#0ff")
.css("border", "2px dashed #f00");
});
// 선택태그(.txt3) 부터 대상태그(.txt6) 사이 선택하기(뒤)
// 사용법 : $(기준선택자).nextUntil("대상선택자").함수();
$(function () {
$(".txt3")
.nextUntil(".txt6")
.css("background-color", "#0ff")
.css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
jq parents
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>선택태그 위의 부모들 모두 선택 디자인 적용</title>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<!-- 선택 -->
<p class="txt1">내용</p>
<p class="txt2">내용</p>
</div>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// .txt1 의 선택태그 위의 부모를 모두 포함 선택
// 사용법 : $("css선택자").parents().함수()
$(".txt1").parents().css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
jq closet
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부모태그들 중 가장 가까이 있는 태그 선택 디자인 적용</title>
</head>
<body>
<h1 class="title">선택자</h1>
<div>
<div>
<p class="txt1">내용</p>
</div>
</div>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// 선택태그(.txt1)에서 부모태그들 중 가장 가까이 있는 태그 선택
// 사용법 : $("css선택자").closest("부모태그").함수();
$(".txt1").closest("div").css("border", "2px dashed #f00");
});
</script>
</body>
</html>
결과
exam jq first last
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>탐색 선택 디자인 적용</title>
</head>
<body>
<!-- 연습문제 -->
<!-- 1) #menu li 중에서 1st 것만 선택해서 -->
<!-- css : background-color 속성 -> #ff0 -->
<!-- 2) #menu li 목록 중 마지막 것을 선택 -->
<!-- css : background-color 속성 -> #0ff -->
<!-- 힌트 : css 사용법 -> li:first , li:last -->
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function() {
$("#menu li:first").css("background-color","#ff0")
$("#menu li:last").css("background-color","#0ff")
})
</script>
</body>
</html>
결과
jq odd even
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>탐색(짝수,홀수) 선택 디자인 적용</title>
</head>
<body>
<!-- 연습문제 -->
<!-- #menu li 목록 중 짝수를 선택 -->
<!-- css : background-color -> #ff0 -->
<!-- #menu li 목록 중 홀수를 선택 -->
<!-- css : background-color -> #0ff -->
<!-- 힌트 : css 가상선택자 : li:even (짝수) , li:odd (홀수) -->
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// 코딩 : ;(세미콜론) : 명령어의(문장) 끝을 의미
// 짝수 선택
$("#menu li:even").css("background-color", "#ff0");
// 홀수 선택
$("#menu li:odd").css("background-color", "#0ff");
});
</script>
</body>
</html>
결과
jq eq
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>탐색(eq) 선택 디자인 적용</title>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
</ul>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// 사용법 : $(css선택자).eq(인덱스번호).함수();
// 인덱스번호(배열) : 0 ~ n 까지
// 인덱스번호에 해당하는 태그를 선택함
$("#menu > li").eq(2).css("background-color", "#ff0");
// $("#menu li").eq(2).css("background-color", "#ff0");
// $("li").eq(2).css("background-color", "#ff0");
// 셋 다 같은 결과
});
</script>
</body>
</html>
결과
jq slice
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>탐색(slice) 선택 디자인 적용</title>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
<!-- jquery cdn 필수 -->
<!-- 간단한 코드라 js파일없이 아래에서 script 작성 -->
<script>
$(function () {
// #menu li 선택해서 1,2 인덱스번호만 선택하기
// 사용법 : $("css선택자").slice(시작인덱스번호, 끝인덱스번호)
// 시작인덱스번호 ~ 끝인덱스번호-1 까지 선택됨
$("#menu li").slice(1, 3).css("background-color", "yellow");
});
</script>
</body>
</html>
결과
