DOM7 - 自定义的DOM库

Framework7 不需要任何第三方的库，包括DOM操作。她有自己的 DOM7 - 一个集成了大部分常用DOM操作的高性能库。你不需要学习任何新的东西，因为她的用法和大名鼎鼎的jQuery几乎是一样的，包括大部分常用的方法和jquery风格的链式调用。

现在有一个全局的Dom7对象，最好把DOM7存储到一个局部变量中，为了防止和其他库冲突，我们推荐使用 $$ 来代替 $。

//Export DOM7 to local variable to make it easy accessable
var $$ = Dom7;

用法示例

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

可用的方法

下面这些方法几乎都和 jQuery/Zepto 是一样的：

$$(window).trigger('resize');

//Add "intro" class to all paragraphs
$$('p').addClass('intro');

//Add "big" class from all links with "big" class
$$('a.big').removeClass('big');

<p class="intro">Lorem ipsum...</p>

$$('p').hasClass('intro'); //-> true

<!-- 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>                

var isChecked = $$('input').prop('checked');

//Make all checkboxes checked
$$('input[type="checkbox"]').prop('checked', true);

$$('input').prop({
  checked: false,
  disabled: true
})                

<a href="http://google.com">Google</a>

var link = $$('a').attr('href'); //-> http://google.com

//Set all links to google
$$('a').attr('href', 'http://google.com');

$$('a').attr({
  id: 'new-id',
  title: 'Link to Google',
  href: 'http://google.com'
}) 

//Remove "src" attribute from all images
$$('img').removeAttr('src');

<input id="myInput" type="text" value="Lorem ipsum"/>

var inputVal = $$('#myInput').val(); //-> 'Lorem ipsum'

$$('input#myInput').val('New value here');

$$('a').data('user', {
    id: '123',
    name: 'John',
    email: 'john@doe.com'
});  

var user = $$('a').data('user'); 
//-> {id: '123', name: 'John', email: 'john@doe.com'}

<p data-id="123">Lorem ipsum...</p>

var id = $$('p').data('id'); //-> 123

$$('a').removeData('user')

<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'
}
*/

$$('a').transform('rotate(90deg)')

$$('p').transition(300)

$$('a').on('click', function (e) { 
  console.log('clicked'); 
});

$$('input[type="text"]').on('keyup keydown change', function (e) { 
  console.log('input value changed'); 
});

$$(document).on('click', 'a', function (e) { 
  console.log('link clicked'); 
});

$$('a').once('click', function (e) { 
  console.log('clicked'); 
});

$$('input[type="text"]').once('keyup keydown change', function (e) { 
  console.log('input value changed'); 
});

$$(document).once('click', 'a', function (e) { 
  console.log('link clicked'); 
});

function clickHandler(){
    console.log('clicked');
}
// Add event listener
$$('a').on('click', clickHandler);
// Remove event listener
$$('a').off('click', clickHandler);                  

function clickHandler(){
    console.log('clicked');
}
// Add event listener
$$(document).on('click', 'a', clickHandler);
// Remove event listener
$$(document).off('click', 'a', clickHandler);

$$('a').transitionEnd(function(){ /* do something */ })

$$('a').animationEnd(function(){ /* do something */ })

var boxWidth = $$('div#box').width();

var outerWidth = $$('div#box').outerWidth(true);

var boxHeight = $$('div#box').height();

var outerHeight = $$('div#box').outerHeight(true);

var coords = $$('.content').offset(); //-> {top: 100, left: 200}
var top = coords.top; //-> 100
var left = coords.left; //-> 200

//hide all paragraphs
$$('p').hide();

//show all paragraphs
$$('p').show();

$$('.content').css('left'); //-> 200px

$$('.content').css('left', '100px');

$$('a').css({
    left: '100px',
    top: '200px',
    color: 'red',
    width: '300px',
    marginLeft: '17px',
    'padding-right': '20px'
});

var links = $$('a');
var divs = $$('div');
links.add('p').addClass('blue');
links.add(divs).addClass('red');

var redLinks = $$('a').filter(function(index, el) {
    return $$(this).hasClass('red');
})                  

Utilities

Dom7.each

A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties

Dom7.each(object/array, callback) - iterate through object or array

• object/array - object or array - to iterate over. Required.
• callback - function - callback function that will be executed on every object property, or on every array element. Required.

var fruits = ['Apple', 'Orange', 'Pineapple', 'Bannana'];
$$.each(fruits, function (index, value) {
    alert(index + ': ' + element); 
});          
 
//This produces 4 alerts:
0: Apple
1: Orange
2: Pineapple
3: Bannana

var person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
};
$$.each(person, function (key, value) {
    alert(key + ': ' + value);
});
 
