All about jQuery – common methods! (P.1)

Tram Ho

I would like to introduce to you the entire collection of the most commonly used, most detailed jQuery

A little bit about its concept:

  • jQuery is a javascript library.
  • jQuery simplifies the code for javascript programming.
  • The current version of this article is 3.5.0, released April 10, 2020

$ (document) .ready ()

  • Often you can see every jQuery code is in there? So why is it in here?
    • Normally our jQuery code will start executing if the js file has finished loading, but if it has finished loading but the DOM hasn’t finished loading then it won’t run.
    • So when your jQuery code is in this function, it prevents the code from being executed before the DOM has not fully loaded.

Use :


  • The selector in jQuery is similar to the CSS:

Also there are many Selector you can mosaic at:


  • So when we want to catch the event, how to do it?
  • There are many jQuery events defined, I just listed the most commonly used:

.click (), dblclick ()

.mouseenter (), mouseleave (), mousedown (), mouseup ()

.trigger (), .toggle ()

  • The next 2 events I use very often:
  • trigger ()

  • toggle ()

  • There are many other events, I just mentioned a few things I often meet and use


  • .hide (), show (), remove (), slideDown (), slideUp (), slideToggle ()

  • fadeIn (), fadeOut (), fadeToggle (), fadeTo (): These functions are similar to the usage of the above functions, but its effect is used to hide / show in a blurry way.

Interact with the DOM

  • text () -> Set or return the element’s string
  • html () – Set or return the string of the element (including the HTML tag)
  • val () – Set or return the value of the form’s tags

  • append () – Insert text (possibly with an HTML tag) at the end of the selected element
  • prepend () – Insert text (possibly with HTML tags) at the beginning of the selected element
  • after () – Insert text (possibly with an HTML tag) after the selected element
  • before () – Insert text (possibly with HTML tags) before the selected element

  • remove (), empty ()

  • addClass () – Add the class to the element
  • removeClass () – Removes the class from the element
  • css () – Set or return the style of that element

  • index (), clone ()

Commonly used special cases:

  • Have you ever been in the case of using append or appendTo (or related html tag functions) into the DOM and then capturing the event it didn’t:

  • That’s because when you use $ (document) .ready (), it will read the DOM that has been loaded from the beginning, and the later you will append later, the DOM does not understand whether the guy has loaded yet, or either force the DOM to reload or otherwise

Get the props for an element:

Other tips that I have accumulated and referenced in the course of my life

There are many other jQuery functions that I would like to save P.2 for this series, please look forward to it. In P.2 I will introduce more about the options of functions, its callbacks and customizing, the functions lq to ajax, get, post .. I end here, thank you for reading, everything as well as his research and reference at jQuery, if there are errors please comment.

Share the news now

Source : Viblo