In-depth analysis of the similarities and differences between JQuery and JavaScript_jquery

ps: LZ thinks this title is a bit too big and beyond my capabilities. If you don’t like it, don’t touch it. At present, only those within the scope of LZ's capabilities are recorded, and will be supplemented in the future.

1. Mutual conversion between JQuery objects and DOM objects ("Sharp JQuery")

JQuery converted to DOM:

1. var jq = $(‘#selector’); var dom = jq[index];

2. var jq1 = $(‘#selector1’); var dom1 = jq1.get(index) or var dom1 = jq1.get()[index];

Convert DOM to JQuery:

Assume cr is a DOM object, converted to JQuery, jqcr = $(‘cr’);

2. The difference between JQuery’s $(document).ready() and JavaScript’s window.onload() ("Sharp JQuery")

1. Execution timing

                                                                                                                                               window.onload must wait for all resources (including pictures) in the web page to be loaded before it can be executed, while $(document).ready() is executed after all DOM structures are drawn, but the resources that may be associated with the DOM are still there. Not loaded yet.

2. Number of entries

In a document, there is only one window.onload, but $(document).ready() can have multiple

3. Simplified method

There is no abbreviation for window.onload. $(document).ready() can be abbreviated as $(function(){}).

3. The difference between accessing attribute names in JQuery and JavaScript ("JQuery in Action")

JQuery specification name DOM specification
cellspacing cellSpacing
class className
colspan colSpan
cssFloat in IE is styleFloat, other browsers are cssFloat
float in IE is styleFloat, other browsers are cssFloat
for htmlFor
frameBorder
maxLength maxLength
readonly readOnly
rowspan rowSpan
                                                                                                                                                                                                                                                                        tabindex tabIndex
usemap useMap

4. Conflict

Theoretically there will be no conflicts in DOM. JQuery has two solutions to prevent conflicts: ("Sharp JQuery")

1. The JQuery library is imported after other libraries

Call JQuery. The noConflict() method gives $ control to other libraries or customized shortcuts, $j = JQuery.noConflict();

2. Import the JQuery library before other libraries

Use JQuery directly instead of $ to work, and $ can be used as a shortcut to other libraries.