[선택자와 함께 사용하면 편리한 메서드들]
- 메서드 종류
|
종류 |
사용법 |
설명 |
|
is() |
$("li").is(".visible") |
선택한 <li> 요소가 보이면 true를 반환함. |
|
noConflict() |
var m=$.noConflict(); m("h1").width(100); |
선택자 메서드를 사용할 때 "$"를 앞에 붙여 사용했음. $.onConflict()를 사용하면 "$" 메서드를 변수에 참조시켜 "$"문자 대신 임의의 문자를 지정하여 사용할 수 있음. |
|
get() |
$("li").get(0).style.color="red" |
제이쿼리로 선택한 요소에 get(0) 메서드를 적용하면 자바스크립트에 DOM 선택자로 선택한 태그로 인식되어 이전 자바스크립트의 DOM 방식을 따름. |
|
each() / $.each() |
$("lI").each(function(){...}; / $.each($("li"), function(){...}); |
선택한 요소들을 각각 순차적으로 접근해 선택해 옴. |
|
map() |
배열 객체.map(함수) |
배열 데이터를 변환시켜 다시 새로운 배열 객체를 만듦. |
1) is() 메서드
- 선택한 요소의 상태가 지정한 속성과 일치하면 true를 반환하고, 그렇지 않으면 false를 반환함.
- is() 메서드는 입력 요소에 '선택한 체크 박스(checkbox)에 체크된 상태 여부' 또는 '선택한 선택상자(select)에 지정한 옵션이 선택되어 있는지 상태 여부' 또는 '선택한 요소가 보이는지 아니면 숨겨져 있는지의 상태 여부'를 알아볼 때 주로 사용됨.
- 기본형
|
$(요소 선택).is(":[checked | selected | visible | hidden ]") |
- 예)
|
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 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li style="display:none;">내용1</li>
<li>내용2</li>
</ul>
<p>
<input type="checkbox" name="chk1" id="chk1" checked="checked" />
<label for="chk1">체크1</label>
</p>
<p>
<input type="checkbox" name="chk2" id="chk2" />
<label for="chk2">체크2</label>
</p>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
console.log( $("#menu li:eq(0)").is(":visible") ); // 선택한 요소가 보이면 true를, 숨겨져 있으면 false 반환
console.log( $("#menu li:eq(1)").is(":visible") ); // 선택한 요소가 보이면 true를, 숨겨져 있으면 false 반환
console.log( $("#chk1").is(":checked") ); // 선택한 요소가체크 되어 있으면 true를, 체크가 해지되어 있으면 false 반환
console.log( $("#chk2").is(":checked") ); // 선택한 요소가체크 되어 있으면 true를, 체크가 해지되어 있으면 false 반환
});
</script> |
cs |
2) each() / $.each() 메서드
- 선택한 여러 개의 요소들에 각각 순차적으로 하나씩 접근할 때 사용하는 메서드.
- 단순히 선택자에 메서드를 적용한 것은 선택한 요소에 접근하여 한꺼번에 메서드를 적용하지만, 선택된 요소에 each() 메서드를 사용한 것은 요소에 하나씩 순서대로 접근하여 메서드를 적용함.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
$.each($("#menu li"), function(i, k){
console.log("index: "+i);
console.log(k);
});
});
</script> |
cs |
3) map() 메서드
- 배열의 데이터를 변환시켜 다시 새로운 배열 객체로 만듦.
- 즉, 지정한 값으로 새로운 배열을 만듦.
- 배열의 값을 재가공하여 새로운 배열 객체를 만들 때 사용함.
- 예)
|
1
2
3
4
5
6
7
8
9
10 |
<!-- 메서드 적용 -->
<script type="text/javascript">
var arrName=["갑", "을", "병", "정"];
$(function(){
var m=arrName.map(function(i,k){
return i+k;
});
console.log(arr);
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 이벤트 등록 메서드란? (0) | 2017.05.23 |
|---|---|
| 객체 조작 메서드 - 객체 편집 메서드 (0) | 2017.05.22 |
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
| 객체 조작 메서드 - 속성 조작 메서드 (0) | 2017.05.22 |
| 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 속성 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 위치 탐색 선택자 (0) | 2017.05.22 |
| 직접 선택자와 인접 관계 선택자 (0) | 2017.05.22 |
