Comparison between original js Code and jquery

Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript, we cocould add the highlightedclass as shown in the following code snippet:
Copy codeThe Code is as follows:
Window. onload = function (){
Var divs = document. getElementsByTagName ('div ');
For (var I = 0; I <divs. length; I ++ ){
If (hasClass (divs [I], 'poem-stanza ')&&! HasClass (divs [I], 'highlight ')){
Divs [I]. className + = 'highlight ';

}
}
Function hasClass (elem, cls ){
Var reClass = new RegExp (''+ cls + '');
Return reClass. test (''+ elem. className + '');
}
};

In our own processing, even such simple tasks become complicated without using jquery. With the original js, we can use the following code snippet to add the highlighted class:

Despite its length, this solution does not handle values of the situations that jQuery takes care of for us in Listing 1.2, such as the following:
• Properly respecting other window. onloadevent handlers
• Acting as soon as the DOM is ready
• Optimizing element retrieval and other tasks with modern DOM methods
Although it is very long, this solution still does not deal with many things jquery has done for us in list 1.2, such as the following:
1. Suitable for handling other window. load events
2. Start the action when the DOM structure is ready.
3. Optimize element search and other tasks using modern DOM methods.

We can see that our jQuery-driven code is easier to write, simpler to read, and faster to execute than its plain JavaScript equivalent.

We can clearly see that the query code is easier to write than the native js Code, easier to read, and faster to run.