jQuery7 [JQuery] 기본 선택자 1. 기본 선택자 전체 선택자 (Wildcard Selector) - HTML 페이지에 있는 모든 문서 객체를 선택 - 문법 : * 태그 선택자 - 특정한 태그를 선택 - 문법 : 태그명 아이디 선택자 - 특정한 id 속성이 있는 문서 객체를 선택 - 문법 : #아이디명 Header 클래스 선택자 - 특정한 class 속성이 있는 문서 객체를 선택 - 문법 : .클래스명 Header1 Header2 Header Header Header Header 2. 자손 선택자와 후손 선택자 기본 선택자의 앞에 붙여 사용하며, 기본 선택자의 범위를 제한합니다. 자손 선택자 - 자손을 선택 - 문법 : '요소1' > '요소1' Dog Cat Pig 후손 선택자 - 후손을 선택 - 문법 : '요소1 요소2' 형태로 사용.. 2024. 3. 29. [AJAX] Ajax 비동기식 처리와 동기식 처리 Ajax란 Asynchronous JavaScript and XML의 약자입니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 이때 서버와는 JSON, XML, HTML, 텍스트 파일 등 과 같은 다양한 형태의 데이터를 주고받을 수 있습니다. 기존 방법과 다르게 웹에서 서버 측에 데이터를 요청하고 데이터의 수신이 완료될 때까지 기다릴 필요 없이, Ajax를 이용하여 데이터의 수신을 기다리지 않고 바로 다른 작업을 실행하여 불필요한 페이지의 로딩을 기다리지.. 2023. 7. 10. [JQuery] $(document).ready 와 $(document).on의 차이(Feat. $(document).ready가 동적 요소 제어하지 못할 경우) $(document).ready $(document).ready(function(){ //이벤트 }) 보통 위 코드와 같은 형식으로 사용됩니다. $(document).ready는 DOM이 준비가 됐을 때 click이벤트를 시작하겠다는 의미입니다. 문제는 동적으로 생성되는 엘리먼트들에 한해서는 $(document).ready가 동작되지 않을 수 있습니다. 그 이유는 이벤트 핸들러(event handler)를 엘리먼트에 직접 바인딩을 하기 때문입니다. 엘리먼트에 직접 바인딩을 하기 때문에 지금 존재하는 태그들만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없습니다. 동적이란? 보통 ajax를 통해 만들어지는 것을 말하며, 기존 DOM이 생성된 뒤 JS, JQuery를 통해서 새로 만들어.. 2023. 3. 22. [JQuery] 체크 박스 전체 개수와 선택된 개수 / 체크 처리와 체크 해제 제이쿼리를 이용하여 체크박스 전체 개수와 체크된 개수를 구할 수 있습니다. 또한 체크처리 / 해제 할 수 있습니다. 체크박스의 전체 개수 $("input:checkbox[name=체크박스 NAME]").length 의 형태로 체크박스 전체 개수를 구할 수 있습니다. 위와 같은 체크박스가 있을 때 다음과 같은 제이쿼리를 사용해 checkbox_aaa 체크박스의 전체 개수를 알 수 있습니다. $("input:checkbox[name='checkbox_aaa']").length; 체크박스 체크된 개수 $("input:checkbox[name=체크박스 NAME]:checked").length 의 형태로 체크된 개수를 구할 수 있습니다. 위와 같은 체크박스가 있을 때 다음과 같은 제이쿼리를 사용해 checkbox.. 2023. 1. 27. [JQuery] 상위요소, 부모 요소 찾는 방법(parent, parents, closest) 제이쿼리를 통하여 부모 요소를 선택하는 방법은 대표적으로 세 가지 함수가 있습니다. parent() parents() closest() parent() parent 함수는 해당 요소의 바로 위에 존재하는 하나의 부모 요소를 반환합니다. 아래 예시와 같이, parent 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그를 반환하게 됩니다. What is the parent elements? parents() 만약 하나가 아닌 모든 부모요소를 찾을경우에는 parents 함수를 사용합니다. 아래 예시와 같이, parents 함수를 이용하여 span 태그의 부모요소를 찾을 경우, p태그와 div 태그 모두를 반환하게 됩니다. What is the parent elements? closest() clo.. 2022. 12. 29. [JQuery] 속성 추가, 제거(attr, removeAttr) attr() - 속성을 가져오거나 추가 attr()은 선택된 요소의 속성의 값을 가져오거나 속성을 추가하는 데 사용되며, 아래와 같은 형태로 사용할 수 있습니다. 1. 속성 값 가져오기 $(선택자).attr( 선택요소 ); 아래의 실제 코드를 통하여, 자세한 사용 예시를 알아볼 수 있습니다. 기본정보 test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값인 detail123을 가져와 alert형식으로 알려주게 됩니다. 2. 속성 값 변경하기 $(선택자).attr( 선택요소, 변경할 값 ); 아래의 코드는 test1이라는 id값을 가지고 있는 div영역을 클릭하면, test1이 가지고있는 class속성의 값을 detail123에서 detail456으로 변경합.. 2022. 12. 23. [JQuery&JavaScript] JQuery와 Javascript의 차이점 자바스크립트와 제이쿼리 자바스크립트는 웹브라우저에서 작동하는 스크립트입니다. 기능을 포함하는 거의 모든 홈페이지들이 사용하고 있습니다. 제이쿼리 또한 역시 자바스크립트입니다. 다만 자바스크립트로 빈번하게 사용되는 기능들은 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리입니다. 자바스크립트는 아래와 같이 크게 4가지 요소로 구성되어있습니다. 1. 자바스크립트 core 문법 2. 자바스크립트 core 라이브러리 3. 자바스크립트 BOM (Browser Object Model) 4. 자바스크립트 DOM (Document Object Model) 제이쿼리는 이중 자바스크립트 DOM 작업을 쉽게 처리할수있도록 도와주는 라이브러리입니다. 또한 제이쿼리는 DOM 작업을 쉽게 도와주는 라이브러리일 뿐, 자바스크.. 2022. 4. 18. 이전 1 다음 반응형
