티스토리 뷰

[개발]프로그래밍/jquery

[jquery] 속성 선택자 - 속성,구분기호,값

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

1. 속성 선택자 - 역할

기본 선택자 뒤에 붙어서 사용


2. 속성 선택자 - 유형

 형태

역할 


기본요소[속성 = 값]


속성하고 값이 정확히 일치한 객체 선택


 기본요소[속성 ^= 값]


속성이 값으로 시작하는 객체 선택

 

기본요소[속성 $= 값]


속성이 값으로 끝나는 객체 선택


기본요소[속성 *= 값]


속성이 값을 포함하는 객체 선택 


3. 속성 선택자 - 예제코드

◈ 코드


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
26
27
28
29
30
31
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function() 
{
 
 $('input[type="password"]').css('color','blue');
 
 $('input[type^="p"]').css('color','blue');
 
 $('input[type$="d"]').css('color','blue');
 
 $('input[type*="a"]').css('color','blue');
 
});
</script>
 
<body>
    <div>
        <input type='text' value='test_1'></input>
        <br>
        <input type='text' value='test_2'></input>
        <br>
        <input type='text' value='test_3'></input>
        <br>
        <input type='password' value='test1'></input>
        <br>
        <input type='password' value='test2'></input>
        <br>
    </div>
</body>





◈ 결과화면




◈ 설명


 결과 화면을 보면 type 이 password 인 부분만 색깔이 파란색으로 변해 있습니다


 코드에서 보는 4개는 결국은 같은 결과 화면을 보여줍니다


 즉 4개 중 1개만 써도 결과 화면이 나타납니다


 input[type="password"] : input type이 password 와 일치하는 것을 찾아 CSS 작업을 합니다


 input[type^="p"] : input type이 p로 시작하는 것을 찾아서 CSS 작업을 합니다


 input[type$="d"] : input type이 d로 끝나는 것을 찾아서 CSS 작업을 합니다


 input[type*="a"] : input type이 a를 포함한 것을 찾아 CSS 작업을 합니다




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

[jquery] addClass() ,removeClass() - 클래스 속성 추가 , 삭제  (0) 2016.09.30
[jquery] 필터 선택자 - :을 포함한 선택자  (0) 2016.09.28
[jquery] 자식 선택자 - >의 포함여부에 따른 선택  (0) 2016.09.28
[jquery] 기본 선택자 - *,아이디,클래스  (0) 2016.09.28
[jqgrid] 기본적인 함수 정리  (0) 2016.09.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday