HTML5 및 CSS3 프로그래밍을위한 jQuery 객체에 이벤트를 추가하는 방법 -

비디오: (ENG SUB)[Javascript 기초와 활용 #1] 스타크래프트 만들기?! (feat. JQuery, Codepen, Bootstrap 등) 2024

jQuery 라이브러리는 JavaScript에 매우 강력한 기능을 추가합니다. HTML5 및 CSS3 프로그래머는 모든 jQuery 객체에 이벤트를 쉽게 첨부 할 수 있습니다. 호버를 살펴보십시오. html.

커서를 목록 항목 위로 이동하면 항목 주위에 테두리가 나타납니다. 이것은 일반적인 CSS에서는 달성하기 힘든 효과는 아니지만 jQuery에서 훨씬 쉽습니다.

호버 이벤트를 추가하는 방법

코드를 보면서

호버를 봅니다. html $ (init); 함수 init () {$ ("li"). hover (border, noBorder);} // end init 함수의 테두리 () {$ (this). css ("border", "1px solid black");} function noBorder () {$ (this). alpha

beta

gamma
delta
HTML을 더 간단하게 만들 수는 없습니다. 그것은 단순히 순서가없는 목록입니다. 자바 스크립트는 훨씬 복잡하지 않습니다. 세 줄의 세 가지 기능으로 이루어져 있습니다:

문서가 준비되면 init ()

가 호출됩니다.

모든 목록 항목의 jQuery 객체를 만들고 이벤트를 첨부합니다. hover () 함수는 두 개의 매개 변수를받습니다. 첫 번째는 커서가 객체 위에 놓일 때 호출되는 함수입니다. 두 번째는 커서가 객체를 떠날 때 호출되는 함수입니다.
- border ()
- 는 현재 요소 주위에 테두리를 그립니다.
$ (this) 식별자는 현재 객체를 지정하는 데 사용됩니다. 는
border ()

함수와 매우 유사하지만 현재 객체에서 테두리를 제거하는 함수입니다. 이 예에서는 세 가지 기능이 사용되었습니다. 많은 jQuery 프로그래머는 익명 함수 (때로는 람다 함수라고 함)를 사용하여 전체 기능을

$ ("li") 한 줄로 묶는 것을 선호합니다. css ("border", "0px none black");} hover (function () {$ (this) css ("border", "1px solid black"; 이것은 여전히 기술적으로 한 줄의 코드라는 점에 유의하십시오. 이미 생성 된 두 함수를 참조하는 대신 필요할 때 즉시 함수를 작성할 수 있습니다. 각 함수 정의는 hover () 메소드에 대한 매개 변수입니다. 컴퓨터 과학자 인 경우, 이것이 람다 함수의 완벽한 예가 아니며 올바른 것입니다. 중요한 점은 함수 프로그래밍 (람다 함수와 같은)에 대한 아이디어가 AJAX 프로그래밍의 주류가되고 있다는 것입니다. 흥미로운 개발입니다.

진행중인 클래스 변경

jQuery는 또 다른 멋진 기능을 지원합니다.CSS 스타일을 정의한 다음 해당 스타일을 요소에서 동적으로 추가하거나 제거 할 수 있습니다. 이 코드는

클래스를 추가하는 것이 얼마나 쉬운지를 보여줍니다. html. 테두리가있는 {border: 1px solid black;} $ (초기화); 함수 init () {$ ("li"). 클릭 (toggleBorder);} // 종료 init 함수 toggleBorder () {$ (this). alpha

beta

gamma

delta

이 프로그램을 만드는 방법은 다음과 같습니다.
기본 HTML 페이지부터 시작하십시오.

흥미로운 것들은 CSS와 JavaScript에서 발생하므로 페이지의 실제 내용은 그다지 중요하지 않습니다.

추가하고 제거하려는 클래스를 만듭니다.

당신은 단순히 요소 주위에 테두리를 그리는 CSS 클래스를 만들 수 있습니다. 물론 원할 경우 모든 형식의 서식으로 훨씬 더 정교한 CSS 클래스를 만들 수 있습니다.

init () 메소드를 링크합니다.

처음부터, 대부분의 jQuery 애플리케이션은 일종의 초기화가 필요하다. 첫 번째 함수를 호출 할 수 있습니다. init ()

사용자가 목록 항목을 클릭 할 때마다 toggleBorder () 함수를 호출하십시오.

init () 메소드는 단순히 이벤트 핸들러를 설정합니다. 목록 항목이 클릭 이벤트를 수신 할 때마다 (즉, 클릭 될 때마다) toggleBorder () 함수가 활성화되어야합니다. toggleBorder () 함수는 테두리를 토글합니다.

jQuery에는 요소의 클래스를 조작하는 몇 가지 메소드가 있습니다.

addClass ()는 요소에 클래스를 지정합니다. removeClass ()는 요소로부터 클래스 정의를 제거한다.

toggleClass ()는 클래스를 전환합니다 (현재 첨부되어 있지 않은 경우 추가하거나 그렇지 않으면 제거합니다).