728x90
1) $('선택자').html() - 선택된 객체의 html 요소를 가지고 오거나 삽입한다.
$('body').html(); <-- 선택된 객체의 자식 html 요소 가지고 오기
$('body').html('<h1>안녕하세요</h1>'); <-- 선택된 객체에 값 삽입
- parsing : 서로 다른 데이터를 변환하는 작업
- parser : 서로 다른 데이터를 변환 하는 대상 혹은 도구(플러그인 혹은 api(메서드)) //형 변환과는 다름
2) $('선택자').text() - 선택된 객체의 하위 요소의 text를 가지고 오거나 삽입
$('body').text() <-- body의 하위 텍스트 전체 가지고 오기
$('body').text('안녕하세요') <-- body의 하위에 텍스트 쓰기
3) $('선택자').attr() - 선택된 객체의 속성을 가지고 오거나 삽입한다.
- 웹표준에 존재하지 않는 속성도 삽입하거나 가지고 올 수 있다. (개발자의 의도하에 가능함)
$('body').attr('myName') <-- body에 myName 이라는 속성의 값을 가지고 온다.
$('body').attr('myName','홍길동') <-- body에 myName이라는 속성을 생성하고 myName이라는 속성에 값을 홍길동으로 삽입한다.
4) $('선택자').removeAttr('속성') - 선택된 객체의 인수값에 해당되는 속성을 제거한다.
$('body').removeAttr('myName') <-- body에 myName이라는 속성을 제거
5) $('선택자').prop() - 선택된 객체의 상태 속성을 확인하거나 변경한다. ('clicked','selected','hidden' 등)
$('body').prop('hidden',true); <-- body 태그의 상태를 hidden으로 변경
$('body').prop('hidden',false); <-- body 태그의 상태를 hidden 해제
$('body').prop('hidden'); - body 태그의 상태 중 hidden 상태값을 true or false로 가지고 온다.
6) $('선택자').val() - 선택된 객체의 value 속성값을 가지고 오거나 변경한다.
$('input').val() <-- input 태그의 value 속성값을 가지고 온다.
$('input').val('홍길동') <-- input 태그의 value 속성값을 '홍길동'으로 변경한다.
7) $('선택자').css() <- 선택된 객체의 css속성을 적용 혹은 값을 가지고 온다.
$('body').css('border','1px solid #ff0000') <-- body에 border 라는 css 속성에 1px, solid, #ff0000을 적용
$('body').css('border') <-- body에 적용된 css 속성 border 값을 가지고 오기
다중으로 css 속성 적용하기
$('body').css({
'border': '1px solid #ff0000',
'padding':'5px'
});
8) $('선택자').addClass('클래스명') - 선택된 객체에 클래스를 추가 삽입
$('body').addClass('syntaxhighlighter') <-- body에 클래서 속성의 값에 syntaxhighlighter를 추가한다.
9) $('선택자').removeClass('클래스명') - 선택된 객체에 인수값에 해당되는 클래스를 제거
$('body').removeClass('syntaxhighlighter') <-- body에 클래서 속성의 값에 syntaxhighlighter값이 있다면 syntaxhighlighter 제거
실습]
실습2. #displayBtn를 클릭시 h1태그를 감추고, 텍스트 값을 '보이기'로 변경하고, 한번 더 클릭시 h1태그를 보이도록 하고, #displayBtn 텍스트 값을 '감추기'로 변견하여라.
-사용할 메서드 : click, attr, prop
<script>
$(function(){
$('#displayBtn').click(function(){
var display = $('#displayBtn').attr('display');
if(display == 'Y' || display == undefined){
$('h1').prop('hidden',true);
$(this).text('보이기');
$(this).attr('display','N');
}else{
$('h1').prop('hidden',false);
$(this).text('감추기');
$(this).attr('display','Y');
}
});
});
</script>
<body>
<button type="button" id="displayBtn">감추기</button>
<h1>안늉안늉</h1>
</body><script>
$(function(){
$('#displayBtn').click(function(){
if($('h1').prop('hidden')){
$('h1').prop('hidden',false);
$(this).text('감추기');
}else{
$('h1').prop('hidden',true);
$('#displayBtn').text('보이기');
}
});
});
</script>
<body>
<button type="button" id="displayBtn">감추기</button>
<h1>안늉안늉</h1>
</body>반응형
'[YERIEL] 개발일기 > .etc' 카테고리의 다른 글
| 동적 바인딩 & 트리거 & 이벤트 제거 (0) | 2020.03.30 |
|---|---|
| 수치 조작 메서드 & 객체 편집 메서드 (0) | 2020.03.30 |
| jquery 시작하기 (0) | 2020.03.24 |
| jquery - 탐색 선택자 (0) | 2020.03.24 |
| jquery - 선택자 ; 기본 선택자 (0) | 2020.03.24 |
댓글