microQuery.js Examples

1. DOM Ready + Class Toggle

$(() => {
         $('.btn').on('click', () => {
         $('.btn').toggleClass('highlight');
      });
        });

2. .text()

Initial text

 $('#changeText').on('click', () => {
        $('#textOutput').text('Text updated using .text()');
      });

3. .val() + .text()

 $('#showName').on('click', () => {
        const name = $('#nameInput').val();
        $('#nameResult').text('Hello, ' + name + '!');
      });

4. .attr() + .prop() + .css()

Link Check me

  $('#changeStuff').on('click', () => {
        $('#myLink').attr('href', 'https://myappz.com').text('Visit MyAppz');
        const checked = $('#myCheck').prop('checked');
        $('#box').css('backgroundColor', checked ? '#28a745' : '#f8d7da');
      });

5. $.ajax()

     $('#loadData').on('click', () => {
        $.ajax({
          url: 'https://jsonplaceholder.typicode.com/todos/1',
          success: data => {
            $('#output').text(JSON.stringify(data, null, 2));
          }
        });
      });

6. .on() with event delegation

   let counter = 3;
      // Delegated click handler for .item buttons inside #list
      $('#list').on('click', '.item', function (e) {
        alert(`Clicked: ${this.textContent}`);
      });

      // Dynamically add a new item
      $('#add').on('click', function () {
        const newBtn = document.createElement('button');
        newBtn.className = 'item';
        newBtn.textContent = `Item ${counter++}`;
        $('#list')[0].appendChild(newBtn);
      });