프로토타입 요소 연구 노트(2부)_prototype

모든 함수의 첫 번째 매개변수는 element이며, 이는 동작할 요소의 참조를 나타냅니다. 이는 Methodize 함수를 사용하여 Element.extend 시 DOM 개체에 이러한 메서드를 추가하는 것입니다. 호출 시 다음과 같은 첫 번째 매개변수를 입력할 필요가 없습니다.
var b=$('div1').visible()
또한 거의 모든 함수가 확장된 요소를 반환합니다. 유형은 HTMLElement입니다. 이렇게 하면 다음과 같은 코드를 연속해서 작성하는 것이 편리하다는 것입니다.
　$('div1').update().insert('새로 삽입된 내용입니다.');
이런 방식으로 코드를 작성하는 것의 장점 중 하나는 읽기 쉽고 작성하기 쉽다는 것입니다.
함수 소개는 다음과 같습니다.
visible(element):Boolean
요소 표시 여부(element.style.display에 따라 다름)
토글(element): HTMLElement
요소가 표시되면 보이지 않게 만들고, 보이지 않으면 표시되도록 합니다. 그런 다음 요소 자체에 대한 참조를 반환합니다. (element.style.display에 따라 다름)
hide(element): HTMLElement
요소를 숨깁니다. (element.style.display에 따라 다름)
　show(element): HTMLElement
　Display 요소입니다. (element.style.display에 따라 다름)
Remove(element): HTMLElement
요소 자체를 제거합니다(삭제 후 삭제된 요소를 반환).
업데이트(요소, 콘텐츠): HTMLElement
element.innerHTML과 유사하며 처리 스크립트 및 기타 기능을 추가합니다. 먼저 콘텐츠를 삽입한 다음 콘텐츠에 있는 스크립트를 실행합니다.
바꾸기(요소, 콘텐츠): HTMLElement
현재 요소를 바꿉니다. 그리고 대체된 요소를 반환합니다.
insert(element, inserts): HTMLElement
요소의 지정된 위치에 콘텐츠를 삽입합니다. 삽입 값은 다음과 같습니다.
문자열/번호/요소, 예: '삽입할 문자열입니다. !!', 기본값은 해당 요소의 하단 위치에 삽입됩니다.
{top:xxxxx,bottom:yyyy,before:zzzzz,after:aaaa}, 예: {top:'이것이 삽입할 콘텐츠입니다!'}.
반환 값은 요소입니다.
　wrap(요소, 래퍼, 속성): HTMLElement
　요소 외부에 다른 요소를 래핑합니다. 일반적으로 마스킹에 사용됩니다.
Wrapper: elementId, element, tagName, attrbutes (생성된 표지가 div인 경우 태그 설정 생략 가능)
Attributes: 요소의 스타일을 설정하는 데 사용되는 JSON 객체, 예: {color : "red" , backgroundImage:"url(header.gif)"}
$('win1').wrap('div1',{color: "#666"})
$('win1' ).wrap( 'span',{font-size:12});
　$('win1').wrap({color: "#666"})
　생성된 마스크에 대한 참조를 반환합니다.
Inspect(element): string
현재 요소를 나타내는 문자열을 생성합니다. 예를 들어

에는 toHTML()과 같지 않고 두 개의 속성만 있습니다.
recursivelyCollect(element, property): HTMLElement[]
설명하기는 어렵습니다. 예를 들어 $('div1').recursivelyCollect('firstchild')는 div1에서 가장 오래된 하위 요소를 모두 반환합니다.
조상(요소): HTMLElement[]
이 요소의 모든 직접 조상을 반환합니다. 예를 들어 div1 요소가 있으면 그 부모는 div2이고 div2의 부모는 div3입니다. 이것.
Descendants(element): HTMLElement[]
모든 하위 요소 노드의 배열을 반환합니다. element.select('*')와 동일합니다.
firstDescendant(element): HTMLElement
첫째 아들을 반환합니다. 모든 아들(손자, 증손자 제외...아).
ImmediateDescendants(element): HTMLElement[]
모든 아들을 반환합니다(손자, 증손자 제외...오).
PreviousSiblings(element): HTMLElement[]
모든 형제를 반환합니다.
NextSiblings(element): HTMLElement[]
모든 형제를 반환합니다.
Siblings(element): HTMLElement[]
모든 형제를 "가장 큰 것부터 작은 것"(html에 나타나는 순서) 순서로 정렬하여 반환합니다.
match(element, selector): Boolean
요소가 지정된 선택자를 만족하는지 여부
up(element, 표현식, 인덱스): HTMLElement
element.ancestors()에서 표현식을 만족하는 배열 index 요소인 표현식의 예는 다음과 같습니다.
$('div1').up('div',1)은 직계 조상 중 라벨이 div이고 일련 번호가 1인 요소에 대한 참조를 반환합니다.
　down(element, 표현식, index): HTMLElement
　 선택자 표현식을 만족하는 자손 중 인덱스 번째 요소를 반환합니다.
이전(요소, 표현식, 인덱스): HTMLElement
이전(요소, 표현식, 인덱스): HTMLElement
이 둘에 대한 서스펜스는 없으며 이전 것, 다음 것, 이전 n을 반환합니다. 그리고 다음 n.
Select(element, selector1, selector2,...): HTMLElement[]
선택기를 만족하는 하위 항목의 요소 배열을 반환합니다. 여러 선택기 간에 결합 관계가 있습니다.
　adjacent(element,selector): HTMLElement[]
　자신을 제외하고 선택자를 만족하는 모든 형제를 반환합니다.
식별(요소): 문자열
ID가 있으면 기존 ID를 반환하고, 없으면 ID를 가져옵니다. 그리고 돌아오다.
readAttribute(element, name): 문자열
읽기 속성
writeAttribute(element, name, value): HTMLElement
쓰기 속성

