dom : html 문서 내에서 부모-자식 관계, 형제관계, 조상-후손 관계를 트리 구조로 정의
node : 트리 구조를 형성하는 가지 하나하나 html문서 내에 사용되는 모든 요소
//- 1. 부모자식관계(Child Selector)
$("parent > child")
// 해당 부모 요소의 아래 자식요소를 지정
// - 2.조상후손관계(Descendant Selector)
$("ancestor descendant")
// 해당요소의 후손 요소까지도 지정
// - 3.형제요소(Next Adjacent Selector)
$("prev + next")
// prev 요소의 바로 다음에 next 요소가 오는 경우에만 지정
// - 4.형제요소(Next Siblings Selector)
$("prev ~ siblings")
// prev 요소의 형제 관계에 있는 next 요소만 지정
1. javascript의 window.onload와 같은 기능이지만 이 기능보다 정확하게 동작
2. 스크립트가 먼저 작성되고 body요소가 나중에 작성되기 때문에 스크립트 오류가 발생하는 것을 방지
3. 문서내에 한번만 선언
//4
$(document).ready(function(){
실행할 문장 전체
})
** jQuery SET UP
<!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>Practice jQuery</title>
</head>
<body>
<div id="demo" class="box"></div>
<!-- 1 라이브러리 불러오기 -->
<!-- 1-1 local import -->
<script src="jquery-3.6.4.min.js"></script>
<!-- 1-2 CDN -->
<!-- <script src=" https://code.jquery.com/jquery-3.6.4.min.js "></script> -->
<!-- 2. 문서가 준비되었는지 확인하기 -->
<!-- console 창에 $를 인식 못하면 jQuery가 제대로 불러오지 못한 것이다. -->
<script>
// js : window.onload = function(){}
// jq : $(document).ready(function(){})
$(document).ready(function(){
// jquery는 $(document).ready 를 생략할 수 있다
})
</script>
</body>
</html>
* Selector - Basic
// 1
$("element")
// - 특정 엘리먼트 (태그) 지정
//EX)
$("tr").addClass("blue")
// 2
$("#id")
// - 특정 아이디 지정
//EX)
<a href="" id="test"> LINK </a>
$("#text").addClass("red");
// 3
$(".class")
// - 특정 클래스 지정
//EX)
<a href="" class="test"> LINK </a>
$(".text").addClass("red");
// 4
$("selector1,selector2 ,selectorN")
// - 다중 선택자, 여러 개의 선택자에 동시에 효과 적용
//EX)
$("h2,h3,h4").addClass("pink")
** attribute, 속성값 **
1. Equals Selector
$("element[attribute = 'value']")
// - 특정 엘리먼트 내에 속성과 값이 일치하는 요소 지정
//EX)
$("a[href='http://blog.naver.com']"}.addClass("red");
2.Contains Selector
$("element[attribute*='value']")
//- 특정 엘리먼트 내에 속성과 값을 포함하는 요소 지정
//EX)
$("a[href*='naver]").addClass("red";
3. Starts With Selector
$("element[attribute^='value']")
// 특정 엘리먼트 내에 지정한 속성값으로 시작하는 요소 지정
//EX)
$("a[href^='http']").addClass("red");
4. Ends With Selector
$("element[attribute$='value']");
// - 특정 엘리먼트 내에 지정한 속성값으로 끝나는 요소 지정
// ex)
$("a[href$='net]").addClass("red");
5. Contains Word Selector
$("element[attribute~='value']")
//- 특정 엘리먼트 내에 공백을 포함한 속성값이 일치하는 요소 지정
//EX)
// <a href="http://naver.com" title="Go to Naver">
$("a[title~='to']").addClass("red");
6.Not Equal Selector
$("element[attribute!='value'}")
//- 해당 속성값을 갖지 않는 요소만 지정
//EX)
$("a[href!='naver']").addClass("red")
7. Contains Prefix Selector
$("element[attribute|='value']");
//- 해당 속성값을 가지거나 해당 속성값에 "-"으로 연결되는 속성을 가진 요소 지정
//EX)
<a href="" hreflang="en">
<a href="" hreflang="en-US">
$("a[href]='en']).addClass("red");
8. Has Attribute Selector
$("element[attribute]");
//- 해당 속성을 가지는 요소만 지정
//EX)
$("a[href]").addClass("red");
9. Multiple Attribute Selector
$("element[attribute='value'][attribute2='value2']");
//- 두가지 이상의 속성과 값이 모두 일치하는 요소 지정
//EX)
$("a[title='네이버'][name='top']").addClass("red");