반응형 jQuery12 Javascript JQuery 구조 따라해보기 jQuery 처럼 라이브러리 만들기 Javascript JQuery 구조 따라해보기 jQuery 처럼 라이브러리 만들기 이번 포스팅에서는 jQuery 를 따라해보는 시간을 갖어볼까 합니다. 예를들어 $("#aa") 와 같이 Selector에 접근하고 $.ajax() 처럼 메소드를 실행하는 구조를 따라해보겠습니다. 우선 Selector 기능을 담당하는 DomControl Class를 생성합니다. class DomControl{ constructor(selector){ this.selector = document.querySelectorAll(selector); } append(element){ for(let ele of this.selector){ ele.append(element); } } } 이 클래스는 Element에 대한 기능을 담당.. Programing/JavaScript 2022. 3. 19. jQuery class 확인 추가 제거 한번에 jQuery class 확인 추가 제거 한번에 class 확인 $('요소').hasClass('클래스명'); class 추가 $('요소').addClass('클래스명'); class 삭제 $('요소').removeClass('클래스명'); class 있으면 삭제 없으면 추가 $('요소').toggleClass('클래스명'); Programing/jQuery 2019. 8. 30. jQuery drag and drop multi file upload aljjabaegi.fileUpload-1.0.1.js jQuery drag and drop multi file upload aljjabaegi.fileUpload.js aljjabaegi.fileUpload-1.0.0.js 는 아래의 Link를 참고하세요. Link : jQuery FormData ajax multi file upload drag and drop 비동기 파일 업로드 jQuery FormData ajax multi file upload drag and drop 비동기 파일 업로드 jQuery FormData ajax multi file upload drag and drop 비동기 파일 업로드 드래그 앤 드랍 파일 업로드가 가능한 비동기 파일 업로드 모달팝업입니다. 간단한 옵션 설정으로 서블릿으로 전달할 파일객체를 생성.. aljjabaegi... Programing/jQuery 2019. 8. 21. jquery image combobox 이미지 콤보박스 image select box jquery image combobox 이미지 콤보박스 image select box 위와 같이 이미지가 포함된 콤보박스를 구현해 보도록 하겠습니다. 사용하는 라이브러리는 ms-Dropdown 입니다. 아래 Link에서 다운받으실 수 있습니다. Link : https://github.com/marghoobsuleman/ms-Dropdown 구현 방법은 간단합니다. 사용할 페이지에 다운받은 파일 중 jquery.dd.min.js 파일과 css파일을 추가합니다. 1 2 cs 필수! 해당 라이브러리는 jQuery가 필요합니다. 일반 셀렉트 박스와 비슷하지만, data-image 경로에 있는 이미지가 셀렉트 박스 내에 표출됩니다. 1 2 3 4 5 Programing/jQuery 2018. 10. 2. jQuery 동적 객체의 이벤트 중복 문제 jQuery 동적 객체의 이벤트 중복 문제 타 업체가 개발한 사이트의 유지보수 요청을 받아 소스를 보았는데, html과 script를 완전히 분리하여 개발 했더군요. 그래서 모든 jquery event는 js 내에서 구현했는데, 문제는 동적 객체의 이벤트 등록 시 클릭 이벤트가 정상 동작 하지 않는다는 것이였습니다. 코드를 보면 1 2 3 $(document).on('mouseenter click', '#popClose', function(e){ //팝업 닫는 소스 }); Colored by Color Scripter cs 이런 식으로 모든 동적 객체에 대한 이벤트를 등록해 놓았습니다. 다른 객체도 마찮가지로 mouseenter 이벤트는 정상동작하지만 click 이벤트가 동작하지 않더군요. 문제가 무엇일.. Programing/jQuery 2018. 5. 21. javascript 자바스크립트 멀티 파일 읽기, 복수의 파일 읽기, 여러개 파일 읽기, multi FileReader javascript 자바스크립트 멀티 파일 읽기, 복수의 파일 읽기, 여러개 파일 읽기, multi FileReader 이전 포스팅에서 하나의 Text 파일을 읽어 처리하는 방법을 알아보았습니다. 하지만 꼭 하나의 html file 태그에 하나의 파일만 처리하는 법은 없죠. Link : javascript 자바스크립트 파일 텍스트 읽기 text file read 방법, 파일데이터 추출 이번엔 복수의 파일을 선택하여 처리하는 방법을 알아보도록 하겠습니다. 여러개의 파일을 처리하기 위해선 여러개의 파일을 선택해야 겠죠? 기존에 file 태그에 multiple="multiple" 옵션을 추가하고 name의 명칭 끝에 [] 을 붙여줍니다. (name="fileNames1[]") [] 라는 것은 배열로 처리된다는.. Programing/JavaScript 2017. 12. 18. Jquery serialize 시 주의 사항 checkbox 값 안넘어 가는 문제 Jquery serialize 시 주의 사항 checkbox 값 안넘어 가는 문제 jquery serialize 를 사용하면 form에 있는 파라메터를 쉽게 전달 할 수 있습니다. 하지만 체크박스 사용시에는 문제가 좀 있는데, 체크된 체크박스의 name만 넘어가고 값은 전달이 되지 않는 다는 것이죠. 예를 들면 1차로 2차로 $(function(){ var params = $('#frm').serialize(); console.log(param); }); 이렇게 폼의 값을 serialize 할때 만약 체크박스를 하나도 체크 하지 않았다면 빈값이 넘거가고 체크를 한다면 lane1Yn=&lane2Yn= 이런식으로 넘어가게 됩니다. 위에서 말한 것과 같이 name은 넘어가지만 값은 넘어가지 않죠. 값을 넘기는.. Programing/JavaScript 2017. 5. 31. 제이쿼리 jquery 선택된 요소의 텍스트 변경 span, p 등의 text 변경 html() method 제이쿼리 jquery 선택된 요소의 텍스트 변경 span, p 등의 text 변경 html() method 선택된 요소의 택스트를 변경하는데는 html()method가 사용된다. 텍스트 변경 뿐만 아니라 원하는 요소(체크박스, 라이오버튼 등)를 추가할 수도 있다. 자바스크립트의 innerHTML과 비슷한 역할을 한다고 보면 된다. - 사용방법 $("변경을 원하는 요소").html(변경될 값); 예) text change I want to change here 위의 예에서 text change 버튼을 클릭했을 때 id가 html_test인 span의 텍스트 값을 수정한다고 하자. "I want to change here" 텍스트를 "change"로 변경하는 방법은 아래와 같다. 버튼을 클릭하면 span의 .. Programing/jQuery 2015. 8. 7. 제이쿼리 폼의 객체 값을 문자열로 변환 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 란 무엇인가? & jQuery 다운로드 jQuery 란 무엇인가? 위키백과의 말을 인용하자면 jquery 란 브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리라 한다. 그래..이건 그냥 정의다. jquery 가 뭔지 궁금한 사람들로써는 '그래서 뭔데?' 라는 말이 나올수 있다. 그냥 점점 복잡해지고 있는 자바스크립트 코드를 단순하고 간결하게 만들 수 있는 효율적인 '방법'으로 알고만 있자. 자바 웹을 보다보면 '$' 가 있는 코드를 볼 수 있을 것이다. 이곳이 jquery 가 사용된 곳이다. 그럼 jquery를 왜 쓸까? 이유는 간단하다. 상대적으로 쉽고 간단하니깐. 많은 사람들이 쓰는데는 다 이유가 있다. 예를 들어 html 소스들중 원하는 element를 가져올때 id는 '#', class는 '.' 만쓰면 된다. $("#id') .. Programing/jQuery 2014. 4. 14. 이전 1 다음 반응형
