prototype Element 학습 노트(편 2)

5950 단어 prototypeElement
모든 함수 의 첫 번 째 매개 변 수 는:element 입 니 다.작업 할 요소 의 인용 을 표시 합 니 다.이것 은 Element.extend 에서 이 방법 들 을 DOM 대상 에 추가 하기 위해 methodize 함 수 를 사용 합 니 다.호출 할 때 첫 번 째 인 자 를 입력 할 필요 가 없습니다.예 를 들 어 var b=$('div1').visible();또한,거의 모든 함수 가 자신 에 게 돌아 갑 니 다.주의 하 세 요.확 장 된 요소 의 유형 은:HTML Element 입 니 다.이렇게 하 는 이 유 는 하나의 장점 이 있 습 니 다.예 를 들 어$('div1').update().insert('새로 삽 입 된 내용 입 니 다')와 같은 코드 를 쉽게 연결 하 는 것 입 니 다.이렇게 코드 를 쓰 는 것 은 가 독성 이 강하 고 쓰기 쉽다 는 장점 이 있다.다음은 함수 소개:visible(element):Boolean 요 소 를 볼 수 있 는 지 여부(element.style.display 에 의 해)toggle(element):HTML Element 요 소 를 볼 수 있 으 면 보이 지 않 고 보이 지 않 으 면 볼 수 있 습 니 다.원소 자체 의 인용 을 되 돌려 줍 니 다.(element.style.display)hide(element):HTML Element 에 의 해 요 소 를 숨 깁 니 다.(element.style.display)show(element):HTML Element 에 의 해 요 소 를 표시 합 니 다.(element.style.display)remove(element):HTML Element 에 의 해 요소 자체 가 삭 제 됩 니 다(삭 제 된 요 소 를 되 돌려 줍 니 다).update(element,content):HTML Element 은 element.innerHTML 과 유사 하 며 스 크 립 트 처리 등 기능 을 추가 합 니 다.내용 을 먼저 삽입 한 다음 콘 텐 츠 의 스 크 립 트 를 실행 합 니 다.replace(element,content):HTML Element 은 현재 요 소 를 대체 합 니 다.교 체 된 요 소 를 되 돌려 줍 니 다.insert(element,insertions):HTML Element 는 element 의 지정 한 위치 에 내용 을 삽입 합 니 다.insertions 의 값 은 다음 과 같 습 니 다:string/number/element,예 를 들 어'this is the string to insert!!',기본 요소 의 bottom 위치 에 삽 입 됩 니 다.{top:xxxxxx,bottom:yyy,before:zzzzz,after:aaaa},예 를 들 어{top:'this the content you will insert!'}.반환 값 은 element 입 니 다.wrap(element,wrapper,attributes):HTML Element 는 element 밖 에 요 소 를 하나 더 덮 습 니 다.보통 마스크 로 쓰 인 다.wrapper:element Id,element,tagName,attrbutes(마스크 가 div 일 때 탭 설정 을 생략 할 수 있 음)attributes:JSON 대상,요소 의 스타일 을 설정 하 는 데 사 용 됩 니 다.예 를 들 어{color:"red",background Image:"url(header.gif)"}$('win 1').wrap('div1',{color:"\666"});  $('win1').wrap('span',{font-size:12});   $('win1').wrap({color:“#666”}); 만 든 마스크 의 인용 을 되 돌려 줍 니 다.inspect(element):string 은 현재 요 소 를 나타 내 는 문자열 을 생 성 합 니 다.예 를 들 어
는 두 개의 속성 만 얻 을 수 있 고 toHTML()과 같 지 않 습 니 다.recursively Collect(element,property):HTML Element[]는 설명 하기 어렵 습 니 다.예 를 들 어$('div 1').recursively Collect('firstchild')는 div 1 의 모든 장남 신분 요 소 를 되 돌려 줍 니 다.ancestors(element):HTML Element[]는 이 요소 의 모든 직계 조상 을 되 돌려 줍 니 다.예 를 들 어 요소 div 1 이 있 으 면 아버 지 는 div 2,div 2 이 고 아버 지 는 div 3 입 니 다.이렇게 계속 호출 됩 니 다.descendants(element):HTML Element[]는 모든 자손 요소 의 결산 점 을 되 돌려 줍 니 다.element.select('*')와 같 습 니 다.first Descendant(element):HTML Element 가 첫 아들 로 돌 아 왔 습 니 다.모든 아들.immediate Descendants(element):HTML Element[]는 모든 아들 에 게 돌아 갑 니 다.previousSiblings(element):HTML Element[]는 모든 형 에 게 돌아 갑 니 다.nextSiblings(element):HTML Element[]는 모든 동생 을 되 돌려 줍 니 다.siblings(element):HTML Element[]는 모든 형 제 를 되 돌려 주 고'큰 것 부터 작은 것 까지'(html 에 나타 나 는 순서)순 으로 정렬 합 니 다.match(element,selector):Boolean 요소 가 지정 한 선택 문자 up(element,expression,index)을 만족 시 킬 지 여부:HTML Element element.ancestors()에서 표현 식 expression 을 만족 시 키 는 배열 에서 index 의 첫 번 째 요 소 는 다음 과 같 습 니 다.$('div1').up('div',1)은 직접 조상 에 게 돌아 가 div 라 는 태그 와 번호 가 1 인 요소 의 참조 입 니 다.down(element,expression,index):HTML Element 는 자손 에 게 돌아 가 고,index 는 선택 문자 expression 을 만족 시 키 는 요소 입 니 다.previous(element,expression,index):HTML Element previous(element,expression,index):HTML Element 두 개 는 서 스 펜스 가 없 으 며 이전,다음,이전 n 개,후 n 개 를 되 돌려 줍 니 다.select(element,selector 1,selector 2,...):HTML Element[]는 자손 에 게 돌아 가 선택 문자 의 요 소 를 만족 시 키 는 배열 입 니 다.여러 선택 문자 간 에는 집합 관계 입 니 다.adjacent(element,selector):HTML Element[]는 자신 을 포함 하지 않 고 선택 자 를 만족 시 키 는 모든 형 제 를 되 돌려 줍 니 다.identify(element):string 에 id 가 있 으 면 기 존 id 를 되 돌려 주 고 없 으 면 id 를 가 져 옵 니 다.그리고 돌아간다.readAttribute(element,name):string 읽 기 속성 writeAttribute(element,name,value):HTML Element 쓰기 속성========================================위의 함 수 는 조회,잡무 에 사용 된다.아래 의 함 수 는 일반적으로 각종 좌 표를 가 져 오고 설정 하 는 데 사용 된다.웹 페이지 에서 한 요소 의 상용 좌 표 는 여러 가지 가 있 는데 다음 과 같다.첫째,문서 왼쪽 상단 의 2,시각 구역 왼쪽 상단 의 3,특정한 요소 에 비해 각 프레임 의 코드 를 살 펴 보면 좌 표를 구 하 는 것 은 이 세 가지 가 아니다.다음은 하나,둘 을 약술 하 겠 습 니 다.getHeight(element),getWidth(element)는 clientHeight,clientWidth 를 구 하 는 것 과 같다.  classNames(element):Element.ClassNames   hasClassName(element, className):Boolean   addClassName(element, className):HTMLElement   removeClassName(element, className):HTMLElement   toggleClassName(element, className):HTMLElement   cleanWhitespace(element):HTMLElement,빈 텍스트 노드 empty(element):Boolean 을 삭제 합 니 다.요소 의 내용 이 빈 descendantOf(element,ancestor)인지 여부:Boolean 은 요소 가 특정한 요소 의 자손 인지,ancestor 는 id 또는 요소 참조 인지 판단 합 니 다.scrollTo(element):HTML Element,이 요 소 를 스크롤 하고 이 요소 의 인용 을 되 돌려 줍 니 다.getStyle(element,style):형식 이 일정 하지 않 습 니 다.요소 의 특정한 스타일 의 값 을 되 돌려 줍 니 다.getOpacity(element):Float,투명 도 를 되 돌려 줍 니 다.setStyle(element,styles):HTML Element,요소 의 스타일 을 설정 합 니 다.styles 는 JSON 대상 입 니 다.setOpacity(element,value):HTML Element,요소 의 투명 도 를 설정 합 니 다.  getDimensions(element):{width:x,height:y}。client Width,client Height 를 되 돌려 줍 니 다.MakePositioned(element):HTML Element,position 을 relative 로 설정 합 니 다.위 치 를 현재 위치 로 설정 하지 않 습 니 다.undoPositioned(element):HTML Element,요소 의 position 을 기본 값 으로 설정 합 니 다.MakeClipping(element):HTML Element,요소 의 넘 침 을 설정 합 니 다.undoClipping(element):HTML Element,넘 침 제거.  cumulativeOffset(element):Element._return Offset,전체 페이지 에 대한 offset 를 가 져 옵 니 다.  positionedOffset(element):Element._return Offset,첫 번 째 position 에 비해 static 요소 가 아 닌 offset 를 가 져 옵 니 다.모두 static 이 라면 페이지 에 비해.absolutize(element):HTML Element,position 를 absolute 로 설정 하고 위 치 를 현재 위치 로 설정 합 니 다.relativize(element):HTML Element,position 를 ralative 로 설정 하고 위 치 를 현재 위치 로 설정 합 니 다.  cumulativeScrollOffset(element):Element._return Offset,최상 위 용기 의 scroll Offset 의 합계 에 비해 문서 가 아 닙 니 다.페이지 에 iframe 이 있 으 면 아 닙 니 다.getOffset Parent(element):HTML Element,css 를 연구 한 적 이 있 으 면 말 할 필요 가 없습니다.  viewportOffset(element):Element._return Offset,시각 영역 왼쪽 상단 의 오프셋 을 구 합 니 다.clonePosition(element,source):HTML Element,source 복제 위치 속성 에서 자신 까지.

좋은 웹페이지 즐겨찾기