반응형
메서드 문법
- jQuery는 속성을 사용하는 방식은 거의 없고 대부분 메서드화시켜서 작성합니다.
- 메서드 괄호( ) 안에 매개변수를 어떻게 작성하는지에 따라 다양한 유형이 나뉩니다.
- 메서드에 따라서 한 개 유형만 가질 수도 있고 여러 개 유형을 가질 수도 있습니다.
- 게터(get~) 형식 메서드는 객체의 값을 얻어오는 메서드를 의미합니다.
- 세터(set~) 형식 메서드는 객체의 값을 변경하는 메서드를 의미합니다.
- javascript는 get과 set을 붙여 구분하지만 jQuery는 한 메서드로 같이 사용합니다.
메서드 문법 유형
| 문법유형 | 예시 |
| 1. 매개변수가 없는 유형 | $('선택자').메서드명( ); |
| 2. 매개변수가 한개인 유형 | $('선택자').메서드명(값); |
| 3. 매개변수가 여러개인 유형 | $('선택자').메서드명(값1,값2,...); |
| 4. 매개변수가 함수인 유형 | $('선택자').메서드명(function( ){}); |
| 5. 매개변수가 객체방식인 유형 | $('선택자').메서드명({ 옵션: 값, 옵션: 값}); |
1. 매개변수가 없는 유형
<!-- HTML -->
<body>
<h1>제목태그</h1>
<h1>제목태그</h1>
<h1>제목태그</h1>
</body>//javascript
$(document).ready(function(){
//html 메서드를 매개변수 없이 사용하면 문서객체의 텍스트 컨텐츠를 얻어옵니다.
//게터형식의 메서드
let text = $('h1').html();
console.log(text);
});
2. 매개변수가 한개인 유형
//javascript
$(document).ready(function(){
//매개변수 값을 적어주면 그 값으로 텍스트컨텐츠를 변경시킵니다.
//세터형식의 메서드
$('h1').html('title tag');
});
3. 매개변수가 여러개인 유형
//javascript
$(document).ready(function(){
//세터형식의 메서드
$('h1').css('color','red');
});
4. 매개변수가 함수인 유형
//javascript
$(document).ready(function(){
//index는 객체들의 배열번호, text는 기존 텍스트
//index, text는 무엇을 적어도 상관없는 임의의 단어이고
//첫 번째가 배열번호, 두 번째가 기존 텍스트를 의미하는 점이 중요
$('h1').html(function(index,text){
text = '제목태그';
return text + (index + 1);
});
});
5. 매개변수가 객체인 유형
//javascript
$(document).ready(function(){
$('h1').css({
backgroundColor: 'red',
color: 'yellow'
});
});
메서드 체이닝
- 객체선택 후 메서드 뒤에 또 메서드를 붙이는 것을 메서드 체이닝이라고 합니다.
- 먼저 쓴 코드 먼저 처리되고 나중에 쓴 태그 나중에 처리됩니다.
//javascript
$(document).ready(function(){
$('h1').first().css('background-color','black');
});반응형
'jQuery' 카테고리의 다른 글
| 6. HTML 요소 관련 메서드 (0) | 2024.09.10 |
|---|---|
| 5. DOM 탐색 메서드 (0) | 2024.08.22 |
| 4. 필터 메서드 (0) | 2024.08.21 |
| 2. 선택자 (0) | 2024.08.07 |
| 1. jQuery 란? (0) | 2024.08.05 |