mootools를 시작합니다

이 튜토리얼은 오늘날 가장 인기있는 JavaScript 프레임 워크 중 하나 인 Mootools를 소개합니다. mootools (내 객체 지향 도구 )는 Internet Explorer 6, Firefox, Opera 및 Chrome과 호환됩니다. Mootools는 작고 모듈 식 및 객체 지향적으로 설계되었습니다. Mootools는 중간에서 높은 수준의 JavaScript 프로그래머를 위해 설계되었으므로 더 깊이 파고 들기 전에 충분한 경험이 있는지 확인하십시오.

코어 포인트

mootools (대표

내 객체 지향 도구 )는 작고 모듈 식 및 객체 지향적 인 JavaScript 프레임 워크입니다. Internet Explorer 6, Firefox, Opera 및 Chrome과 호환되며 중간에서 높은 수준의 JavaScript 프로그래머를 위해 설계되었습니다. 이 프레임 워크에는 요소 선택기, DOMREADY 이벤트, 요소 생성, 이벤트 바인딩 및 브라우저 감지와 같은 기능이 포함되어 있습니다. 요소 선택기는 ID, 클래스 또는 속성 모드를 통해 요소를 선택하는 작업을 단순화합니다. DOMREADY 이벤트는 DOM이로드 된 직후에 실행되므로 스크립트 실행이 더 빠릅니다. 이벤트 바인딩은 특정 이벤트가 발생하면 코드 실행이 가능하며 브라우저 감지는 사용자의 브라우저를 기반으로 조건부 코드로 편리하게 작성됩니다.

mootools는 사용자 정의가 가능하므로 개발자가 사용하려는 구성 요소를 선택하고 수정할 수 있습니다. 이는 스크립트 효율성을 향상시키고 성능을 향상시킵니다. 또한 다른 JavaScript 라이브러리와의 호환성을 제공하고 일관된 코드 성능을 위해 다른 브라우저 간의 차이를 정상화하는 브라우저 추상화라는 기능을 제공합니다.

• mootools를 얻습니다
mootools를 얻는 것은 매우 쉽습니다. mootools는 코어 등이라는 두 부분으로 나뉩니다. Core에는 프레임 워크의 핵심 클래스 및 모듈이 포함되어 있으며 더 많은 응용 프로그램 요구 사항에 따라 포함될 수있는 추가 클래스가 포함됩니다. Mootools에는 강력한 빌더 페이지가있어 코어를 우리의 요구에 맞게 사용자 정의합니다. Mootools Core의 현재 안정 버전 (글쓰기시)은 1.4.5 이상입니다.
• 요소 선택기
JavaScript 프레임 워크의 가장 기본적인 작업 중 하나는 요소를 선택하는 것입니다. Mootools는 Slick을 선택기 엔진으로 사용합니다. Mootools는 다양한 유형의 선택기를 지원합니다. 이 섹션에서는 가장 유용하고 중요한 선택기에 대해 설명합니다.
• id 로 요소를 선택하십시오 순수한 JavaScript에서 ID로 요소를 선택하려면 Verbose

구문을 사용해야합니다. Mootools는 다른 많은 JavaScript 프레임 워크와 마찬가지로

를 사용 하여이 작업을 단축합니다. 코드는 다음과 같이 보입니다. 같은 페이지에 mootools 및 기타 라이브러리 (예 : jQuery)를 포함하면 문제가 발생합니다. 이를 극복하기 위해 Mootools는 요소를 선택하는 또 다른 방법으로

를 제공합니다. 요소를 선택한 코드는 이제 다음과 같습니다.

클래스별로 요소를 선택하십시오 이것은 특정 클래스의 요소 배열을 반환합니다. 각 개별 요소를 얻으려면 아래 그림과 같이 배열을 반복해야합니다.

var element = $('id_of_element');

속성 모드를 통해 요소를 선택하십시오 다음 예제는 ID 및 클래스 속성이 특정 패턴으로 시작하는 요소를 선택합니다.

마찬가지로, 다음 예제는 ID 및 클래스 속성이 특정 패턴으로 끝나는 요소와 일치합니다.

var element = document.id('id_of_element');

<<> domready event

<🎜 🎜> domready는 창 객체에만 구속 될 수있는 이벤트입니다. DOMREADY는 DOM이로드 된 직후에 실행되며, 이는 다른 모든 리소스가로드 될 때까지 Window.load 이벤트보다 훨씬 빠릅니다. DOMREADY 및 WINDOW.LOAD 비교에 대한 심층적 인 읽기를하는 것이 좋습니다. 다음 예제는 DOMREady를 사용하여 DOM을 쿼리하기 전에로드 될 때까지 기다립니다.

