본문 바로가기
  • 2025

프론트엔드/제이쿼리12

[제이쿼리] 객체조작메서드 (수정중) 객체 조작 메서드 객체 조작 메서드는 속성 조작 메서드와 수치조작 메서드, 객체 편집 메서드 총 네가지로 나뉜다. 1. 속성 조작 메서드 - 속상조작 메서드는 요소 속성을 바꿀 때 사용한다. html() html("새요소") $("요소선택").html(); $("요소선택".html("새요소") 선택 요소의 하위요소를 가져와 모두 제거하고 그 위치에 지정한 새 요소 생성 text() text("새 텍스트") $("요소 선택").text() $("요소 선택").text("새 텍스트") 선택한 요소가 감싸는 모든 텍스트를 가져옴 선택한 요소의 하위 요소를 모두 제거하고 그 위치에 지정한 새 텍스트를 생성 attr("속성명") attr("속성명", "새 값") $("요소 선택").attr("속성명") $("요소.. 2023. 6. 23.
[제이쿼리] 객체조작 - prop() 메서드 prop() 메서드 - 선택상자, 체크박스, 라디오 버튼과 같은 상태 속성값을 가져오거나 새로 설정 할 때 사용한다. 🎵 해당 속성값이 checked된 상태인지, selected된 상태인지 확인가능하다. id값이 chk1인 요소가 현재 체크가 되있는 상태이면 ture를 아니면 false를 반환한다. var a = $("#chk1").prop("checked"); // true or false 🎵 체크, 선택 상태를 변경 id="chk3" 를 가진 요소에 checked 속성을 추가해준다. 결과를 보면 chk3에도 체크가 된 것을 볼 수 있다. var a = $("#chk3").prop("checked",true); 🎵 태그명(tagName), 노드타입(nodeType), 선택 옵션의 인덱스 값을 반환한다... 2023. 6. 23.
[제이쿼리] 선택자 지옥.. 기본선택자(1) 제이쿼리 선택자를 사용하기 위해 안에 다음 코드를 넣어준다. js 파일이 있는 경로로 설정해주면 된다. (src="파일 경로") 제이쿼리에는 기본선택자, 직접선택자, 인접관계 선택자, 탐색선택자 그 외 다양한 선택자들이 있다. 첫번째로 기본선택자는 직접선택자와 인접관계 선택자로 나뉜다. 직접선택자 먼저 직접 선택자부터 확인해보자. 직접 선택자는 주로 멀리 떨어진 요소를 직접 선택할 때 사용한다. 직접선택자 - 1) 전체 선택자 (*) 전체선택자를 사용하면 모든 부분에 반영된다. 직접 선택자 - 2) 아이디/클래스/요소/그룹/종속 선택자 이전 html을 배웠다면 이해하기 쉽다. 종속 선택자는 선택하고자 하는 요소에서 한발 더 나아가 아이디, 클래스 까지 고려한다. 예를들어 여러 요소에 id="종속"이 적용.. 2023. 6. 22.
[제이쿼리] 다운로드 및 연동, 선택자$(1) 제이쿼리는 자바스크립트 개발자가 만든 라이브러리 언어이다. 이 라이브러리 언어는 자바스크립트로 만들어진 다양한 함수를 가리키며 기존 자바스크립트에서 불편했던 점들을 개선했다. - 객체모델인 DOM 그리고 이벤트 처리를 쉽게 구현할 수 있음 - Ajax 응용 프로그램, 플러그인을 빠르게 개발 할 수 있음 - 오픈소스 기반의 자바스크립트 제이쿼리는 대부분의 브라우저에서 지원되고 HTML DOM과 CSS 를 손쉽게 조작하고 적용할 수 있다. 다양한 플러그인과 참고할 수 있는 문서가 많으며 애니메이션 효과,대화형 처리는 간단하게 적용하고 같은 동작을 더 짧은 코드로 구현할 수 있다. 오픈 라이선스 적용으로 누구나 쉽게 이용할 수 있다. 이렇듯 제이쿼리는 장점이 많아 자바스크립트 라이브러리 중에서 많이 사용된다... 2023. 6. 21.