<img width="100"src="http://image.uc.cn/s/uae/g/01/phy3/images/QJ.jpg?v=0.0.1">
QueryJs is an lightweight(4.8k) batch DOM operations library for Green Browser.
bower install queryjs
Clone
git clone git@github.com:aaron61591/query.js.git
Initialize project:
npm install
Run it:
grunt
Check it:
http://127.0.0.1:4000
Create a query object
$('#test') // query
$('<div class="test">test</div>') // query
Operate innerText
$('#test').text('Hello QueryJs') // query
$('#test').text() // 'Hello QueryJs'
Operate innerHTML
$('#test').html('<p>Hello QueryJs</p>') // query
$('#test').html() // '<p>Hello QueryJs</p>'
Operate value
$('#input-name').value('my name') // query
$('#input-name').value() // 'my name'
Operate style
$('#test').style('width', '100px') // query
$('#test').style('width') // 100px
$('#test').style('width:100px; height:100px') // query
Operate attr
$('#test').attr('id') // test
$('#test').attr('width', '100') // query
Operate class
$('.test').class() // test
$('#test').class('test') // query
Check the element if it has the classes
$('#test').hasClass('class1 class2') // boolean: true or false
Add class to element
$('#test').addClass('class1') // query
Remove class from element
$('#test').removeClass('class1') // query
Show element
$('#test').show() // query
$('#btn-test').show('inline-block') // query
Hide element
$('#test').hide() // query
Add a listener to element
$('#test').on('click', fun1) // query
remove a listener from element
$('#test').off('click', fun1) // query
Append the specified element as a child of father elements
$('#test').append($('<li id="opt2">option2</li>')) // query
Inserts the specified elements before a reference selectors
$('#test').insert($('<li id="opt1">option1</li>', '#opt2')) // query
Remove all children from the specified elements
$('#test').empty() // query
Remove a children from the specified elements
$('#test').remove($('#son')); // query
Remove specified elements from father element
$('#son').remove; // query
Get elements
$('.test').find() // [div.test, div.test, ...]
Get element
$('#test').get() // <div id="test"></div>
Execuse function one times
$('#test').exec(function() {
console.log('hello ');
}) // query
Execused function by every child
$('#test li').each(function(q, i) {
q.text('this is number ' + i);
}) // query
Executes next query function after a specified delay.
$('#test')
.hide()
.delay(1000)
.show() // query
Copyright (c) 2015 Aaron Peng