jQuery Top 20 Functions - JavaScript

jQuery is a popular JavaScript library that simplifies HTML document traversal, manipulation, event handling, and animation. In this article, we will introduce the top 20 jQuery functions that every JavaScript developer should know.

1. $(document).ready()

The $(document).ready() function is used to execute a function when the DOM is fully loaded. It is a commonly used function as it ensures that the JavaScript code is executed after the HTML page has finished loading.

$(document).ready(function() {
  // code to be executed
});

2. $(this)

The $(this) function is used to reference the current HTML element in a jQuery event handler. It is commonly used in event handling functions such as click, mouseover, and mouseout.

$('button').on('click', function() {
  $(this).addClass('active');
});

3. $(selector)

The $(selector) function is used to select HTML elements based on their CSS selectors. It is the core function of jQuery and is used to access, manipulate and modify HTML elements.

$('button').addClass('active');

4. $(selector, context)

The $(selector, context) function is used to select HTML elements within a specified context. The context can be any valid CSS selector or a DOM element.

$('.item', '#list').addClass('active');

5. $(selector).html()

The $(selector).html() function is used to get or set the HTML content of an element.

$('div').html(); // returns the HTML content of the first div element
$('div').html('<p>Hello World!</p>'); // sets the HTML content of all div elements

6. $(selector).text()

The $(selector).text() function is used to get or set the text content of an element.

$('div').text(); // returns the text content of the first div element
$('div').text('Hello World!'); // sets the text content of all div elements

7. $(selector).css()

The $(selector).css() function is used to get or set CSS properties of an element.

$('div').css('color', 'red'); // sets the color of all div elements to red
$('div').css({'color': 'red', 'font-size': '16px'}); // sets multiple CSS properties of all div elements

8. $(selector).attr()

The $(selector).attr() function is used to get or set HTML attributes of an element.

$('a').attr('href'); // returns the href attribute of the first link
$('a').attr('href', 'http://example.com'); // sets the href attribute of all links

9. $(selector).data()

The $(selector).data() function is used to get or set data attributes of an element.

$('div').data('id'); // returns the id data attribute of the first div element
$('div').data('id', '123'); // sets the id data attribute of all div elements

10. $(selector).addClass()

The $(selector).addClass() function is used to add one or more CSS classes to an element.

$('div').addClass('active'); // adds the active class to all div elements
$('div').addClass('active new'); // adds the active and new classes to all div elements

11. $(selector).removeClass()

The $(selector).removeClass() function is used to remove one or more CSS classes from an element.

$('div').removeClass('active'); // removes the active class from all div elements
$('div').removeClass('active new'); // removes the active and new classes from all div elements

12. $(selector).toggleClass()

The $(selector).toggleClass() function is used to toggle one or more CSS classes of an element.

$('div').toggleClass('active'); // toggles the active class of all div elements
$('div').toggleClass('active new'); // toggles the active and new classes of all div elements

13. $(selector).show()

The $(selector).show() function is used to display an element by setting its display property to its default value.

$('div').show(); // displays all div elements

14. $(selector).hide()

The $(selector).hide() function is used to hide an element by setting its display property to none.

$('div').hide(); // hides all div elements

15. $(selector).fadeIn()

The $(selector).fadeIn() function is used to fade in an element by gradually increasing its opacity.

$('div').fadeIn(); // fades in all div elements

16. $(selector).fadeOut()

The $(selector).fadeOut() function is used to fade out an element by gradually decreasing its opacity.

$('div').fadeOut(); // fades out all div elements

17. $(selector).slideUp()

The $(selector).slideUp() function is used to slide up an element by gradually decreasing its height.

$('div').slideUp(); // slides up all div elements

18. $(selector).slideDown()

The $(selector).slideDown() function is used to slide down an element by gradually increasing its height.

$('div').slideDown(); // slides down all div elements

19. $(selector).click()

The $(selector).click() function is used to attach a click event handler to an element.

$('button').click(function() {
  // code to be executed
});

20. $.ajax()

The $.ajax() function is used to make an asynchronous HTTP request to a server.

$.ajax({
  url: 'http://example.com/data.json',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // code to be executed
  }
});

These are the top 20 jQuery functions that every JavaScript developer should know. They provide a solid foundation to build upon, and mastering them will make your development tasks easier and more efficient.