JQuery 선택기 및 filter_jquery 소개-JS 튜토리얼-php.cn

어제의 JavaScriptDOM 콘텐츠와 결합된 오늘의 연구를 통해 이에 대해 매우 명확해졌습니다. JQuery 원칙: "적게 작성하고, 더 많이 수행하세요." 이 문장은 JavaScriptDOM을 사용하여 프로그래밍을 단순화하는 능력을 충분히 보여줍니다.
각 교사마다 자신만의 교수법이 있으며, 가르치는 내용에 따라 조금씩 다를 수 있습니다. Lao Tong은 경험이 풍부한 소프트웨어 교사입니다. 그는 이전에 다롄의 소프트웨어 회사에서 교육을 받았습니다. 수년간의 요약 끝에 그는 자신만의 성숙한 교수법을 개발했습니다. 나는 이 방법을 매우 좋아한다! 어떤 방식인지는 직접 체험해 보실 수 있습니다! 하하~~
JavaWEB, Struts1을 배우고 이제 JavaScript까지 WEB 애플리케이션 개발의 핵심인 MVC를 찾았습니다. 네, MVC입니다. 사실 MVC는 WEB의 핵심을 기반으로 만들어진 모델이어야 하지 않나요? 이 도구 세트는 뷰 계층, 제어 계층 및 데이터 모델 계층을 각각 작동하는 것입니다. 예전에 서블릿을 배울 때 서블릿이 사용자의 요청을 처리할 수 있다는 것을 알았고, 선생님께서 말씀하시는 것도 배웠기 때문에 이제 좀 실감이 난 것 같습니다. 하지만 이제 아이디어가 생겼습니다. 선생님이 무슨 말씀을 하시든 어느 계층에 사용해야 하는지, 그리고 그 목적이 무엇인지 알게 되었습니다. 이것은 매우 좋은 성장입니다! 향후 성장에 많은 도움이 될 것입니다.
그럼 이 정령가루에 대한 지식은 별로 없고 프로젝트 작업을 시작하겠습니다. 빠르고 멋진 두 단어! 자, 학습 콘텐츠 정리를 시작해 보겠습니다. 현재 더 일반적인 JavaScript 라이브러리는 다음과 같습니다.
2. JQuery 소개
JQuery는 Prototype 이후의 또 다른 뛰어난 JavaScript 라이브러리입니다.
JQuery 개념: 적게 작성하고 더 많은 작업을 수행하세요.
JQuery 장점: 가볍고 강력한 선택기, 뛰어난 DOM 작업 캡슐화, 안정적인 이벤트 처리 메커니즘, 완벽한 Ajax, 뛰어난 브라우저 호환성, 체인 작업 모드… JQuery 선택기 및 filter_jquery 소개

2. JQuery 객체와 DOM 객체

1. JQuery 객체
JQuery 객체는 "$("DOMObj")"를 사용하여 DOM 객체를 래핑합니다. 일반적으로 JQuery 개체 앞에는 DMO 개체와 구별하기 위해 "$"가 추가됩니다. 이는 이미 알려진 명명 규칙입니다. JQuery 객체는 DOM 객체의 속성과 메서드를 호출할 수 없고, DOM 객체는 JQuery 객체의 속성과 메서드를 호출할 수 없습니다.
2. JQuery 객체를 DOM 객체로 변환
JQuery 객체를 사용하여 DOM 객체의 메소드를 호출하고 싶다면 어떻게 해야 할까요? JQuery 객체는 DOM 객체로 변환되어야 합니다. JQuery 객체는 매우 특별한 배열 객체입니다. 따라서 JQueryObj[x] 또는 JQueryObj.get(X)를 호출하여 DOM 객체로 변환하세요.
3. DOM 객체를 JQuery 객체로 변환
DOM 객체를 래핑하려면 "$("DOMObj")"를 사용하세요.

3. JQuery 선택기

JQuery에서는 이벤트 처리, DOM 탐색 및 Ajax 작업이 모두 선택기에 의존합니다. 이것이 오늘 우리 연구의 초점이기도 합니다.

