JavaScript&JQuery (28) 썸네일형 리스트형 자주쓰는 jquery 함수 모음 ▣ 체크박스 전체선택 스크립트 전체 선택 항목 1 항목 2 항목 3 ▣ 공백입력 막기 스크립트 ▣ 핸드폰번호 포맷 설정 ▣ 조사 구분 스크립트 Ajax 회원가입 유효성 검사 Ajax 회원가입 유효성 검사 ▶ 실습3 회원가입 유효성 검사. 성명, 아이디, 비밀번호, 비밀번호 확인, 이메일, 성별 에 대해 유효성 검사를 하는 코드를 ajax를 활용하여 코드를 작성하고, 아이디는 중복 확인도 하자. 아이디 : 아이디 중복 확인 비밀번호 : 비밀번호 확인 : 이름 : 이메일 : 성별 : 남 여 회원가입 Checkbox 1. checkbox 체크한 값 확인 $('[name]:checked').val() //체크된 갯수 $('[name]:checked').length 2. checkbox 체크 여부 확인 $('[name]').is(':checked'); $("input:checkbox[name='NAME']").is(":checked"); 3. checkbox 체크 처리 $('[name]').prop("checked", true); $('[name]').prop("checked", false); Ajax - json Ajax - json data type이 json인 파일과 통신하여 화면에 호출해보자.. 먼저, contentType을 변경해줘야 한다. ▶ gson 외부 라이브러리 사용하는것도 좋은 방법이다. json구조를 띄는 직렬화된 데이터를 JAVA의 객체로 역직렬화, 직렬화 해주는 자바 라이브러리 입니다. ▶ gson 다운로드 gson 사용하기 ▶ gson 사용 방법 - ajax 코드 부분 호출 호출 버튼을 눌렀을 때, 통신하고자 하는 url ajaxjsonCall.jsp파일과 연결되며, 전송할 데이터는 없지만 아래의 gson과 연동된 곳에서 데이터를 받아온다. 그 후 input박스의 value값으로 받아온 데이터를 넣어주기로 하였다. - 호출하고 싶은 파일(gson과 연동) map이라는 객체에 put메서드를 .. Ajax - HTML Ajax - HTML data Type이 Html인 파일과 통신하여 Ajax로 html파을일 불러와서 화면에 로드해보자. var request = $.ajax({ url: "script.php", // 통신할url method: "POST",// 통신할 메서드 타입 data: { id : '' },//전송할 데이터 dataType: "html"//전송받은 데이터를 변환시킬 컨텐츠 타입 //DATA TYPE //html(text/html), json(application/json), xml(text/xml), text(text/plain) }); //정상적으로 통신이 완료되었을 때 실행되는 메소드. 인수값인 함수를 실행시킴(콜백함수) request.done(function( data ) { console... Ajax Ajax 란? 한 화면에 모든 데이터를 다 저장하지 않는다. 한 화면이 로드되려면 시간이 걸리기도 하지만 비효율 적일 것이다. Ajax를 이용하는 이유는 화면 전환 없이 클라이언트와 서버간에 정보 교환을 하기 위해서이다. Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다. 그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다. ▶ 데이터 전송방식 $.ajax() - 비동기식 Ajax를 이용하여 HTTP 요청을 전송한다. $.ajax(URL주소[,옵션]); $.get() - 전달받은 주소로 GET 방식의 HTTP 요청을 전송한다.(주소에 데이터를 추가하여 전달하는 방식) $.get(URL.. 객체 조작 메서드 활용 - 동적 바인딩 동적 바인딩 html 실행 순서에 따라 dom 객체도 생성되기 때문에 이벤트 실행 완료 이후에 생성되는 html에는 이벤트를 걸 수가 없다. 이에 따라 동적으로 이벤트를 걸거나 객체 생성시에 이벤트를 걸어야 한다. 버튼 생성 or 제거 생성 제거 다음 과 같은 결과 도출>> 생성 제거 방법1. $(document).on('click','.add',function(){ var clone = $(this).parent().clone(); $('body').append(clone); }); $(document).on('click','.del',function(){ $('body').parent().remove(); }); 방법2. $('.add').click(function(){ var clone = $(th.. 객체 조작 메서드 - 편집 메서드 객체 편집 메서드 선택한 객체의 옵션(메서드에 위치 옵션 포함) 위치에 html 요소를 삽입하거나 삭제 또는 복제하는 메소드 종류 사용법 설명 before() $('선택자').before('html요소'); 선택한 대상의 이전 위치에 html 삽입 after() $('선택자').after('html요소'); 선택한 대상의 다음 위치에 html 삽입 append() $('선택자').append('html 요소'); 선택한 대상의 자식요소에 제일 끝에 html 삽입 prepend() $('선택자').prepend('html 요소'); 선택한 대상의 자식요소에 제일 처음에 html 삽입 clone() )$('선택자').clone(true or false); 선택한 대상을 복제한다. remove() $('선택자.. 이전 1 2 3 4 다음
