JQuery 기본 과정: JQuery의 DOM 작업 소개

브라우저, 플랫폼, 언어에 독립적인 인터페이스입니다. 이 인터페이스를 통해 페이지의 모든 표준 구성 요소에 쉽게 액세스할 수 있습니다.

DOM Core: DOM Core는 JavaScript에만 국한되지 않으며 DOM을 지원하는 모든 프로그래밍 언어에서 사용할 수 있습니다. 웹페이지 처리에만 국한되지 않고 XML과 같은 마크업 언어로 작성된 모든 문서를 처리하는 데에도 사용할 수 있습니다.

HTML DOM: JavaScript 및 DOM을 사용하여 HTML 파일을 스크립팅할 때 HTML-DOM과 관련된 많은 속성이 있습니다.

CSS-DOM: CSS 작업의 경우 JavaScript에서 CSS-DOM은 주로 스타일 개체의 다양한 속성을 가져오고 설정하는 데 사용됩니다. +                                                               '

'의 도움으로

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 요소와 그 아래의 모든 요소를 ​​지웁니다.节 ZE ROM. 노드 복사

DOM 요소 일치. 예를 들어 "$("p").clone();"은 복제된 복사본을 반환하지만 아무런 동작도 하지 않습니다. DOM 이벤트를 함께 복제하려면 "$("p").clone(true);"를 사용해야 합니다.

6. 노드 교체

                일치하는 모든 요소를 ​​지정된 HTML 또는 DOM 요소로 교체합니다. 예를 들어 $("p").replaceWith("Paragraph.");는 모든 p 요소를 "Paragraph."로 바꿉니다.

​​​​

                                        바꾸기로 반환: $("Paragraph.").replaceAll("p");.节 裹7. 패키지 노드

랩(): 지정된 노드를 다른 태그로 래핑합니다. 이 방법은 원본 문서의 의미를 손상시키지 않고 문서에 추가적인 구조적 마크업을 삽입해야 할 때 유용합니다. 예를 들어 "$("p").wrap("

");"입니다. 각 p 요소는

로 래핑됩니다.

wrapAll(): 일치하는 모든 요소를 ​​하나의 요소로 래핑합니다. Wrap() 메서드는 모든 요소를 ​​개별적으로 래핑합니다. 예를 들어, "$("p").wrapAll("

");"는 모든 p 요소를

로 래핑합니다.

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(). S c12.css-DOM 작업

요소 획득 및 설정의 모델 속성: CSS().

요소 투명도 가져오기 및 설정: opacity() 속성.

요소 높이와 너비를 가져오고 설정합니다: height(), width(). 값을 설정할 때 숫자만 전달하는 경우 기본 단위는 px입니다. 다른 단위를 사용해야 하는 경우 "$("p:first").height("2em")"와 같은

문자열

을 전달해야 합니다.

현재 창에서 요소의 상대 변위를 가져옵니다. : 오프셋(). 반환되는 객체에는 top과 left라는 두 가지 속성이 포함되어 있습니다. 이 방법은 보이는 요소에만 작동합니다.

위 내용은 JQuery 기본 과정: JQuery의 DOM 작업 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

스플릿 소설을이기는 데 얼마나 걸립니까?

1 몇 달 전 By DDD

R.E.P.O. 최고의 그래픽 설정

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

1 몇 주 전 By DDD

R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7412

15

Cakephp 튜토리얼

1359

52

Steam의 계정 이름 형식은 무엇입니까?

76

11

Win11 활성화 키 영구

20

19

더보기