dom7 -自定义的dom

Framework7不使用任何第三方库,甚至不使用DOM操作。它有自己的自定义DOM7 - DOM库,利用了最先进和高性能的DOM操作方法。你不需要学习新的东西,它的使用非常简单,因为它具有与众所周知的jQuery库相同的语法,支持最流行和广泛使用的方法和类似jQuery的链式调用。

要开始使用它,有一个Dom7全局窗口函数,但我们建议将其分配给一些更方便的本地变量,比如$$,而不是"$",以防止与其他库(如jQuery或Zepto)发生冲突:

//将DOM7导出到本地变量,以便轻松访问
var $$ = Dom7;

Usage Example

就是你已经知道的一切:

$$('.something').on('click', function (e) {
    $$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
});

Available Methods

所有这些方法的工作方式几乎与jQuery或Zepto相同,参数也相同:

$$(window).trigger('resize');
Classes
.addClass(className)Add class to elements
//Add "intro" class to all paragraphs
$$('p').addClass('intro');
.removeClass(className)Remove specified class
//Remove "big" class from all links with "big" class
$$('a.big').removeClass('big');
.hasClass(className)Determine whether any of the matched elements are assigned the given class:
<p class="intro">Lorem ipsum...</p>
$$('p').hasClass('intro'); //-> true
.toggleClass(className)Remove (if class is present) or add (if not) one or more classes from each element in the set of matched elements:
<!-- Before -->
<h1 class="small">This is first title</h1>
<h2>This is subtitle</h2>
$$('h1, h2').toggleClass('small');
<!-- After -->
<h1>This is first title</h1>
<h2 class="small">This is subtitle</h2>
Attributes and properties
.prop(propName)Get property value:
var isChecked = $$('input').prop('checked');
.prop(propName, propValue)Set single property value:
//Make all checkboxes checked
$$('input[type="checkbox"]').prop('checked', true);
.prop(propertiesObject)Set multiple properties:
$$('input').prop({
  checked: false,
  disabled: true
})
.attr(attrName)Get attribute value:
<a href="http://google.com">Google</a>
var link = $$('a').attr('href'); //-> http://google.com
.attr(attrName, attrValue)Set single attribute value:
//Set all links to google
$$('a').attr('href', 'http://google.com');
.attr(attributesObject)Set multiple attributes:
$$('a').attr({
  id: 'new-id',
  title: 'Link to Google',
  href: 'http://google.com'
})
.removeAttr(attrName)Remove specified attribute:
//Remove "src" attribute from all images
$$('img').removeAttr('src');
.val()Get the current value of the first element in the set of matched elements
<input id="myInput" type="text" value="Lorem ipsum"/>
var inputVal = $$('#myInput').val(); //-> 'Lorem ipsum'
.val(newValue)Set the value of every matched element
$$('input#myInput').val('New value here');
Data storage
.data(key, value)Store arbitrary data associated with the matched elements
$$('a').data('user', {
    id: '123',
    name: 'John',
    email: 'john@doe.com'
});
.data(key)Return the value at the named data store for the first element in the collection, as set by data(key, value) or by an HTML5 data-* attribute
var user = $$('a').data('user');
//-> {id: '123', name: 'John', email: 'john@doe.com'}

or

<p data-id="123">Lorem ipsum...</p>
var id = $$('p').data('id'); //-> 123
.removeData(key)Remove specified data
$$('a').removeData('user')
Data Set
.dataset()Returns element's data set (set of data- attributes) as plain Object
<div id="my-div" data-loop="true" data-animate-pages="false" data-index="0" data-hello="world">
    ...
