jQuery 기본 지식 소개_jquery

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로 변경하세요

모든 요소의 배경색을 #bbffaa로 변경

모든 요소와 ID가 2인 요소의 배경색을 #bbffaa로 변경합니다

레벨 선택기

DOM 요소 간의 계층적 관계를 통해 하위 요소, 하위 요소, 인접 요소, 형제 요소 등 특정 요소를 얻으려면 계층적 선택자를 사용해야 합니다.

참고: ("prev ~ div") 선택기는 "# prev" 요소 뒤의 형제 요소만 선택할 수 있지만 jQuery의 siblings() 메서드는 앞뒤 위치와 아무 관련이 없습니다. 형제 노드인 경우

를 선택할 수 있습니다.

계층적 선택기 예시

내의 모든

배경색을 #bbffaa로 변경합니다.

내부 하위 섹션

의 배경색을 #bbffaa로 변경합니다.

ID가 1인 다음

의 배경색을 #bbffaa로 변경합니다

ID가 2인 요소 뒤의 모든 형제

요소의 배경색을 #bbffaa로 변경합니다

ID가 2인 요소의 모든

요소의 배경색을 #bbffaa로 변경합니다