<사용 위치>
1. <head> 내부에 위치 :
- $(document).ready(function(){}) 혹은 $(function{}()); 내부에 작성해야 함
2. <body> 내부 위치 :
- 스크립트 내용 그대로만 작성
<css 적용>
1. 선택한 요소에 지정한 스타일 적용
$("css 선택자").css("스타일 속성명","값");
<script>
$("#txt").css("color","red");
</script>
2. 지정한 요소에 지정한 속성 적용
$("css 선택자").attr("속성명","값");
**체이닝 기법
선택한 요소에 메서드를 연속 사용
$(요소선택).css(속성1, 값1).css(속성2, 값2)...;
<기본 선택자>
1. 직접 선택자
: 멀리 떨어진 요소를 직접 선택할 때 사용
- $("*") : 전체 선택자 (현재 HTML의 모든 태그를 선택)
$("*").css("border","2px solid blue")
- $("#아이디명") : 아이디 선택자 (아이디 속성에 지정한 값을 포함하는 요소 선택)
<body>
<h1 id="txt">선택자</h1>
<script>
$("#txt").css("color","red");
</script>
</body>
- $(".클래스명") : 클래스 선택자(클래스 속성에 지정한 값을 포함하는 요소)
<body>
<h1 class="txt">선택자</h1>
<script>
$(".txt").css("color","blue");
</script>
</body>
- $("요소명") : 요소명 선택자 (지정한 요소명 (tag name)과 일치하는 요소를 모두 선택)
$("h2").css("color", "green");
- $("요소선택1, 요소선택2, 요소선택n.."); : 그룹선택자 (한 번에 여러 개의 요소를 선택)
$("h1,h2").css("font-size","50px");
- $("요소명#id 값")
- $("요소명.class 값") : 종속 선택자(선택한 요소의 id 또는 class 값이 일치하는 요소 선택)
<body>
<h1 class="tit">h1태그</h2>
<h3 class="tit">h3태그 </h3>
<script>
$("h3.tit").css("border","1px solid black"); //h3태그만 적용
</script>
</body>
2. 인접 관계 선택자 :
직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는(이전, 다음) 요소 선택
- $("요소선택").parent(); : 부모 요소 선택자(선택한 요소를 감싸고 있는 부모요소 선택)
<body>
<div id = "inner_wrap"> //부모태그인 div 태그에 적용
<h1>그룹 선택자</h1>
<h2>요소 선택자</h2>
<h3 class="tit">종속 선택자</h3>
</div>
<script>
$("h1").parent().css("border","1px solid green");
</script>
</body>
- $("기준 요소 선택1 요소선택2") : 하위 요소 선택자(기준 요소로 선택한 하위요소만 선택)
$("#inner_wrap h1").css("color", "aqua"); //#inner_wrap 기준으로 하위요소에 적용
- $("요소선택 > 자식요소 선택")
- $("요소선택").children("자식요소선택")
- $("요소선택").children() : 선택된 요소를 기준으로 지정한 자식요소만 선택
$("#inner_wrap > p").css("color","pink");
*** 선택한 요소에 스타일을 적용하는 방법
1. 인자값을 사용해 css의 속성과 값을 전달
$("요소선택").css("속성명1","값1").css("속성명2","값2");
2. 객체를 사용해 css 속성과 값을 전달하는 방식
$("요소선택").css({"속성명1":"값1","속성명2":"값2"...});
- $("요소선택").prev() : 형(이전) 요소 선택자 (선택하는 요소를 기준으로 바로 이전 형제 요소만 선택)
$("h1").prev().css("color","yellow");
$("h1").prev().css({"color":"red","font-size":"40px"});
- $("요소선택").next() : 동생(다음) 요소 선택자(선택한 요소 기준으로 바로 다음 형제 요소만 선택)
$("h1").next().css("color","red");
- $("요소선택1 + 요소선택2") : 선택한 요소를(요소선택1) 기준으로 바로 다음에 오는 선택한 요소(요소선택2)만 선택
$(".txt + p").css("color","red");
- $("요소선택").preAll() : 전체 형(이전) 요소 선택자 (선택한 요소 기준으로 이전에 오는 전체 형제요소)
$("h1").prevAll().css({"color":"red","font-size":"40px"});
- $("요소선택").nextAll() : 전체 동생(다음) 요소 선택자 (선택한 요소 기준 다음에 오는 전체 형제 요소)
$("h1").nextAll().css({"color":"green","font-size":"40px"});
- $("요소선택")siblings(); : 전체 형제 요소 선택자 (선택한 요소의 모든 형제요소 선택)
$("h1").siblings().css("background-color","coral");
- $("요소선택")parents();
- $("요소선택")parents("요소선택"); : 상위 요소 선택자( 선택 요소 기준 모든 상위요소 또는상위요소 중 선택하고자 하는 요소)
$("h1").parents().css("border","1px solid green");
$(".txt1").parents("div").css("border","1px solid red");
- $("요소선택").closest("요소선택"); : 가장 가까운 상위 요소 선택자 (선택 요소 기준 가장 가까운 상위 요소만 선택_
$(".txt1").closest("div").css("background-color","pink");
'jquery' 카테고리의 다른 글
| JQuery_배열 관련 메서드 (0) | 2022.11.21 |
|---|---|
| JQuery_효과 메서드 (0) | 2022.11.18 |
| JQuery_탐색 선택자 (0) | 2022.11.17 |
| JQuery_이벤트 (0) | 2022.11.17 |
| JQuery (0) | 2022.11.15 |
