javascript/jQuery 기초
·●◎※
===================================================
값을 선언하는 경우 '',"" 두가지 모두 가능하나 기본적으로 ''를 통해 선언
※변수명 선언시 주의사항
- 숫자시작 금지
- 대소문자 구분됨
- 소문자로 시작
- 상수일 경우 모두 대문자
- 여러단어 조합일 경우 CamelCase 작성
- 예약어(키워드) 사용 금지
- $기호, _기호 사용 가능
●형변환
- parseInt(),parseFloat(),Number(),String(), toFixed()
====================================================
●타이머 함수
- setInterval() : 일정 시간마다 주기적으로 특정구문 실행
- setTimeout() : 일정 시간이 지난후 특정구문 1번 실행
- clearInterval() : 실행 중인 타이머 함수를 멈추는 기능
=====================================================
◎자바스크립트 DOM
●태그 선택자
- Node 객체
- Element 객체 : node에서 주석과 text를 제외한 나머지 node
- HTMLElement 객체 : HTML에만 존재하는 node
- Dcoument객체 : HTML, XML문서의 root 객체
- XML 객체 : XML문서에 존재하는 node
======================================================
◎jQuery
● 크로스 브라우징 플랫폼으로 브라우저에 상관없이 처리가 가능하도록 도와주는 api
※이미지, 동영상등 컨텐츠가 모두 로드되었을 경우에 동작함
window.onload = function() {
}
※태그,노드가 불러온 이후에 동작(이미지 등 컨텐츠가 오기 전에 동작 함)
$(document).ready(function() {
});
조건에 따라 적절하게 사용하자!
======================================================
●jQuery 탐색
console.log($div.children());
console.log($div.children('.className'));
console.log($div.children().first());
console.log($div.children().last());
console.log($div.children().eq(1));
내부선택자에 지정함으로써 코드 최적화
console.log($div.children(':first'));
console.log($div.children(':eq(0)'));
======================================================
●eq(n)
여러 객체 배열에서 특정 순서에 존재하는 노드 선택
======================================================
●jquery배열.each()
여러 객체 배열을 loop탐색하여 내부 로직 적용
======================================================
javascript 객체와 jQuery객체의 차이
//jquery 객체로 사용할 수있는것은 jquery로 한정
//console.log($('div').eq(2));
//DOM type의 html
//console.log($('div').get(2));
//javascript 객체를 가져오므로 javascript로 가능
======================================================
●filter와 find의 차이
filter는 같은 레벨의 노드 탐색
find는 해당 노드의 하위부터 탐색
======================================================
●노드의 마지막 자식노드 찾기
$대상.children().last();
$대상.children(':last()');
$대상.children().eq($대상.children().length-1);
$대상.children(':eq('+ ($대상.children().length -1)+')');
$대상.children().eq(-1);
$대상.children(':eq('+index+')');
======================================================
●부모노드 찾기
$대상.parent();
조상 노드 찾기
$대상.parents(['선택자']);
======================================================
● 형제 노드 찾기
이전 형제 노드
$대상.prev(), $대상.prevAll(['선택자']);
다음 형제 노드
$대상.next(), $대상.nextAll(['선택자']);
======================================================
● 노드 생성, 추가, 삽입
.prepend() : 부모의 제일 앞에 첫번째 자식을 추가
.prependTo() : 자식을 부모의 첫번째 자식으로 추가
.append() : 부모에 제일 마지막 자식으로 추가
.appendTo() : 특정노드의 제일 마지막의 자식으로 추가
● 특정노드 위치에 추가
.insertBefore('선택자') : 신규노드가 추가되면 생성, 기존노드가 추가되면 이동
.insertAfter('선택자') : 신규노드가 추가되면 생성, 기존노드가 추가되면 이동
.before() : 신규노드가 이전에 추가됨
.after() : 신규노드가 이후에 추가됨
● 노드 삭제
.remove()
======================================================
● 내부 택스트 관리
.html() : 내부 html 형식 출력
.text() : 내부 텍스트만 출력
.html('태그') : 텍스트에 태그가 존재하면 태그가 추가
.text('태그') : 텍스트 그대로 출력
.html('') : 내부 html태그 모두 삭제
=======================================================
※ 동적 태그 추가시 주의사항!
생성되지 않은 태그는 id, class등 선택자가 먹지 않으므로
$('대상선택자').on('click', 추가된 동적 태그 , function(){
});
처럼 다음과 같은 형식으로 진행
=======================================================
● 속성 조작
- 추가/제거
.addClass(), .removeClass()
==> toggleClass()
.css()
.attr(), removeAttr()
- 확인
.hasClass()
.has('선택자')
========================================================