jQuery and JavaScript document ready function
/ **
* Document Ready function: Wait documented was completed, the relevant code execution
* native JS (JavaScript) mode: the window.onload funcation = () {}
* jQuery way: $ (document) .ready (funcation () {} );
*
* difference:
*
* 1. execution timing:
* native JS (JavaScript) mode: window.onload: must wait for the page is fully loaded (including images, etc.), and then execute the code wrapped
*
* jQuery way: $ (document ) .ready (): only need to wait for a web page's DOM structure is loaded, you can execute the package code
*
*
* 2. the number of executions
* native JS (JavaScript) mode: window.onload: can not write more than at the same time, only once, if the second, then the first execution will be covered
* jquery way: $ (document) .ready () : you can simultaneously write multiple
*
*
* 3.jquery way short program
* $ (document). READY (function () {
* Alert ( "the Hello World!");
*});
* short
*
. * $ () READY (function () {
* Alert ( "the Hello World!");
*})
*
*$(function () {
* alert("Hello World!");
*})
*
/ **
* the DOM: Document Object Model, the page can be seen as a tree
* Native JS way to obtain DOM element: document.getElementById ( 'id') ....
jQuery object is after packaging by jQuery DOM object produced: * jQuery object.
*
* /
* / Dom element acquisition
* var document.getElementById P1 = ( "Test");
* var document.getElementsByClassName P2 = ( "Test"); // Array
* var p3 = document.getElementsByTagName ( "p "); // array
*
*
* // dom element operation
// 11 way: JS native mode
* var p4 = document.getElementById ( "p1 "); // dom objects
! * p4.innerHTML = "Hello Welcome to jQuery learning ";.
* p4.style.color =" Red ";
*
*
*
* 2 mode 2:. jquery embodiment
* $ (function () {
* $ var P5 = $ (" # P2 "); // jQuery Object
* $ p5.html ( "! Hello Welcome to jQuery learning."); // equivalent to p4.innerHTML
* $ P5.
*
*
/ **
* Comparative jQuery object DOM object:
* the packaged objects by jQuery method, the object is an array, the DOM object is a single DOM element.
* It DOM object is completely different, the only similarity is that they can operate DOM;
* /
*
*
* Native embodiment JS
* Object obtained by native JS may be a single object, it may be an array
* var div = document.getElementById ( "test"); // single object,
* var div = document.getElementsByTagName ( "div"); // array
* the console.log (div);
*
* jQuery embodiment
* var $ div = $ ( " # test") ; // array-like objects
* console.log ($ div);
*})
*
*
*
/ **
* jQuery object into a DOM objects:
* 1.jQuery object is an array object, by using the array index [index] method to give the corresponding DOM object.
* 2. The use in jQuery get (index) the method to give the corresponding DOM object
*
* /
* mode 1: [index] by a method corresponding to the obtained array subscript DOM object:
* $ var div = $ ( "div"); // array of class Object
* the console.log ( div $);
* $ var DIV1 = div [0]; // Get the first element div
* the console.log (DIV1);
* 2 ways: by carrying jQuery get () method
* var div2 = $ div. get (1); // div element acquiring second
* the console.log (Div2);
**
* jQuery object to the dOM object into: *******
* use $ () method of packaging dom object is converted It became a jquery object