1. 기본 선택기 기본 선택기는 JQuery에서 가장 일반적으로 사용되는 선택기이며 요소 ID, 클래스 및 태그 이름으로 DOM 요소를 찾습니다. 이는 매우 중요한 내용으로, 다음 내용은 이를 토대로 단계별로 개선해 나가고 있습니다.
1). "$("#id")", id로 지정된 요소를 가져옵니다. ID는 전역적으로 고유하므로 멤버가 하나만 있습니다. 2) "$(".class")", 클래스로 지정된 요소를 가져옵니다. 서로 다른 요소가 동일한 클래스 속성을 가질 수 있으므로 여러 멤버를 가질 수 있습니다.
3). "$("element")", 여러 멤버를 가질 수 있는 요소(div, 테이블 등의 요소 이름)로 지정된 요소를 가져옵니다.
4). "$("*")", 문서와 동일한 모든 요소를 가져옵니다.
5). "$("selector1,selector2,...,selectorN")", 각 선택기와 일치하는 요소를 병합하고 함께 반환합니다. selector1과 일치하는 집합, selector2와 일치하는 집합... selectorN과 일치하는 집합을 반환합니다.

2. 레벨 선택기
레벨이란? 수준은 부자관계와 형제관계의 결점이다. 따라서 계층적 선택기는 지정된 요소의 부모, 자식 및 형제 노드를 가져오는 데 사용됩니다.
1). "$("ancestorDescendant")", 조상 요소 아래의 모든 요소를 가져옵니다.
2) "$("parent > child")", 상위 요소 아래의 모든 하위 요소를 가져옵니다(하위 요소의 첫 번째 레이어만 포함됨).
3). "$("pre next")", pre 요소 바로 다음에 다음 형제 요소를 가져옵니다.
4). "$("pre ~ siblings")", pre 요소 다음의 모든 형제 요소를 가져옵니다.

3. 필터 선택기
필터? 반드시 필터 조건을 추가해야 합니다. div 요소 컬렉션의 첫 번째 div 요소를 반환하려면 "$("div:first")"와 같이 ":"를 통해 필터 조건을 추가합니다. 첫 번째는 필터 조건입니다.
다양한 필터링 규칙에 따라 필터 선택기는 기본 필터링, 콘텐츠 필터링, 가시성 필터링, 속성 필터링, 하위 요소 필터링 및 양식 개체 속성 필터링 선택기로 나눌 수 있습니다.

1) 기본 필터 선택기
a) “:first”, 첫 번째 요소를 선택합니다. 이 요소도 컬렉션에 배치된다는 점을 잊지 마세요! JQuery는 DOM 객체의 모음이기 때문입니다. 예를 들어, "$("tr:first")"는 컬렉션에 여전히 저장되어 있는 모든 tr 요소 중 첫 번째 tr 요소를 반환합니다.
b) ":last", 마지막 요소를 선택합니다. 예를 들어, "$("tr:last")"는 컬렉션에 여전히 저장되어 있는 모든 tr 요소 중 마지막 tr 요소를 반환합니다.
c) ":not(selector)", 지정된 선택기와 일치하는 모든 요소를 제거합니다. 예를 들어 "$("input:not(:checked)")"는 모든 입력 요소를 반환하지만 선택한 요소(라디오 버튼, 다중 선택 상자)를 제거합니다.
d) ":even"은 모든 요소 중에서 짝수 요소를 선택합니다. JQuery 객체는 컬렉션이므로 여기서 짝수는 컬렉션의 인덱스를 의미하며 인덱스는 0부터 시작됩니다.
e) ":odd"는 모든 요소 중에서 홀수 번째 요소를 선택하며 인덱스는 0부터 시작합니다.
f) “:eq(index)”, 지정된 인덱스에 있는 요소를 선택하고 인덱스는 0부터 시작합니다.
g) ":gt(index)"는 지정된 인덱스보다 인덱스가 큰 요소를 선택하고 인덱스는 0부터 시작합니다.
h) ":lt(index)", 인덱스가 지정된 인덱스보다 작은 요소를 선택하고 인덱스는 0부터 시작합니다.
i) ":header", hq, h2 등과 같은 모든 헤더 요소를 선택합니다.
j) “:animated”, 현재 실행 중인 모든 애니메이션 요소를 선택합니다.

