팁스토리, Tips

■ JQuery color picker 사용법 - 웹에서 사용자에게 색상코드 선택 값을 받을 때 단순히 input 박스를 사용하는 것보다 UI적으로 보기 좋음 ■ 라이브러리 ■ 사용법 ■ 라이브러리 파일 공유

■ JQuery onclick event 마우스 우클릭 이벤트 ■ 사용법 $("#btn-click").on('contextmenu', (event) => { // 우클릭 시 실행 });

■ JQuery datatable tr click event fnDrawCallback: function () { $('#tableId tbody tr').click(function () { // get position of the selected row var position = $('#tableId').dataTable().fnGetPosition(this) // value of the first column (can be hidden) var id = $('#tableId').dataTable().fnGetData(position).id // redirect document.location.href = 'abcd.html?id=' + id }) }

■ JQuery JSON 코드 정렬 사이트 http://json.parser.online.fr/ https://jsonformatter.curiousconcept.com/# https://tools.arantius.com/tabifier

■ JQuery .closest(), .parents() 메소드 속성 차이 .colsest() 선택한 요소의 상위 요소 중 조건에 맞는 가장 가까운 하나의 요소를 선택함 .find() 선택한 요소에서 조건에 맞는 요소를 모두 선택 ■ .closest(), .parents() 차이 .closest() .parents() 현재 요소로 시작 상위 요소로 시작 0 또는 1개의 요소 0개 이상의 요소 ■ 예시 I II A B 1 2 3 C III 항목 A에서 시작하는 요소 검색을 수행한다고 가정했을 때 1. closest() 클래스 item-a에서 가장 가까운 level-2 클래스를 가진 의 색상을 변경 $( "li.item-a" ).closest( "ul" ).css( "background-color", "re..

■ JQuery .toggle() 요소 숨기기/보여주기 특정 선택 요소를 숨기거나 보여주기 위한 함수 ■ 문법 $("#targetDiv").toggle(); $("#targetDiv").toggle("시간"); $("#targetDiv").toggle("시간", 함수); ■ 사용법 * 버튼 클릭 시 targetDiv라는 id를 가진 영역이 숨겨졌다 보여졌다를 반복함 클릭

■ JQuery form action 값 변경 ■ 사용법 $("#formId").attr("action", "new_action.php");

$.each 구문을 이용해 JSON 객체(object)의 키(key)와 값(value)를 손쉽게 가져올 수 있음 var json = { 'name' : '홍길동' , 'age' : '20' }; $.each( json, function( key, value ){ console.log( 'key:' + key + ' / ' + 'value:' + value ); });