jQuery 정리

jquery CDN  jquery

 

1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

versions:2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

페이지 로딩후 이벤트  jquery

<script>
    $(document).ready(
        function(){
            alert("로딩 완료");
        }
    );
</script>

<script>
    $(function(){
        alert("심플버전");
    });
</script>

 

jquery 엘리먼트 선택

-태그
$('tr')
$('div')

-id

$('#id')

-class
$('.class')

-태그.클래스 태그 태그
$('div.class a span')

 

jquery 필터

 

필터 : 특정 아이템을 제거하고 필요한 것만 남김

필터 => ":" 로 표시

:even =>  짝수번째 엘리먼트
:odd => 홀수번째 엘리먼트
:first => 첫번째 엘리먼트
:last => 마지막 엘리먼트
:eq => 특정 엘리먼트 선택시

 

jquery css 프로퍼티 사용

 

 - css 호출

$('#simple').css('height');
$('#simple').css('width');
$('#simple').css('font-size');

 - css 입력

$('#simple').css('height','300px');
$('#simple').css('width','200px');
$('#simple').css('font-size','12px');
$('#simple').css('background-color','#ff0000');

 

 - css 다중 입력

$('#simple').css({'height':'300px','width':'200px'});
 

 

jquery css 클래스 추가/삭제 

 

$('#simple').addClass('클래스네임');
$('#simple').removeClass('클래스네임');

 

hide, show, toggle  jquery
 
$('#simple').show();    //보이기
$('#simple').hide();    //숨기기
 

toggle 이용한 보이기,숨기기

$('#simple_btn').click(
    function(){
        if($('#simple').is(':visible')){
            $('#simple').hide();
            //$(this).hide();
        }else{
            $('#simple').show();
            //$(this).show();
        }
    }
);

 

toggle 이용한 value값 변경
$('#simple_btn').click(
    function(){
        if($('#simple').is(':visible')){
            $('#simple').val("hide");
            //$(this).val("hide");
        }else{
            $('#simple').val("hide");
            //$(this).val("show");
        }
    }
);

 

jquery 엘리먼트 추가/삭제

 - 형제 노드로 추가할 경우

$('<input type="button" value="추가"  id="btn">').insertAfter('#simple');
$('<input type="button" value="추가"  id="btn">').insertBefore('#simple');

 

 - 자식 노드로 추가할 경우

$('<strong>시작</strong>').prependTo('#simple');
$('<strong>끝</strong>').appendTo('#simple');

 - 엘리먼트 삭제

$('#simple').remove();

$('#simple').remove(':contains("텍스트")');

 

jquery 내용 바꾸기

 

$('span').html("변경");
$('span').innerHTML("변경");
$('span').text("변경");

 

jquery 부가적인 함수

 

.slideToggle();

.fadeIn();
.fadeOut();

.mouseover();
.mouseout();

.hover();  - [mouseover, mouseout]

 .end() : 선택식을 한단계 전으로 돌린다.

.filter() : 필터

.prev() : 앞의 형제노드

 
this 선택자  jquery

 

자기 자신을 호출할때나, 같은 태그가 반복될시

$("span", this).text('추가');
$("span", this).remove().text('삭제');

 

jquery checkbox 모두선택

if($("#simple_chkbox").attr("checked")){
    $("input[name=chk]:checkbox").attr("checked", true);
}else{
    $("input[name=chk]:checkbox").attr("checked", false);
}
 
 

jquery style 사용
 

$("#simple").attr("style", "display:none");

 

 

jquery 기본 css 셀렉터

*        : 모든 엘리먼트와 일치
E        : 태그명이 E인 모든 엘리먼트와 일치
E F      : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F      : E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E+F      : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F      : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F) : 태그명이 F인 자손을 하나 이상 가지고 태그명이 E인 모든 엘리먼트와 일치
E.C      : 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생락은 *.C와 동일함
E#I      : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함
E[A]     : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V]   : 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]  : 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]  : 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]  : 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

 

jquery 위치 기반 셀렉터  jquery

 

 - 페이지에서 처음으로 일치하는 엘리먼트
:first

 - 페이지에서 마지막으로 일치하는 엘리먼트
:last

 - 첫번째 자식 엘리먼트
:first-child

 - 마지막 자식 엘리먼트
:last-child

 - 형제가 없는 모든 엘리먼트
:only-child

 

※ n은 1부터 시작

 

 - n번째 자식 엘리먼트
:nth-child(n)

 - 짝수 또는 홀수 자식 엘리먼트
:nth-child(even|odd)

 - 전달된 공식에 따른 n번째 자식 엘리먼트
:nth-child(Xn+Y)

 - 페이지 전체의 짝수 / 홀수 번째 엘리먼트
:even / :odd

 

n은 0부터 시작

 

 - n번째로 일치하는 엘리먼트
:eq(n)

 - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
:gt(n)

 - n번째 엘리먼트(포함되지 않음 ) 이전의 엘리먼트와 일치
:li(n)

 

 

jquery 필터 종류

 

:animated	현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다
:button	모든 버튼을 선택한다
:checkbox	체크박스 엘리먼트만 선택한다
:checked	선택된 체크박스나 라디오 버튼만을 선택한다
:contains(foo)	텍스트 foo를 포함하는 엘리먼트만 선택한다
:disabled	인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다
:enabled	인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다
:file	모든 파일 엘리먼트를 선택한다
:header	헤더 엘리먼트만 선택한다
:hidden	감춰진 엘리먼트만 선택한다
:image	폼 이미지를 선택한다
:input	input 엘리먼트만 선택
:not(filter)	필터의 값을 반대로 변경
:parent	빈 엘리먼트를 제외하고 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 선택
:password	패스워드 엘리먼트 선택
:radio	라디오 버튼 엘리먼트 선택
:reset	리셋 버튼 엘리먼트만 선택
:selected	선택된 엘리먼트만 선택
:submit	전송 버튼을 선택
:text	텍스트 엘리먼트만 선택
:visible	visible 엘리먼트만 선택

 

 

 

jquery Command

 

size()	엘리먼트 개수를 리턴
get(index)	집합에서 하나 또는 모든 엘리먼트를 반환, index 생략하면 전체 배열을 반환
index(element)	집합에서 element를 찾고, 집합에서 엘리먼트의 인덱스를 반환한다.
add()	엘리먼트를 추가한다. html, 셀렉터, 엘리먼트, 배열 등을 넣을 수 있다.
not()	집합에서 엘리먼트를 제거한다.
filter()	표현식이나 필터링 함수를 이용해서 필터링한다.
slice(시작, 끝)	집합에서 연속하는 일부분을 반환한다. 0부터 시작
find()	전달된 표현식과 일치하는 엘리먼트를 반환한다
is()	전달된 표현식과 일치하는 엘리먼트가 있는지 확인한다. [ex : true, false]
children()	엘리먼트의 자식으로 구성된 배열 반환
contents()	콘텐츠로 구성된 배열을 반환
next()	바로 다음에 나오는 형제 엘리먼트를 반환
nextAll()	바로 다음에 나오는 모든 형제 엘리먼트 반환
parent()	바로 위 부모로 구성된 배열 반환
parents()	엘리먼트의 조상 엘리먼트 배열 반환
prev()	바로 이전의 형제 배열 반환
prevAll()	이전의 모든 형제 배열 반환
siblings()	모든 형제 엘리먼트 배열을 반환
end()	이전 확장 집합으로 돌아간다.
andself()	집합 두개를 하나로 합친다.
each()	모든 엘리먼트를 순회하면서 호출
attr()	어트리뷰트 값을 가져온다.