Dig into the similarities and differences between JQuery and JavaScript

  • 2020-03-30 04:10:52
  • OfStack

Ps :LZ think this title is a little too big, beyond the scope of ability, do not like to touch. At present, only those within the LZ capacity are recorded and will be continuously replenished in the future.

1. Mutual transformation between JQuery objects and DOM objects (" sharp JQuery ")

            JQuery to DOM:

                  Var jq = $(' #selector');     Var dom = jq [index];

                  Var jq1 = $(' #selector1');   Var dom1 = jq1.get(index) or var dom1 = jq1.get()[index];

          DOM to JQuery:

                  If cr is a DOM object, turn it into JQuery, JQCR = $(' cr');

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

            1. Execution time

                      Window.onload must wait for all the resources in the page (including images) to load before it can execute, while $(document).ready() executes after all the DOM structures have been drawn, but the resources that might be associated with the DOM have not yet been loaded.

            2. Write Numbers

                      In a document, window.onload is only one, while $(document).ready() can have more than one

            3. Simplify

                    Window.onload has no short form, and $(document).ready() can be shortened to $(function(){}).

 

3. Differences between JQuery and JavaScript access attribute names (JQuery actual combat)

            JQuery specification name & PI;                                                       The DOM specification
            Cellspacing                                                                      cellSpacing
            Class                                                                                              The className
            Colspan                                                                                  colSpan
            CssFloat                                                                                StyleFloat in IE, cssFloat in other browsers
            Float                                                                                            StyleFloat in IE, cssFloat in other browsers
            For                                                                                                  htmlFor
            Frameborder                                                              frameBorder
            MaxLength                                                                  maxLength
            Readonly                                                                          readOnly
            Rowspan                                                                            rowSpan
            Stylefloat                                                                          StyleFloat in IE, cssFloat in other browsers
            Tabindex                                                                            tabIndex
            Usemap                                                                                useMap

Fourth, the conflict

              DOM is theoretically free of conflicts. JQuery has two solutions to prevent conflicts :(sharp JQuery)

              1. JQuery libraries are imported after other libraries

                          Call the JQuery. The noConflict() method gives $control to another library or custom shortcut, $j = JQuery.

              2. JQuery libraries are imported before other libraries

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


Related articles: