목록jQuery (9)
hrming
jQuery에서 제공하는 달력 형식의 UI 위젯중 하나인 datepicker 아래 블로그들에서 사용방법 참고하기 😎참고 및 출처 : https://www.nextree.co.kr/p9887/ jQuery: 참 편리한 날짜선택 위젯- datepicker웹 페이지를 검색하다 보면, 주로 회원가입 또는 날짜 관련해서 입력을 요구 하는 경우가 많습니다. 이처럼 날짜를 입력 받을 때 직접 입력 받는 방법도 있지만, jQuery에서 제공하는 달력 형식의 www.nextree.co.kr https://lpla.tistory.com/144 [JavaScript] Datepicker 사용법(설치, 한글, 스킨)1. 준비 jQuery는 Datepicker라는 날짜 선택창을 지원한다. Datepicker를 사용하기 위해서는..
전체 선택자${ " * " }모든 요소아이디 선택자${ "#아이디" }해당 아이디를 가지고 있는 요소클래스 선택자${ ".클래스" }해당 클래스를 가지고 있는 요소요소 선택자${ "요소" }지정 요소명을 가지고 있는 요소들그룹 선택${ "요소1, 요소2, 요소3" }지정된 요소들 문법 { id [수식] 내용 }내용$( "input [ name = 'man' ]" )해당 내용의 요소 선택$( "input [ name != 'man' ]" )해당 내용이 아닌 요소 선택$( "input [ name ^= 'man' ]" )해당 내용으로 시작하는 요소 선택$( "input [ name $= 'man' ]" )해당 내용으로 끝나는 요소 선택$( "input [ name *= 'man' ]" )해당 내용을 포함하는..
jQuery를 사용하여 특정 선택자를 기준으로 자식 요소 찾기 find() 자식 및 하위 태그 모두에서 탐색 children()바로 아래 요소, 즉 자식 요소만 탐색 첫번째 두번째 // 1. ul을 기준으로 자식 태그에 있는 li 태그를 찾고 싶을 때// --> children() 사용// 2. ul을 기준으로 손자 태그에 있는 span을 찾고 싶을 때// --> find() 사용(children은 자식 태그인, 까지만 찾을 수 있다) 참고 및 출처 : https://androman.tistory.com/39 바로 아래 요소, 즉 자식 요소만 탐색할때는 children()을 사용, 자식 및 하위 태그 모두에서 찾을 때는 find()를 " data-og-ho..
$.each() - 배열의 요소나, Map 또는 객체의 속성을 반복할 수 있도록 하는 함수- JavaScript의 for문과는 달리 조건식의 범위 지정등이 필요하지 않고, 배열 뿐만 아니라 DOM 객체나 일반 객체에도 사용이 가능하다.$.each( array, callback );$.each( object, callback );$(selector).(callback); // 배열 반복var arr = [ 1, 2, 3, 4, 5 ]; $.each(arr, function(index, value) { console.log(index + " : " + value);});$.each([ 1, 2, 3, 4, 5 ], function(index, value) { console.log(index..
.attr()을 통해서는 element가 가지는 속성값이나 정보를 조회(style, src, rowspan 등)하거나 세팅하는 형식 .prop()을 통해서는 element가 가지는 실제적인 상태(활성화, 체크, 선택여부 등)를 제어하는 업무 checked, selected같은 값이 없는 속성의 기본값은 속성의 이름과 같기 때문에 attr()의 경우 변하지 않는다. 그래서 체크상태 등을 판단해야 할 경우 prop()을 사용해야 한다. jQuery API에서 공식적으로 form 요소의 disabled, selected, checked와 같은 속성값을 확인 또는 변경하는 경우는 .prop()을 사용하길 권장한다참고 및 출처 :https://jin-network.tistory.com/105 [jQuery] at..
최근 새로운 프로젝트 소스를 받았는데, 처음보는 게 있었다.찾아보니, jqGrid라고 하는데 아래와 같이 html 요소를 선택한 후에 .jqGrid() 함수를 붙이고 안에 값들을 설정하면 그리드가 생성되고 그리드 내에서 작동하는 이벤트도 설정이 가능하다.$("#list").jqGrid({ ~~~~~}) 아래 블로그에 설명이 잘 되어있으니, 참고하기 :>참고 및 출처:https://coding-plant.tistory.com/97 [Javascript] jqGrid 사용법 총 정리소개 jqGrid는 jQuery라이브러리를 이용한 Grid Plugin 이다. 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax기반 자바스크립트 컨트롤러 기능을 한다. jqGrid는 Ajax가 내장되어 있어서 조금만c..
예전 회사에서는, 화면단을 특정 프레임워크를 사용해서 자바스크립트나 제이쿼리를 전혀 사용하지 않았다.그래서 제이쿼리를 전반적으로 한번 쭉 공부해야겠다고 생각하고 있었는데, 아래 블로그에 잘 정리되어 있는 것 같아서 해당 내용들부터 먼저 숙지하기! 😎👍 https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%84%A0%ED%83%9D%EC%9E%90-Selector-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC 📚 제이쿼리 선택자(Selector) 종류 총정리jQuery CSS 선택자 모음 기본 선택자 선택자 예제 설명 * $("*") 모든 요소를 선택 .class $(".clas..
$(document).ready() : 외부 리소스, 이미지와는 상관없이 브라우저가 DOM(document Object Model) 을 생성한 직후에 실행 : $(window).load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨. $(window).load() 또는 $(window).on('load') : DOM(Document Object Model) 의 Standard 이벤트 입니다. : HTML의 로딩이 끝난 후 실행 되고, 화면에 필요한 모든 요소 (image, css, javascript 등)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨. 이미지의 경우엔 로드가 실패되었을 경우에도 포함.: 전체 페이지의 모든 외부 리소스와 이미지가 브라우저에 불려진..