Getting Started
YakaJS API Reference
Complete API reference for all YakaJS methods and features
YakaJS API Reference
Complete reference guide for all YakaJS methods, utilities, and features.
Core Selector
_(selector, context)
The main YakaJS function for selecting and manipulating DOM elements.
_('#myId') // Select by ID_('.myClass') // Select by class_('div') // Select by tag_('<div>Hello</div>') // Create elements_(document.ready) // DOM ready callbackParameters:
selector(String|Element|Array|Function): The selector or element(s) to wrapcontext(Element, optional): Context element to search within
Returns: YakaJS object for chaining
DOM Manipulation
.text(value)
Get or set the text content of elements.
_('#element').text() // Get text_('#element').text('New text') // Set text.html(value, sanitize)
Get or set the HTML content of elements.
_('#element').html() // Get HTML_('#element').html('<p>New HTML</p>') // Set HTML_('#element').html(userInput, true) // Set with XSS protection.attr(name, value)
Get or set attributes.
_('#link').attr('href') // Get attribute_('#link').attr('href', 'https://...') // Set attribute_('#img').attr({src: 'img.jpg', alt: 'Image'}) // Set multiple.val(value)
Get or set form element values.
_('#input').val() // Get value_('#input').val('text') // Set value.addClass(className)
Add one or more classes.
_('#element').addClass('active')_('#element').addClass('active highlight').removeClass(className)
Remove one or more classes.
_('#element').removeClass('active')_('#element').removeClass('active highlight').toggleClass(className)
Toggle one or more classes.
_('#element').toggleClass('active').hasClass(className)
Check if element has a class.
if (_('#element').hasClass('active')) { // Element has the class}CSS Manipulation
.css(property, value)
Get or set CSS properties.
_('#element').css('color') // Get property_('#element').css('color', 'red') // Set property_('#element').css({color: 'red', fontSize: '20px'}) // Set multiple.show()
Show hidden elements.
_('#element').show().hide()
Hide elements.
_('#element').hide().toggle()
Toggle element visibility.
_('#element').toggle()Event Handling
.on(event, selector, handler)
Attach event handlers.
// Simple event_('#button').on('click', () => console.log('Clicked!'))// Multiple events_('#input').on('focus blur', (e) => console.log(e.type))// Event delegation_('#list').on('click', 'li', (e) => console.log('Item clicked'))// Multiple handlers_('#element').on({ click: () => console.log('Click'), hover: () => console.log('Hover')}).off(event, handler)
Remove event handlers.
_('#button').off('click') // Remove all click handlers_('#button').off('click', myHandler) // Remove specific handler.one(event, handler)
Attach event handler that runs only once.
_('#button').one('click', () => console.log('Clicked once!')).trigger(event, data)
Trigger an event.
_('#button').trigger('click')_('#input').trigger('change', {value: 'new'})Animations
Fade Effects
_('#element').fadeIn(duration, callback)_('#element').fadeOut(duration, callback)_('#element').fadeToggle(duration)Slide Effects
_('#element').slideDown(duration)_('#element').slideUp(duration)_('#element').slideToggle(duration)_('#element').slideLeft(duration)_('#element').slideRight(duration)Fun Effects
_('#element').bounce(duration)_('#element').shake(duration)_('#element').swing(duration)_('#element').pulse(duration)_('#element').rubberBand(duration)_('#element').wobble(duration)_('#element').flash(duration)_('#element').jello(duration)_('#element').heartBeat(duration)3D Effects
_('#element').flip3D(direction)_('#element').rotateIn(duration)_('#element').rotateOut(duration)Traversal
.find(selector)
Find descendants matching selector.
_('#container').find('.item').parent()
Get immediate parent.
_('#element').parent().parents(selector)
Get all ancestors, optionally filtered.
_('#element').parents('.container').children(selector)
Get immediate children.
_('#list').children('li').siblings(selector)
Get siblings.
_('#item').siblings('.active').next()
Get next sibling.
_('#item').next().prev()
Get previous sibling.
_('#item').prev().first()
Get first element.
_('li').first().last()
Get last element.
_('li').last().eq(index)
Get element at index.
_('li').eq(2) // Third item (0-indexed)AJAX
_.get(url, data, success, error)
Make GET request.
_.get('/api/users', (data) => { console.log('Users:', data);});// With error handling_.get('/api/users', null, (data) => console.log('Success:', data), (error) => console.error('Error:', error));_.post(url, data, success, error)
Make POST request (automatically includes CSRF token if set).
_.post('/api/users', {name: 'John'}, (response) => { console.log('Created:', response);});_.ajax(options)
Make custom AJAX request.
_.ajax({ url: '/api/data', method: 'PUT', data: {key: 'value'}, headers: {'X-Custom': 'header'}, timeout: 5000, retry: 3, success: (data) => console.log(data), error: (error) => console.error(error), progress: (percent) => console.log('Progress:', percent)});Voice Commands
_.voice.listen(commands, options)
Enable voice command recognition.
_.voice.listen({ 'click button': () => _('#myButton').click(), 'show menu': () => _('#menu').show(), 'scroll down': () => window.scrollBy(0, 100), 'change color': () => _('#title').css('color', 'blue')}, { language: 'en-US', continuous: true});_.voice.stop()
Stop voice recognition.
_.voice.stop();State Management
_.createStore(options)
Create a Vuex-style store.
const store = _.createStore({ state: { count: 0, user: null }, mutations: { increment(state) { state.count++; }, setUser(state, user) { state.user = user; } }, actions: { async fetchUser({ commit }) { const user = await fetch('/api/user').then(r => r.json()); commit('setUser', user); } }, getters: { doubleCount(state) { return state.count * 2; } }});// Use the storestore.commit('increment');store.dispatch('fetchUser');console.log(store.state.count);console.log(store.getters.doubleCount);// Undo/redostore.undo();store.redo();Reactivity
_.signal(value)
Create a reactive signal.
const count = _.signal(0);// Get valueconsole.log(count()); // 0// Set valuecount.set(5);// Update valuecount.update(n => n + 1);_.computed(fn)
Create computed value.
const count = _.signal(10);const doubled = _.computed(() => count() * 2);console.log(doubled()); // 20count.set(5);console.log(doubled()); // 10_.effect(fn)
Create side effect that runs when dependencies change.
const name = _.signal('John');_.effect(() => { console.log('Name changed:', name());});name.set('Jane'); // Logs: "Name changed: Jane"Routing
_.createRouter()
Create SPA router.
const router = _.createRouter();// Add routesrouter.addRoute('/', { component: () => '<h1>Home</h1>'});router.addRoute('/user/:id', { component: (params) => `<h1>User ${params.id}</h1>`, beforeEnter: async () => { const isAuth = await checkAuth(); return isAuth; // Return false to prevent navigation }});// Navigaterouter.navigateTo('/user/42');router.back();router.forward();// Initializerouter.init();Security
_.security.sanitizeHtml(html)
Sanitize HTML to prevent XSS.
const safe = _.security.sanitizeHtml('<script>alert("xss")</script>');_.security.escapeHtml(text)
Escape HTML entities.
const escaped = _.security.escapeHtml('<div>Text</div>');// Result: "<div>Text</div>"_.csrf.setToken(token)
Set CSRF token for AJAX requests.
_.csrf.setToken('your-csrf-token');// Now all POST/PUT/DELETE requests include the tokenPremium Features
_.commandPalette(commands)
Create VS Code-style command palette (Ctrl+K).
_.commandPalette([ { title: 'Open Settings', action: () => openSettings() }, { title: 'Toggle Dark Mode', action: () => document.body.classList.toggle('dark') }]);_.virtualScroll(container, items, options)
Render large lists efficiently.
const items = Array.from({length: 10000}, (_, i) => ({ id: i, name: `Item ${i}`}));_.virtualScroll('#container', items, { itemHeight: 50, renderItem: (item) => `<div>${item.name}</div>`});_.onboardingTour(steps)
Create guided tour.
_.onboardingTour([ { element: '#welcome', title: 'Welcome!', content: 'This is your dashboard' }, { element: '#menu', title: 'Navigation', content: 'Use this menu to navigate' }]);Utility Methods
.each(callback)
Iterate over elements.
_('li').each((index, element) => { console.log(index, element);});.filter(selector)
Filter elements.
_('li').filter('.active')_('li').filter((index, elem) => elem.textContent.includes('search')).safe()
Enable safe mode (prevents errors on null elements).
_('#maybe-exists').safe().hide().fadeIn();// Won't throw errors if element doesn't existChaining
All methods return the YakaJS object, allowing for method chaining:
_('#element') .addClass('active') .css('color', 'red') .fadeIn(500) .bounce() .on('click', () => console.log('Clicked!'));For more examples and tutorials, check out our Getting Started Guide.