jQuery
기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화하기 위해 고안된 Javascript Library이다.
📍 window.onload (JS)
- 페이지 내에 딱 한 번만 작성할 수 있다
- 위쪽에 코드가 작성되어도 제일 마지막에 해석된다
📍 ready()(jQuery)
- 위쪽에 코드가 작성되어도 제일 마지막에 해석된다
- 페이지 내에 여러 번 작성 가능하다.
- 작성법
- jQuery(document).ready(function(){코드});
- $(document).ready(function(){코드});
- $(function(){코드})
jQuery 선택자
$("css선택자") 또는 $(요소가 저장된 변수)의 형식으로 작성
📍 속성 선택자
- 요소[속성] : 특정 속성을 가지고 있는 객체 선택.
- 요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택.
- 요소[속성 ~= 값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택.
- 요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택.
- 요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택.
- 요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택.
📍 prop() 메소드
-
attribute : type, name, class, id, value 등과 같이 속성값을 별도로 입력해야되는 속성
-
property : checked, selected 와 같이 속성값이 별도로 입력되지 않는 속성
-
prop("속성명") : 해당 속성이 요소에 존재하면 true, 아니면 false
-
prop("속성명", ture | false) : 해당 속성을 checked 또는 selected 상태로 변경(true)/해제(false)
🔑 CF.
- 두 태그 동시에 선택 가능
$("h4, p") - style(CSS) 적용 시
.css(" ", " ") - 속성 선택자
$(input[name='gender') - jQuery에서 value 얻어오기
.val()
순회(탐색) 메소드
📍 Ancestors(조상) 메소드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메소드
-
$("요소명").parent()
- 선택된 요소의 바로 위 상위 요소
-
$('요소명').parents([매개변수])
- 선택된 요소의 모든 상위 요소 리턴
- 매개변수가 있으면 매개변수와 일치하는 부모만 리턴
-
$('요소명').parentsUntil(매개변수)
- 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴
📍 descendants(자손, 후손) 메소드 : 선택된 요소의 하위 요소들을 선택할 수 있는 메소드
-
$('요소명').children([매개변수])
- 선택된 요소의 모든 자식 객체 리턴
- 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴
- 연속해서 사용 가능
-
$('요소명').find(매개변수)
- 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴
📍 sideways(옆으로, 옆에서) 메소드 : 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
-
$('요소명').siblings([매개변수])
- 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴
- 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴
-
$('요소명').next()
- 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴
-
$('요소명').nextAll()
- 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴
-
$('요소명').nextUntil(매개변수)
- 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴
-
$('요소명').prev()
- 선택된 요소의 같은 레벨 중 선택된 요소 이전 한 개 요소 리턴
-
$('요소명').prevAll()
- 선택된 요소의 같은 레벨 중 선택된 요소 이전의 모든 요소 리턴
-
$('요소명').prevUntil(매개변수)
- 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴
🔑 CF.
- JS 객체를 매개변수로 전달하는 법
.css({K : V, K : V}) - is("CSS 선택자")
지정된 범위 내에 매개변수로 지정된 선택자와 일치하는 요소가 존재하는지 확인하는 메소드(T/F)
console.log($("h2").prevAll().is("p"));
01_jQuery 개요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_jQuery개요</title>
</head>
<body>
<h1>jQuery란?</h1>
<pre>
기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을
간소화하기 위해 고안된 Javascript Library이다.
*라이브러리(library) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능
* 단점 : jQuery 라이브러리를 다운로드 받아서 사용 -> 로딩 속도가 느림
순수 JS보다 속도가 조금 느림
</pre>
<hr>
<h1>jQuery 라이브러리 연결 방법</h1>
<pre>
jQuery 라이브러리는 .js 확장자로 작성되어 있어
script 태그를 이용하여 연결할 수 있다.
1) jQuery 라이브러리를 다운로드 받아서 직접 연결
- 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름
- 단점 : 폴더 구조 변경 시 경로가 꼬이게되는 문제가 발생할 수 있다.
- jQuery 공식 홈페이지 : https://jquery.com/
- jQuery CDN 코드 제공 페이지 : https://code.jquery.com/
3.7.0 우클릭 -> 다른이름으로 저장 -> webfront -> jQuery -> js에 저장
2) CDN(Content Delivery Network)을 이용한 연결 방법
- 장점 : 언제 어디서든 jQuery를 이용할 수 있다.
- 단점 : 온라인 환경에서 이용 가능. 인터넷 속도에 따라 지연이 될 수 있다.
</pre>
<hr>
<h1>JS와 jQuery 차이점</h1>
<button id="jsBtn">JS 버튼</button>
<button id="jQueryBtn">jQuery 버튼</button>
<!-- 1. 라이브러리를 다운로드 받아서 직접 연결 -->
<!-- <script src="js/jquery-3.7.0.min.js"></script> -->
<hr>
<h1>HTML 문서 해석 순서와 window.onload / ready()의 차이점</h1>
<pre>
HTML 문서는 기본적으로 위 -> 아래 순서대로 해석된다.
-> 아래쪽에 작성되어 미해석된 코드는 위쪽 코드에서 호출할 수 없다!
* window.onload / ready() 공통점
(JS) (jQuery)
-> 위쪽에 코드가 작성되어도 제일 마지막에 해석(문서 로딩이 끝나는 시점)
- 장점 : 코드가 미해석되어 오류가 발생하는 경우가 없어짐
- 단점 : 먼저 해석되는 코드가 너무 크면 수행되는 시간이 뒤쳐질 수 있음
* window.onload / ready() 차이점
- window.onload는 페이지 내에서 딱 한 번만 작성할 수 있다!
- ready()는 여러 번 작성 가능
*** ready() 작성 방법 3가지 ***
1) jQuery(document).ready(function(){ 코드; });
2) $(document).ready(function(){코드; });
('$' 기호는 jQuery를 의미한다.)
3) $(function(){코드; });
</pre>
<!-- 2. CDN 방식 연결 -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- jQuery를 사용하기 위해서는 라이브러리 로딩이 우선적으로 진행되어야 한다. -->
<script src="js/01_jQuery개요.js"></script>
<!-- ready() 함수 확인 테스트 -->
<h1 id="readyTest">111</h1>
</body>
</html>01_jQuery 개요.js
// JS와 jQuery 차이점
// 배경 : black
// 글자색 : yellow
// 글자 크기 : 20px
// JS
document.querySelector("#jsBtn").addEventListener("click", function() {
this.style.backgroundColor = "black";
this.style.color = "yellow";
this.style.fontSize = "20px";
})
// jQuery
$('#jQueryBtn').on("click", function(){
$(this).css("backgroundColor", "black").css("color", "yellow").css("fontSize", "20px");
})
// window.onload 확인
window.onload = function(){ // 문서 로딩이 완료된 후 수행
console.log("1");
}
// window,onload 중복 작성 -> 앞서 작성한 window.onload 덮어 씌움
window.onload = function(){
console.log("3");
}
console.log("2");
// ready() 함수 확인
$(document).ready(function(){
$("#readyTest").on("click", function(){
alert("클릭이 되었습니다.");
})
})
// ready() 중복 작성 -> 작성한 모든 내용이 적용됨
$(document).ready(function(){
document.getElementById("readyTest").style.color="pink";
})
// ready() 함수 다른 형태
$(function(){
console.log("ready() 함수의 다른 형태")
})
// ready() + 화살표 함수
$(() => {
console.log("이렇게 화살표 함수를 써도 됩니다.")
})02_jQuery 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_jQuery 선택자</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<h1>jQuery 선택자</h1>
<pre>
jQuery는 요소를 선택할 때
$("css선택자") 또는 $(요소가 저장된 변수)의 형식으로 작성
* CSS 선택자로 요소를 선택한 경우
- id로 선택 시 단일 요소 반환
- class, name, 자식/후손 등으로 선택 시 배열로 반환
</pre>
<h3>태그 선택자</h3>
<h5>테스트1</h5>
<h5>테스트2</h5>
<h5>테스트3</h5>
<p>테스트4</p>
<p>테스트5</p>
<p>테스트6</p>
<hr>
<h3>클래스 선택자</h3>
<h1 class="item">test1</h1>
<h1 class="item select">test2</h1>
<h1 class="item">test3</h1>
<h1 class="select">test4</h1>
<hr>
<h3>아이디 선택자</h3>
영어 소문자 + 영어 대문자 + 숫자로만 이루어진 문자열<br>
글자수는 총 8~20글자 사이<br>
단, 첫 글자는 반드시 영어 소문자
<input type="text" id="input1">
<span id="span1"></span>
<hr>
<h3>자식, 후손 선택자</h3>
<div class="area">
<ul>
<li> <h4>사과</h4> </li>
<li>바나나</li>
<li>딸기</li>
<li class="qqq">오렌지</li>
<li class="qqq">멜론</li>
</ul>
<h4>테스트1</h4>
<h4 class="qqq">테스트2</h4>
</div>
<hr>
<h3>속성 선택자</h3>
<pre>
요소[속성] : 특정 속성을 가지고 있는 객체 선택.
요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택.
요소[속성 ~= 값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택.
요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택.
요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택.
요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택.
</pre>
성별 :
<input type="radio" name="gender" id="male" value="남">
<label for="male">남자</label>
<input type="radio" name="gender" id="female" value="여">
<label for="female">여자</label>
<button type="button" id="check">확인하기</button>
<h3>prop() 메소드</h3>
<pre>
attribute : type, name, class, id, value 등과 같이
속성값을 별도로 입력해야되는 속성
property : checked, selected 와 같이
속성값이 별도로 입력되지 않는 속성
prop("속성명") : 해당 속성이 요소에 존재하면 true, 아니면 false
prop("속성명", ture | false) : 해당 속성을 checked 또는 selected
상태로 변경(true)/해제(false)
</pre>
취미 :
<input type="checkbox" name="hobby" value="football"> 축구
<input type="checkbox" name="hobby" value="game" checked> 게임
<input type="checkbox" name="hobby" value="music"> 음악감상
<button type="button" id="btn1">확인</button>
<script src="js/02_jQuery 선택자.js"></script>
</body>
</html>02_jQuery 선택자
// 태그 선택자
// ready()함수 : 문서가 로딩된 후 마지막에 수행하는 함수
$(document).ready(function(){
//jQuery 선택자는 css 선택자와 같다
$("h5").css("color", "red");
$("p").css("color","blue");
// JS
// document.getElementsByTagName("p").style.color="blue";
// -> 배열에 스타일을 적용할 수 없다.
const arr = document.getElementsByTagName("p");
for(let item of arr){
item.style.color="yellow";
}
// -> 배열에서 요소를 하나씩 꺼내서 적용하는 건 가능하나 불편하다
// h5, p 두 태그 동시에 배경색을 green으로 지정하기
$("h5, p").css("backgroundColor", "green");
});
// 클래스 선택자
$(document).ready(function(){
// 클래스가 아이템인 요소의 글자색을 orange로 변경
$(".item").css("color","orange");
// 클래스가 select인 요소의 배경색을 yellowgreen으로 변경
$(".select").css("backgroundColor", "yellowgreen");
// 클래스가 item, select를 동시에 가지고 있는 요소만
// 글자 크기를 50px로 변경
$(".item.select").css("fontSize","50px");
})
// 아이디 선택자
const regExp = /^[a-z][a-zA-Z0-9]{7,19}$/;
$("#input1").on("input", function(){
// on() == addEventListener
// -> 특정 이벤트 발생 시 동작(이벤트 핸들러) 지정
// input 이벤트 : 입력과 관련된 모든 행위
// 1) 작성된 값이 정규 표현식에 맞는 형식인지 검사
if(regExp.test($("#input1").val())){
// $("#input1").val()
// : 아이디가 input1인 요소에 작성된 값(value)을 얻어옴
// 2) 정규식 결과에 따라 내용 출력
$("#span1").text("유효한 문자열 형식입니다.");
$("#span1").css("color", "green");
} else{
$("#span1").text("유효하지 않은 문자열 형식입니다.").css("color", "red");
// method changing : 하나의 대상에 대해 여러 메소드를 연달아 작성하는 기술
}
})
// 자식, 후손 선택자
// 제일 간단한 형태의 ready() 함수
$(function(){
// 클래스가 area인 요소의 자식 중 h4 글자색을 red로 변경
$(".area>h4").css("color", "red");
// 클래스가 area인 요소의 후손 중에 ul 후손 중에
// 클래스가 qqq인 요소 배경색 원하는 걸로 바꾸기
$(".area ul .qqq").css("backgroundColor","aqua");
// 클래스가 area인 요소의 후손 중
// 클래스가 qqq인 요소의 폰트 크기를 30px로 변경
$(".area .qqq").css("fontSize", "30px");
// 내용이 "사과"인 요소를 선택해서
// 배경 빨간색, 글자는 흰색으로 변경
$("area li>h4").css("backgroundColor", "red").css("color","white");
})
// 속성 선택자
$("#check").on("click", function(){
// name 속성값이 gender인 요소 선택
console.log($("input[name='gender']"));
// name 속성값이 gender인 요소 중 check된 요소 선택
// : checked -> check된 요소만 선택
const gender = $("input[name='gender']:checked");
console.log(gender.length);
// 아무것도 check안 함 : 0
// 하나 check : 1
// 변수 gender는 JS 방식의 변수이다.
// -> 이후 gender를 단순하세 호출하게 되면
// JS 방식으로 사용해야 한다.
// radio 버튼이 하나도 선택되지 않은 경우
// "남자 또는 여자 중 하나를 선택해주세요" 알림창
if(gender.length ==0){
alert("남자 또는 여자 중 하나를 선택해주세요");
} else {
// 1) 체크된 요소를 모두 얻어왔으므로
// 배열 형태로 저장된 gender 변수에서
// 0번 인덱스의 value만 얻어오기 (순수 JS)
console.log(gender[0].value);
// 2) 체크된 요소를 모두 얻어와도
// radio는 1개만 체크되어 있기 때문에
// 변수 한 개랑 같다고 해석되어
// 자동으로 0번 인덱스 요소에 있는 value를 얻어옴(JS + jQuery)
console.log(gender.value); // undefined
console.log(gender.val());
// 3) 순수 jQuery
console.log( $(gender).val() );
// $(gender) : 체크된 요소만 담긴 배열 + 요소를 선택해라 기호
// --> 체크된 radio 버튼을 선택하는 jQuery 선택자
alert($(gender).val()+"자를 선택하셨습니다.")
}
});
// prop() 메소드
$("#btn1").on("click", function(){
const arr = $("input[name='hobby']");
let str = ""; // 체크된 요소의 value값을 누적하여 저장할 변수
console.log(arr.prop("checked"));
// 배열명을 적을 경우 0번 인덱스만 확인 가능
for(let i = 0; i<arr.length; i++){
// 각 인덱스에 저장된 checkbox 요소가 체크되어 있는 상태인지 확인
console.log(i + " : " + $(arr[i]).prop("checked"));
if($(arr[i]).prop("checked")){
// 체크된 요소의 value값을 얻어와 str 변수에 누적
str += $(arr[i]).val() + " ";
}
}
alert(str)
});03_순회(탐색)메소드1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_순회(탐색)메소드1</title>
<style>
.wrap *{
border: 1px solid lightgray;
display: block;
padding: 5px;
margin: 15px;
color: gray;
}
.type {
width: 500px;
}
</style>
</head>
<body>
<h1>순회(탐색) 메소드1</h1>
<h3>Ancestors(조상) 메소드 :
선택된 요소의 상위 요소들을 선택할 수 있는 메소드
</h3>
<pre>
$("요소명").parent()
- 선택된 요소의 바로 위 상위 요소
$('요소명').parents([매개변수])
- 선택된 요소의 모든 상위 요소 리턴
- 매개변수가 있으면 매개변수와 일치하는 부모만 리턴
$('요소명').parentsUntil(매개변수)
- 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴
</pre>
<div class="wrap">
<div class="type">div (great-grand parent)
<ul>ul (grand parent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
<div class="type">div (grand parent)
<p>p (direct parent)
<span>span</span>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="js/03_순회(탐색)메소드1.js"></script>
</body>
</html>03_순회(탐색)메소드1.js
$(document).ready(function(){
// parent() : 선택된 요소의 바로 상위 요소(부모)를 선택
// span 태그의 부모 요소의 테두리, 글자색을 변경
$("span").parent().css("border", "2px solid red").css("color", "blue");
// li 태그의 모든 상위 요소 글자색을 파란색으로 변경
$("li").parents().css("color", "blue");
// li 태그 상위 요소 중 div만 선택하여 테두리 변경
$("li").parents("div").css("border", "2px solid aqua");
// span 태그부터 상위 요소 중
// div 태그를 만나기 이전까지 요소를 선택하여 배경색 변경
$("span").parentsUntil("div").css("backgroundColor", "lightskyblue");
})04_순회(탐색)메소드2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_순회(탐색)메소드2</title>
<style>
.wrap *{
border: 1px solid lightgray;
display: block;
padding: 5px;
margin: 15px;
color: gray;
}
.type {
width: 500px;
}
</style>
</head>
<body>
<h1>순회(탐색) 메소드2</h1>
<h3>descendants(자손, 후손) 메소드 :
선택된 요소의 하위 요소들을 선택할 수 있는 메소드</h3>
<pre>
$('요소명').children([매개변수])
- 선택된 요소의 모든 자식 객체 리턴
- 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴
$('요소명').find(매개변수)
- 선택된 요소의 인자와 일치하는 모든 후손 객체 리턴
</pre>
<div class="wrap">
<div class="type">div (great-grand parent)
<ul>ul (grand parent)
<li>li (direct parent)
<span>span</span>
</li>
</ul>
</div>
<div class="type">div (grand parent)
<p>p (direct parent)
<span>span</span>
</p>
</div>
</div>
<p id="test">테스트</p>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="js/04_순회(탐색)메소드2.js"></script>
</body>
</html>04_순회(탐색)메소드2.js
$(document).ready(function(){
// id가 test인 요소의 테두리를 2px 빨간 실선, 글자를 파란색으로 변경
// $("#test").css("border", "2px solid red").css("color", "blue");
// 자바스크립트 객체를 매개변수로 전달하는 방법
$("#test").css({"border" : "2px solid red", "color" : "blue"}); // key값에는 "" 안 해도 됨
})
// css() 매개변수로 사용할 코드를 미리 변수에 저장
const style1 = {"border" : "2px solid red", "color" : "red"};
const style2 = {"border" : "2px solid orange", "color" : "orange"};
const style3 = {"border" : "2px solid yellow", "color" : "yellow"};
const style4 = {"border" : "2px solid green", "color" : "green"};
const style5 = {"border" : "2px solid blue", "color" : "blue"};
$(function(){
$("#test").css(style4);
})
//------------------------------------------------------------------------------
// children(): 선택된 요소 바로 하위 요소(자식)를 선택하는 메소드
// 클래스가 wrap인요소의 자식 스타일을 style1로 설정
$(".wrap").children().css(style1);
// ul, p 태그의 스타일을 style2로 설정
// $(".type").children().css(style2);
$(".wrap").children().children().css(style2); // 연달아 작성
// children("매개변수(CSS 선택자)")
// 선택된 자식 요소 중 "선택자"와 일치하는 자식만 선택
// 클래스가 type인 요소의 자식 중 ul 태그의 스타일을 style3으로 설정
$(".type").children("ul").css(style3);
// 클래스가 wrap인 요소를 기준으로 li 태그의 스타일을 style4로 설정
$(".wrap").children(".type").children("ul").children("li").css(style4);
// find("매개변수(CSS 선택자)")
// 선택된 요소의 후손 중 매개변수로 작성된 선택자와
// 일치하는 모든 요소를 선택
// 클래스가 wrap인 요소의 후손 중 모든 span 태그의 스타일을 style5로 설정
$(".wrap").find("span").css(style5);05_순회(탐색)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_순회(탐색)3</title>
<script src="js/jquery-3.7.0.min.js"></script>
<style>
.wrap *{
border: 1px solid lightgray;
display: block;
padding: 5px;
margin: 15px;
color: gray;
}
</style>
</head>
<body>
<h1>순회(탐색) 메소드</h1>
<h3>sideways(옆으로, 옆에서) 메소드 :
같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드
</h3>
<pre>
$('요소명').siblings([매개변수])
- 선택된 요소와 같은 레벨(형제)에 있는 모든 요소 리턴
- 매개변수가 있으면 같은 레벨에 있는 요소 중 매개변수와 일치하는 모든 요소 리턴
$('요소명').next()
- 선택된 요소의 같은 레벨 중 선택된 요소 다음 한 개 요소 리턴
$('요소명').nextAll()
- 선택된 요소의 같은 레벨 중 선택된 요소 다음의 모든 요소 리턴
$('요소명').nextUntil(매개변수)
- 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴
$('요소명').prev()
- 선택된 요소의 같은 레벨 중 선택된 요소 이전 한 개 요소 리턴
$('요소명').prevAll()
- 선택된 요소의 같은 레벨 중 선택된 요소 이전의 모든 요소 리턴
$('요소명').prevUntil(매개변수)
- 선택된 요소의 같은 레벨 중 매개변수 이전 까지의 모든 요소 리턴
</pre>
<div class="wrap">div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
<span>테스트용 span 태그</span>
<h2>테스트용 h2태그</h2>
<script src="js/05_순회(탐색).js"></script>
</body>
</html>05_순회(탐색).js
const style1 = {"border" : "2px solid red", "color" : "red"};
const style2 = {"border" : "2px solid orange", "color" : "orange"};
const style3 = {"border" : "2px solid yellow", "color" : "yellow"};
const style4 = {"border" : "2px solid green", "color" : "green"};
const style5 = {"border" : "2px solid blue", "color" : "blue"};
// siblings() : 선택한 요소의 형제 요소를 모두 선택
// h2 태그의 형제 요소에 스타일을 style1으로 설정
$("h2").siblings().css(style1);
// siblings("매개변수(CSS 선택자)")
// 선택한 요소의 형제 요소 중에서
// 매개변수로 작성된 요소만 선택
// h2 태그의 형제 요소 중 p 태그만 style2 적용
$("h2").siblings("p").css(style2);
// next() : 선택된 요소의 다음 형제 요소를 선택하는 메소드
// span 태그 다음에 오는 형제 요소의 스타일을 style3로 설정
$("span").next().css(style3);
// nextAll() : 선택된 요소의 다음 모든 형제 요소 선택하는 메소드
// h2 태그 다음에 오는 모든 형제 요소의 스타일을 style4로 설정
$("h2").nextAll().css(style4);
// nextUntil("매개변수 (CSS 선택자)")
// 선택된 요소 다음부터 매개변수로 작성된 형제관계 요소 이전까지를 모두 선택
// span 태그부터 h3 태그까지 폰트 크기를 30px로 변경
$("p").nextUntil("p").css("fontSize", "30px");
// is("CSS 선택자")
// 지정된 범위 내에 매개변수로 지정된 선택자와 일치하는 요소가
// 존재하는지 확인하는 메소드
// 존재하면 true, 없으면 false 반환
// h2태그 이전에 있는 모든 형제 요소 중 p태그가 있는지 확인
console.log($("h2").prevAll().is("p")); // true
// h2 태그 이전에 있는 모든 형제 요소 중 pre 태그 있는지 확인
console.log($("h2").prevAll().is("pre")); // true 밑에 h2 태그 하나 더 있음
$("span").on("click", function(){
console.log("span태그 클릭됨");
// console.log($("span"));
console.log($(this)); // 위 주석 코드와 같음
console.log(this); // 이벤트가 발생한 요소 자체
// 이벤트 핸들러(이벤트 발생 시 동작을 지정하는 함수)
// 내부에 작성된 this라는 단어는
// 이벤트가 발생한 요소를 나타낸다.
})
// h2 태그를 클릭했을 때
// 클릭한 요소의 이전 요소의
// 배경색을 red, 글자를 white로 설정
$("h2").on("click", function(){
$(this).prev().css({"backgroundColor" : "red", "color": "white"});
// 달러 까먹지 마세요....
})
개발 일지