티스토리 뷰

[개발]프로그래밍/jquery

[jquery] 기본 선택자 - *,아이디,클래스

좋은 블로그 2016. 9. 28. 08:11

1. 선택자 - 역할

jQuery에서 객체를 다룰 때 사용


코드에서 전체 또는 일부분에 해당하는 것의 속성을 수정하고자 할 때 사용


2. 선택자 - 전체 선택자

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>

<script>
$(document).ready(function () 
{
    $('*').css('color','blue');
});
</script>

<body>
<h1> test와 테스트 -1</h1>
<h2> test와 테스트 -2</h2>
<h3> test와 테스트 -3</h3>
<h4> test와 테스트 -4</h4>
<h5> test와 테스트 -5</h5>
</body>






◈ 결과화면



◈ 설명


표시된 모든 객체의 색깔을 파란색으로 바꾸는 것입니다


3. 선택자 - 태그 선택자

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>

<script>
$(document).ready(function () 
{
    $('h1,h2').css('color','blue');
});
</script>

<body>
<h1> test와 테스트 -1</h1>
<h2> test와 테스트 -2</h2>
<h3> test와 테스트 -3</h3>
<h4> test와 테스트 -4</h4>
<h5> test와 테스트 -5</h5>
</body>





◈ 결과화면



◈ 설명


객체 중에서 <h1>,<h2>에 해당하는 것 객체만 검정색에서 파란색으로 바꿉니다




4. 선택자 - 아이디 선택자

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>

<script>
$(document).ready(function () 
{
    $('#test1').css('color','blue');
});
</script>

<body>
<h1 id='test1'> test와 테스트 -1</h1>
<h2> test와 테스트 -2</h2>
<h3> test와 테스트 -3</h3>
<h4> test와 테스트 -4</h4>
<h5> test와 테스트 -5</h5>
</body>





◈ 결과화면



◈ 설명


표시된 객체 중에서 아이디가 test1에 해당하는 것만 검정색에서 파란색으로 바꿉니다


5. 선택자 - 클래스 선택자

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>

<script>
$(document).ready(function () 
{
    $('.blue').css('color','blue');
});
</script>

<body>
<h1 class='blue'> test와 테스트 -1</h1>
<h2> test와 테스트 -2</h2>
<h3 class='blue'> test와 테스트 -3</h3>
<h4> test와 테스트 -4</h4>
<h5> test와 테스트 -5</h5>
</body>





◈ 결과화면




◈ 설명


표시된 객체 중에서 클래스가 blue에 해당하는 것만 검정색에서 파란색으로 바꿉니다





6. 선택자 - 클래스 선택자

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>

<script>
$(document).ready(function () 
{
    $('.blue.bluet').css('color','blue');
});
</script>

<body>
<h1 class='blue'> test와 테스트 -1</h1>
<h2> test와 테스트 -2</h2>
<h3 class='blue bluet'> test와 테스트 -3</h3>
<h4> test와 테스트 -4</h4>
<h5> test와 테스트 -5</h5>
</body>





◈ 결과화면




◈ 설명


표시된 객체 중에서 클래스가 blue blute에 해당하는 것만 검정색에서 파란색으로 바꿉니다


'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] 필터 선택자 - :을 포함한 선택자  (0) 2016.09.28
[jquery] 속성 선택자 - 속성,구분기호,값  (0) 2016.09.28
[jquery] 자식 선택자 - >의 포함여부에 따른 선택  (0) 2016.09.28
[jqgrid] 기본적인 함수 정리  (0) 2016.09.05
[jquery] hide() , show() - 숨기기 , 보이기  (0) 2016.09.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday