멋진 Jquery - Jquery와 DOM 개체 간의 상호 변환과 DOM_jquery의 세 가지 작업

jQuery 객체만이 jQuery 클래스 라이브러리의 다양한 기능을 호출할 수 있습니다. 마찬가지로 dom 객체의 일부 속성과 메서드는 jQuery에서 호출할 수 없지만 기본적으로 jQuery 클래스 라이브러리에서 제공하는 함수에는 모든 dom 작업이 포함됩니다. 이를 위해서는 jQuery 객체를 DOM으로 변환하거나 DOM에서 변환하는 방법을 알아야 합니다.

1. jQuery 객체는 jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다.

2. jQuery 객체와 DOM 객체 간의 변환.

좋은 글쓰기 스타일:

코드 복사 코드는 다음과 같습니다.

var $input=$("입력")

jQuery로 얻은 객체는 변수 앞에 $를 추가합니다.

<1>jQUery 객체를 DOM 객체로 변환합니다. 두 가지 방법: [index] 및 get(index)

a:var $cr=$("#cr") //jQuery 개체
var cr=$cr[0] //DOM 객체
b:var $cr=$("#cr") //jQuery 객체
var cr=$cr.get(0); //DOM 객체

<2>DOM 객체를 jQuery 객체로 변환

var cr=document.getElementById("cr"); //DOM 객체
var $cr=$(cr);

3. 다른 도서관과의 충돌 해결

jQuery.noConflect().
jQuery는 $를 자체 단축키로 사용합니다.

4. jQuery 사용의 장점

<1>간결한 글쓰기
<2>CC1부터 CCS3까지 지원
<3>완벽한 처리 메커니즘

위 코드를 실행하면 브라우저에서 오류를 보고합니다!
그런데 이렇게 쓰면:

코드 복사 코드는 다음과 같습니다.

$('#tt').css("color","red");

해당 요소가 없기 때문에 브라우저는 오류를 보고하지 않습니다!

5.jQuery 선택기

jQuery 선택자는 jQuery의 최우선 순위입니다!

jQuery 필터 선택기는 CSS의 의사 클래스 선택기와 유사합니다.

<1>짝수 및 홀수 선택기

짝수: $("tr:even")
홀수: $("tr:odd")

<2>CSS3 의사 클래스 선택기 홀수 및 짝수

코드 복사 코드는 다음과 같습니다.

p:n번째-자식(홀수)
{
배경:#ff0000;
}
p:n번째-자식(짝수)
{
배경:#0000ff;
}

<2>양식 유형 선택기

<3>오류 방지를 위한 이스케이프 선택기

6.DOM 연산 분류(1: DOM Core 2.HTML-DOM 3.CSS-DOM)

1.DOM 코어

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

2.HTML_DOM

JavaScript와 DOM을 사용하여 HTML 파일용 스크립트를 작성할 때 HTML-DOM과 관련된 많은 속성이 있습니다.
HTML_DOM은 다양한 HTML 요소의 속성을 설명하기 위해 좀 더 간결한 표기법을 제공합니다.
예:

코드 복사 코드는 다음과 같습니다.

문서.양식
요소.src

웹에만 해당

3.CSS_DOM

CSS_DOM은 CSS에 대한 작업입니다. 주로 스타일 개체의 다양한 속성을 가져오고 설정합니다.
스타일 객체의 다양한 속성을 변경합니다. 다양한 효과를 변경하세요.

코드 복사 코드는 다음과 같습니다.

element.style.color=“빨간색”;

7. 노드 트래버스

1.어린이()
2.다음()
3.이전()
4.남매()
5.가장 가까운()

8.jquey CSS

<1> 불투명도를 사용하여 투명도를 설정할 수 있으며 jQuery는 이미 호환성 문제를 해결했습니다.

$("p").css("불투명도","0.5");

<2>$("p").height(100) //기본 단위는 100입니다. 다른 단위를 사용하려면 문자열을 사용해야 합니다.

offset() 메소드

뷰포트를 기준으로 오프셋을 반환합니다

코드 복사 코드는 다음과 같습니다.

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

<4>위치()

코드 복사 코드는 다음과 같습니다.

//가장 최근 위치 스타일을 기준으로 오프셋을 반환합니다.
var position=$("p").position();
var left=position.left;
var top=position.top;

scrollTop() 및 scrollLeft()

코드 복사 코드는 다음과 같습니다.

//스크롤바의 상단과 좌측으로부터의 거리를 반환합니다.
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//지정된 위치로 스크롤을 설정할 수도 있습니다:
$("ab").scrollTop(300);

<6>pageX 및 pageY, 페이지에서 마우스 위치 가져오기

코드 복사 코드는 다음과 같습니다.

$(문서).mousemove(함수(e){
$("span").text("X: " e.pageX ", Y: " e.pageY);
});