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는 요소를 선택하는 또 다른 방법으로

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

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

<code class="language-javascript">var element = $('id_of_element');</code>

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

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

<code class="language-javascript">var element = document.id('id_of_element');</code>

domready event

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

<code class="language-javascript">$$('.class_name').each(function(ele){
  console.log(ele);
});</code>

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

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

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

<code class="language-javascript">$$('[id^=id_start_]').each(function(ele){
  console.log(ele);
});

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

이벤트 바인딩

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

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

브라우저 감지

<code class="language-javascript">$$('[id$=_end_id]').each(function(ele){
  console.log(ele);
});

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

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

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

결론

<code class="language-javascript">window.addEvent('domready', function(){
  if(document.id('id_of_element'))
  {
    alert('Element Exists');
  }
});</code>

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

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

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