2. jQuery 기초 - 셀렉터 (2)
페이지 정보
작성자 관리자 댓글 0건 조회 534회 작성일 22-01-08 11:23본문
2. jQuery 기초 - 셀렉터 (2)
실습 : jquery02.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="test1">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
<p>문단1</p>
<p>문단2</p>
<p>문단3</p>
</div>
</body>
</html>
스타일을 추가한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
#test1{
width:300px;
}
#test1 div{
border:2px solid lightgray; padding:10px; margin-top:5px;
}
#test1 p{
border:2px solid lightgray; padding:10px; margin-top:5px; margin-bottom:0px;
}
</style>
</head>
<body>
<div id="test1">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
<p>문단1</p>
<p>문단2</p>
<p>문단3</p>
</div>
</body>
</html>
Elements에서 요소를 선택하면 스타일의 기본값을 확인할 수 있다. 수정해야 할 부분도 찾기 쉽게 된다.
다음과 같이 수정한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
#test1{
width:300px;
}
#test1 div{
border:2px solid lightgray; padding:10px; margin-top:5px;
}
#test1 p{
border:2px solid lightgray; padding:10px; margin-top:5px; margin-bottom:0px;
}
</style>
</head>
<body>
<div id="test1">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
<p>문단1</p>
<p>문단2</p>
<p>문단3</p>
</div>
<div class="btns">
<input type="button" value="초기화" ><br/>
<input type="button" value="div" ><br/>
<input type="button" value="p" ><br/>
</div>
</body>
</html>
div태그의 background를 green으로 수정한다.
$('div').css('background','green');
test1의 div만 background를 lightgreen으로 바꾼다.
$('#test1 div').css('background','lightgreen');
test1의 p만 background를 yellow로 바꾼다.
$('#test1 p').css('background','yellow');
test1의 모든 요소의 background를 삭제한다.
$('#test1 *').css('background','');
실습 : jquery02.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
#test1{
width:300px;
}
#test1 div{
border:2px solid lightgray; padding:10px; margin-top:5px;
}
#test1 p{
border:2px solid lightgray; padding:10px; margin-top:5px; margin-bottom:0px;
}
.btns {
width:300px; margin-top:5px; text-align:center;
}
.btns input{
background:#aae; border:1px solid gray;
width:300px; margin-top:10px;padding:5px;
border-radius:5px;
}
</style>
<script type="text/javascript">
function init(){
$('#test1 *').css('background', '');
}
</script>
</head>
<body>
<div id="test1">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
<p>문단1</p>
<p>문단2</p>
<p>문단3</p>
</div>
<div class="btns">
<input type="button" value="초기화" onclick="init();"><br/>
<input type="button" value="div" onclick="init();$('#test1 div').css('background','lightyellow')"><br/>
<input type="button" value="p" onclick="init();$('#test1 p').css('background','lightblue')"><br/>
</div>
</body>
</html>
div버튼을 클릭하면 div 태그의 색이 바뀐다.
p버튼을 클릭하면 p 태그의 색이 바뀐다.
실습 : jquery03.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
#test1{
width:300px;
}
#test1 div{
border:2px solid lightgray; padding:10px; margin-top:5px;
}
#test1 p{
border:2px solid lightgray; padding:10px; margin-top:5px; margin-bottom:0px;
}
.btns {
width:300px; margin-top:5px; text-align:center;
}
.btns input{
background:#aae; border:1px solid gray;
width:100px; margin-top:10px;padding:5px;
border-radius:5px;
}
</style>
<script type="text/javascript">
function init(){
$('#test1 *').css('background', '');
}
</script>
</head>
<body>
<div id="test1">
<div>메뉴1</div>
<div>메뉴2</div>
<div>메뉴3</div>
<div>메뉴4</div>
<div>메뉴5</div>
<div>메뉴6</div>
<div>메뉴7</div>
</div>
<div class="btns">
<input type="button" value="초기화" onclick="init();">
<input type="button" value="첫번째요소" onclick="init();$('#test1 div:first').css('background','lightyellow')">
<input type="button" value="네번째요소" onclick="init();$('#test1 div:eq(3)').css('background','lightblue')">
<input type="button" value="네번째보다큰요소" onclick="init();$('#test1 div:gt(3)').css('background','lightblue')">
<input type="button" value="div:lt(3):last" onclick="init();$('#test1 div:lt(3):last').css('background','lightblue')">
<input type="button" value="마지막요소" onclick="init();$('#test1 div:last').css('background','lightyellow')">
<input type="button" value="div:not(:last)" onclick="init();$('#test1 div:not(:last)').css('background','lightyellow')">
<input type="button" value="div:not(:first, :last)" onclick="init();$('#test1 div:not(:first, :last)').css('background','lightyellow')">
<input type="button" value="div:even" onclick="init();$('#test1 div:even').css('background','lightyellow')">
<input type="button" value="div:odd" onclick="init();$('#test1 div:odd').css('background','lightyellow')">
<input type="button" value="#test1 div:first, #test1 div:last" onclick="init();$('#test1 div:first, #test1 div:last').css('background','lightyellow')">
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.