-
선택자란?
선택자란 HTML 요소를 선택하여 가져온다. 제이쿼리 선택자는 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. 이때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 CSS는 정적이다 라고 표현한다.
하지만, 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있다.
DOM (문서 객체 모델)
문서 객체 모델(DOM, Document Object Model)이란 HTML 문서 객체 구조를 말한다. HTML 문서의 기본 객체 구조는 최상위 객체인 <html>이 있고 하위 객체로 <head>, <body>가 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html><body> 는 또 다른 여러 개의 태그를 포함하고 있다.
이때 문서 객체 모델에서는 모든 태그를 객체라고 부르며, 태그에는 기능과 속성이 포함되어 있다. 예를들어 <img> 태그는 이미지를 출력하는 기능이 있고 src, alt, width, height와 같은 속성을 포함하고 있다.
제이쿼리 선택자(기본형)
제이쿼리는 아래와 같은 형태를 기본으로 한다.
1. 선택한 요소에 지정한 스타일을 지정한다. $("CSS선택자").css("스타일 속성명", "값");
2. 선택한 요소에 지정한 속성을 적용한다. $("CSS선택자").attr("속성명", "값");
위의 CSS선택자는 태그들의 id, class를 가리킨다.
1. 아이디 선택자 : $("#아이디명")
2. 클래스 선택자 : $(".클래스명")
3. name 선택자 : $("tag_name[name=네임명]") : ex)$("input[name=search_value]")