JQuery is a library of JavaScript functions. Easy, mainstream jquery development steps:
(1) Import the jquery library
(2) in<script src= ". /js/jquery-3.1.0.min.js "type=" Text/javascript "></script><script> $ (function () { Write jquery Code;});</script>
(3) JQuery object vs Dom Object1.jQuery objects and Dom objects are not mixed and cannot be used by the other party's properties and methods the 2.jQuery object is a DOM array object. So you can use the subscript to convert the DOM object var $btn = $ ("button"), var btn = $btn [0];3.jquery object uses $ () to wrap the DOM object after the object example: when traversing (jquery object passes Calendar by using each, within each of this is the DOM object being obtained, not a jquery object. ) $ ("select:seclected"). each (function () {//alert (this.value); If you want to use JQuery's properties and methods, use $ () to wrap it up. Alert
$ (This). value);});
(4) JQuery selector (comprehensive use, powerful)The option to select the selected select requires the use of the Select child node $ ("Select[name=" Test "]: Selected"). each (function () {//Note that there is a space (yellow) between the green and Orange//JQ Code}); The selector is uncertain, and you can use the method
(5) Methods of jquery objects
First, Format：
$ (selector). Action ();
$: the abbreviation for jquery
selector: Selector
Action (): Operation of elements <script>
$ (document). Ready (function () {Alert ("jquery Code"); });</script>
second, get the value of the element and modify the content of the element<script> $ (document). Ready (function () {/** Gets the value of the element (without the parameter) * *///JS
var jsvalue = document.getElementById (' first '). InnerHTML;
var jsValue1 = document.getElementById (' first '). InnerText;
Jq
var jqvalue = $ (' #first '). html (); var jQValue1 = $ (' #first '). Text (); /* * Set element contents (with parameter) * *///js document.getElementById (' first '). InnerHTML = ' modify content '; document.getElementById (' first '). InnerHTML = ' JQ $ (' #first '). HTML (' modify content '); $ (' #first '). html ('
Iii. Comparison of onload and readyJQ: Document-ready function, in order to prevent a document from running jquery code $ (document) before it is fully loaded. Ready (function () {//JQ Code;}); Js:window.onload = function () {//JS code}
Differences (interview may be asked):
1, loading time is different. Ready: As long as the DOM loading of the page is complete. OnLoad: Includes all resources of the page (picture, JS, dom tree, etc.) to be executed after the loading is complete.
2, the number of written different. OnLoad: Can only write one, execute once, the back will overwrite the front, whichever is the last. Ready: You can write multiple at the same time, and each can be executed.
3, abbreviated form. OnLoad: no shorthand form. $ (document). Ready (): equivalent to $ (function () {}) PS: There is a large gallery site that adds some behavior to all the pictures in the page, such as clicking the picture to hide or show it. If you use the Window.onload method to process, the user must wait until each picture is loaded before it can be manipulated. If you use the $ (document) method in jquery to set it up, you can do so as soon as the DOM is ready, and you do not have to wait for all pictures to download the example:<script>//1. JS (can only write one)
Window.onload = function () {
Alert (1);
}
Window.onload = function () {
Alert (2);
}
Window.onload = function () {
Alert (3);
}//2.JQ (can write multiple) $ (document). Ready (function () {
Alert (4);
});
$ (document). Ready (function () {
Alert (5);
});
$ (document). Ready (function () {
Alert (6);
});
$ (function () {
Alert (7)
});</script>
iv. jquery Objects (JQ objects are arrays)
1. $ = = JQueryConsole.log (JQuery); Console.log ($); Same result example: Console.log (jquery), Console.log ($), var jqobj = $ (' P '), var jqobj = jQuery (' P ');
2. js and JQ objects are converted to each otherNote: Native JS code cannot be mixed with jquery using native DOM objects is an example that can be transformed with jquery objects://Get var Jqobj = $ (' P ') first; var jsobj = document.getElementById (' both '); If it is a collection, it cannot be transferred, the object in the collection can be transferred//converted to var newjqobj = $ (' jsobj '); //
Convert native DOM objects to jquery objectsUse $ () to wrap
var newjsobj = jqobj.get (0); //
jquery objects into native DOM objectsThrough the subscript//output of an array
Console.log ("-----------" +jqobj);
Console.log ("-----------" +jsobj);
Console.log ("-----------" +newjqobj); Console.log ("-----------" +newjsobj);
3. Discard $ To avoid multiple library conflicts
A value can be re-assigned, $$ is equivalent to jQuery var $$ =
jquery.noconflict ()var jqobj = $$ (' P '); Example: <! DOCTYPE html>
<meta charset= "UTF-8" >
Conversion of <title>jquery Objects </title>
<script src= "Js/jquery-3.1.0.min.js" type= "Text/javascript" ></script>
<body>
<p> paragraph 1</p>
<p> paragraph 2</p>
<p> paragraph 3</p>
<p id= "P4" > paragraph 4</p>
</body>
<script>
Console.log (JQuery);
var $$ = jquery.noconflict ();
var jqobj = $$ (' P ');
var jsobj = document.getElementById (' P4 ');
var newjqobj = $$ (jsobj);
var newjsobj = jqobj.get (0);
Console.log ("------------" +jqobj);
Console.log ("------------" +jsobj);
Console.log ("------------" +newjqobj);
Console.log ("------------" +newjsobj);
/*
* $ = = JQuery
*
* */
/*
Summary
* 1. Native JS code cannot be mixed with jquery
* 2. Native DOM objects can be transformed from one jquery object to another.
* */
$ (function () {
/*
* 1.jQuery object converted to native DOM object
* */
var con = $ (' P '). Get (1). InnerHTML;
Console.log (Con)
/*
* 2. The native DOM object is transformed into a jquery object
* */
var con4 = document.getElementById (' P4 ');
Console.log ($ (con4). html ());
});
</script>
jquery basic Syntax
