반응형 Programing/jQuery40 제이쿼리 폼의 객체 값을 문자열로 변환 jquery serialize() method 제이쿼리 폼의 객체 값을 문자열로 변환 jquery serialize() method 폼의 객체들과 값을 String으로 바꾸어 주는데는 serialize() 메소드를 사용한다. 폼의 입력값을 ajax를 사용해 비동기로 전달하는데 유용하게 사용됩니다. - serialize() 사용방법 폼내의 객체의 name과 value를 &로 구분하여 string으로 변환한다. 1 2 3 4 5 6 7 $(document).ready(function(){ $("button").click(function(){ $("div").text($("form").serialize()); }); }); Colored by Color Scripter cs 1 2 3 4 5 6 7 Serialize Colored by Color Scri.. Programing/jQuery 2015. 8. 2. 제이쿼리 속성추가, 제거, jquery attr(), removeAttr() 제이쿼리 속성추가, 제거, jquery attr(), removeAttr() - attr() 사용방법 jquery 의 attr() 메소드는 선택된 요소의 속성이나 값을 설정, 또는 리턴하는데 사용된다. 이 메소드가 그 속성값을 리턴할 때, 이것은 첫번째로 매치되는 요소의 값을 리턴한다. 이 메소드가 그 속성값을 설정할때, 이것은 매치되는 요소들의 하나 이상의 속성/값의 묶음으로 설정한다. 1. 속성값을 리턴 $(selector).attr(attribute) 예) 이미지가 있을 때 이 요소의 width 속성값을 경고창에 띄우는 예이다. 2. 속성과 값을 설정 $(selector).attr(attribute,value) 예) 버튼 클릭시 width 속성값을 500으로 변경하는 예이다. 3. 함수를 사.. Programing/jQuery 2015. 7. 27. jquery 동적으로 생성된 DOM 개체에 대한 이벤트 처리 jquery 동적으로 생성된 DOM 개체에 대한 이벤트 처리 이번에는 어떠한 이벤트로 인해 새로 생성되는 DOM 객체에 대한 이벤트를 거는 방법에 대해 포스팅 하겠습니다. 일반적인 방법으로 코딩하게 되면 페이지가 로딩되면서 생성된 DOM 개체에 대한 이벤트만 먹기 때문에 새로 생성된 객체에 대한 이벤트는 적용이 되지 않습니다. - 페이지 로딩시 불러온 DOM 개체에 대한 이벤트 처리 1 2 3 4 5 6 $( document ).ready(function() { $( "#upload_form").on( "submit", function () { //최초로 생성된 DOM 개체 중 id가 upload_form인 개체의 submit 이벤트 실행 시 실행 }); }); Colored by Color Script.. Programing/jQuery 2014. 9. 2. jQuery focus 포커스 처리 jQuery focus 포커스 처리 이번 포스팅에서는 jQuery의 포커스 처리에 대해서 알아보겠습니다. jQuery 에서의 포커스는 .focus() 함수를 사용합니다. 포커스는 보통 입력부의 입력 가능한 첫번째 항목으로 포커를 보내거나 특정 element에 포커스가 갔을 경우 이벤트 발생시 많이 사용됩니다. 그럼 사용법을 보도록 하죠. id pw nm age tel 위와 같은 폼이 있습니다. 페이지 로딩시 id를 입력할수 있는 text창(입력가능한 첫번째 항목)에 포커스를 보내보도록 합시다. (사용자가 마우스를 '한번' 클릭 하는 수고(?)를 덜도록..) 1 2 3 4 5 $(document).ready(function(){ $("#focus_test_form :input:text:visible:ena.. Programing/jQuery 2014. 4. 22. jqeury reset 초기화 버튼 이벤트 구현 jqeury reset 초기화 버튼 이벤트 구현 이번 포스팅에서는 jQuery를 활용하여 간단하게 초기화 버튼을 구현해 보도록 하겠습니다. #id selector 를 사용해 btn_reset 버튼을 클릭했을 때 폼의 값을 초기화하는 함수를 만들어 처리합니다. [코딩부] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 메일주소 전화번호 $(document).ready(function(){ //btn_reset 을 클릭했을때의 함수 $( "#btn_reset").click(function () { $( "#reset_test_form" ).each( function () { this.reset(); }); }); }); Colored by Color Scripter cs [설.. Programing/jQuery 2014. 4. 17. jQuery Selector 셀렉터 사용법 jQuery Selector 셀렉터 사용법 이번 포스팅에서는 jQuery의 기본 셀렉터에 대해서 알아보도록 하겠습니다. 셀렉터는 HTML DOM element 에 보다 쉽게 접근 할 수 있게 해주며 jQuery 에서 제공하는 막강한 기능의 적용도 쉽게 해줍니다. 그럼 jQuery 기본 셀렉터에는 어떤 것들이 있는지 알아보도록 하죠. 1. 모든 element 선택 [설명] HTML 문서 내에 존재하는 모든 요소를 선택. [사용법] &("*") [예] HTML DOM 내의 모든 요소의 테두리를 2px의 붉은 색으로 변경한다. 1 2 3 $(document).ready(function(){ $("*").css("border", "2px solid red"); }); Colored by Color Scripte.. Programing/jQuery 2014. 4. 17. jQuery each 에 대해 알아보자. 제이쿼리 반복문 jQuery for while jQuery each 에 대해 알아보자. 제이쿼리 반복문 jQuery for while 이번 포스팅은 jQuery 의 each function에 대해 알아보도록 하겠습니다. each 는 여타 다른 언어들의 for, while 문과 동일한 기능을 합니다. each는 실무에서 가장 많이 사용되는 jQuery function 중의 하나이므로 사용법을 확실하게 익혀두도록 합시다. each 문의 사용방법에는 구분이 필요합니다. DOM의 반복과 Array, Object의 반복. DOM의 반복은 $(selector).each(function() {} 의 형태로 사용되고 Array, Object의 반복은 $.each() 의 형태로 사용합니다. DOM의 반복부터 알아보도록 하죠. (예문은 jQuery API 활용 책을 .. Programing/jQuery 2014. 4. 17. jQuery 전체선택 해제 체크박스 이벤트 구현 방법 jQuery 전체선택 해제 체크박스 이벤트 구현 방법 [테이블 리스트 코딩부] 목록 지표 정보 단위 입력방식 설명 //데이터 불러오는 부분 (체크박스의 name 은 chkYn으로 한다.) 위와 같은 테이블 리스트가 있다고 하자. 붉은색으로 표시된 리스트 테이블 해드 상의 체크박스를 클릭하면 리스트 전체 선택/해제가 되도록 jQuery로 구현 해보자. 코드는 다음과 같다. [전체선택/해제 구현부] jQuery를 활용하여 전체선택/해제 체크박스를 구현해 보았다. 간단한 구문이지만 설명을 하자면 $("#check_all).click(){ // 전체선택/해제 체크박스를 클릭할 경우 if($('#check_all').is(':checked') == true){ // id가 chkeck_all인 element가 c.. Programing/jQuery 2014. 4. 14. $(document).ready() 와 웹페이지의 실행순서에 대해 알아보자. $(document).ready() 와 웹페이지의 실행순서에 대해 알아보자. [소개] $(document).ready() 는 jQuery를 사용할 때 가장 먼저 배워야 하는 것이다. 페이지 시작 시에 어떠한 이벤트를 발생시키려 하거나 버튼 클릭 등의 이벤트를 구현하려 할때 $(document).ready() function 안에 있는 것들을 불러오게 된다. [실행시점] $(document).ready()는 DOM (Document Object Model) 이 load 된 후에 즉시 실행 되게 된다. 참고1) document.ready() 와 window.load(), 의 실행 시점 $(document).ready() 와 는 개념상 동일 시점에서 실행된다.(DOM load후 즉시) jQuery API를 보.. Programing/jQuery 2014. 4. 14. jQuery 란 무엇인가? & jQuery 다운로드 jQuery 란 무엇인가? 위키백과의 말을 인용하자면 jquery 란 브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리라 한다. 그래..이건 그냥 정의다. jquery 가 뭔지 궁금한 사람들로써는 '그래서 뭔데?' 라는 말이 나올수 있다. 그냥 점점 복잡해지고 있는 자바스크립트 코드를 단순하고 간결하게 만들 수 있는 효율적인 '방법'으로 알고만 있자. 자바 웹을 보다보면 '$' 가 있는 코드를 볼 수 있을 것이다. 이곳이 jquery 가 사용된 곳이다. 그럼 jquery를 왜 쓸까? 이유는 간단하다. 상대적으로 쉽고 간단하니깐. 많은 사람들이 쓰는데는 다 이유가 있다. 예를 들어 html 소스들중 원하는 element를 가져올때 id는 '#', class는 '.' 만쓰면 된다. $("#id') .. Programing/jQuery 2014. 4. 14. 이전 1 2 3 다음 💲 추천 글 반응형