5 questions — Basic to Advanced · Click to expand · + for code & details
jQuery is a fast, small JavaScript library that simplifies HTML DOM traversal, manipulation, event handling, animation, and AJAX.
It solves cross-browser compatibility issues (jQuery handles differences between Chrome, Firefox, IE) and reduces verbose vanilla JavaScript into concise, chainable code. jQuery uses the $ shorthand.
Oracle APEX ships with jQuery built-in and extensively uses it for UI components, Dynamic Actions, and the apex.jQuery namespace to avoid conflicts with other libraries.
// Vanilla JS vs jQuery comparison
// Find and style element
// Vanilla:
document.querySelectorAll('.card').forEach(el => {
el.style.display = 'none';
});
// jQuery:
$('.card').hide();
// Add event listener
// Vanilla:
document.getElementById('btn').addEventListener('click', handleClick);
// jQuery:
$('#btn').on('click', handleClick);
// AJAX call
// Vanilla: many lines of fetch...
// jQuery:
$.ajax({
url: '/api/data',
method: 'GET',
success: data => console.log(data),
error: xhr => console.error(xhr)
});
// In APEX: use apex.jQuery to avoid conflicts
var $ = apex.jQuery;
$('#P1_DEPT').val('10').trigger('change');| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
jQuery is a fast, small JavaScript library that simplifies HTML DOM traversal, manipulation, event handling, animation, and AJAX.
jQuery selectors follow CSS selector syntax to find DOM elements and return a jQuery object (collection).
They support all CSS selectors plus jQuery-specific selectors like :eq(), :first, :last, :even, :odd, :visible, :hidden, :has(), and :contains().
The resulting jQuery object supports method chaining. jQuery selectors are wrapped in $() and search the entire document by default, or within a context element for better performance.
// Basic selectors
$('#empId') // by ID
$('.card') // by class
$('table') // by element
$('input[type=text]')// by attribute
$('.card.active') // combined classes
// jQuery-specific selectors
$('tr:even') // even rows (zebra)
$('tr:odd') // odd rows
$('li:first') // first list item
$('li:last') // last list item
$('li:eq(2)') // third item (0-indexed)
$(':visible') // only visible elements
$(':hidden') // only hidden elements
$(':contains("Alice")') // elements containing text
// Context selector (faster - search within)
$('#emp-table').find('td.salary')
// Chaining
$('.card')
.addClass('highlighted')
.css('border', '2px solid #2d6446')
.fadeIn(300);
// APEX item selectors
$('#P1_DEPT_ID') // APEX item by ID
$('[id^="P1_"]') // all page 1 items| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
jQuery selectors follow CSS selector syntax to find DOM elements and return a jQuery object (collection).
jQuery provides $.ajax() (full-featured), $.get() and $.post() (shorthand), and $.getJSON() for AJAX calls.
All return jQuery Deferred objects (Promise-like). $.ajax() supports all HTTP methods, headers, data types, timeouts, and error handling.
In APEX, prefer apex.server.process() and apex.server.pluginUrl() over raw jQuery AJAX as they automatically include the APEX session token, handle errors in APEX style, and integrate with APEX's spinner and loading indicators.
// $.ajax: full control
$.ajax({
url: '/ords/hr/employees/101',
method: 'GET',
dataType: 'json',
timeout: 5000,
beforeSend: xhr => xhr.setRequestHeader('Authorization','Bearer '+token),
success: data => { $('#P1_NAME').val(data.employee_name); },
error: (xhr, status, err) => console.error(status, err),
complete: () => apex.util.showSpinner(false)
});
// Shorthand
$.get('/api/employees', { dept: 10 }, data => console.log(data));
$.post('/api/employees', { name: 'Alice', salary: 50000 });
$.getJSON('/api/depts', data => console.log(data.length + ' depts'));
// APEX server process (recommended in APEX)
apex.server.process('LOAD_EMP', {
pageItems: '#P1_EMP_ID' // sends item values
}, {
success: data => {
apex.item('P1_NAME').setValue(data.name);
apex.item('P1_SALARY').setValue(data.salary);
}
});| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
jQuery provides $.
jQuery event methods bind and manage DOM events.
The primary method is .on() which attaches event handlers to elements and supports event delegation (handling events on future/dynamic elements). .off() removes handlers. .trigger() programmatically fires events. .one() fires a handler only once.
Event delegation with .on() is essential for APEX dynamic content where regions get refreshed — binding directly would lose handlers on refresh.
// Basic event binding
$('#save-btn').on('click', function(e) {
e.preventDefault(); // stop default action
const empId = $(this).data('emp-id');
console.log('Saving emp:', empId);
});
// Multiple events at once
$('#salary-field').on('focus blur keyup', function(e) {
if (e.type === 'keyup') validateSalary($(this).val());
});
// Event delegation (handles dynamic elements)
// Use on parent that exists at page load
$('#emp-table').on('click', '.delete-btn', function() {
const row = $(this).closest('tr');
const id = $(this).data('emp-id');
confirmAndDelete(id, row);
});
// Works even for rows added after page load!
// Trigger events programmatically
$('#P1_DEPT').trigger('change'); // fire change event
$('#P1_DEPT').triggerHandler('change'); // fire without bubbling
// One-time handler
$('#modal').one('click', '.confirm', () => processApproval());
// Remove handler
$('#btn').off('click');| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
jQuery event methods bind and manage DOM events.
$(document).ready() fires when the HTML DOM is fully parsed and ready to be manipulated — images and external resources may still be loading.
This is the right place to initialize jQuery code. window.onload fires when the entire page including all images, stylesheets, and iframes have finished loading — much later.
In modern JavaScript, DOMContentLoaded is the native equivalent of $(document).ready().
In APEX, use apex.jQuery(document).ready() or the APEX JavaScript initialization event instead.
// jQuery ready (DOM parsed, images may still load)
$(document).ready(function() {
console.log('DOM ready - safe to use jQuery');
$('#emp-table').DataTable(); // initialize plugins
});
// Shorthand (same thing)
$(function() {
console.log('DOM ready (shorthand)');
});
// window.onload (everything loaded)
window.onload = function() {
console.log('All resources loaded (images etc)');
measurePageLayout(); // images are loaded, dimensions correct
};
// Native equivalent
document.addEventListener('DOMContentLoaded', function() {
console.log('Native DOMContentLoaded');
});
// APEX equivalent
apex.jQuery(document).ready(function() {
console.log('APEX-safe ready');
});
// Or use APEX Execute JavaScript Code Dynamic Action
// which automatically runs after page loads| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
$(document).