</div>
var dataset = $$('#my-div').dataset();
/*
dataset will contain plain object with camelCase keys and with formatted boolean and number types:
{
    loop: true,
    animatePages: false,
    index: 0,
    hello: 'world'
}
*/
CSS transform, transitions
.transform(CSSTransformString)Adds prefixed CSS transform property:
$$('a').transform('rotate(90deg)')
.transition(transitionDuration)Set CSS transition-duration property to collection:
$$('p').transition(300)
Events
.on(eventName, handler, useCapture)Add event handler function to one or more events to the selected elements.
$$('a').on('click', function (e) {
  console.log('clicked');
});
$$('input[type="text"]').on('keyup keydown change', function (e) {
  console.log('input value changed');
});
.on(eventName, delegatedTarget, handler, useCapture)Live/delegated event handler
$$(document).on('click', 'a', function (e) {
  console.log('link clicked');
});
.once(eventName, handler, useCapture)Add event handler function to one or more events to the selected elements that will be executed only once
$$('a').once('click', function (e) {
  console.log('clicked');
});
$$('input[type="text"]').once('keyup keydown change', function (e) {
  console.log('input value changed');
});
.once(eventName, delegatedTarget, handler, useCapture)Live/delegated event handler that will be executed only once
$$(document).once('click', 'a', function (e) {
  console.log('link clicked');
});
.off(eventName, handler, useCapture)Remove event handler
function clickHandler(){
    console.log('clicked');
}
// Add event listener
$$('a').on('click', clickHandler);
// Remove event listener
$$('a').off('click', clickHandler);
.off(eventName, delegatedTarget, handler, useCapture)Remove live/delegated event handler
function clickHandler(){
    console.log('clicked');
}
// Add event listener
$$(document).on('click', 'a', clickHandler);
// Remove event listener
$$(document).off('click', 'a', clickHandler);
.trigger(eventName, eventData)Execute all handlers added to the matched elements for the specified event
.transitionStart(callback)Adds prefixed transitionStart event handler to collection
.transitionEnd(callback, permanent)Adds prefixed transitionEnd event handler to collection:
$$('a').transitionEnd(function(){ /* do something */ })
.animationEnd(callback)Adds prefixed animationEnd event handler to collection:
$$('a').animationEnd(function(){ /* do something */ })
Styles
.width()Get the current computed width for the first element in the set of matched elements
var boxWidth = $$('div#box').width();
.outerWidth([includeMargin])Get the current computed width for the first element in the set of matched elements, including padding and border, and margin (if includeMargin is true)
var outerWidth = $$('div#box').outerWidth(true);
.height()Get the current computed height for the first element in the set of matched elements
var boxHeight = $$('div#box').height();
.outerHeight([includeMargin])Get the current computed height for the first element in the set of matched elements, including padding and border, and margin (if includeMargin is true)
var outerHeight = $$('div#box').outerHeight(true);
.offset()Get the current coordinates of the first element relative to the document
var coords = $$('.content').offset(); //-> {top: 100, left: 200}
var top = coords.top; //-> 100
var left = coords.left; //-> 200
.hide()Set "display:none" to the matched elements
//hide all paragraphs
$$('p').hide();
.show()Set "display:block" to the matched elements
//show all paragraphs
$$('p').show();
.css(property)Get value of specified CSS property for the first element:
$$('.content').css('left'); //-> 200px
.css(property, value)Set specified CSS property to the matched elements:
$$('.content').css('left', '100px');
.css(propertiesObject)Set multiple CSS properties to the matched elements:
$$('a').css({
    left: '100px',
    top: '200px',
    color: 'red',
    width: '300px',
    marginLeft: '17px',
    'padding-right': '20px'
});
Scroll
.scrollTop()Get scrollTop position of element
.scrollTop(position, duration, callback)Set scrollTop "position" with animation during "duration" (in ms). Scroll top position will be set immediately if duration is not specified. If you have specified "callback" function, then it will be executed after scrolling completed
.scrollLeft()Get scrollLeft position of element
.scrollLeft(position, duration, callback)Set scrollLeft "position" with animation during "duration" (in ms). Scroll left position will be set immediately if duration is not specified. If you have specified "callback" function, then it will be executed after scrolling completed
.scrollTo(left, top, duration, callback)Set scroll left and scroll top with animation during "duration" (in ms). Scroll position will be set immediately if duration is not specified. If you have specified "callback" function, then it will be executed after scrolling completed
Dom Manipulation
.add(elements)Create a new Dom7 collection with elements added to the set of matched elements:
var links = $$('a');
var divs = $$('div');
links.add('p').addClass('blue');
links.add(divs).addClass('red');
.each(callback)Iterate over collection, executing a callback function for each matched element
.html()Get the HTML contents of the first element in the set of matched elements
.html(newInnerHTML)Set the HTML contents of every matched element
.text()Get the text contents of the first element in the set of matched elements
.text(newTextContent)Set the text contents of every matched element
.is(CSSSelector)Check the current matched set of elements against CSS selector
.is(HTMLElement)Check the current matched set of elements against HTML element or Dom7 collection
.index()Return the position of the first element within the Dom7 collection relative to its sibling elements
.eq(index)Reduce the set of matched elements to the one at the specified index
.append(HTMLString)Insert content, specified by the parameter, to the end of each element in the set of matched elements
.append(HTMLElement)Insert specified HTML element to the end of element in the set of matched elements
.appendTo(HTMLElement)Insert content/elements, to the end of element specified in parameter
.prepend(newHTML)Insert content, specified by the parameter, to the beginning of each element in the set of matched elements
.prepend(HTMLElement)Insert specified HTML element to the beginning of element in the set of matched elements
.prependTo(HTMLElement)Insert content/elements, to the beginning of element specified in parameter
.insertBefore(target)Insert every element in the set of matched elements before the target. Target could be specified as CSS selector or HTML element or Dom7 collection
.insertAfter(target)Insert every element in the set of matched elements after the target. Target could be specified as CSS selector or HTML element or Dom7 collection
.next([selector])Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector
.nextAll([selector])Get all following siblings of each element in the set of matched elements, optionally filtered by a selector
.prev([selector])Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector
.prevAll([selector])Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector
.siblings([selector])Get the siblings of each element in the set of matched elements, optionally filtered by a selector
.parent([selector])Get the first parent of each element in the current set of matched elements, optionally filtered by a selector
.parents([selector])Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector
.closest([selector])For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
.find(selector)Get the descendants of each element in the current set of matched elements, filtered by a selector
.children(selector)Get the children of each element in the set of matched elements, optionally filtered by a selector
.filter(callback)Filter collection of elements
var redLinks = $$('a').filter(function(el, index) {
    return $$(this).hasClass('red');
})
.remove()Remove/detach matched elements from the Dom
.empty()Remove all child nodes of the set of matched elements from the DOM. Alias for .html('')
Shortcuts
.click()Trigger "click" event on collection
.click(handler)Add "click" event handler to collection
.blur()Trigger "blur" event on collection
.blur(handler)Add "blur" event handler to collection
.focus()Trigger "focus" event on collection
.focus(handler)Add "focus" event handler to collection
.focusin()Trigger "focusin" event on collection
.focusin(handler)Add "focusin" event handler to collection
.focusout()Trigger "focusout" event on collection
.focusout(handler)Add "focusout" event handler to collection
.keyup()Trigger "keyup" event on collection
.keyup(handler)Add "keyup" event handler to collection
.keydown()Trigger "keydown" event on collection
.keydown(handler)Add "keydown" event handler to collection
.keypress()Trigger "keypress" event on collection
.keypress(handler)Add "keypress" event handler to collection
.submit()Trigger "submit" event on collection
.submit(handler)Add "submit" event handler to collection
.change()Trigger "change" event on collection
.change(handler)Add "change" event handler to collection
.mousedown()Trigger "mousedown" event on collection
.mousedown(handler)Add "mousedown" event handler to collection
.mousemove()Trigger "mousemove" event on collection
.mousemove(handler)Add "mousemove" event handler to collection
.mouseup()Trigger "mouseup" event on collection
.mouseup(handler)Add "mouseup" event handler to collection
.mouseenter()Trigger "mouseenter" event on collection
.mouseenter(handler)Add "mouseenter" event handler to collection
.mouseleave()Trigger "mouseleave" event on collection
.mouseleave(handler)Add "mouseleave" event handler to collection
.mouseout()Trigger "mouseout" event on collection
.mouseout(handler)Add "mouseout" event handler to collection
.mouseover()Trigger "mouseover" event on collection
.mouseover(handler)Add "mouseover" event handler to collection
.touchstart()Trigger "touchstart" event on collection
.touchstart(handler)Add "touchstart" event handler to collection
.touchend()Trigger "touchend" event on collection
.touchend(handler)Add "touchend" event handler to collection
.touchmove()Trigger "touchmove" event on collection
.touchmove(handler)Add "touchmove" event handler to collection
.resize(handler)Add "resize" event handler to collection
.scroll(handler)Add "scroll" event handler to collection

