반응형
1. 전체 선택자(wildcard selector) : *
<%@ page language ="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content ="text/html; charset=UTF-8">
<title> Insert title here</title>
<script type= "text/javascript" src = "./js/jquery-2.1.1.js" ></script >
<script type= "text/javascript">
// jQuery의 시작
$(document).ready( function(){
// * : html tag 전부 선택 (문서 전체에서)
// css() : 인자 설정
$( '*').css( 'color', 'red')
});
</script>
</head>
<body>
<h1> Hello jQuery</h1>
</body>
</html>
2. 태그선택자
<%@ page language ="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content ="text/html; charset=UTF-8">
<title> Insert title here</title>
<script type= "text/javascript" src = "./js/jquery-2.1.1.js" ></script>
<script type= "text/javascript">
$(document).ready( function(){
/* $('h1').css('color', 'red')
$('h2').css('color', 'red')
아래와 같이 변경 가능 */
$( 'h1, h2').css( 'color', 'red')
});
</script>
</head>
<body>
<h1> Hello jQuery h1</h1>
<h2> Hello jQuery h2</h2>
<h3> Hello jQuery h3</h3>
</body>
</html>
3. ID 선택자
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src = "./js/jquery-2.1.1.js"></script>
<script type="text/javascript">
// jQuery의 시작
$(document).ready(function(){
$('#h1').css('color', 'orange');
// h1 태그, id h3 선택, 의미는 없음 id는 태그별로 부여하기 때문
$('h1#h3').css('color', 'red');
});
</script>
</head>
<body>
<h1 id = "h1">Hello jQuery h1</h1>
<h2 id = "h2">Hello jQuery h2</h2>
<h1 id = "h3">Hello jQuery h1</h1>
<h2 id = "h4">Hello jQuery h2</h2>
</body>
</html>
4. 클래스 선택자
<%@ page language = "java" contentType= "text/html; charset=UTF-8"
pageEncoding= "UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content = "text/html; charset=UTF-8">
<title> Insert title here</title>
<script type= "text/javascript" src = "./js/jquery-2.1.1.js" ></script >
<script type= "text/javascript" >
// jQuery의 시작
$(document).ready( function(){
// $('.c1').css('color','orange'); // 전체 orange
// $('h1.c1').css('color','orange'); // h1의 c1만 orange
$( '.c1.c2').css( 'color', 'orange'); // 클래스 c1, c2인 것만 orange
});
</script>
</head>
<body>
<h1 class = "c1" >Hello jQuery h1 </h1>
<h2 class = "c1 c2" >Hello jQuery h2 </h2> <!-- 클래스가 2개 -->
<h1 class = "c1" >Hello jQuery h1 </h1>
<h2 class = "c2" >Hello jQuery h2 </h2> <!-- 클래스가 2개 -->
</body>
</html>
5. 자손과 후손 선택자
자손 : body 태그를 기준으로 할때 그 바로 아래 있는 태그 (1대)
후손 : body 태그아래 있는 모든 문서 (밑에 전부다)
<%@ page language ="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content ="text/html; charset=UTF-8">
<title> Insert title here</ title>
<script type= "text/javascript" src = "./js/jquery-2.1.1.js" ></script >
<script type= "text/javascript">
$(document).ready( function(){
// $('body > *').css('color','red');
// body밑에 모든 문서 선택 (후손, div태그에 속성이 들어가고 밑으론 상속)
$( 'body *').css( 'color', 'red');
// body 밑에 모든 문서 선택 (모든 태그에 속성이 들어감)
});
</script>
</head>
<body>
<div>
<ul>
<li>사과 </li>
<li>수박 </li>
<li>딸기 </li>
<li>키위 </li>
</ul>
</div>
</body>
</html>
6. 속성 선택자
요소[속성=값] 속성과 값이 같은 문서 객체를 선택
요소[속성|=값] 속성 안의 값이 특정 값과 같은 문서 객체 선택
요소[속성~=값] 속성 안의 값이 특정 값을 단어로 시작하는 문서 객체 선택
요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 문서 객체 선택
요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 문서 객체 선택
요소[속성*=값] 속성 안의 값이 특정 값을 포함하는 문서 객체 선택
<%@ page language ="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content ="text/html; charset=UTF-8">
<title> Insert title here</title>
<script type= "text/javascript" src = "./js/jquery-2.1.1.js" ></script >
<script type= "text/javascript">
$(document).ready( function(){
$( 'input[type="text"]').val('Hello jQuery' );
// input의 타입이 text인 곳에 값을 Hello jQuery를 할당
});
</script>
</head>
<body>
<input type = "text"/>
<input type = "password"/>
<input type = "radio"/>
<input type = "checkbox"/>
<input type = "file"/>
</body>
</html>
7. 입력 양식 필터 선택자
<%@ page language ="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content ="text/html; charset=UTF-8">
<title> Insert title here</title>
<script type= "text/javascript" src = "./js/jquery-2.1.1.js" ></script >
<script type= "text/javascript">
$(document).ready( function(){
setTimeout( function(){
var value = $( 'select > option:selected').val();
alert(value)
}, 5000);
});
</script>
</head>
<body>
<select >
<option >사과 </option >
<option >수박 </option >
<option selected >딸기 </option >
<option >키위 </option >
</select >
</body>
</html>
8. 위치 필터 선택자
<%@ page language ="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content ="text/html; charset=UTF-8">
<title> Insert title here</title>
<script type= "text/javascript" src = "./js/jquery-2.1.1.js" ></script >
<script type= "text/javascript">
$(document).ready( function(){
// tr:odd tr의 홀수열에
$( 'tr:odd').css( 'background', '#F9F9F9');
// tr:even tr의 짝수열에
$( 'tr:even').css( 'background', '#9F9F9F');
// 메서드 체이닝
$( 'tr:first').css( 'background', '#000000').css( 'color', '#FFFFFF');
});
</script>
</head>
<body>
<table >
<tr><th>이름 </th><th >혈액형 </th ><th >지역 </th ></tr >
<tr><td>강민수 </td><td >AB형 </td ><td >서울 송파</td></tr>
<tr><td>구지연 </td><td >B형 </td ><td >미국 캘리포니아</td></tr>
<tr><td >김미화 </td><td >AB형 </td ><td >미국 메사추세츠</td></tr>
<tr><td>김선화 </td><td >O형 </td ><td >서울 강서</td></tr>
<tr><td>남기주 </td><td >A형 </td ><td >서울 노량진</td></tr>
<tr><td>윤하린 </td><td >B형 </td ><td >서울 용산</td></tr>
</table >
</body>
</html>
9. 함수 필터 선택자
<%@ page language ="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content ="text/html; charset=UTF-8">
<title> Insert title here</title>
<script type= "text/javascript" src = "./js/jquery-2.1.1.js" ></script>
<script type= "text/javascript">
$(document).ready( function(){
$( 'tr:eq(0)').css( 'background', '#000000').css( 'color', 'white');
$( 'td:nth-child(3n+1)').css( 'background', 'gray');
$( 'td:nth-child(3n+2)').css( 'background', 'lightgray');
$( 'td:nth-child(3n)').css( 'background', 'white');
});
</script>
</head>
<body>
<table >
<tr>
<th >이름 </th><th>혈액형 </th><th>지역 </th>
</tr>
<tr>
<td>강민수 </td><td>AB형 </td><td>서울 송파</td>
</tr>
<tr>
<td>구지연 </td><td>B형 </td><td>미국 캘리포니아</td>
</tr>
<tr >
<td >김선화 </td ><td >O형 </td ><td >서울 강서</td>
</tr >
</table>
</body>
</html>
반응형
'개발의 흔적 > Front' 카테고리의 다른 글
| CSS정리 (0) | 2016.02.22 |
|---|---|
| HTML정리 (0) | 2016.02.22 |
| input 박스 name과 id의 차이 (0) | 2016.02.01 |
| JavaScript, jstl Select박스 원하는 값 선택 (0) | 2016.02.01 |
| jstl 사용법 (0) | 2016.01.22 |