Programming/JQuery(8)
-
8. 회원가입 폼
순서:1) 이름 공백 체크2) ID 중복 체크3) 패스워드 재확인 1) 이름 공백 체크 12345678 이름 : Colored by Color Scriptercs 123456789101112 var hasError = function(thisVal){ //switchClass 만약 바꿀 클래스가 없으면 그냥 더한다. $(thisVal).parents(".has-feedback").switchClass("has-success","has-error"); $(thisVal).siblings(".form-control-feedback").switchClass("glyphicon-ok","glyphicon-remove"); $(thisVal).siblings("input.check").val(0); } var h..
2017.02.02 -
7. Jquery로 AJAX 사용
$.ajax(settings)jQuery를 이용한 ajax통신의 가장 기본적인 API주요속성data : 서버에 전송할 데이터, key/value 형식의 객체dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)type : 서버로 전송하는 데이터의 타입 (POST, GET)url : 데이터를 전송할 URLsuccess : ajax통신에 성공했을 때 호출될 이벤트 핸들러 1234567891011121314**Ajax Events**jquery는 Ajax가 실행되는 순서(event)를 나누고Event에 맞춰 CallBack Function을 지정 가능 **구조**ajaxStart beforeSend success(statusCode=200) 또는 error complet..
2017.01.20 -
6. Jquery-UI 사용법
1234567891011121314151617181920212223242526272829 1. bootstrap과 같은 ui 제공 2. class 관련 함수를 animate처럼 사용 가능케jquery : addClass(클래스명);jquery UI : addClass(클래스명, 1000, easing, complete);jquery : animate(properties, 1000, easing, complete);style이 적용된 class를 animate의 properties처럼 사용할 수 있게 해줌. 3. linear swing 외 다양한 easing 제공효과 함수 + class 관련 함수에 easing 추가하여 사용 가능별도의 effect() 함수를 제공하기도ex) animate({option},..
2017.01.19 -
5. 이벤트, 애니메이션
12345678**jquery 이벤트**$("선택자").이벤트(function(event){})$("선택자").on({이벤트1:동작1,이벤트2:동작2}) **event와 관련된 정보**originalEvent(상세 정보)target(이벤트의 대상)preventDefault(이벤트 중지)cs 12345678910111213141516171819//hover(): 두 가지 function 지정 가능 $("#test h3").hover( function(){$(this).css({color:$(this).data("color")})} ,function(){$(this).css({color:"black"})} ); //on(): 다수의 이벤트 사용할 때 $("#test h3").on({ mouseenter: f..
2017.01.19 -
4. 엘리먼트 제어
1. 자식으로 삽입 (.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text()) 1234 I would like to say:$("p").append("Hello"); Colored by Color Scriptercs 2. 형제로 삽입 (.after(), .before(), .insertAfter(), .insertBefore()) 1234I would like to say: $( "p" ).after( document.createTextNode( "Hello" ) );Colored by Color Scriptercs 3. 부모로 감싸기 (.unwrap(), .wrap(), .wrapAll(), .wrapInner()) 123456789 He..
2016.12.19 -
3. chain, event
chain(연쇄) 제이쿼리를 쓰면 'element(tag)에 대한 수정'이 간단해진다. $(주어).메소드1().메소드2() 와 같은 형식으로 표현할 수 있다. 예제1) 새 창 띄우기 1234567 jQuery //주어:id가 tutorial인 것, 메소드: 속성 href, target 변경, 글꼴 색을 red로 변경 jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red'); Colored by Color Scriptercs 예제2) 두 개 이상의 element 변경( 'end()로 chain 끊기' ) 123 //.first인 ul 중 .foo를 찾아 배경색을 빨강 + .bar를 찾아 ..
2016.12.19