Animation

.animate(properties, parameters)- Perform a custom animation of a set of CSS properties

  • properties - object - CSS properties to animate
  • parameters - object - animation parameters

returns Dom7 collection

$$('#animate-me').animate(
    /* CSS properties to animate, e.g.: */
    {
        'margin-left': 100,
        'width': 200,
        'height': 300,
        'opacity': 0.5
    },
    /* Animation parameters */
    {
        // Animation duration in ms, optional (default to 300)
        duration: 300,
        // Animation easing, optional (default to 'swing'), can be also 'linear'
        easing: 'swing',
        /* Callbacks */
        // Animation begins, optional
        begin: function (elements) {
            console.log('animation began');
        },
        // Animation completed, optional
        complete: function (elements) {
            console.log('animation completed');
        },
        // Animation in progress, optional
        progress: function (elements, complete, remaining, start) {
            /* Where
            complete - The call's completion percentage (as a decimal value)
            remaining - How much time remains until the call completes (in ms)
            start - The absolute time at which the call began (in ms)
            */
            console.log('animation in progress');
        }
    }
);

It also supports chaining que:

$$('#animate-me')
    .animate(
        {
            'margin-left': 100,
            'width': 200,
            'height': 300,
            'opacity': 0.5
        }
    )
    .animate(
        {
            'width': 50,
            'height': 50
        }
    );