Archive for

기본설정

jQuery배열관리
each메소드
- 배열을 관리하는 for in문과 비슷한 메소드로 객체나 배열의 요소를 검사하는 메소드
- index : 객체, 배열의 순번
- item : 값을 보관하는 변수(객체) ‘.’으로 접근

$.each(배열(객체)이름, function(index, item){
배열(객체) 차례로 처리할 때 사용
}
);

$(‘선택자’).each(function(index, item){
선택된 요소들을 차례로 조작할때 사용
}
);

jQuery객체 확장
extend메소드
- jQuery에서 객체의 내용을 추가하는 메소드

    $.extend(객체이름, {
    추가할 객체내용,
    추가할 객체내용2,
    ……
    }
    );

noConflict메소드
- jQuery변수를 $외에 다른 것으로 지정하는 메소드
- 다른 javascript플러그인을 사용 시 특수문자 $변수를 중복되어 발생하는 에러방지를 위해
- 사용하기도 한다.

변수명을 $대신 사용

var 변수명 = $.noConflict();

클래스 / 속성 설정

jQuer class 추가
addClass()
- 선택자에 의해 선택된 요소에 클래스를 추가하는 메소드
1.
$(‘s’).addClass(“클래스이름”);
//클래스를 여러 개 추가는 띄어쓰기로 구분
2. $(‘s’).addClass(function(n){
인자는 선택된 요소들의 번호;
return 값; // 리턴된 값을 클래스로 추가
});

removeClass()
- 선택자에 의해 선택된 요소에 클래스를 삭제하는 메소드
1.
$(‘s’).removeClass(“클래스이름”);
//클래스를 여러 개 추가는 띄어쓰기로 구분
2. $(‘s’).removeClass(function(n){
인자는 선택된 요소들의 번호;
return 값; //리턴된 값과 일치하는 클래스삭제
});

toggleClass()
- 선택된 요소에 class가 있으면 삭제하고 없으면 추가하는 메소드
1.
$(‘s’).toggleClass(“클래스이름”);
// 클래스를 여러 개 추가는 띄어쓰기로 구분
2.
$(‘s’).toggleClass(‘클래스명’, [function(index,curclass){ }],[true|false]);
-> true : 추가만, false : 삭제만

attr()
- 선택자에 의해 선택퇸 요소에 속성의 속성값 확인,속성값 변경하는 메소드
1.
$(‘s’).attr(“속성명”);
// 속성명의 속성값을 리턴
2.
$(‘s’).attr(“속성명”,”속성값”); // 선택자의 속성과 속성값을 추가
3.
$(‘s’).attr(“속성명”, function(index, value){ });
// index : 선택된 요소 set의 index값, value : 현재 값
4.
$(‘s’).attr({ 속성명:”속성값”,속성명:”속성값” …… });
// 다중으로 속성값 설정시 사용, 객체사용 가능

removeAttr()
- 선택자에 의해 선택된 요소에 속성을 제거하는 메소드
1.
$(‘s’).removeAttr(“속성명”);
//속성명의 속성을 제거, 여러개일 경우 띄어쓰기 사용
css()
- 선택자에 의해 선택된 요소의 속성값을 가져오거나 설정하는 메소드
-> 단축속성설정(예 : border, background) 제대로 지원 하지 않고 브라우저별 상이하다.
1.
$(‘s’).css(“속성명”);
//속성명의 속성값을 리턴
2.
$(‘s’).css(“속성명”,”속성값”); //속성명의 속성값을 설정
3.
$(‘s’).css(“속성명”, function(index, 현재값) { } );
//함수에서 리턴되는 값으로 속성을 설정
4.
$(‘s’).css({오브젝트}); //오브젝트에서 설정한 다중 속성을 설정

Content 설정

jQuer content 추가