$$('.class_name').each(function(ele){
  console.log(ele);
});

<<> 요소 창조 <🎜 🎜> <🎜 🎜> mootools는 새로운 HTML 요소를 생성하여 DOM에 주입 할 수 있습니다. Mootools에서 새로운 HTML 요소를 만드는 것은 매우 간단합니다. 예를 들어, 다음 코드는 새 div 요소를 만듭니다. 이전 코드는 새 요소를 생성하지만 DOM에 주입하지는 않습니다. 주입을 수행하려면

메소드를 호출해야합니다. 다음 예는이 작업을 수행하는 방법을 보여줍니다.

이 코드를 실행할 때 바디 태그를 끝내기 전에 추가 된 새 div를 볼 수 있습니다.

$$('[id^=id_start_]').each(function(ele){
  console.log(ele);
});

$$('[class^=class_start_]').each(function(ele){
  console.log(ele);
});

<🎜 🎜> <<> 이벤트 바인딩

이벤트 바인딩으로 인해 특정 이벤트가 요소에서 실행될 때 코드가 실행됩니다. 클릭, 두 번 클릭 및 호버는 일반적인 이벤트의 예입니다. 자신만의 커스텀 이벤트를 만들 수도 있지만이 기사의 범위를 벗어납니다. Mootools 이벤트 바인딩의 예로 다음 코드는 요소에 간단한 클릭 이벤트 핸들러를 추가합니다.

동적으로 생성 된 요소에 이벤트를 추가 할 수도 있습니다. 다음 코드는 클릭 핸들러를 동적으로 생성 된 요소에 추가합니다.

<🎜 🎜> <<> 브라우저 감지

$$('[id$=_end_id]').each(function(ele){
  console.log(ele);
});

$$('[class$=_end_class]').each(function(ele){
  console.log(ele);
});

<🎜 🎜> 마지막으로 Mootools를 사용한 브라우저 감지입니다. 사용자의 브라우저를 기반으로 조건부 코드를 작성하려는 경우 필요합니다. mootools는 페이지가로드 될 때 채워진

객체를 제공합니다. 다음 예제는 Switch 문을 사용하여 현재 브라우저를 식별합니다. adopt()

<🎜 🎜> <<> 결론

window.addEvent('domready', function(){
  if(document.id('id_of_element'))
  {
    alert('Element Exists');
  }
});

이 기사는 Mootools에 대한 많은 기본 지식을 소개합니다. mootools를 효과적으로 사용하는 법을 배우는 데 많은 훌륭한 자료가 있습니다. Mootools 문서와 David Walsh 블로그에서 많은 것을 배웠습니다. 내 mootools 작업을 참조 할 수도 있습니다.

(두 번째 FAQ 섹션을 필요와 비슷하게 다시 작성할 수 있으며 컨텐츠의 일관성을 유지하면서 문구 및 문장 구조를 조정할 수 있습니다) .

위 내용은 mootools를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이전 기사：JavaScript로 간단한 Windows 8 게임 만들기 : 게임 로직 다음 기사：JS iPad 줌 제어 기술

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2835

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2958

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

2477

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

2405

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

2453

관련 주제

더>

• Rabbitmq와 kafka의 차이점은 무엇입니까
• USDT는 어떤 통화인가요?
• Windows 11 내 컴퓨터를 데스크탑 튜토리얼로 전송
• iPad를 충전할 수 없으면 어떻게 해야 하나요?
• PHP를 mssql 데이터베이스에 연결하는 방법
• USB-C와 TYPE-C의 차이점은 무엇인가요?
• Kindeditor 사용법 튜토리얼
• 스포트라이트 검색이란 무엇입니까?

인기 추천

• js는 무슨 뜻인가요?
• js에서 문자열을 배열로 변환하는 방법은 무엇입니까?
• 자바스크립트를 사용하여 페이지를 새로 고치는 방법
• js 배열에서 항목을 삭제하는 방법
• sqrt 함수를 사용하는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1434431
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4291199
• 
  JAVA 초보자용 비디오 튜토리얼

  2638742
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  514995
• 
  PHP 제로 기반 입문 튜토리얼

  874486

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1434431 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2638742 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  514995 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  216852 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  914867 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  9272 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  7475 학습 시간
• 
  Go 언어 실습 GraphQL

  6309 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  807 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  31340 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved