제이쿼리(jQuery) 기초 문법
선택자
선택자는 HTML요소를 선택하여 가져온다. 제이쿼리 선택자는 CSS선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일을 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 스타일(CSS)는 정적이다라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 동적으로 스타일을 적용할 수 있다.
기본 선택자
영역에 있는 문서 객체를 선택할 수 있는 선택자를 알아보자. 제이쿼리의 기본 선택자는 다음과 같이 직접 선택자와 인접 관계 선택자로 나눌 수 있다.
인접 관계 선택자
인접 관계 선택자는 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는(이전과 다음 요소)요소를 선택할 때 사용한다. 자유자재로 사용하려면 문서 객체 구조와 관계를 잘 이해하고 있어야 한다.
<body>
<div id="first">
<div id="second">
<h1>제목1</h1>
<h2>제목2</h2>
<p>내용</p>
</div>
</div>
</body>
여기서 id가 first인 div태그는 상위(closest)요소 이고, 안에 있는 태그들은 하위 요소이다.
id가 second인 div태그는 그 안에 있는 태그들의 부모(parent)요소이고, 안에 있는 태그들은 자식(children)요소이다.
<h1>태그는 <h2>태그의 형(prev)요소이고, <p>태그는 <h2>태그의 동생(next) 요소이다.
부모 요소 선택자
부모 요소 선택자는 선택한 요소를 감싸고 있는 부모 요소를 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$("#list").parent().css("border","1px solid red");
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<ul id="wrap">
<li>
<ul>//해당 태그가 선택됨
<li id="list">리스트1-1</li>
<li>리스트1-2</li>
</ul>
</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</body>
하위 요소 선택자
하위 요소 선택자는 기준 요소로 선택한 하위 요소만 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$("#wrap h1").css("border","1px solid red");
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<ul id="wrap">
<li>
<ul>
<h1>추천 리스트</h1>//해당 태그가 선택됨
<li id="list">리스트1-1</li>
<li>리스트1-2</li>
</ul>
</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</body>
id값이 "wrap"인 요소가 감싸고 있는 <h1>을 모두 선택한다.
자식 요소 선택자
자식 요소 선택자는 선택된 요소를 기준으로 지정한 자식 요소만 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$("#wrap > h1").css("border","1px solid red");
$("#wrap > section").children().
css({
"border":"1px solid blue",
"background-color":"yelow"
});
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<div id="wrap">
<h1>반갑습니다</h1>//$("#wrap > h1")
<p>내용</p>
<section>//$("#wrap > section").children()
<h1>yeony입니다</h1>
<p>내용</p>
</section>
</div>
</body>
선택한 요소에 스타일을 적용하는 방법
//1. 인자값을 사용해 CSS속성과 값을 전달하는 방식
$("요소 선택").css("속성명1","값1").css("속성명2","값2");
//2. 객체를 사용해 CSS속성과 값을 전달하는 방식
$("요소 선택").css({"속성명1":"값1", "속성명n":"값n"});
형(이전) / 동생(다음) 요소 선택자
형 요소 선택자는 선택한 요소를 기준으로 바로 이전 형제 요소만 선택한다. 그리고 동생 요소 선택자는 선택한 요소를 기준으로 바로 다음 형제 요소만 선택한다.
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".cont").prev().css("border","1px solid red");
$(".cont+p").css("border","1px solid blue");
$(".text").next().css("border","1px solid yello");
});
</script>
</head>
<body>
<div id="wrap">
<h1>안녕하세요</h1>
<p>내용1</p>//$(".cont").prev()
<p class="cont">내용2</p>
<p class="text">내용3</p>// $(".cont+p")
<p>내용4</p>// $(".text").next()
<p>내용5</p>
</div>
</body>
전체 형(이전) / 동생(다음) 요소 선택자
전체 형 요소 선택자는 선택한 요소를 기주으로 이전에 오는 전체 형제 요소를 선택한다. 그리고 전체 동생 요소 선택자는 선택한 요소를 기준으로 다음에 오는 전체 형제 요소를 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$(".cont").prevAll().css("border","1px solid red");
$(".cont").nextAll().css("border","1px solid blue");
});
</script>
</head>
<body>
<div id="wrap">
<h1>안녕하세요</h1>//$(".cont").prevAll()
<p>내용1</p>//$(".cont").prevAll()
<p class="cont">내용2</p>
<p >내용3</p>//$(".cont").nextAll()
<p>내용4</p>//$(".cont").nextAll()
</div>
</body>
전체 형제 요소 선택자
전체 형제 요소 선택자는 선택한 요소의 모든 형제 요소를 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$(".cont").siblings().css("border","1px solid red");
});
</script>
</head>
<body>
<div id="wrap">
<h1>안녕하세요</h1>//$(".cont").siblings()
<p>내용1</p>//$(".cont").siblings()
<p class="cont">내용2</p>
<p >내용3</p>//$(".cont").siblings()
<p>내용4</p>//$(".cont").siblings()
</div>
</body>
범위 제한 전체 형/동생 요소 선택자
범위 제한 전체 형/동생 요소 선택자는 선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는 전체 동생 요소를 선택한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$(".cont").prevUntil(".title").css("border","1px solid red");
$(".cont").nextUntil(".cont2").css("border","1px solid blue");
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">안녕하세요</h1>//$(".cont").prevUntil(".title")
<p>내용1</p>//$(".cont").prevUntil(".title")
<p class="cont1">내용2</p>
<p >내용3</p>//$(".cont").nextUntil(".cont2")
<p class="cont2">내용4</p>//$(".cont").nextUntil(".cont2")
</div>
</body>
상위 요소 선택자
상위 요소 선택자는 선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 선택하고자 하는 요소만 선택할 때 사용한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$(".txt1").parents().css("border","1px solid red");
$(".txt2").parents().("div").css("border","1px solid blue");
});
</script>
</head>
<body>//$(".txt1").parents()
<h1 class="title">안녕하세요</h1>//$(".txt1").parents()
<section>//$(".txt1").parents()
<div>//$(".txt1").parents()
<p class="txt1">내용</p>
</div>
</section>
<section>
<div>// $(".txt2").parents().("div")
<p class="txt2">내용</p>
</div>
</section>
</div>
</body>
가장 가까운 상위 요소 선택자
가장 가까운 상위 요소 선택자는 선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할 때 사용한다.
<script src="js/jquery.js"></script>
<script>
$(funtion(){
$(".txt1").closest().css("border","1px solid red");
});
</script>
</head>
<body>
<h1>안녕하세요</h1>
<div>
<p>내용</p>
</div>
<div>//$(".txt1").closest()
<p class="txt1">내용</p>
</div>
</div>
</body>
class값이 txt1인 요소를 기준으로 상위 요소 중 가장 가까운 <div>를 선택한다.
'언어공부 > JavaScript&jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 기초 문법 - 선택자 (5) 콘텐츠 탐색 선택자 (0) | 2021.08.04 |
|---|---|
| 제이쿼리(jQuery) 기초 문법 - 선택자 (4) 위치 탐색 선택자, 속성 탐색 선택자 (0) | 2021.08.03 |
| 제이쿼리(jQuery) 기초 문법 - 선택자 (2) 직접 선택자, 메소드 체이닝 기법 (0) | 2021.08.01 |
| 제이쿼리(jQuery) 기초 문법 - 선택자 (1) 기본 선택자 종류 (0) | 2021.07.31 |
| 자바 스크립트(JavaScript) 라이브러리 언어 - 제이쿼리(jQuery) (0) | 2021.07.30 |