//This produces 3 alerts:
firstName: John
lastName: Doe
age: 25          

Dom7.parseUrlQuery

Dom7.parseUrlQuery(url) - parse url query get parameters

• url - string - url with GET parameters. Required.

Method returns object with query parameters

var query = $$.parseUrlQuery('http://google.com/?id=5&foo=bar');
console.log(query); //-> {id: 5, foo: 'bar'}

Dom7.isArray

Dom7.isArray(obj) - Determine whether the argument is an array

• obj - object - Object to test whether or not it is an array

returns a Boolean indicating whether the object is a JavaScript array

var fruits = ['Apple', 'Orange'];
console.log($$.isArray(fruits)); //-> true

Dom7.unique

Dom7.unique(array) - Remove duplicates in passed array

• obj - array - Array to remove duplicates

returns a new unique array

var fruits = ['Apple', 'Orange', 'Apple'];
console.log($$.unique(fruits)); //-> ['Apple', 'Orange'];

Dom7.serializeObject

Dom7.serializeObject(object) - Create a serialized representation of a plain object suitable for use in a URL query string

• object - object - Object to serialize

returns a new unique array

var params = {foo: 'bar', id: 5};
console.log($$.serializeObject(params)); //-> 'foo=bar&id=5'

Dom7.toCamelCase

Dom7.toCamelCase(string) - Convert hypens-case string to camelCase string

• string - string - hypens-case string

returns a new camelCase string

var hypensCaseString = 'hello-my-world';
var camelCaseString = $$.toCamelCase(hypensCaseString);
console.log(camelCaseString); //helloMyWorld

Dom7.dataset

Dom7.dataset(el) - Get element's data set (set of data- attributes) as plain Object

• el - HTMLElement or string (with CSS selector) - element with data- attributes to get dataset from

returns a new plain object with dataset

<div id="my-div" data-loop="true" data-animate-pages="false" data-index="0" data-hello="world">
    ...
</div>

var dataset = $$.dataset('#my-div');
/* 
dataset will create plain object with camelCase keys and with formatted boolean and number types:
{
    loop: true,
    animatePages: false,
    index: 0,
    hello: 'world'
}
*/          

Dom7.requestAnimationFrame

Dom7.requestAnimationFrame(callback) - Cross-browser implementation on requestAnimationFrame

• callback - function - A parameter specifying a function to call when it's time to update your animation for the next repaint

returns animation request id, that uniquely identifies the entry in the callback list

var animId;
function anim() {
  var left = parseInt($$('#anim').css('left'), 10) + 1;
  $$('#anim').css({left: left + 'px'})
  animId = $.requestAnimationFrame(anim);
}
animId = $.requestAnimationFrame(anim);

Dom7.cancelAnimationFrame

Dom7.cancelAnimationFrame(requestID) - Cancels an animation frame request

• requestID - number - The ID value returned by the call to $$.requestAnimationFrame() that requested the callback

$.cancelAnimationFrame(animId);

Ajax

$$.ajax(parameters) - Load data from the server

• parameters - object - Request parameters

returns plain XHR object

Let's look at the list of available parameters

$$.ajax({
  url: 'somepage.html',
  statusCode: {
    404: function (xhr) {
      alert('page not found');
    }
  }
})                  

Ajax Events

Each Ajax request produces global Ajax events on document, so you can always intercept and handle them:

For example:

$$(document).on('ajaxComplete', function (e) {
  var xhr = e.detail.xhr;
  console.log('request performed');
});

Shorthand Methods

Dom7.get

$$.get(url, data, success) - Load data from the server using a HTTP GET request

• url - string - Request url
• data - object - A plain object or string that is sent to the server with the request. Optional
• success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional

returns plain XHR object

$$.get('blog-post.php', {foo:'bar', id:5}, function (data) {
  $$('.articles').html(data);
  console.log('Load was performed');
});

Dom7.post

$$.post(url, data, success) - Load data from the server using a HTTP POST request

• url - string - Request url
• data - object - A plain object or FormData or string that is sent to the server with the request. Optional
• success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional

returns plain XHR object

$$.post('auth.php', {username:'foo', password: 'bar'}, function (data) {
  $$('.login').html(data);
  console.log('Load was performed');
});

Dom7.getJSON

$$.getJSON(url, data, success) - Load JSON-encoded data from the server using a GET HTTP request

• url - string - Request url
• data - object - A plain object or FormData or string that is sent to the server with the request. Optional
• success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional

returns plain XHR object

$$.getJSON('items.json', function (data) {
  console.log(data);
});

Original Request Parameters

Each of Ajax methods returns plain XHR object, which is also available in callbacks. This default XHR object extended with the following properties: