mootools温习与深入_Element_1

1. document.id 
   

   var btn = document.id("btn")
   btn.addEvent(
   "click",
   function(){
       alert("clicking on the btn")
       }
   )

    同样也可以是：$.
   

   var myElement = $('myElement');
   var myElement2 = document.id('myElement');

2. $$的用法.
   用于返回一类元素或通过多个选择条件进行过滤和赛选。
   $$('a'); // 返回页面中所有的a标签对象.
   $$(element1, element2, element3); // 返回这三个对象.
   $$('#myElement'); // 返回id为myElement的对象.
   $$('#myElement a.myClass'); // 返回页面内id为myElement,含有myClass类的a标签对象.
   $$('a, b'); // a代表<a></a>, b代表bold.即返回这两者对象.
3. Element
   var myEl = new Element(element[, properties]);
   

   // Creating an new anchor with an Object
   var myAnchor = new Element('a', {
       href: 'http://mootools.net',
       'class': 'myClass',
       html: 'Click me!',
       styles: {
           display: 'block',
           border: '1px solid black'
       },
       events: {
           click: function(){
               alert('clicked');
           },
           mouseover: function(){
               alert('mouseovered');
           }
       }
   });
   
   // Using Selectors
   var myNewElement = new Element('a.myClass');

4. getElement: var firstDiv = $(document.body).getElement('div'); 返回第一个对象
5. getElements: var myElements = myElement.getElements(tag); 返回所有符合对象
6. getElementById: var myElement = anElement.getElementById(id); 返回对应id的对象
7. Element.set(arguments):
   

   $('myElement').set('text', 'text goes here');
   $('myElement').set('class', 'active');
   // the 'styles' property passes the object to Element:setStyles.
   var body = $(document.body).set('styles', {
       font: '12px Arial',
       color: 'blue'
   });

   var myElement = $('myElement').set({
   // the 'styles' property passes the object to Element:setStyles.
       styles: {
           font: '12px Arial',
           color: 'blue',
           border: '1px solid #f00'
       },
   // the 'events' property passes the object to Element:addEvents.
       events: {
           click: function(){ alert('click'); },
           mouseover: function(){ this.addClass('over'); }
       },
   //Any other property uses Element:setProperty.
       id: 'documentBody'
   });

8. Element.get 返回对象属性值
   var id = $('myDiv').get('id'); // returns "myDiv".
   var value = $('myInput').get('value'); // returns the myInput element's value
9. Element.erase 擦出对象属性值
   $('myDiv').erase('id'); //Removes the id from myDiv.
   $('myDiv').erase('class'); //myDiv element no longer has any class names set.
10. Element.match 返回布尔值，反映是否匹配。
    var el = $('myDiv');
    $('myDiv').match(el); // returns true
    $('otherElement').match(el); // returns false
11. Element.contains. 返回布尔值， 反映是否包含。