다양한 Selector 연습
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<script src="jquery-1.11.1.js"></script>
<title>셀렉터 연습</title>
<style type="text/css">
a{
cursor:crosshair !important;
color: BLACK;
}
.cls{
color: BLACK;
background-color: WHITE;
}
</style>
<script type="text/javascript">
$(document).ready(f1);
function f1(){
$(".cls").css("color","AQUA");
$(".cls").css("background-color","green");
// .cls 클래스이름
//$("a").css("color","aqua");
//$("a").css("background-color","green");
// a 태그이름
//$("#link").css("color","green");
// css 적용된 상태의 link
// 메소드 체인 (연속 메소드 호출 가능하다)
//$("#link").css("background-color","red");
// id 속성 #....
/* $("h1","input").css("color","AQUA").
css("background-color","GREEN"); */
// input type중 text
//$("input[type='text']").css("color","AQUA").
//css("background-color","GREEN");
//$("input[type*='word']").css("color","AQUA").
//css("background-color","GREEN");
// * 표시는 포함한것, $는 무조건 word인것
// input.type.word로 끝나는것
$("option:selected").css("color","BLUE").
css("background-color","YELLOW");
// e다중선택 가능 요소들 :each();
}
</script>
</head>
<body>
<h1 class="cls">jquery 시작합니다.</h1><br>
<a class="cls" id="link" href="">와우!</a><br>
<a href="">열심히 삽니다.</a><br>
<H1>
<input type="text" value="문자입력"/><br>
</H1>
<input type="password" value="안보임"/><br>
<input type="checkBox" value="관리자">관리자
<input type="checkBox" value="사용자" checked="checked">사용자
<select>
<option value="짬뽕">짬뽕</option>
<option value="짜장">짜장</option>
<option value="탕수">탕수</option>
</select>
</body>
</html>
selector.html