========== = ================================================= ================================================= ================================================= ==========　　　　　　　　　　　　　　　　　　　ulate 일반적으로 다양한 좌표를 구하고 설정하는 데 사용되는 요소의 공통 좌표는 여러 가지가 있지만 다음과 같습니다.
1.
문서의 왼쪽 상단 모서리 2. 뷰포트 왼쪽 상단 모서리를 기준으로
3. 특정 요소를 기준으로
각 프레임워크의 코드를 보면 얻을 수 있는 좌표 유형은 세 가지뿐입니다. 아래에서 한두 가지를 간략하게 설명해보자.
　getHeight(element), getWidth(element), clientHeight, clientWidth를 찾는 것과 동일합니다.
classNames(element): Element.ClassNames
hasClassName(element, className): Boolean
addClassName(element, className): HTMLElement
RemoveClassName(element, className): HTMLElement
ggleClassName(element , className): HTMLElement
cleanWhitespace(element): HTMLElement, 빈 텍스트 노드 삭제
empty(element): Boolean, 요소 내용이 비어 있는지 여부
DescendantOf(element,ancestor): Boolean, 여부 결정 요소가 비어 있습니다. 특정 요소의 자손이며 조상은 ID 또는 요소 참조입니다.
scrollTo(element): HTMLElement, 이 요소로 스크롤하고 이 요소에 대한 참조를 반환합니다.
　getStyle(element, style): 유형이 정의되지 않고 요소의 특정 스타일 값을 반환합니다.
　getOpacity(element): 부동, 투명도를 반환합니다.
SetStyle(요소, 스타일): HTMLElement, 요소의 스타일을 설정합니다. 스타일은 JSON 개체입니다.
setOpacity(element, value): HTMLElement, 요소의 투명도를 설정합니다.
　getDimensions(요소): {너비:x,높이:y}. clientWidth, clientHeight를 반환합니다.
　makePositioned(element): HTMLElement, 위치를 상대 위치로 설정합니다. 위치를 현재 위치로 설정하지 않습니다.
undoPositioned(element): HTMLElement, 요소의 위치를 ​​기본값으로 설정합니다.
MakeClipping(element): HTMLElement, 요소의 오버플로를 설정합니다.
undoClipping(element): HTMLElement, 오버플로 지우기.
CumulativeOffset(element): Element._returnOffset, 전체 페이지를 기준으로 오프셋을 가져옵니다.
PositionedOffset(element): Element._returnOffset, 정적이 아닌 첫 번째 위치를 기준으로 요소 오프셋을 가져옵니다. 모두 정적이면 페이지를 기준으로 합니다.
Absolutize(element): HTMLElement, 위치를 절대값으로 설정하고 위치를 현재 위치로 설정합니다.
relativize(element): HTMLElement, 위치를 ralative로 설정하고 위치를 현재 위치로 설정합니다.
CumulativeScrollOffset(element): 최상위 컨테이너의 scrollOffset 합계를 기준으로 Element._returnOffset은 페이지에 iframe이 있으므로 반드시 문서일 필요는 없습니다.
GetOffsetParent(element): HTMLElement, CSS를 공부했다면 쉽게 말할 수 있으므로 더 말할 필요가 없습니다.
　viewportOffset(element): Element._returnOffset, 뷰포트의 왼쪽 상단 모서리를 기준으로 오프셋을 찾습니다.
ClonePosition(element, source): HTMLElement는 소스의 위치 속성을 자신에게 복제합니다.