DOM7 - 自定义的DOM库

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

or

<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');
})                  

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