Front-End/jQuery11 [jQuery] 장바구니 & checkbox [기능정의] 1) 수량 체크 시 상세 주문테이블 생성 2) 총 합산금액 계산 3) 체크박스 체크된 품목들만 테이블에서 삭제 [초기화면] [테스트화면] [소스] Buy Fruit checkbox 코드 품목 가격 수량 1 사과 500 2 바나나 1500 3 딸기 1000 삭제 품목 가격 수량 금액 총수량 총금액 2020. 4. 4. [jQuery] data() data()는 HTML element에 메타 데이터 정보를 읽는 역할을 하는 함수이다. data 저장 var tar = document.getElementByTagName('h2')[0]; //$('h2')[0] //방법1 tar.setAttribute('data-color', 'red'); //test //방법2 tar.dataset.color = 'blue'; //test //결과 확인 console.log(tar.outerHTML); data 읽기 var tar = document.getElementByTagName('h2')[0]; //방법1 var color = tar.getAttribute('data-color'); //red //방법2 var color = $(tar).data('color'.. 2019. 5. 28. [jQuery] on('click') & click Event on('click')은 element에 동적으로 이벤트를 바인딩이 가능하지만 click은 처음에 선언된 element에만 동작한다. 여기서 처음에 선언된 element는 맨 처음 페이지를 로딩하였을 때 선언되어 있는 element를 의미한다. 즉 on('click')은 페이지에서 동적으로 새로운 태그들이 추가되어도 이벤트를 줄 수 있다. Test code $('#test').on('click', function(){ alert('test success'); }); $(document).on('click', id, function) 와 같은 형태로도 사용할 수 있다. $(document).on('click', '#test', function(e) { var tar = e.currentTarget; var .. 2019. 5. 28. [jQuery] select option 설정 여기서 $('.select-test')는 select를 가리킨다. - index로 option에 접근하여 selected 설정하기 $('.select-test > option:eq(0)').prop('selected', true); $('.select-test > option:eq(0)').attr('selected', 'selected'); - value값으로 option에 selected 설정하기 $('.select-test').val('test'); $('.select-test > option[value="test"]').attr('selected', true); $('.select-test > option[value="test"]').prop('selected', 'selected'); Refer.. 2019. 5. 27. 이전 1 2 3 다음
