<날카로운 jQuery> 복습 회고 - jQuery 선택기 & DOM 조작
1. jQuery 객체와 Dom 객체 상호 전환
jQuery=>Dom ([index] get(index))
var $btn = $("#btn"); //jQuery
var btn1 = $btn[0] //Dom
var btn2 = $btn.get(0) //Dom
Dom => jQuery
> var btn3 = document.getElementById("btn"); //Dom
> var $btn4 = $(btn3); //jQuery
2. jQuery 선택기의 완벽한 처리 메커니즘
eg: id “tt” ( )
> var tt = document.getElementById("tt");
tt.style.color="red"; // tt
:
if(document.getElementById("tt")){
document.getElementById("tt").style.color="red";
}
jQuery :
$("#tt").css("color","red");
:jQuery , , :
if($('#tt')){
//do something
}
:
if($('#tt').length>0){
//do something
}
if($('#tt')[0]){
//do something
}
3. 필터
3.1 기본 필터
> :not(select)
:even(index) ( 0 )
:odd(index) ( 0 )
:gt(index) index ( 0 )
:lt(index) index ( 0 )
:header h1-h6
3.2 하위 요소 필터 선택기
> :nth-child(index/even/odd/2n/3n+2) index ,index 1
:first-child
:last-child
:only-child
3.3 양식 객체 속성 필터
> :input // input textarea button select
> :text //
> :password //
> :checkbox //
> :radio //
> :submit //
> :reset //
> :image //
> :button //
> :file //
> :hidden //
4.jQuery Dom 작업
4.1 detach () 방법 detach () 방법은remove () 와 같이dom에서 일치하는 요소를 제거하지만 jQuery에서 삭제하지 않습니다.detach는 요소가 연결된 이벤트, 데이터 등을 보류하고 다시 사용합니다
4.2 clone () 방법 clone () 클론 Dom 구조 clone (true) 클론 Dom 구조 및 요소에 바인딩된 이벤트
4.3 wrap () wrapAll () wrapInner () wrap () 는 일치하는 모든 요소를 분리하여 싸고, wrapAll은 일치하는 모든 요소를 일회용으로 싸고, wrapInner는 요소를 내부에 싸고, 일치하는 요소는 바깥쪽에 싸운다
4.4 CSS-Dom에서 자주 사용하는 포지셔닝 방법offset () 상대적 창의 편이position () 가장 가까운 절대 또는 상대적 위치를 가진 부모 요소의 편이량scrollTop () scrollLeft () 스크롤 바가 굴러간 거리
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.