|
|
자바스크립트에서 html 요솔를 선택하기 위해서는 소스가 복잡해지는 문제점이 있었습니다.
Css와 같이 스타일을 지정하고 이를 활용하여 jquery에서 작업 요소들에 대해 필요한 동작을 행할 수 있습니다.
기본적인 jQuery 사용방법입니다.
Html 에서의 ID지정방식
예)<div id=“test”>그런저런 내용~</div>
CSS의 지정한 ID활용방식
예) #test{스타일속성:값;}
jQuery의 지정한 ID 활용방식
예) $(“#test”)
1. 기본 선택자(basic selector)
1-1 범용(Universal) 선택자
html페이지내 모든 html요소를 선택(head, body, script.. 등등)
1-2. 명시적 선택자
특정한 html 태그 요소에 대해서 선택(p, div .. 등등)
1-3. 복수 선택자
html태그 요소를 여러개 선택하여 작업
예)
■ Html 소스활용
예)<div>~</div><p>~</p>, <span>~</span>
■ CSS의 소스 활용
예)div, p, span{스타일속성:값;}
■ jQuery의 소스 활용
예) $(“div, p, span”)
2 . 계층 선택자(hierarchy selector)
2-1 하위 선택자
부모 요소에 속해 있는 자식 요소를 반환한다.
ex)
■ Html 소스활용
<html>
<ul> 빵1
<div><ul>빵2</ul></div>
</html>
■ CSS의 소스 활용
div >ul{스타일속성:값;}
■ jQuery의 소스 활용
$(“div >ul”)
풀어서 설명하자면
위 태그에서 div와 div의 사이에 있는 ul태그 즉,
빵2만을 대상으로 작업할 수 있다는 것
2-2. 요소 선택자
동일 클래스 이름을가진 태그요소를 선택
ex)
■ Html 소스활용
<html>
<div class="b1"> 빵1
<div class="b2"> 빵2
<a><div class="b1">빵3</div></a>
<a><div class=b2>빵4</div></a>
<p class="b1">빵5</p>
</html>
■ CSS의 소스 활용
div >div.b1{스타일속성:값;}
■ jQuery의 소스 활용
$(“div.b1”)
풀어서 설명하자면
b1의 클래스를 가지고 있는 div태그를 제어할 수 있다는 것입니다.
즉, 빵1과 빵3을 제어할 수 있습니다.
예제)
3lesson.zip<html>
<head>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function()//현재 문서가 준비되면 함수를 준비하고 사용하겠다.
{
$("ul.list>li").css("background","yellow");
//클래스가 list인 ul태그를 선택하고 그 안에 있는 li를 선택
});
</script>
</head>
<body>
<ul class="list">
<li>가
<li>나
<li>다
<li>라
</ul>
</body>
</html>
자손선택자
선택자1 에 포함되어 있는 1-1 요소 반환
$("parent child")
다음 선택자
요소1+요소2
요소1의 형제 엘리먼트로 바로 다음에 오는 요소 2 선택한다.
예) $("div+p")
예제)
<html>
<head>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function()
{
$("label+input").css("border","1px solid #FF0000");
});
</script>
</head>
<body>
<form>
<fieldset>
<legend>필수입력사항</legend>
<label>아이디</label><input type=text>
<label>비밀번호</label><input type="password">
</fieldset>
<label>이름 <input type=text></label><br/>
<label>이메일 <input type=text></label><br/>
<label>주소 <input type=text></label><br/>
</body>
</html>
다음 모든 선택자
앞에 표시된 요소 바로 다음에 나오는 요소까지 모든 요소 선택
$("div~p")
예제)
<html>
<head>
<style>
div{
float:left;
width:50px;
height:50px;
padding:10px;
margin:10px;
background:#aadd99;
}
</style>
<script src="js/jquery-1.12.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#3 ~ div").css("border","thin solid #FF0000");
//id3의 div는 빼고 다음 모든 div 태그를 선택
});
</script>
</head>
<body>
<div>test1 </div>
<div>test2 </div>
<div id=3>test3 </div>
<div id=4>test4 </div>
<div>test5 </div>
<div>test6 </div>
</body>
</html>
속성 선택자(attribute selector)
속성(ATTRIBUTE)-HTML에서해당 객체 이름, 타입, 값 들을 표시하기 위한 요소입니다.
예) <input type="text" name="id">
표기방법 |
설명 |
INPUT[TYPE=“TEXT”] |
INPUT 태그 중 타입이 TEXT인 요소들을 선택 |
DIV[ID^=“DATA”] |
ID가 “DATA”로 시작하는 DIV태그 요소들을 선택 |
DIV[ID$=“DATA”] |
ID값이 ‘DATA’로 끝나는 DIV태그 요소 선택 |
DIV[ID*=“DATA”] |
ID값이 ‘DATA’를 포함하는 DIV태그 요소 선택 |
| DIV[ID !=“DATA”] | ID값이 “DATA”인 것을 제외한 나머지 DIV태그 요소 선택 |
'웹프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery-DOM요소 제어하기 (0) | 2016.03.28 |
|---|---|
| jQuery의 메소드 (0) | 2016.03.26 |
| jQuery의 개념 및 기초예제 (0) | 2016.03.24 |
| jQuery 설치환경 구성하기 (0) | 2016.03.24 |
| innerHTML을 이용한 ajax (0) | 2011.05.24 |