투케이2K

[타이틀] ​ 구 분 : Library / 라이브러리 ​ 제 목 : [라이브러리] [Web] jQuery (제이쿼리) ​ 사용되는 곳 : Web JavaScript [설 명] ​ 1. jQuery 란 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다 ​ ​ 2. jQuery 는 여러 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만듭니다 [참고 사이트] ​ https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ /* [테스트 함수 정의] */ function testMain(){ console.log(""); console.log("[testMain] : [start]"); console.log(""); // [CDN 추가 실시] // // [컴포넌트 아이디 지정 실시 및 강제 선택 실시] // [value 값에 option 에서 설정 한 값 지정] $("#select_item").val("2").prop("selected", true); // [선택된 select 컴포넌트 value , test 값 확인 실시] var selectValue = $("#select_item option:selected").val(); /..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ $("input:radio[name='"+String("radio_group")+"']:radio[value='"+String("1")+"']").prop("checked", true); $("input:radio[name='"+String("radio_group")+"']:radio[value='"+String("1")+"']").prop("checked", false); var radioChecked = $("input:radio[name='"+String("radio_group")+"']").is(':checked'); var radioValue = $(":input:radio[name='"+String("..

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. children : 부모에 포함된 자식을 지정할 때 사용합니다 3. first : 부모에 포함된 첫번째 자식을 지정합니다 4. children('요소:eq(인덱스)') : 부모에 포함된 특정 요소 (div , li ..) 에서 특정 인덱스를 지정합니다 5. last : 부모에 포함된 마지막 자식을 지정합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. text() : 선택한 요소의 텍스트 내용을 설정하거나 반환합니다 3. html() : 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환합니다 4. val() : 양식 필드의 값을 설정하거나 반환합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. css : jquery 사용해 css 속성을 변경합니다 3. slideUp : 슬라이드 업 애니메이션을 적용합니다 4. slideDown : 슬라이드 다운 애니메이션을 적용합니다 5. fadeOut : 서서히 사라지는 애니메이션을 적용합니다 6. fadeIn : 서서히 나타나는 애니메이션을 적용합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. tagId.css : 특정 태그 css 속성값을 확인 및 변경합니다 3. hasClass : 객체가 특정 클래스를 포함하고 있는지 상태를 알려줍니다 (true / false 반환) 4. addClass : 객체에 특정 클래스를 추가합니다 5. removeClass : 객체에 특정 클래스를 제거합니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로드 완료 상태를 나타냅니다 2. change : 특정 객체 상태 변경 상태를 확인합니다 (주로 폼 요소 상태 체크 - input, checkbox ..) 3. $(this).is(":checked") : 체크박스가 체크된 상태를 확인합니다 4. 참고 : 특정 태그 $("#check_1") 내에서 다시 태그를 지정시에는 this 를 사용해 지정할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [스크립트 소스코드] ​ ​ [body 소스코드] DATA [결과 출력] ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. val : 폼 양식에 저장된 값을 얻어옵니다 3. substring(시작, 길이) : 특정 문자열을 부분 출력할 때 사용합니다 4. keyup : 키보드 누른 후 >> 올라 간 상태를 확인합니다 5. $("#p_txt").text : p 태그 텍스트 내용을 변경합니다 6. 참고 : 특정 태그 $("#input_textarea") 내에서 다시 태그를 지정시에는 this 를 사용해 지정할 수 있습니다 */

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : jquery [소스 코드] ​ [결과 출력] ​ ​ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 2. $(":input:radio[name='qna_1_group']").length : qna_1_group 그룹으로 설정된 라디오 개수를 확인합니다 3. $(":input:radio[name='qna_1_group']:checked").val() : 선택된 라디오 버튼 value 값을 확인합니다 4. val : val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다 5. 참고 : 선택된 라디오 버튼이 없을 경우 >> undefined 을 반환합니다 */

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] // 특정 태그 css 스타일 속성 지정 및 확인 [ex : body 태그] $("body").css("height", "100%"); // [css 속성 지정] $("body").css("height"); // [css 속성 값 확인] // 특정 클래스 css 스타일 속성 지정 및 확인 [ex 클래스명 : CID] $(".CID").css("height", "100%"); // [css 속성 지정] $(".CID").css("h..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [스타일 속성 관련 메소드] ​ ​ /* =========================== */

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ [적용 (전)] ​ ​ [적용 (후)] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2...

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. $("#객체") : 특정 객체 id 를 설..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다 2. $("#객체") : jquery 에서 특정 객..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window.onload : 웹 브라우저 로딩 완료 상태를 확인합니다 2. https://api.ipify.org?f..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. $(객체).on(이벤트) : 특정 객체에 ..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다 2. $("body").click : body ..

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [요소 추가] ​ ​ [요소 변경 및 복사] ​ ​ [요소 삭제] ​ /* =========================== */