매개값이 1일 때 1초마다, 2일 때 2초마다 버튼을 누르고 0초 일 때 작동을 멈추는 코드입니다. 매개값에 따라 버튼을 클릭하고, 0이 입력되면 타이머를 멈추는 jQuery 코드 : let intervalId; function clickButtonEverySeconds(n) { if (n { button.trigger('click'); // 버튼을 클릭합니다. }, n * 1000); // n초마다 버튼을 클릭합니다. } clickButtonEverySeconds(3); // 매개값을 원하는 숫자로 변경하여 호출합니다. 위 코드에서는 clickButtonEverySeconds 함수가 매개값으로 받은 n를 기반으로 setInterval 함수를 사용하여 일정한 시간 간격으로 버튼을 클릭합니다. 만약 매개값..
input 전화번호 입력 시 하이픈 ("-") 자동으로 붙이기 전화번호를 넣는 input 태그 부분에, 무조건 하이픈 ("-") 이 들어가게 하고 싶어서 찾아본 제이쿼리 정규식 코드입니다. 코드 출처 : https://cublip.tistory.com/326 $(document).on("keyup", ".className", function() { $(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") ); }); .className은 클래스명 들어가는 부분이고 , input태그의 class 명과 동일하..
배열 관련 메서드 종류 종류 사용법 설명 each() $.each() $("요소선택").each(function) $.each($("요소선택"), function) 배열에 저장된 문서 객체만큼 메서드가 반복실행됩니다. 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구합니다 $.map() $.map(Array, function) 배열에 저장된 데이터 수만큼 메서드가 반복실행됩니다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장됩니다. 새로 저장된 배열 객체를 반환합니다. $.grep() $.grep(Array, function) 배열에 저장된 데이터 수만큼 메서드가 반복실행됩니다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배..
선택자 사용하기 선택자를 사용하기 위해서는 문서 객체를 불러와야 합니다. 다음은 선택자를 사용하는 올바른 방법입니다. [정상작동1] 내용 [정상작동2] 내용 영역에 문서 객체를 먼저 불러온 다음 선택자를 사용할 수있도록 위에 정상 적용 예제와 같은 방법으로 작성해야 합니다. [잘못된 방법] 내용 위와 같이 작성 하면 가 생성되기 이전에 선택자가 먼저 실행되어 선택자로 문서객체를 선택할 수 없습니다. 기본선택자 영역에 있는 문서 객체를 선택할수있는 선택자 구분 종류 사용법 설명 직접선택자 전체선택자 $("*") 모든 요소 선택 아이디선택자 $("#아이디명") id속성에 지정한 값을 가진 요소 선택 클래스선택자 $(".클래스명") class속성에 지정한 값을 가진 요소를 선택 요소선택자 $("요소명") 지정..
data() 1. 속성 추가 - $(selector).data(key, value) key는 string type의 변수로 말 그대로 데이터가 저장될 key 값이다. value는 object type으로 javascript에서 지원하는 모든 type의 데이터를 저장할 수 있다. 2. 속성 가져오기 - $(selector).data(key) key는 위에서 저장한 데이터를 가져오기 위한 key 값이다. key를 생략하여 .data()로 사용도 가능하며, 결과는 해당 엘리먼트에 저장된 모든 데이터들이 JSON 형식으로 나온다. 3. 속성 삭제 - $(selector).removeData(key) key는 string type으로 삭제할 데이터의 key값이다. attr() 1. 속성 추가 - $(selecto..
attr() 와 prop() 의 차이점 jQuery 1.6 이후 부터 .attr() 함수가 용도에 따라 .attr() 과 .prop() 으로 분리 되었다. .attr() : html 의 속성(attribute)을 다룬다. .prop() : javascript 프로퍼티(property)를 다룬다. [예 1] 코멘트 var $comment = $('#get_comments'); alert($comment.attr('href')); // href 속성 값을 표시 alert($comment.prop('href')); // href 프로퍼티 값을 표시 위 예제1 에서 alert 결과 alert 의 .attr() 값은 "#comments" alert 의 .prop() 값은 "http://test.com/path/p..
jQuery 기존요소의 내부에 추가 .append .prepend() .appendTo() .prepend() 다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다. 메소드설명 .append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다. .prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. .appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다. .prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다. .append() 메소드 .append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다. $(target).append(source) source 객체를 target 객체의 마지막에 추가한..
.extend() 함수 제이쿼리의 extend()는 다수의 객체를 하나의 객체로 합치는 merge기능을 수행할 수 있습니다. 만약 두 개 이상의 객체를 하나로 합치려는 경우 extend()를 사용하여 새로운 객체로 만들 수 있죠. 아래는 extend()를 사용하는 간단한 방법 및 문법은 아래와 같습니다. $.extend(대상, 객체1, 객체2, ... , 객체n) 오브젝트 a와 b를 합치고 싶은 경우 var a = { id: 1, name: 'TAM' }; var b = { name: 'TAM-new', hobby: 'football' }; $.extend(a, b); console.log(a); // 결과: // { // id: 1, // name: "TAM-new", // hobby: "footbal..
자바스크립트의 addEventListener 과 같은 기능을 하는 on과 off - bind 와 unbind에 대해 정리하였다. .bind() / .unbind() .bind jquery의 이벤트 설정 메서드 .unbind jquery의 이벤트 해제 메서드 click! 아래와 같이 unbind와 bind를 한 번에 사용할 수도 있다. click! jquery 1.7부터 bind/unbind가 개선되어 나온 것이 on/off 메서드이다. jQuery 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 바인딩한다. .on() jQuery는 특정 요소에 이벤트 바인딩(event binding)하기 위해 .on() 메소드를 사용한다. jQuer..
jQuery innerHTML innerText기능 사용하기 .html() .text() text(), html() 메서드는 문서 객체 안의 내용을 가져오거나 추가할 때 사용하는 메서드입니다. text() 이벤트 $(셀렉터).text() 셀렉터의 문자를 변경 해주는 것입니다. html() 이벤트 문자열만이 아닌 문자열 안에 태그도 같이 넣을수 있습니다. 문서 객체의 내용얻어오기 단순텍스트 문서 body의 내용이 위와 같이 구성되어 있습니다. 만약 이상태에서 span의 내용을 얻고자 할때 text(), html() 메서드를 사용할 수 있습니다. text(), html() 동작의 차이점 먼저 text() 메서드를 먼저 살펴보자면 text() 메서드는 jQuery로 선택한 DOM 객체의 textContent ..
EasyUI란? easyui는 jQuery, Angular, Vue 및 React를 기반으로 하는 사용자 인터페이스 구성 요소 모음입니다. easyui는 최신 대화형 자바스크립트 애플리케이션을 구축하기 위한 필수 기능을 제공합니다. easyui를 사용하면 많은 자바스크립트 코드를 작성할 필요가 없으며 일반적으로 일부 HTML 마크업을 작성하여 사용자 인터페이스를 정의합니다. HTML5 웹 페이지를 위한 완벽한 프레임워크. easyui는 제품을 개발하는 동안 시간과 규모를 절약합니다. easyui는 매우 쉽지만 강력합니다. easyui의 각 구성 요소에는 속성, 메서드 및 이벤트가 있습니다. 사용자는 쉽게 확장할 수 있습니다. Properties 속성은 jQuery.fn.{plugin}.defaults에 ..
bottom top bottom top bottom top bottom top bottom top bottom top .stop() 현재 동작하고 있는 애니메이션 중단시 동작이 즉시 중단 .animate() 애니메이션 효과를 만듭니다.
