JQuery
-
[JQuery] 제이쿼리 탐색 선택자JQuery 2023. 6. 9. 11:25
탐색 선택자 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택합니다. 대표적으로 배열의 idnex를 사용하여 선택하는 "위치 탐색 선택자"와 지정된 속성과 값으로 선택하는 "속성 탐색 선택자"가 있습니다. 위치 탐색 선택자 기본 선택자로 선택한 요소는 배열에 담깁니다. 이때 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있습니다. 하나씩 예제와 함께 살펴보겠습니다. first/last 선택자 선택된 요소 중 첫 번째 요소만 선택 마지막 요소만 선택 1. $("요소:first") or $("요소").first() 2. $("요소:last") or $("요소").last() 탐색 선택자 내용1 내용2 내용3 내용4 even/odd 선택자 홀수 번째 요소 ..
-
[Jquery] 제이쿼리 선택자JQuery 2023. 6. 8. 00:01
선택자 제이쿼리 선택자느 CSS 선택자와 마찬가지로 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. HTML에서 작성한 스타일은 사용자의 동작에 의해 변경할 수 없기 때문에 정적이다 라고 이야기 하고, 제이쿼리에서 작성한 CSS는 동적으로 적용할 수 있습니다. 문서 객체 모델 문서 객체 모델은 DOM(Document Object Model) 입니다. 다음 HTMl 문서의 객체 구조는 아래와 같습니다. 위와 같이 문서 객체 구조를 그림으로 표현하면 트리 구조가 됩니다. 가장 상위 Root Node인 html을 시작으로 뿌리로 뻗어 나갑니다. 선택자 사용하기 제이쿼리는 무문서 객체를 불러와서 선택자를 사용할 수 있습니다. 내용 위와같이 작성하게되면 txt를 선택할 수 없습니다. 우리는 우선 bo..
-
[Jquery] 제이쿼리 시작하기JQuery 2023. 6. 7. 09:23
제이쿼리란? 제이쿼리는 자바스크립트 개발자였던 존 레식이 자바스크립트를 이용해 만든 라이브러리입니다. 제이쿼리의 장점 호환성 문제 해결 자바스크립트는 DOM과 이벤트 객체의 호환성이(크로스 브라우징) 떨어진다는 단점이 존재합니다. 예를 들어 인접 요소 선택자 중 다음 요소 선택자는 IE8 이하의 브라우저에서 DOM을 선택 했을 때와 이후 버전의 브라우저에서 선택 했을 때 결과가 다릅니다. 이러한 호환성 문제가 제이쿼리에서는 모두 해결되었습니다. 쉽고 편리한 애니메이션 효과 기능 구현 제이쿼리는 애니메이션과 다양한 이벤트를 지원하는 메서드를 제공하기 때문에 개발 시간 및 코드 길이를 많이 단축할 수 있습니다. 제이쿼리 라이브러리 연동하기 다운로드 방식 1. https://cdnjs.com 에서 jquery..