jQuery Selectors
jQuery Selectors는 html elements를 선택할수 있고 조작을 할 수 있습니다.
CSS를 기반으로 하며 id, class, type, attributes(속성, 속성값)등 보다 많은것을 조작할 수 있습니다.
"조작"한다는 말은 예를 들어 id=test 가는 id값이 있을경우 jquery를 이용하여 id값이 test 를 찾아서 test안의 내용을 원하는 형태로 바꿀수 있다는 말입니다.
Element Selector
jQuery element selector은 기본적으로 태그(tag)에도 적용이 가능합니다.
%("p")
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
p태그에 있는 내용을 숨기라는 내용입니다.
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>첫번째 구문입니다.</h2>
<p>두 번째 구문입니다.</p>
<p>세 번째 구문입니다..</p>
<button>Click me</button>
</body>
</html>
↓
↓
↓
위 그림은 두 가지 속성을 보여줍니다.
첫번째 버튼을 클릭했을때 두번째 p태그 안에 있는 구문을 숨기는 내용입니다.
$("button").click(function() 이부분이 버튼을 클릭했을때를 담당하고, $("p").hide() 이 부분이 p태그의 내용을 숨기라는 의미 입니다.
#id Selector
#id jQuery selector 는 id 속성에 해당되는 특정부분을 찾습니다.
하나의 고유값을 찾고자 할 경우 #id를 사용해야 합니다.
$("#test")
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
// id값 test에 해당되는 구문을 숨기라는 의미입니다.
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>첫번째 구문입니다.</h2>
<p>두번째 구문입니다.</p>
<p id="test">세번째 구문입니다..</p>
<button>Click me</button>
</body>
</html>
↓
↓
↓
위 그림도 두 가지 속성을 보여줍니다.
첫번째 버튼을 클릭했을때 두번째 id값 test 안에 있는 구문을 숨기는 내용입니다.
$("button").click(function() 이부분이 버튼을 클릭했을때를 담당하고, $("#test").hide()이 부분이 id test 에 해당하는 내용을 숨기라는 의미 입니다.
.class Selector
class jQuery selector 는 class 속성에 해당되는 특정부분을 찾습니다
$(".test")
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
// 버튼을 클릭했을때 test 클래스값을 숨기는 내용입니다.
관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">첫번째 구문입니다.</h2>
<p class="test">두번째 구문입니다.</p>
<p>세번째 구문입니다.</p>
<button>Click me</button>
</body>
</html>
↓
↓
↓
위 그림도 두 가지 속성을 보여줍니다.
첫번째 버튼을 클릭했을때 두번째 class값 test 안에 있는 구문을 숨기는 내용입니다.
$("button").click(function() 이부분이 버튼을 클릭했을때를 담당하고, $(".test").hide()이 부분이 class test 에 해당하는 내용을 숨기라는 의미 입니다.
그 밖에 jQuery Selectors 예제
$("*") : 모든 요소를 선택합니다.
$(this) : 현재 html 요소를 선택합니다.
$("p.intro") : p태그에 class값이 intro 인것을 선택합니다.
$("p:first") : p태그의 첫번째 요소를 선택합니다.
$("ul li:first") : 첫번째 ul 에서 li 에 해당하는 첫번째 요소를 선택합니다.
$("ul li:first-child") : 모든 ul의 첫번째 li 요소를 선택합니다.
$("[href]") : href요소를 선택합니다.
$("a[target='_blank']") : a 태그의 "_blank" 요소를 선택합니다.
$("a[target!='_blank']") : a 태그의 "_blank" 요소가 아닌것을 선택합니다.
$(":button") : 모든 button 요소를 선택합니다.
$("tr:even") : tr에 해당하는 짝수 요소를 선택합니다.
$("tr:odd") : tr에 해당하는 홀수 요소를 선택합니다.
'jQuery > jQuery Tutorial ' 카테고리의 다른 글
| jQuery Mobile 아이콘 (0) | 2013.11.07 |
|---|---|
| jQuery Events hover(), focus(), blur() (0) | 2013.05.10 |
| jQuery events mouseenter(), mouseleave(), mousedown(), mouseup() (0) | 2013.05.10 |
| jQuery Events ( click(). dbclick() ) (0) | 2013.05.10 |
| jQuery 기초 (0) | 2013.05.08 |