2) 콘텐츠 필터링 선택기
요소 및 텍스트 콘텐츠에 대한 작업입니다.
a) ":contains(text)", 텍스트 텍스트 콘텐츠가 포함된 요소를 선택합니다.
b) ":empty"는 하위 요소나 텍스트 노드를 포함하지 않는 빈 요소를 선택합니다.
c) ":has(selector)", 선택기와 일치하는 요소를 포함하는 요소를 선택합니다.
d) ":parent", 하위 요소나 텍스트 노드가 포함된 요소를 선택합니다. (부모 노드입니다)

3) 가시성 필터 선택기
는 표시 여부에 따라 요소를 선택합니다.
":hidden", 보이지 않는 요소를 모두 선택합니다.
":visible"은 보이는 모든 요소를 선택합니다.
표시 선택기: 숨김에는 스타일 속성 표시가 없음인 요소뿐만 아니라 텍스트 숨김 필드() 및 visible:hidden과 같은 요소도 포함됩니다.

4) 속성 필터 선택기
요소의 속성을 통해 해당 요소를 선택합니다.
a) "[속성]", 이 속성이 있는 요소를 선택합니다.
b) "[속성=값]", 지정된 속성 값 값을 가진 모든 요소를 선택합니다.
c) "[attribute !=value]", 속성 값이 value가 아닌 모든 요소를 선택합니다.
d) "[속성 ^= 값]", 속성 값이 value로 시작하는 모든 요소를 선택합니다.
e) "[속성 $= 값]", 속성 값이 value로 끝나는 모든 요소를 선택합니다.
f) "[속성 *= 값]", 속성 값에 값이 포함된 모든 요소를 선택합니다.
g) 복합 선택자인 "[selector1] [selector2]...[selectorN]"은 먼저 [selector1]을 통해 선택하고 세트 A로 돌아가고, 세트 A는 [selector2]를 통해 선택하고 세트 B로 돌아가고, set B는 [selectorN]을 통해 선택하고 반환된 결과 집합을 선택합니다.

5) 하위 요소 필터 선택기
이름에서 알 수 있듯이 특정 요소의 하위 요소를 선택합니다.
a) ":nth-child(index/even/odd)", 인덱스가 있는 요소, 짝수 인덱스가 있는 요소, 홀수 인덱스가 있는 요소를 선택합니다.
l nth-child(even/odd): 각 상위 요소 아래의 인덱스 값이 짝수(홀수)인 요소를 선택할 수 있습니다.
l nth-child(2): 각 상위 요소 아래에서 인덱스 값이 2인 요소를 선택할 수 있습니다.
l nth-child(3n): 각 상위 요소 아래의 인덱스 값이 3의 배수인 요소를 선택할 수 있습니다.
l nth-child(3n 1): 각 상위 요소 아래에서 인덱스 값이 3n 1인 요소를 선택할 수 있습니다.
b) ":first-child", 첫 번째 하위 요소를 선택합니다.
c) ":last-child", 마지막 하위 요소를 선택합니다.
d) ":only-child"는 상위 요소에 이 하위 요소만 있는 유일한 하위 요소를 선택합니다.

