[AMCHARTS] input값을 받아 차트 데이터 추가 생성
·
STUDY/jQuery
input값을 받아 amchar3의 차트에 데이터가 추가되며 생성하는 코드 // var count = 0; var JsonData = []; $('#ageInput').on('input', function() { var num = $('#numInput').val(); count += 1; JsonData = { num: num, count: count }; var chartData = JSON.stringify(JsonData); console.log(chartData); chart.dataProvider.push(JsonData); chart.validateData(); }); .on() jQuery는 이벤트 처리를 포함하여 웹 개발자에게 다양한 기능을 제공하는 널리 사용되는 JavaScript 라이..
[jQuery] 2개의 클래스가 있는 요소 선택하기
·
STUDY/jQuery
아래와 같이 class가 두개 ~ 여러개 있는 요소를 선택하고 싶을때 두 클래스(논리적 AND와 같은 교차점)가 있는 요소만 일치시키려면 사이에 공백 없이 선택자를 함께 작성하면됩니다. $('.a.b') 순서는 관련이 없으므로 클래스를 바꿀 수도 있습니다. $('.b.a') 따라서 divID가 a클래스 b및 인 요소를 일치시키려면 c다음과 같이 작성합니다. $('div#a.b.c') 출처 : https://stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes-in-jquery
[jQuery] onload 와 ready 차이점
·
STUDY/jQuery
$(document).ready(function(){ alert('ready'); }); $(window).onload(function(){ alert('onload'); }); 호출 시점의 차이 실행순서 : .ready() → .onload() 순으로 실행 호출시점 : $(document).ready 의 호출 시점 : 1~2번 과정이 완료되어 DOM Tree 생성이 완료된 후 호출 $(window).onload 의 호출 시점 : 모든 과정이 완료되어, 웹 페이지가 다 구성된 후 호출 웹 브라우저의 HTML문서 렌더링 과정 불러오기(Loading) 불러오기는 HTTP 모듈 또는 파일시스템으로 전달 받은 리소스 스트림(Resource Stream)을 읽는 과정으로 로더(Loader)가 이 역할을 맡고 있다..
[jQuery] trigger 함수를 사용한 강제 클릭 이벤트
·
STUDY/jQuery
.trigger() .trigger() 함수는 이벤트가 발생할 때 실행될 함수나 .bind() 함수로 연결된 어떤 이벤트 핸들러를 강제로 실행시켜 줍니다. A call to .trigger() 함수를 사용해서 사용자가 일으킬 이벤트를 임의적으로 순서에 따라 발생시킬 수 있습니다. .trigger( eventType [, extraParameters ] ) trigger을 이용한 강제 클릭 예제: $(document).ready(function(){ // trigger로 인해 실행되는 부분 $("#btn").bind("click", function(){ alert("클릭!"); }); // 강제로 클릭 이벤트 발생시키는 부분! $("#btn").trigger("click"); }); } 클릭 안 해도 됨...
[jQuery] n초마다 버튼 자동 클릭 구현
·
STUDY/jQuery
매개값이 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 함수를 사용하여 일정한 시간 간격으로 버튼을 클릭합니다. 만약 매개값..
[jQuery] input 전화번호 하이픈 "-" 자동 처리 + 정규표현식 정리
·
STUDY/jQuery
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 명과 동일하..
[jQuery] 제이쿼리 배열 관련 메서드
·
STUDY/jQuery
배열 관련 메서드 종류 종류 사용법 설명 each() $.each() $("요소선택").each(function) $.each($("요소선택"), function) 배열에 저장된 문서 객체만큼 메서드가 반복실행됩니다. 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구합니다 $.map() $.map(Array, function) 배열에 저장된 데이터 수만큼 메서드가 반복실행됩니다. 함수에서 반환된 데이터는 새 배열에 순서대로 저장됩니다. 새로 저장된 배열 객체를 반환합니다. $.grep() $.grep(Array, function) 배열에 저장된 데이터 수만큼 메서드가 반복실행됩니다. 반환값이 true인 경우에만 배열의 데이터가 인덱스 오름차순으로 새 배열에 저장되며 그 배..
[jQuery] 제이쿼리 선택자
·
STUDY/jQuery
선택자 사용하기 선택자를 사용하기 위해서는 문서 객체를 불러와야 합니다. 다음은 선택자를 사용하는 올바른 방법입니다. [정상작동1] 내용 [정상작동2] 내용 영역에 문서 객체를 먼저 불러온 다음 선택자를 사용할 수있도록 위에 정상 적용 예제와 같은 방법으로 작성해야 합니다. [잘못된 방법] 내용 위와 같이 작성 하면 가 생성되기 이전에 선택자가 먼저 실행되어 선택자로 문서객체를 선택할 수 없습니다. 기본선택자 영역에 있는 문서 객체를 선택할수있는 선택자 구분 종류 사용법 설명 직접선택자 전체선택자 $("*") 모든 요소 선택 아이디선택자 $("#아이디명") id속성에 지정한 값을 가진 요소 선택 클래스선택자 $(".클래스명") class속성에 지정한 값을 가진 요소를 선택 요소선택자 $("요소명") 지정..