티스토리 뷰
1. 제이쿼리
- 2006년에 출시된 자바스크립트 라이브러리
- 오픈소스로 제공되어 무료로 사용할 수 있으며, 주로 문서조작에 사용한다.
- 자바스크립트 코드 형식을 좀 더 직관적으로 이해할 수 있도록, 짧고 단순한 코드 형태로 변형하여 제공한다.
- 웹에서 제공하는 제이쿼리 라이브러리에 접속하여 제이쿼리를 사용할 수 있다.
- + script 태그 내에서 src 속성으로 해당 URL을 작성하면, 사용할 수 있다.
- + 자바스크립트 라이브러리 사용하는 방식 ( 2가지 )
- + 1 ) 다운로드 방식
- + 2 ) CDN : Content-Delivery Network ( 원격 .js파일을 직접 링크해서 사용 ) (***)
2. 제이쿼리 – 선택자
- 선택한 요소에 지정한 스타일 / 속성을 적용한다.
- Ex. $( CSS 선택자 ).css( “스타일 속성명”, “해당 속성값” );
3. DOM ( Document Object Model 문서 객체 모델 )
- 1 ) 요소 노드 ( 태그 )
- 2 ) 속성 노드 ( 태그의 속성들 )
- 3 ) 텍스트 노드 ( 태그의 컨텐츠 – 시작과 끝 태그 사이의 값 )
- 4 ) 주석 노드
- 웹 브라우저마다, DOM Tree를 약간씩 다르게 생성한다.
- 이로 인해, JS언어를 이용한 DOM Tree 조작이 어떤 웹 브라우저를 하느냐에 따라서 조금씩 다른 결과를 나타나는 문제가 있었는데, 이를 극복한 것이 jQuery이다.
- jQuery는 jQuery만의 DOM Tree를 만들었다. ( 모든 브라우저의 실제 DOM Tree는 감추고, 개발자는 jQuery의 DOM Tree를 조작 => jQuery가 실제 사용중인 브라우저의 DOM Tree를 대신 조작 => 어떤 브라우저를 사용하든, 같은 결과 산출 )
[ 1. 제이쿼리 적용 방법 ]
<script>
console.debug(`-----1------`);
console.log(document);
// 사실상 Dom Tree가 생성되기 전이지만, 속도가 빨라서 나오는 것이다.
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 적용 방법</title>
<!-- 제이쿼리 CDN 방법으로 연결 (***) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
console.debug(`-----2------`);
// 제이쿼리의 시작코드 ( Entry Code ) (***)
$(document).ready(function(){ // Dom Tree가 ready 상태이면 함수를 시작한다.
console.debug(`ready!`);
// DOM을 조작하는 제이쿼리 메소드 호출 영역
}); // jQ
// ready method : E.listener ( 이벤트 리스너 )
</script>
<!-- 사실상 Dom Tree가 생성되기 전이다. -->
<!-- Dom Tree는 Body 태그에서 형성이 된다. -->
<!-- 그렇다면, body 태그 후에 작성해야될 것 같지만 head 태그 내에 작성해야 한다. -->
</head>
<body>
<script> console.debug(`-----3------`); </script>
</body>
</html>
<script> console.debug(`-----4------`); </script>
<!-- 1, 2, 3, 4 모두 콘솔창에 찍히기는 찍힌다. -->[ 2. 제이쿼리 연습 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 연습1</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
// ----------------------------------------------------------------------------
// 1. Entry Point
// ----------------------------------------------------------------------------
$(document).ready(function(){
console.clear;
console.debug(`1. jq started.`);
}); // jQuery
// $(document) : E.target E.type
// ready method : E.listener
// function(){} : E.handler ( 익명함수 )
// ----------------------------------------------------------------------------
// 2. 두번째 방법 : Entry Point를 좀 더 간단하게 하자! (****)
// ----------------------------------------------------------------------------
// $ === jQuery 함수
$(function(){
console.clear;
console.debug(`2. jQuery 간단한 방법 started.`)
}); // jQuery
// 이벤트 핸들러만 받아서 실행할 수 있는 간단한 버전이다. ( document.ready는 자동으로 작성되어진다. )
</script>
</head>
<body>
</body>
</html>[ 3. 제이쿼리 알아보기 ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 연습</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
console.log(`1. jQuery :`, jQuery);
console.log(`2. typeOf jQuery :`, typeof jQuery); // function ( 함수 )
console.log(`3. jQuery instanceof Function :`, jQuery instanceof Function ); // true
// jQuery는 함수임을 알 수 있다.
// =============================================================================
console.log(`4. $ :`, $);
console.log(`5. typeOf $ :`, typeof $);
console.log(`6. $ instanceof Function :`, $ instanceof Function);
// jQuery와 $가 같은 결과가 나오는 것을 알 수 있다.
// =============================================================================
console.log(`8. jQuery == $ :`, jQuery == $ );
console.log(`9. jQuery === $ :`, jQuery === $ );
// 이를 통해서 jQuery와 $는 같은 존재임을 알 수 있다.
// =============================================================================
$(document).ready(function(params){
console.log(`- document.onload event handler invoked.`);
console.log(`- params :`, params, params === jQuery, params === $ ); // All true
console.log(window.jQuery === window.$, window.$ === jQuery, jQuery === $); // All true
// 매개변수로 들어오는 것도 jQuery임을 알 수 있다.
// 모든 객체는 window의 멤버가 되지만, window의 경우 생략이 가능하다.
}); // jq
// =============================================================================
document.onload = function(){
console.log(`document ready ...`);
};
</script>
</head>
<body>
</body>
</html>[ 4. 제이쿼리 - 선택자 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 연습</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
// jQuery Entry point (***)
$(function(){
// 콘솔을 클리어한 후에 작성하는 것이 좋다.
console.clear();
// 선택한 요소 노드의 color 속성 적용
$("#txt").css("color", "red");
}); // .jq
</script>
</head>
<body>
<!-- 문단태그인 p태그 생성 -->
<p id="txt">내용</p>
</body>
</html>[ 5. 제이쿼리 - 전체 선택자 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 전체 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear(); // ***
// 전체 선택자 이용
$("*").css("border", "1px solid blue");
// 선택자는 자바스크립트에서 사용한 선택자를 그대로 사용하면 된다.
}); // .jq
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>[ 6. 제이쿼리 - #id 선택자 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 아이디 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$("#tit").css("background-color", "#ff0").css("border", "2px solid #f00");
// 메소드 체인을 통해 CSS 속성을 동시에 지정해 줄 수도 있다. (**)
// 메소드 체인이 가능한 이유는 앞에 있는 메소드가 제이쿼리 함수를 반환하기 때문이다. ( 모두 제이쿼리를 반환하고 있다. )
// 제이쿼리의 메소드는 인라인 방식으로 들어가게 된다.
}); // .jq
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>[ 7. 제이쿼리 - .class 선택자 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 클래스 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$(".tit").
css("background-color", "#ff0").
css("border", "2px solid #f00");
// jQuery와 JQuery 구분을 잘 해야된다. ( $( === jQuery)는 JQuery를 반환한다. )
// 메소드 체이닝은 반환된 객체를 그대로 다시 사용한다.
}) // .jq
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 class="tit">선택자(클래스)</h2>
<h3>직접 선택자</h3>
<h4 class="tit">직접 선택자2(클래스)</h4>
</body>
</html>
[ 8. 제이쿼리 - 태그 선택자 ] (*)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 태그 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$("h2").css("background-color", "#0ff").css("border", "2px solid #f00");
// #0ff = #00ffff와 같다.
}) // .jq
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>[ 9. 제이쿼리 - 그룹 선택자 ] (*)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 그룹 선택자( , )를 이용하여, 여러 요소에 공통 스타일을 적용
$("h1, #tit").css("background-color", "#0ff").css("border", "2px double #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit">직접 선택자</h3>
<h4>인접 선택자</h4>
</body>
</html>
[ 10. 제이쿼리 - 인접관계 선택자 ( 부모 선택 ) ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 인접형제 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$("#list_1").parent().css("border", "2px solid red"); // 부모 선택
}); // .jq
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<!-- 블록 요소는 모든 블록요소 + 인라인 요소를 포함할 수 있다. -->
<!-- 단, 인라인 요소는 인라인 요소만 포함할 수 있다. -->
<ul id="wrap">
<li> 리스트1
<!-- li태그 내에 또 다른 ul태그를 생성하였다. -->
<ul>
<li id="list_1">리스트 1-1</li>
<li>리스트 1-2</li>
</ul>
</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</body>
</html>[ 11. 제이쿼리 - 인접 관계 선택자 2 ( 객체 리터럴 방식 ) ] (****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 객체 리터럴 방식</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 객체 리터럴 방식으로 css 요소를 한번에 지정할 수도 있다.
$("#wrap h1").css({ // 후손 선택자
backgroundColor : "yellow",
border : "2px dashed #f00"
});
}); // .jq
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
</html>[ 12. 제이쿼리 - 자식 선택자 ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 자식 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 자식 선택자 > 를 이용
$("#wrap > h1").css("border", "2px dashed #f00");
// 자식 선택자 > 를 이용
$("#wrap > section").
children(). // ()를 까먹으면 안된다!!(*)
css({ // section 태그의 모든 자식 요소들을 선택
"background-color" : "yellow",
border : "2px solid #f00"
});
}); // .jq
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>자식 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
</html>[ 13. 제이쿼리 - 형제 선택자 ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 형제 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
let style_1 = {
"background-color" : "blue",
border : "2px solid #f00"
}
let style_2 = {
"background-color" : "#ff0",
border : "2px dashed #f00"
}
$(".txt").prev().css(style_1); // 형 선택
$(".txt + p").css(style_2); // 제일 가까운 형제 선택 ( +이기에 동생을 선택한다.)
$(".txt").next().next().css(style_2); // 아래 두번째 동생을 선택 ( 동생의 동생 )
}); // .jq
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
</html>[ 14. 제이쿼리 - 형제 선택자2 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 형제 선택자2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
let style_1 = {
backgroundColor : "blue",
border : "2px solid #f00"
}
let style_2 = {
backgroundColor : "#ff0",
border : "2px dashed #f00"
}
$(".txt").prevAll().css(style_1); // 모든 형들은
$(".txt").nextAll().css(style_2); // 모든 동생들은
}); // .jq
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
</html>[ 15. 제이쿼리 - 형제 선택자 3 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
let style_1 = {
backgroundColor : "#0ff",
border : "2px solid #f00"
};
// 선택자가 선택자 요소에 포함되어 있는 모든 형제들을 선택한다. ( siblings 메소드 )
$(".txt").siblings().css(style_1); // 모든 형제 선택하여 적용 ( 자신은 제외된다. )
}); // .jq
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
</html>[ 16. 제이쿼리 - 형제 선택자 4 ( prev/nextUntil ) ] (*)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
let style_1 = {
backgroundColor : "#0ff",
border : "2px solid #f00"
};
$(".txt3").prevUntil(".title").css(style_1); // .title이 나오기 전까지의 형들에게 적용
$(".txt3").nextUntil(".txt6").css(style_1); // .txt6가 나오기 전까지의 동생들에게 적용
}); //.jq
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">선택자1</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
</div>
</body>
</html>[ 17. 제이쿼리 - 부모 선택자 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 부모 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$(".txt1").parents().css({
border : "2px dashed #00f"
}); // 모든 부모에게 적용
$(".txt2").parent().css({ border : "2px solid #f00" }); // 바로 위 부모에게 적용
}); // .jq
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용1</p>
</div>
</section>
<section>
<div>
<p class="txt2">내용2</p>
</div>
</section>
</body>
</html>[ 18. 제이쿼리 - 부모 선택자 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 가장 가까운 부모 선택</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$(".txt1").closest("div").css({border : "2px solid #f00"}); // 가장 가까운 부모태그 중 div태그에만 적용
}); // .jq
// 제이쿼리는 인라인 방식으로 적용한다.
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<div>
<div>
<p class="txt1">내용</p>
</div>
</div>
</body>
</html>
[ 19. 제이쿼리 - 구조적 가상 선택자 ] (*)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 구조적 가상 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
// 후손 선택자(공백)와 :first / :last 구조적 가상 클래스 선택자를 이용하였다.
$("#menu li:first").css({ backgroundColor : "#ff0"});
$("#menu li:last").css({ backgroundColor : "#0ff"});
}); // .jq
</script>
</head>
<body>
<h1>구조적 가상 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>[ 20. 제이쿼리 - 구조적 가상 선택자 2 ] (**)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 구조적 가상 선택자2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$("#menu li:even").css({ backgroundColor : "#ff0"}); // 짝수 요소만 선택
$("#menu li:odd").css({ backgroundColor : "#0ff"}); // 홀수 요소만 선택
}); //.jq
</script>
</head>
<body>
<h1>구조적 가상 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>[ 21. 제이쿼리 - 구조적 가상 선택자 3 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 구조적 가상 클래스</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
//eq(n) : equal이라는 뜻으로 지정된 순번의 요소를 선택한다.
$("#menu li").eq(2).css({ backgroundColor : "#ff0"}); // 2번째 li태그
$("#menu li:lt(2)").css({ backgroundColor : "#0ff"}); // lt( less than )의 의미로 2번째보다 작은 li의 n번재 요소를 선택
$("#menu li:gt(2)").css({ backgroundColor : "#f0f"}); // gt( greater than )의 의미로 2번째보다 큰 li의 n번째 요소를 선택한다.
// 배열의 인덱스번호와 같이 li의 순번도 0번째 부터 시작하기에 조심해야 한다. (***)
}); //.jq
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
</ul>
</body>
</html>[ 22. 제이쿼리 - 구조적 가상 선택자 4 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 구조적 가상 선택자</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
$("li:first-of-type").css({ backgroundColor : "purple"});
$("li:last-of-type").css({ backgroundColor : "yellow"});
// of-type은 해당 타입의 첫번째와 마지막 요소를 선택하여 지정해 준다.
}); //.jq
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul>
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<ul>
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>
</html>[ 23. 제이쿼리 - 구조적 가상 선택자 5 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 - 구조적 가상 클래스</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
<script>
$(function(){
console.clear();
$("#menu1 li:nth-child(1)").css({ backgroundColor : "aqua"});
$("#menu1 li:nth-child(2n)").css({ backgroundColor : "#f00"});
$("#menu2 li:nth-last-child(2)").css({ backgroundColor : "#0ff"}); // 뒤에서 2번째 요소에 지정
// nth-child는 처음부터 카운팅하고, nth-last-child는 뒤에서부터 카운팅한다.
// nth는 인덱스번호가 1번부터 카운팅되기에 조심해야 한다. (***)
}); //.jq
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
<li>내용1-4</li>
</ul>
<ul id="menu2">
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 71일차 - 제이쿼리 ( 메소드 / 조별과제 ) (****) (0) | 2022.06.09 |
|---|---|
| KH 70일차 - 제이쿼리 ( 선택자 / 메소드 ) (*****) (0) | 2022.06.08 |
| KH 68일차 - 문서 객체 모델 (**) / 제이쿼리 시작 (0) | 2022.06.03 |
| KH 67일차 - 자바스크립트 ( 사용자 정의 객체 / 배열 객체 / Date 객체 ) (*****) (0) | 2022.06.02 |
| KH 66일차 - 자바스크립트 ( 배열 / 객체 ) (****) (0) | 2022.05.31 |
댓글