작살의 Jquery―Jquery와DOM 대상의 상호 전환 및DOM의 세 가지 조작

jQuery 대상만 jQuery 라이브러리의 각종 함수를 호출할 수 있습니다. 마찬가지로dom 대상의 속성과 방법은 jQuery에서도 호출할 수 없습니다. 그러나 기본적으로 jQuery 라이브러리에서 제공하는 함수는 모든dom 조작을 포함합니다.이것은 우리가 jQuery 대상과 DOM의 상호 변환 방법을 알아야 한다.
1. jQuery 대상은 jQuery를 통해 DOM 대상을 포장한 후에 생기는 대상이다.
2. jQuery 객체와 DOM 객체의 상호 변환
훌륭한 쓰기 스타일:

 
  
 var $input=$("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.noConflict(). jQuery는 $를 자신의 단축키로 사용합니다.
4. jQuery의 이점 사용
<1> 간결한 쓰기 <2> CC1에서 CCS3로 완벽한 처리 메커니즘 지원
위의 코드 브라우저를 실행하면 오류가 발생합니다!하지만 이렇게 쓰면:

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

브라우저는 이 요소가 없어서 오류를 보고하지 않습니다.
5.jQuery 선택기
jQuery 선택기는 jQuery의 무게 중 하나입니다!
jQuery 필터 선택기는 CSS의 유사 클래스 선택기와 비슷합니다.
<1> 짝수와 홀수 선택기
짝수: $("tr:even") 홀수: $("tr:odd")
<2> CSS3 유사 클래스 선택기 짝수

 
  
 p:nth-child(odd) 
  
 { 
  
 background:#ff0000; 
  
 } 
  
 p:nth-child(even) 
  
 { 
  
 background:#0000ff; 
  
 } 
  
 
 

<2> 양식 유형 선택기
<3> Esc 선택기 오류 방지
6.DOM 작업 분류(1: DOM Core 2.HTML-DOM 3.CSS-DOM)
1.DOM Core
DOM Core는 JavaScript에만 속하지 않으며, DOM을 지원하는 프로그램 설계 언어는 모두 사용할 수 있습니다.그것의 용도는 웹 페이지를 처리하는 데만 국한된 것이 아니다.태그 언어로 작성된 모든 문서(예: XML)를 처리할 수도 있습니다.
2.HTML_DOM
JavaScript와 DOM을 사용하여 HTML 파일을 위한 스크립트를 작성할 때 HTML - DOM에만 속하는 많은 속성이 있습니다.HTML_DOM은 다양한 HTML 요소의 속성을 설명하는 보다 간단한 기호를 제공합니다.예:

 
  
 document.forms 
  
 element.src 
  
 
 

WEB에만 사용 가능
3.CSS_DOM
CSS_DOM은 CSS에 대한 작업입니다.주로 스타일 대상의 각종 속성을 가져오고 설정합니다.스타일 대상의 각종 속성을 변경합니다.다른 효과를 바꾸다.

 
  
 element.style.color=“red”; 
  
 
 

7. 노드를 옮겨다니기
1.children() 2.next() 3.prev() 4.siblings() 5.closest()
8.jquey의 css
<1>opacity를 사용하여 투명도를 설정할 수 있습니다. jQuery는 호환성 문제를 처리했습니다.
$("p").css("opacity","0.5");
<2>$("p").height(100)//100 기본 단위는 px입니다. 다른 단위를 사용하려면 문자열을 사용해야 합니다
<3>offset () 방법
상대 창 간격띄우기 되돌리기

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

<4>position()

 
  
 //        position     。 
  
 var position=$("p").position(); 
  
 var left=position.left; 
  
 var top=position.top; 
  
 
 

<5>scrollTop() 및 scrollLeft()

 
  
 //                    。 
  
 var $p=$("p"); 
  
 var top=$p.scrollTop(); 
  
 var left=$p.scrollLeft(); 
  
 //             ： 
  
 $("ab").scrollTop(300); 
  
 
 

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

 
  
 $(document).mousemove(function(e){ 
  
   $("span").text("X: " + e.pageX + ", Y: " + e.pageY); 
  
 });