html()
- 선택된 요소의 conten영역(innerHTML/텍스트노드)을 리턴/ 설정하는 메소드,
html태그를 태그로 인식
- 리턴 시 첫번째 요소 텍스트노드 리턴/ 전체 요소 리턴 시 함수 사용
1.
$(‘s’).html();
// 선택된 요소의 첫번째 텍스트 노드를 리턴
2.
$(‘s’).html(“text노드 내용”); // 선택된 요소의 text노드 내용을 대입
3.
$(‘s’).html(function(index, 현재값) { } );

text()
- 선택퇸 요소의 conten영역(innerHTML/텍스트노드)을 리턴/설정하는 메소드,
html태그를 문자로 인식
- 리턴 시 전체 요소 텍스트 노드를 리턴
1.
$(‘s’).text();
//선택된 요소의 모든 텍스트 노드를 리턴
2.
$(‘s’).text(“text노드 내용”); //선택된 요소의 text노드 내용을 대입
3.
$(‘s’).text(function(index, 현재값) { } );

객체 생성 및 제거

jQuer 객체 생성
문서객체 생성방법

jQuer 객체 생성/ 이동
객체 생성된 객체 추가/이동
- html내부에 생성한 요소를 추가하는 메소드

jQuer 객체복제
clone 메소드
- html내부에 있는 요소를 복사하는 메소드
$(‘태그명’).clone([true | false]).appendTo(“추가될위치”);
// 태그명의 태그를 복사하여 추가될 위치에 넣기
// 인자값 이벤트 핸들러까지 복사할지 여부까지

jQuer 객체제거
document에 있는 객체 제거
- html내부에 요소객체를 제거하는 메소드

순회(탐색) 메소드(Traversing)

filtering 메소드
- 선택자로 지정한 객체를 기준으로 객체 그룹에서 위치를 기준으로 객체 선택하는 메소드

Ancestors 메소드
- 선택된 요소의 상위 요소들을 선택할 수 있는 메소드

Descendants 메소드
- 선택된 요소의 하위 요소들을 선택할 수 있는 메소드

Sideways 메소드
- 같은 레벨에 있는 요소(형제)를 선택할 수 있는 메소드

Sideways 메소드

요소가 있는지 찾는 메소드
- 선택자로 지정된 범위에 특정한 요소가 존재하는지 찾을 때 사용하는 메소드

jQuery란

- 존레식에 의해 개발된 경량 javascript라이브러리
- Write Less Do More(보다 간단히 많은 것을)을 모토로 복잡했던 코드를 손쉽게 구현.
-> DOM과 관련된 처리 쉽게 구현
-> 일관된 이벤트 연결을 쉽게 구현
-> 시각적 효과를 쉽게 구현
-> Ajax 애플리케이션을 쉽게 개발
- 애니메이션 기능, Ajax통신, 이벤트 처리 등 폭넓게 지원
- jQuery플러그인을 통해 차트 작성, 슬라이드쇼, 엑셀같은 테이블도 간단한 코드로 구현가능

jQuery연결

- CDN(Content Delivery Network)을 통한 연결
-> 온라인으로 js파일을 불러와서 실행
- 파일 다운로드 연결(오프라인에서 사용하는 경우)
-> jQuery홈페이지에서 최신버전 js파일을 다운로드

<script type=‘text/javascript’
src=‘http://code.jquery.com/jquery-버전.js’></script>

최신버전사용 : jqeury-latest.min.js / jqeury-latest.js
이전과 호환이 안되는 경우가 있어 버전에 유의

jQuery시작
$ / jquery(document).ready()
- jQuery를 사용하는 웹 페이지 시작코드 $ 또는 jquery사용
- Window.load속성과 같은 개념의 메소드
- 페이지 내용을 로드한 후 ready메소드 실행
<script>
$(document).ready(function(){
});
또는 축약형으로
$(function(){
});
</script>

jQuery시작
기본형태

선택자
메소드명
속성
속성값
선택자의 종류
https://www.w3schools.com/jquery/sel_attribute_contains_value.asp 참조