jQuery 기본 지식 소개_jquery
- WBOY원래의
- 2016-05-16 16:20:281253검색
JavaScript 라이브러리 기능 및 비교
JavaScript 개발을 단순화하기 위해 일부 JavsScript 라이브러리는 사전 정의된 많은 개체와 유틸리티 기능을 캡슐화하여 탄생했습니다. 사용자는 상호 작용이 어렵고 주요 브라우저와 호환되는 Web 2.0 기능을 갖춘 풍부한 클라이언트 페이지를 생성하는 데 도움이 될 수 있습니다
현재인기 있는 JavaScript 라이브러리는 다음과 같습니다.
jQuery 소개
jQuery는 Prototype 이후 또 다른 뛰어난 JavaScript 라이브러리입니다
jQuery 철학: 적게 쓰고, 더 많이 할 수 있다는 장점은 다음과 같습니다.
경량
강력한 선택기
DOM 작업의 탁월한 캡슐화
신뢰할 수 있는 이벤트 처리 메커니즘
완벽한 아약스
우수한 브라우저 호환성
체인 작동 모드
……
jQuery: HelloWorld
jQuery 객체
jQuery 객체는 DOM 객체를 jQuery($())로 감싸서 생성한 객체입니다
jQuery 개체는 jQuery에 고유합니다. 개체가 jQuery 개체인 경우 jQuery의 $(“#persontab”).html();
메서드를 사용할 수 있습니다.jQuery 객체는 DOM 객체의 메소드를 사용할 수 없고, DOM 객체는 jQuery의 메소드를 사용할 수 없습니다
규칙: jQuery 객체를 얻으면 변수 앞에 $를 추가하세요.
var $variable = jQuery 객체
var 변수 = DOM 객체
DOM 객체를 jQuery 객체로 변환
DOM 객체의 경우 DOM 객체를 $()로 래핑하기만 하면 됩니다(jQuery 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다).
변환 후 jQuery의 메소드를 사용할 수 있습니다
jQuery 객체를 DOM 객체로 변환
jQuery 객체는 DOM에서 메소드를 사용할 수 없지만, jQuery가 원하는 메소드를 캡슐화하지 않아 DOM 객체를 사용해야 하는 경우에는 다음과 같은 두 가지 메소드가 있습니다.
(1) jQuery 객체는 배열 객체이며, 해당 DOM 객체는 [index] 메소드를 통해 얻을 수 있습니다
.(2) jQuery에서 get(index) 메소드를 사용하여 해당 DOM 객체 를 가져옵니다
jQuery 선택기
선택기는 jQuery의 기초입니다. jQuery에서 이벤트 처리, DOM 탐색 및 Ajax 작업은 모두 선택기에 의존합니다.
jQuery 선택기의 장점:
간단한 글쓰기 방법
완전한 이벤트 처리 메커니즘
기본 선택기
기본 선택자는 jQuery에서 가장 일반적으로 사용되는 선택자이자 가장 간단한 선택자이기도 합니다. 요소 ID, 클래스 및 태그 이름을 통해 DOM 요소를 검색합니다. (id는 웹 페이지 및 클래스에서 한 번만 사용할 수 있습니다. 반복 사용 가능) .
ID가 1인 요소의 배경색을 #bbffaa로 변경합니다
클래스 미니가 포함된 모든 요소의 배경색을 #bbffaa로 변경
모든 요소의 배경색을 #bbffaa로 변경
모든 요소와 ID가 2인 요소의 배경색을 #bbffaa로 변경합니다
레벨 선택기
DOM 요소 간의 계층적 관계를 통해 하위 요소, 하위 요소, 인접 요소, 형제 요소 등 특정 요소를 얻으려면 계층적 선택자를 사용해야 합니다.
참고: ("prev ~ div") 선택기는 "# prev" 요소 뒤의 형제 요소만 선택할 수 있지만 jQuery의 siblings() 메서드는 앞뒤 위치와 아무 관련이 없습니다. 형제 노드인 경우
를 선택할 수 있습니다.
계층적 선택기 예시내의 모든
ID가 1인 다음
ID가 2인 요소 뒤의 모든 형제
ID가 2인 요소의 모든