준비중..
02 셀렉터(selector)
# 셀렉터(selector)
## 셀렉터란?
jQuery는 HTML문서 무언가를 찾고, 특정 작업을 수행한다.
> find something, do something
여기서 무언가를 찾기 위해 필요한 도구가 `셀렉터`이다.
```
$('somthing')
```
## 셀렉터 사용 예
### 기본 태그 선택
아래는 h1요소를 선택하여 배경 색을 노랑으로 변경하는 예이다.
```
<Script>
$('h1').css("background-color", "yellow");
</Script>
```
### id 태그 선택
id 값을 가진 태그를 선택할때는 `#`을 사용한다.
```
<Script>
$('#awesome-id').css("background-color", "yellow");
</Script>
```
### class 태그 선택
class 값을 가진 태그 선택은 `.`을 사용한다.
```
<Script>
$('.cool-class').css("background-color", "yellow");
</Script>
```
## 문제
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.yellow {
border: solid 2px yellow;
}
</style>
<Script src="http://code.jquery.com/jquery-latest.js"></Script>
</head>
<body>
<h1 class="blue">프로필</h1>
<ul>
<li id="name">이름: </li>
<li id="age">나이: </li>
<li id="sex">성별: </li>
</ul>
<h1>좋아하는 음식</h1>
<ul id="foods"></ul>
<h1>취미 생활</h1>
<ul class="blue"></ul>
<input name="superman" value="SUPER MAN" />
<input name="iron man" value="IRON MAN" />
<input name="bat man" value="BAT MAN" />
<input name="joker" value="JOKER"/>
<Script>
// 이곳에 jQuery 문법을 추가.
</Script>
</body>
</html>
```
### 실습 1: "id selector" 와 text()
> "id selector"와 text(value) 사용하여
> 이름, 나이, 성별에 대한 내용을 각각 추가하시오
### 실습 2: "element selector"와 css()
> "element selector"와 css(propertyName, value)를 사용하여
> 모든 h1 태그의 배경색을 검정, 글자색을 흰색으로 바꾸시오.
### 실습 3: "class selector"와 css()
> "class selector"와 css(propertyName, value)를 사용하여
> "blue" 클래스를 가진 모든 요소에 "2px solid blue"의 "border"를 추가하시오.
### 실습 4: "id selector"와 html()
> "id가 food인 요소"에 html(htmlString)을 사용하여
> 피자, 치킨, 삼겹살 리스트를 추가해주세요.
### 실습 5: "attriute selector"와 addClass()
> name속성이 joker인 input 요소를 선택하여 class속성 값에 "yellow"를 추가해주세요.
### 참고자료
+ [ID 선택자와 Element 선택자](http://www.sqler.com/382391)
+ [Class 선택자와 Multiple 선택자](http://www.sqler.com/382519)
+ [개체의 속성값을 이용하여 선택하기](http://www.sqler.com/384932)