everyday com-eat

{ "Hello World!" };/JavaScript/jQuery 20

카테고리 설명
  • fullcalendar 날짜 클릭 이벤트 시 //날짜 선택 var startDateStr = $('#calendarStartDate').val(); var selectDate = new Date(startDateStr); //선택한 날짜 기준 한달 정보 구하기 var getMonthArr = function(date){ //기준 달의 1일 날짜 var firstDay = new Date(date.getFullYear(),date.getMonth(),1); var firstIdx = firstDay.getDay(); //다음달 1일 구해서 마지막 날 구하기 var nextMonthDate = new Date(date.getFullYear(), date.getMonth()+1, 1); var lastDay ..

  • 내가 한 방법 div의 length를 구해서 each문안에 또 for문 돌릴려고 했음ㅎ; 당연히 클로저 구현안해서 가장 마지막 인덱스로 모두 똑같이 나올 뿐...^^ 검색 결과 each문 인자로 index주면 너무나 간단하게 해결된다.. 완성 코드 $('.rowProperties').each(function(index){ $(this).find('label').attr('for', 'checks_'+index); $(this).find('input[type="checkbox"]').attr('id','checks_'+index); }); 완성 모습

  • jQuery Ajax - XMLHttpRequest 객체를 활용하여 가공된 ajax 메서드 -> $. ajax() - 비동기화 방식 통신 - text, html, json, xml을 주로 비동기화 통신시 사용한다. - 브라우저에서 ajax 통신시 같은 도메인에서만 기본 허용하고 있다. - CORS 정책 위반으로 비동기화 통신 못할 경우 응답쪽에서 헤더에 Access-Control-Allow-Origin 값 설정 혹은 요청 서버(서버언어로)에서 비동기화 통신해야한다. 1. dataType=html (html파일) (요청페이지) HTML 코드 ajax 호출 버튼을 클릭해주세요. 요청페이지(ajax01.html)실행화면 (응답페이지) HTML 코드 ajax 응답 페이지 응답 페이지 입니다. send (요청페이..

  • 동적 바인딩 - 새로 추가된 html 요소에 이벤트가 반응 할 수 있도록 만드는 방법 추가 제거 실습1 아래의 추가 버튼 클릭시 행을 복제 하여 행추가, 제거 버튼 클릭시 행 제거를 하도록 하시오. (input의 값은 초기화, 삭제는 행 2개 이상일 경우에만 삭제 가능하도록) 배경색상전환 풀이 var bg = $('style').text(); $(function() { for(var i=0; i style '태그'니깐 똑같이 선택자로 불러오면 됨 2. text() 메서드로 style태그안 모든 문자 다 콘솔에 찍어놓고 어떻게 뒤에 '#f00','#0f0','#00f'를 배열에 넣을까 고민함 > html로 찍어봤는데 undefined 나옴 해결 못함 3. 굳이 조건문 안 쓰고 전역변수 선언해 놓고 함수 안..

  • 2022-01-21 JavaScript 수업 실습 도중 한가지 의문에서 시작 된 나 혼자하는 실습... - '전체체크' 체크시 아래 체크박스들 중 하나라도 풀리면, '전체체크'의 체크표시도 풀리게 하고 싶음 - 아래 체크박스들을 다 체크하면 '전체체크'의 체크표시도 체크되게 하고싶음 더보기 전체선택 내용1 내용2 내용3 내용4 내용5 내용6 내용7 내용8 첫번째 풀이 $(function() { var $allCheck = $('#allCheck'); $allCheck.click(function() { if ($allCheck.prop('checked') == true) { $('.checks').prop('checked', true); console.log($allCheck.prop('checked'))..

  • 이벤트 등록 메서드 - 이벤트 관련 메서드는 이벤트명칭으로 메서드가 구성되어 있다. - 이벤트 종류 : click, blur, change, keyup, keydown, keypress - 이벤트등록은 이벤트 메서드를 활용하거나, on메서드를 활용하여 이벤트를 등록 시킬 수 있다. - 선택자.이벤트메서드(function(){}); 더보기 실습. 버튼 클릭시 해당행의 .my-text라는 클래스를 찾아 상위 article 태그를 제거 하시오. 클릭 한국스마트정보교육원 클릭 한국스마트정보교육원 클릭 한국스마트정보교육원 풀이 $(function(){ $('.mybtn').click(function(){ $(this).parents('li').find('.my-text').parents('article').rem..

  • jQuery - 웹 호환성, 애니메이션 효과 등 쉽게 구현 할 수 있도록 만들어진 자바스크립트 라이브러리 - 외부 파일을 읽어서 실행해야 한다 - jQuery 함수로 시작이 된다. - 라이브러리 셋팅하기 https://jquery.com/ ( 경량화된 min버전으로) - jquery 라이브러리가 셋팅되어 있어야 사용할 수 있다. 제이쿼리 함수 - 실행시 제이쿼리 객체가 반환된다. - 제이쿼리의 메서드가 prototype에 명시되어 있다. - 실행 후 제이쿼리 객체가 반환되어야 제이쿼리의 메서드를 체이닝 기법으로 사용할 수 있다 //실행되지 않고 jquery 함수가 출력됨 console.log(jQuery); console.log($); //var $ = jQuery; //jquery 함수 실행 후 jqu..

  • 콜백 함수 - 이벤트에 등록된 함수는 콜백함수이다. 콜백함수 테스트 더보기 한국스마트정보교육원 onmousemove - 마우스가 움직일 때 textMove라는 id를 가진 div의 top,left의 값을 마우스 좌표로 줘서 마치 마우스를 따라다니는 것처럼 보인다 콜백 데이타의 target 속성 확인 btn001 더보기 ajax 수업 request.done메서드 콜백데이터 이해 안돼서 예시 // html 콜백테스트 function myCallback() { this.type=''; this.target=''; this.eventTarget=''; } myCallback.prototype.eventInfo = function(eventTarget, type, target) { this.type = type;..

728x90