1. 셀렉터
1) 별표 : 모든 노드
2) h3 : h3이라는 태그를 찾아라
3) .content : class ‘content’ 를 접근할때
4) #message : id가 message인 노드를 찾아라
5) div, .header, #menu : div태그와 header 클래스와 menu라는 id를 가지고 있는 노드를 찾아서 접근하자
2. 계층 셀렉터
1) div중에 id가 lectures인 자손 li 태그들을 의미(그 자식의 자식들은 자손)
2) div 밑에 자식 p를 의미 (바로 밑을 의미)
3) 아이디가 first인 다음 형제를 의미 (단수)
4) 아이디가 second인 다음 형제들을 의미 (복수)
3. 속성 셀렉터
-대괄호 안에 기술하는게 특징
1) div 태그에 id가 lectures인 li 자손들 가운데 href 속성이 #lec03인 요소를 찾아라
2) div 태그에 id가 lectures인 li 자손들 가운데 href 속성이 ‘http://’로 시작하는 요소를 찾아라.
3) src와 alt 속성이 들어가있는 요소를 찾아라
4.필터 셀렉터
인덱스를 1부터 시작함을 유의
11-01.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>11-01</title>
<style type="text/css">
div {
font-size: 12pt;
line-height: 16pt;
}
.header {
color: #000080;
font-size: 24pt;
}
.content {
color: #008000;
}
.footer {
color: #800080;
font-size: 14pt;
}
.evenitem {
background-color: #4596CE;
color: #FFFFFF;
}
.odditem {
background-color: #FFF5BA;
}
</style>
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#header').addClass('header');
$('#content').addClass('content');
$('#footer').addClass('footer');
$('#list > div:nth-child(2n)').addClass('evenitem');
$('#list > div:nth-child(2n+1)').addClass('odditem');
//jquery 객체는 앞에다 $를 붙임 가독성 때문에..
var $elements = $('#list > div');
$('#message').text('전체 강좌' + $elements.length + '건');
var resultStr = '';
//<h4>강좌</h4>를 id result뒤에 붙어라라는 뜻
$('<h4>강좌</h4>').appendTo('#result');
//각각의 원소에대해 함수를 수행해라
$elements.each(function(index, element){
resultStr = (index+1) + '.' + $(element).text();
$('#result').append(resultStr);
$('#result').append('<br/>');
});
});
</script>
</head>
<body>
<div id="header">
<p>jQuery Selector</p>
</div>
<div id="content">
<div>
<p id="message">
</p>
</div>
<div id="list">
<div>안드로이드</div>
<div>iOS</div>
<div>하이브리드 앱</div>
<div>모바일 앱 기획</div>
<div>UX</div>
</div>
<div>
<p id="result">
</p>
</div>
</div>
<div id="footer">
<p>© 2012</p>
</div>
</body>
</html>
출력 화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - jQuery Mobile 컴포넌트 - 폼 (0) | 2015.01.30 |
|---|---|
| Javascript - jQuery Mobile 컴포넌트 - 리스트뷰 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바 (0) | 2015.01.29 |
| Javascript - jQuery 기본 효과, 페이딩, 슬라이딩 (0) | 2015.01.29 |
| Javascript - jQuery와 jQuery Mobile 개요 및 aptana 개발환경 세팅 (0) | 2015.01.27 |
| Javascript - 간단한 가위바위보 게임 만들기 (2) | 2015.01.27 |
| Javascript - 웹브라우저 별 이벤트 처리 (0) | 2015.01.25 |
| Javascript - 객체 생성 과정 및 상속 (0) | 2015.01.25 |