Chapter V: acquaintance JQuery

JQuery is a package of JavaScript, simplifying the JS code is the basis of the mainstream framework (VUE, EasyUI, Bootstrap) it is launched in 2006,

JQuery advantages:
small size, compressed only about 100KB
powerful selector
excellent DOM package
reliable event handling mechanism
excellent browser compatibility
implicit iteration simplify programming
rich plug-ins to support
the introduction of jquery library:
<Script src = "JS / jQuery-3.4.1.js" of the type = "text / JavaScript"> </ Script>
jQuery page is loaded trigger:
<Script type = "text / JavaScript">
/ * JS code * /
the window.onload = function () {
Alert ( 'load a JS');
};
/ * jQuery code * /
$ ( Document) .ready (function () {
Alert ( 'load Jquery a');
});
the jQuery (Document) .ready (function () {
Alert ( 'load two Jquery');
});
/ * Shorthand two ways of loading Jquery above * /
$ (function () {
alert ( 'Jquery load three');
});
</ Script>
the window.onload and $ (document) .ready difference:
the window.onload only one, no shorthand, all resources must wait for the page to trigger after loaded
$ (document) .ready may have a plurality of, profile of $ (function () {// Code}), all document structure (html tag) described on page after waiting for a trigger
JQuery set style:
<Script type = "text / JavaScript ">
/ * operation pattern. addClass () method * /
$ (function () {
// the fact is added dynamically to a class attribute tag
/ * $ (" # whtdiv wht ")") addClass (. "; * /
// single set CSS
. / * $ ( "# The lldiv") CSS ( "Color", "Yellow");
// plurality
$ ( "# lldiv") css ({ "border": "1px. Blue Solid "," background-Color ":" Pink "});
// chain manner
$ (" # whtdiv color ", " green ")") css (. ".CSS ( "border", "Solid 1px Blue"); * /

// next element
. $ ( "# whtdiv") CSS ( "Color", "Green") Next () CSS ( "Color", "Pink") Next () CSS ( "Color", "Orange");....

} );

</ Script>
JQuery commonly used methods, and events: for details, see the W3C
$ (function () {
/ * button to display pictures registered a click event * /
. $ ( "# show") click (function () {
$ ( "#imgs") slideDown (3000);.
});
$ ( "# hide") the Click (function () {.
$ ( "# imgs") slideUp (3000);.
});
});
--- -------------------------------------
$ (function () {
$ ( "li"). mouseOver (function () {
// not with $ ( "Li")
$ (the this) .css ( "Color", "Blue");
}) mouseOut (function () {.
$ (the this) .css ( "Color ""Black ");
});

});
conversion Dom JQuery objects and objects:
<Script type =" text / JavaScript ">
$ (function () {
/ * Get dom JS objects * /
/ * var dom = document.getElementById ( "wht5"); * /
/ * Alert (dom.innerHTML); * /
/ * Alert (dom.innerText); * /
/ * Get the value attribute * /
/ * Alert (dom.value); * /


/ * jQuery objects * /
/ * $ JDOM var = $ ( "# wht5"); * /
/ * Alert (jdom.html ()); * /
/ * Alert (jdom.text ()); * /
/ * for general form * /
/ * Alert ($ jdom.val ()); * /

/ * Dom Jquery object into the object * /
document.getElementById dom = var ( "WHT");
var = $ $ JDOM (dom);
$ jdom.html ();


/ * jQuery revolution dom objects * /
var $ JDOM = $ ( "# wht5");
var dom JDOM $ = [0];
/ * var DOM jdom.get = $ (0); * /
Alert (dom.value);
});
</ Script>