ㅁ jQuery 셀렉터는 jQuery 라이브러리의 가장 중요한 파트 중 하나이다.

jQuery 셀렉터는 html 태그들을 선택하고 조작할 수 있게 한다.

 

jQuery 셀렉터는 태그명을 기반으로 태그를 선택한다. 

당신은 아래와 같이 <p> 태그를 선택할 수 있다.


$("p")


ex) 버튼을 클릭하면 p태그가 사라진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>
 
<h2>This is a heading</h2>
 
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
 
<button>Click me to hide paragraphs</button>
 
</body>
</html>
 
cs


ㅁ #id 셀렉터

jQuery는 특정 태그를 찾기 위한 HTML의 id속성으로 #id 셀렉터를 사용한다.

id는 페이지 안에서 고유해야 하는 특징이 있고, 이는 #id 셀렉터를 사용 할 때도 동일하게 적용된다. 


표기방법 : $("#test")  

ex) 버튼을 클릭하면 id="test"인 태그가 숨겨진다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
</script>
</head>
<body>
 
<h2>This is a heading</h2>
 
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
 
<button>Click me</button>
 
</body>
</html>
 
cs


ㅁ .class 셀렉터

jQuery 클래스 셀렉터는 구체적인 클래스 태그를 찾는다. 


표기법 : $(".test")


ex) 버튼을 클릭하면 class="test"인 태그가 숨겨진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
        $("#test1").hide();
    });
});
</script>
</head>
<body>
 
<h2 class="test">This is a heading</h2>
 
<p class="test">This is a paragraph.</p>
<p id="test1">This is another paragraph.</p>
 
<button>Click me</button>
 
</body>
</html>
 
cs


 그 외에 다양한 셀렉터가 있으니 직접 실습하면서 알아보자.

$("*")Selects all elementsTry it
$(this)Selects the current HTML elementTry it
$("p.intro")Selects all <p> elements with class="intro"Try it
$("p:first")Selects the first <p> elementTry it
$("ul li:first")Selects the first <li> element of the first <ul>Try it
$("ul li:first-child")Selects the first <li> element of every <ul>Try it
$("[href]")Selects all elements with an href attributeTry it
$("a[target='_blank']")Selects all <a> elements with a target attribute value equal to "_blank"Try it
$("a[target!='_blank']")Selects all <a> elements with a target attribute value NOT equal to "_blank"Try it
$(":button")Selects all <button> elements and <input> elements of type="button"Try it
$("tr:even")Selects all even <tr> elementsTry it
$("tr:odd")Selects all odd <tr> elements

출처(https://www.w3schools.com/jquery/jquery_selectors.asp)

저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery Effects 제이쿼리 효과 - hide and show  (0) 2017.08.08
jQuery event 제이쿼리 이벤트 (2)  (0) 2017.08.07
jQuery event 제이쿼리 이벤트 (1)  (0) 2017.08.06
다양한 jQuery 셀렉터들 (Selector)  (0) 2017.07.27
jQuery 기초 및 특징  (0) 2017.07.25

+ Recent posts

티스토리툴바