Beginner 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 ( 'load Jquery 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 can have multiple, Introduction It is $ (function () {// Code}), wait for all document structure (html tag) described in the page after the trigger
JQuery set style:
<Script type = "text / JavaScript">
/ * operation pattern. addClass () method * /
$ (function () {
// the fact is added dynamically to a class attribute tag
/ * $ ( "# whtdiv"). addClass ( "WHT");. * /
// single setting CSS
/ * $ ( " #lldiv. ") CSS (" Color "," Yellow ");
// plurality
$ (" # lldiv border ": " 1px solid blue "," background-color ":" pink ") css ({." "});
// fashion chain
$ (" ".) css ( " # whtdiv color "," green ") css (." border "," 1px solid blue ");*/

//下一个元素
$("#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 Document dom.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 * /
var dom = document.getElementById ( "WHT");
var = $ $ JDOM (dom);
$ jdom.html ();


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