JQuery 기본 과정: JQuery의 DOM 작업 소개
- 伊谢尔伦원래의
- 2017-06-17 15:50:041080검색
브라우저, 플랫폼, 언어에 독립적인 인터페이스입니다. 이 인터페이스를 통해 페이지의 모든 표준 구성 요소에 쉽게 액세스할 수 있습니다.
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
???? 따라서 이러한 노드를 삽입하기 전에 복제된 노드를 사용해야 합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!