6) 양식 필터 선택기
양식 요소의 필터 선택기를 선택합니다.
a) ":input"은 , , <select> 및 <button> 요소를 모두 선택합니다. b) ":text", 모든 텍스트 상자 요소를 선택합니다. c) ":password"는 모든 비밀번호 상자 요소를 선택합니다. d) ":radio", 모든 라디오 버튼 요소를 선택합니다. e) ":checkbox"는 모든 체크박스 요소를 선택합니다. f) ":submit"은 모든 제출 버튼 요소를 선택합니다. g) ":image"는 모든 이미지 버튼 요소를 선택합니다. h) ":reset", 모든 재설정 버튼 요소를 선택합니다. i) ":button"은 모든 버튼 요소를 선택합니다. j) ":file"은 모든 파일 업로드 도메인 요소를 선택합니다. k) ":hidden", 보이지 않는 요소를 모두 선택합니다. 7) 양식 객체 속성 필터 선택기 양식 요소 속성의 필터 선택기를 선택합니다. ":enabled"는 사용 가능한 모든 요소를 선택합니다. ":disabled"는 비활성화된 모든 요소를 선택합니다. ":checked"는 라디오 버튼, 체크박스 등 선택된 모든 요소를 선택합니다. “:selected”는 드롭다운 목록 상자 및 목록 상자와 같이 선택된 모든 요소를 선택합니다. 4. JQuery의 DOM 작업 브라우저, 플랫폼, 언어에 독립적인 인터페이스입니다. 이 인터페이스를 사용하면 페이지의 모든 표준 구성 요소에 쉽게 액세스할 수 있습니다. DOM Core: DOM Core는 JavaScript에만 국한되지 않으며 DOM을 지원하는 모든 프로그래밍 언어에서 사용할 수 있습니다. 웹페이지 처리에만 국한되지 않고 XML과 같은 마크업 언어로 작성된 모든 문서를 처리하는 데에도 사용할 수 있습니다. HTML DOM: JavaScript 및 DOM을 사용하여 HTML 파일용 스크립트를 작성할 때 HTML-DOM과 관련된 많은 속성이 있습니다. CSS-DOM: CSS 작업의 경우 JavaScript에서 CSS-DOM은 주로 스타일 객체의 다양한 속성을 가져오고 설정하는 데 사용됩니다. 1. 노드 찾기 위의 '기본 선택기'를 참조하세요. 2. 노드 만들기 JQuery의 팩토리 함수를 사용하여 새 노드를 만듭니다. var $newNode = $(“Hello”). 그런 다음 새 노드를 지정된 노드에 삽입합니다. 요소 노드. 3. 노드 삽입 새로 생성된 노드나 획득한 노드를 지정된 위치에 삽입합니다. "$node.append($newNode)"는 일치하는 각 요소의 끝에 끝을 추가합니다. 예를 들어 "$("p").append("Hello");"는 "p" 끝에 "Hello"를 추가합니다. "$newNode.appendTo($node)"는 일치하는 각 요소의 끝에 새 요소를 추가합니다. "$node.prepend($newNode)"는 일치하는 각 요소의 시작 부분과 끝 부분을 추가합니다. 예를 들어 "$("p").prepend("Hello");"는 "p"의 시작 부분에 "Hello"를 추가합니다. "$newNode.prependTo($node)"는 일치하는 각 요소 내부의 시작 부분에 새 요소를 추가합니다. "$node.after($newNode)"는 평행 형제인 각 일치 요소 뒤에 콘텐츠를 삽입합니다. 예를 들어 "$("p").after("Hello");"는 "p" 뒤에 "Hello"를 삽입합니다. 그들은 형제입니다. "$newNode.insertAfter($node)"는 일치하는 각 요소 뒤에 새 요소를 삽입합니다. "$newNode.before($node)"는 일치하는 각 요소 앞에 콘텐츠를 삽입합니다. 예를 들어 "$("p").before("Hello");"는 "p" 앞에 "Hello"를 삽입하므로 형제입니다. "$node.insertBefore($newNode)"는 일치하는 각 요소 앞에 새 요소를 삽입합니다. 참고: 삽입된 노드가 새로 생성되지 않은 경우 삽입은 이동 작업이 됩니다. 따라서 이러한 노드를 삽입하기 전에 복제된 노드를 사용해야 합니다. 4. 노드 삭제 DOM에서 일치하는 모든 요소를 제거합니다. 예를 들어, "$("p").remove(".hello");"는 클래스 속성 값이 hello인 p 요소와 그 아래의 모든 요소를 삭제합니다. DOM에서 일치하는 모든 요소를 삭제합니다. 예를 들어 "$("p").empty();"는 모든 p 요소와 그 아래의 모든 요소를 지웁니다. 5. 노드 복사 일치하는 DOM 요소를 복제합니다. 예를 들어 "$("p").clone();"은 복제된 복사본을 반환하지만 아무런 동작도 하지 않습니다. DOM 이벤트를 함께 복제하려면 "$("p").clone(true);"를 사용해야 합니다. 6. 노드 교체 일치하는 모든 요소를 지정된 HTML 또는 DOM 요소로 교체합니다. 예를 들어 $("p").replaceWith("Paragraph. ");는 모든 p 요소를 "Paragraph. "로 바꿉니다. 및 returnWith 교체: $("Paragraph. ").replaceAll("p");. 7. 노드 래핑 wrap(): 지정된 노드를 다른 태그로 래핑합니다. 이 방법은 원본 문서의 의미를 손상시키지 않고 문서에 구조화된 추가 마크업을 삽입해야 할 때 유용합니다. 예를 들어 "$("p").wrap("<div class="wrap"></div>");"입니다. 각 p 요소는 <div>으로 래핑됩니다. wrapAll(): 일치하는 모든 요소를 하나의 요소로 래핑합니다. Wrap() 메서드는 모든 요소를 개별적으로 래핑합니다. 예를 들어 "$("p").wrapAll("<div></div>");"는 모든 p 요소를 <div>으로 묶습니다. wrapInner(): 일치하는 각 요소의 하위 콘텐츠(텍스트 노드 포함)를 다른 구조화된 태그로 래핑합니다. 예를 들어 "$("p").wrapInner("");", 는 각 p 요소로 래핑됩니다. 8. 속성 설정 attr(): 속성을 가져오고 속성을 설정합니다. 매개변수가 이 메소드에 전달되면 요소에 대해 지정된 속성을 얻습니다. 예를 들어, "$("img").attr("src");"는 img 요소의 src 속성 값을 가져옵니다. 두 개의 매개변수가 이 메소드에 전달되면 지정된 속성의 값이 요소에 설정됩니다. 예를 들어 "$("img").attr("src","test.jpg");"의 경우 img 요소의 src 속성 값을 test.jsp로 설정합니다. jQuery에는 가져오기 및 설정을 구현하는 함수인 메서드가 많이 있습니다. 예: attr(), html(), text(), val(), height(), width(), css() 등 removeAttr(): 지정된 요소의 지정된 속성을 제거합니다. 9. 스타일 작업 "attr()"을 통해 CSS 스타일을 설정하거나 가져올 수 있습니다. 스타일 추가: addClass(). 예를 들어 "$("p").addClass("selected");"는 모든 P 요소에 "선택된" 스타일을 추가합니다. 스타일 제거: RemoveClass() --- 일치하는 요소에서 모든 클래스 또는 지정된 클래스를 제거합니다. 예를 들어, "$("p").removeClass("selected");"는 모든 P 요소에서 "selected"를 삭제합니다. 토글 스타일:ggleClass() --- 스타일에 대한 반복적인 전환을 제어합니다. 클래스 이름이 있으면 제거하고, 클래스 이름이 없으면 추가합니다. 예를 들어 "$("p").toggleClass("selected");"와 같이 모든 P 요소 중 "selected" 스타일이 있으면 "selected" 스타일을 삭제하고, 그렇지 않으면 "selected" 스타일을 추가합니다. 특정 스타일이 포함되어 있는지 확인: hasClass() --- 요소에 특정 클래스가 포함되어 있는지 확인하고, 그렇지 않으면 false를 반환합니다. 예를 들어, "$(this).hasClass("protected")"는 현재 노드에 "protected" 스타일이 있는지 여부를 결정합니다. 10. HTML, 텍스트 및 값 설정 또는 가져오기 요소에서 HTML 콘텐츠를 읽고 설정합니다: html(). 이 메서드는 XHTML에는 사용할 수 있지만 XML 문서에는 사용할 수 없습니다. text() 요소에서 텍스트 내용을 읽고 설정합니다. 이 메서드는 XHTML 및 XML 문서 모두에 사용할 수 있습니다. val() 요소에서 값을 읽고 설정합니다. 이 메서드는 JavaScript의 value 속성과 유사합니다. 텍스트 상자, 드롭다운 목록 상자 및 라디오 단추 상자의 경우 이 메서드는 요소의 값을 반환할 수 있습니다(다중 선택 상자는 첫 번째 값만 반환할 수 있음). 다중 선택 드롭다운 목록 상자인 경우 선택한 모든 값을 포함하는 배열을 반환합니다. 11. 노드 순회에 일반적으로 사용되는 방법 일치하는 요소의 모든 하위 요소 집합을 가져옵니다: children(). 이 방법은 하위 요소가 아닌 첫 번째 수준 하위 요소만 고려합니다. 일치하는 요소 바로 뒤에 있는 형제 요소 집합을 가져옵니다(그러나 집합에는 요소가 하나만 있음): next(). 일치하는 요소 바로 앞의 형제 요소 집합을 가져옵니다(그러나 집합에는 요소가 하나만 있음): prev(). 일치하는 요소 앞뒤의 모든 형제 요소를 가져옵니다: siblings(). 12. CSS-DOM 작업 요소의 스타일 속성 가져오기 및 설정: css(). 요소 투명도 가져오기 및 설정: opacity() 속성. 요소 높이와 너비를 가져오고 설정합니다: height(), width(). 값을 설정할 때 숫자만 전달하는 경우 기본 단위는 px입니다. 다른 단위를 사용해야 하는 경우 "$("p:first").height("2em")"와 같은 문자열을 전달해야 합니다. 현재 창에서 요소의 상대 변위를 가져옵니다. 오프셋(). 반환되는 객체에는 top과 left라는 두 가지 속성이 포함되어 있습니다. 이 방법은 보이는 요소에만 작동합니다. 5. JQuery의 이벤트 1. DOM 로드 페이지가 로드된 후 브라우저는 JavaScript를 통해 DOM 요소에 이벤트를 추가합니다. . 일반 JavaScript 코드에서는 주로 window.onload 메서드를 사용하고, JQuery에서는 $(document).ready() 메서드를 사용합니다. JQuery의 단순화된 쓰기 방법 "$()"입니다.window.onload에 이벤트를 등록하는 경우 하나의 window.onload 본문에만 등록할 수 있습니다. 하지만 JQuery를 사용하면 여러 $(document).ready() 또는 $()에 등록할 수 있습니다. 2. 이벤트 바인딩 일치하는 요소를 지정된 이벤트에 바인딩합니다. 예를 들어, 어제 우리는 window.onload에서 이벤트를 바인딩했습니다: "$("p").onclick(function(){ Alert( $(this).text() ); });" (document).ready()는 다음과 같이 바인딩할 수 있습니다: "$("p").click(function(){ Alert( $(this).text() ); });" , 다음과 같이 바인딩할 수 있습니다: $("p").bind("click", function(){ Alert( $(this).text() ); }); 합성 이벤트 hover(): 커서 호버 시간을 시뮬레이션합니다. 커서가 요소 위로 이동하면 지정된 첫 번째 기능이 트리거되고, 커서가 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다. 예를 들어 호버 효과: $("td").hover( function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");} ); toggle(): 연속적인 마우스 클릭 이벤트를 시뮬레이션하는 데 사용됩니다. 요소를 처음 클릭하면 첫 번째 지정된 기능이 트리거됩니다. 동일한 요소를 다시 클릭하면 지정된 두 번째 기능이 더 많은 경우 마지막 기능까지 순차적으로 트리거됩니다. 예를 들어 요소의 선택 및 선택 취소된 효과를 설정합니다. $("td").toggle( function () {$(this).addClass("selected");}, function () {$(this ).removeClass("selected");}); 매개변수를 전달하지 않고 토글()을 사용하면 요소의 표시 상태가 전환됩니다. 4. 이벤트 버블링 DOM 계층 구조에 따라 이벤트는 계속해서 버블처럼 상승하여 최상위에 도달합니다. 해결책: 이벤트 처리 함수에서 false를 반환하면 이벤트 버블링이 중지됩니다. 요소의 기본 동작을 중지할 수도 있습니다. 현재의 모든 UI 상호 작용 또는 해당 이벤트는 이 기능을 지원합니다. 자체 이벤트 처리 함수에서 false를 반환하면 이벤트 전달이 중단됩니다. 실제 이벤트를 반환하고 계속해서 아래쪽으로 전달합니다. 5. 이벤트 객체의 속성 이벤트 객체: 이벤트가 발생하면 이벤트 객체가 생성됩니다. 프로그램에서 이벤트를 사용하려면 핸들러 함수에 매개변수만 추가하면 됩니다. 이벤트 핸들러 함수에서 일부 매개변수를 사용하십시오. 예를 들어, 이벤트가 발생할 때 페이지를 기준으로 한 위치를 얻으려면: event.pageX, event.pageY, event는 이벤트 처리 함수의 매개변수입니다. 6. 이벤트 제거 버튼의 모든 클릭 이벤트 제거: $(“btn”).unbind(“click”) 버튼의 모든 이벤트 제거: $ ("btn") .unbind(); one(): 이 메소드는 처리 기능을 요소에 바인딩할 수 있습니다. 핸들러 함수가 한 번 실행되면 해당 이벤트는 즉시 삭제됩니다. 즉, 각 객체에서 이벤트 핸들러 함수는 한 번만 실행됩니다. 6. JQuery의 DOM 애니메이션 DOM 객체의 표시 및 숨기기 방법을 설정하여 애니메이션 효과를 연출할 수 있습니다. 1. 애니메이션 효과 없이 숨기기 및 표시 hide(): HTML 문서에서 요소에 hide() 메서드를 호출하면 요소의 표시 스타일이 없음으로 변경됩니다. 코드 기능은 css("display", "none");과 동일합니다. show(): 요소의 표시 스타일을 이전 표시 상태로 변경합니다. toggle(): 요소의 표시 상태를 전환합니다. 요소가 표시되면 숨김으로 전환하고, 요소가 숨겨져 있으면 표시로 전환합니다. 2. 투명도 효과 숨기기 및 표시를 설정하면 페이드인 및 페이드아웃 애니메이션 효과가 구현됩니다. fadeIn(), fadeOut(): 요소의 투명도만 변경합니다. fadeOut()은 요소가 완전히 사라질 때까지 지정된 시간 동안 요소의 불투명도를 줄입니다. fadeIn()은 그 반대입니다. 예를 들어 $("p").fadeIn("slow");처럼 600밀리초 동안 단락을 천천히 페이드 인합니다. fadeTo(): 점진적으로 불투명도를 지정된 값(0~1 사이)으로 조정합니다. 그리고 선택적으로 애니메이션이 완료된 후 콜백 함수를 트리거합니다. 예를 들어 단락의 투명도를 0.25로 빠르게 조정하려면 200밀리초를 사용합니다. 애니메이션이 끝나면 "애니메이션 완료" 메시지 상자가 표시됩니다: "$("p").fadeTo("fast", 0.25, function( ){ 경고(" 애니메이션이 완료되었습니다.") });". 3. 높이 효과 숨기기 및 표시를 설정하면 아래로 미끄러지거나 접히는 애니메이션 효과를 얻을 수 있습니다. slideDown(), SlideUp(): 요소의 높이만 변경합니다. 요소의 표시 속성이 없음인 경우 SlideDown() 메서드가 호출되면 요소가 위에서 아래로 확장되어 표시됩니다. SlideUp() 메서드는 정반대입니다. 요소는 아래에서 위로 짧아지고 숨겨집니다. 예를 들어 $("p").slideDown("slow");처럼 600밀리초를 사용하여 단락을 천천히 아래로 슬라이드합니다. slideToggle(): 높이 변경을 통해 일치하는 요소의 가시성을 전환합니다. 예를 들어, 200밀리초 안에 단락을 빠르게 위아래로 슬라이드하면 "애니메이션 완료" 메시지 상자가 표시됩니다: "$("p").slideToggle("fast",function(){ 경고( "애니메이션 완료" ."); });". JavaScript와 JQuery를 사용하여 현재 페이지의 동적 업데이트를 처리하고 CSS 스타일과 결합하면 데스크톱 소프트웨어 UI보다 훨씬 더 아름다운 UI를 만들 수 있습니다. JavaScript를 작성하고 디버깅하는 것은 매우 번거로운 작업이므로 일부 회사에서는 Java를 사용하여 스윙을 작성하는 것처럼 JavaScript를 작성할 수 있는 Google에서 제작한 GWT와 같은 JavaScript 애플리케이션용으로 특별히 단순화된 개발을 제작했습니다. 사용자에게 스윙과 같은 UI 인터페이스와 이벤트를 제공하고 JAVA 핵심 라이브러리를 지원합니다. GWT의 자체 컴파일러를 사용하면 JAVA 코드를 JavaScript 코드, CSS 스타일 파일 및 HTML로 컴파일할 수 있습니다. </div> </div></button></select>