행복한 세상

간단하게 정리한거

달력.zip

참조.html

출처 : http://todduf.blogspot.kr/2014/06/jquery-datepicker.html

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 필터 종류

jquery Command