uiQuery

minimal jQuery replacement

View Download
uiQuery designed to replace the minimal functionality of jQuery library. However it has different implementation, and compatible with jQuery only on simple cases. Search by selector using uiQuery gives only the first occurence of the item, but jQuery will give all occurences.
Function name
Description
.hasClass()
Check if element has some class
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { color: red; } .my-element.selected { color: blue; } </style> <div class="my-element selected">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { if ($('.my-element').hasClass('selected')) { $('.my-element').removeClass('selected'); } }); </script> </body> </html>
.addClass()
Add some class to the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element.selected { color: blue; } </style> <div class="my-element">Hello</div> <script> $('.my-element').addClass('selected'); </script> </body> </html>
.removeClass()
Remove class from the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { color: red; } .my-element.selected { color: blue; } </style> <div class="my-element selected">Hello</div> <script> $('.my-element').removeClass('selected'); </script> </body> </html>
.toggleClass()
Add or remove class for the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { color: red; } .my-element.selected { color: blue; } </style> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').toggleClass('selected'); }); </script> </body> </html>
.show()
Show the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { display: none; } </style> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').show(); }); </script> </body> </html>
.hide()
Hide the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').hide(); }); </script> </body> </html>
.toggle()
Show or hide the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').toggle(); }); </script> </body> </html>
.css()
Get or set element CSS property
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <script> $('.my-element').css({ 'color': 'blue', 'text-decoration': 'underline' }); console.log($('.my-element').css('color')); </script> </body> </html>
.attr()
Get or set lement attribute
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <input class="my-element" value="Hello"/> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').attr('disabled', '1'); console.log($('.my-element').attr('disabled')); }); </script> </body> </html>
.removeAttr()
Remove element attribute
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <input class="my-element" value="Hello" disabled/> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').removeAttr('disabled'); }); </script> </body> </html>
.data()
Set some data for the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element"></div> <button class="my-button">Click me</button> <script> $('.my-element').data('myVariable', { 'apples': 5, 'bananas': 2 }); console.log($('.my-element').data('myVariable')); </script> </body> </html>
.removeData()
Remove some data from the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element"></div> <button class="my-button">Click me</button> <script> $('.my-element').data('myVariable', { 'apples': 5, 'bananas': 2 }); console.log($('.my-element').data('myVariable')); $('.my-element').removeData('myVariable'); console.log($('.my-element').data('myVariable')); </script> </body> </html>
.empty()
Empty element contents
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').empty(); }); </script> </body> </html>
.html()
Get or set the element HTML content
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element"></div> <script> $('.my-element').html('<span style="color: red">Hello<span>'); </script> </body> </html>
.text()
Get or set the element text
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element"></div> <script> $('.my-element').text('Hello'); </script> </body> </html>
.remove()
Remove an element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').remove(); }); </script> </body> </html>
.detach()
Detach the element from the document tree (without removing the element)
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $(document.body).append($('.my-element').detach()); }); </script> </body> </html>
.append()
Append content to the end of current element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $(document.body).append($('.my-element').detach()); }); </script> </body> </html>
.prepend()
Append content to the beginning of current element
.appendTo()
Append current element to the end of another element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').detach().appendTo(document.body); }); </script> </body> </html>
.insertBefore()
Insert another element before current element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { var div = $('<div>Hello<div>'); div.insertBefore('.my-button'); }); </script> </body> </html>
.insertAfter()
Insert another element after current element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { var div = $('<div>Hello<div>'); div.insertAfter('.my-button'); }); </script> </body> </html>
.offset()
Get element offset by X and Y coordinate from top left corner of the document
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <script> console.log($('.my-element').offset()); </script> </body> </html>
.width()
Get element width
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { display: inline-block; } </style> <div class="my-element">Hello</div> <script> console.log($('.my-element').width()); </script> </body> </html>
.innerWidth()
Get element width
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { display: inline-block; } </style> <div class="my-element">Hello</div> <script> console.log($('.my-element').innerWidth()); </script> </body> </html>
.outerWidth()
Get element width
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { display: inline-block; } </style> <div class="my-element">Hello</div> <script> console.log($('.my-element').outerWidth()); </script> </body> </html>
.height()
Get element height
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <script> console.log($('.my-element').height()); </script> </body> </html>
.innerHeight()
Get element height
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <script> console.log($('.my-element').innerHeight()); </script> </body> </html>
.outerHeight()
Get element height
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <script> console.log($('.my-element').outerHeight()); </script> </body> </html>
.scrollLeft()
Get element scroll left position
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { width: 9999px; } </style> <div class="my-element">Scroll the page horizontally</div> <script> setInterval(function() { console.log($(window).scrollLeft()); }, 100); </script> </body> </html>
.scrollTop()
Get element scroll top position
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { height: 9999px; } </style> <div class="my-element">Scroll the page vertically</div> <script> setInterval(function() { console.log($(window).scrollTop()); }, 100); </script> </body> </html>
.on()
Bind event to element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <button class="my-button">Click me</button> <script> $('.my-button').on('click', function() { console.log('clicked'); }); $('.my-button').on('mousemove', function(event) { console.log('mouse moved at: ', event.pageX, event.pageY); }); </script> </body> </html>
.off()
Undind event from element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <button class="my-button">Click me</button> <script> $('.my-button').on('click', function() { console.log('clicked'); }); $('.my-button').off('click'); </script> </body> </html>
.find()
Find child element by selector
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello<div> <script> $(document).find('.my-element').css({ 'color': 'blue' }); </script> </body> </html>
.findAll()
Find all child elements by selector
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello1</div> <div class="my-element">Hello2</div> <script> $(document).findAll('.my-element').each(function() { $(this).css({ 'color': 'blue' }); }); </script> </body> </html>
.closest()
Find closest parent element with selector
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-container, .my-element { border: 1px solid #dadada; padding: 8px; } </style> <div class="my-container"> <div class="my-element">Hello<div> </div> <script> $('.my-element').closest('.my-container').css({ 'background': 'yellow' }); </script> </body> </html>
.is()
Check if element matched selector
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element my-class">Hello<div> <script> console.log($('.my-element').is('.my-class')); </script> </body> </html>
.clone()
Clone the element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello<div> <script> $('.my-element').clone().insertBefore('.my-element'); </script> </body> </html>
.trigger()
Trigger event
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <button class="my-button">Click me</button> <script> $('.my-button').on('click', function() { console.log('clicked'); }); setInterval(function() { $('.my-button').trigger('click'); }, 500); </script> </body> </html>
.click()
Handle or trigget 'click' event
.resize()
Handle or trigget 'resize' event
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <script> $(window).resize(function() { console.log('window resized'); }); </script> </body> </html>
.each()
Iterate through all items using callback function
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello1</div> <div class="my-element">Hello2</div> <script> $(document).findAll('.my-element').each(function() { $(this).css({ 'color': 'blue' }); }); </script> </body> </html>
.eq()
Get element by index in elements list
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello1</div> <div class="my-element">Hello2</div> <script> $(document).findAll('.my-element').eq(1).css({ 'color': 'blue' }); </script> </body> </html>
.children()
Get all child elements
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello1</div> <div class="my-element">Hello2</div> <script> $(document.body).children().each(function() { $(this).css({ 'color': 'blue' }); }); </script> </body> </html>
.filter()
Filter alament list by the function callback
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element my-element-1">Hello1</div> <div class="my-element my-element-2">Hello2</div> <div class="my-element my-element-3">Hello3</div> <script> $(document).findAll('.my-element').filter(function() { console.log(this); if ($(this).hasClass('my-element-2')) return false; return true; }).each(function() { $(this).css({ 'color': 'blue' }); }); </script> </body> </html>
.focus()
Focus current element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <input class="my-element" value="Hello"/> <button class="my-button">Click me</button> <script> $('.my-button').click(function() { $('.my-element').focus(); }); </script> </body> </html>
.animate()
Perfrom the animaton
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { position: absolute; left: 0; top: 0; } </style> <div class="my-element">Hello</div> <script> $('.my-element').animate({ 'left': '500px', 'top': '500px' }, 500, 'linear', function() { console.log('Animation completed'); }); </script> </body> </html>
.stop()
Stop the animation
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { position: absolute; left: 50px; top: 50px; } </style> <div class="my-element">Hello</div> <button class="my-button">Stop</div> <script> $('.my-element').animate({ 'left': '500px', 'top': '500px' }, 1000, 'linear', function() { console.log('Animation completed'); }); $('.my-button').click(function() { $('.my-element').stop(); }); </script> </body> </html>
.fadeIn()
Displaying element with fade effect
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { display: none; } </style> <div class="my-element">Hello</div> <script> $('.my-element').fadeIn(1000); </script> </body> </html>
.fadeOut()
Hiding element with fade effect
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <script> $('.my-element').fadeOut(1000); </script> </body> </html>
.fadeTo()
Changing element opacity with animation
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <script> $('.my-element').fadeTo(500, 0.5); </script> </body> </html>
.slideDown()
Displaying element with slide effect
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-element { display: none; } </style> <div class="my-element">Hello</div> <script> $('.my-element').slideDown(1000); </script> </body> </html>
.slideUp()
Hiding element with slide effect
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-element">Hello</div> <script> $('.my-element').slideUp(1000); </script> </body> </html>
.index()
Obtaining element index pagent element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-container"> <div class="my-element-1"></div> <div class="my-element-2"></div> </div> <script> console.log($('.my-element-1').index()); console.log($('.my-element-2').index()); </script> </body> </html>
.prev()
Obtaing elenent before current element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-container"> <div class="my-element-1"></div> <div class="my-element-2"></div> </div> <script> console.log($('.my-element-2').prev().attr('class')); </script> </body> </html>
.next()
Obtaing elenent after current element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <div class="my-container"> <div class="my-element-1"></div> <div class="my-element-2"></div> </div> <script> console.log($('.my-element-1').next().attr('class')); </script> </body> </html>
.parent()
Obtaing parent element
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <style> .my-container, .my-element { border: 1px solid #dadada; padding: 8px; } </style> <div class="my-container"> <div class="my-element">Hello<div> </div> <script> $('.my-element').parent().css({ 'background': 'yellow' }); </script> </body> </html>
.val()
Get or set the element value
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <input class="my-element"/> <button class="my-button">Click me</button> <script> $('.my-element').val('Hello'); </script> </body> </html>
.post()
Perform HTTP 'post' request
Code example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ui-query.x10.name/ui-query.js"></script> </head> <body> <script> $.post('https://ui-query.x10.name/', { 'boys': 123, 'girls': 124 }, function(response) { console.log(response); }); </script> </body> </html>
Author: Alex Zhyrytovskyi, 2021-2022