Basic understanding of Jquery series (1) and understanding of jquery Series
The Demo used for testing Jquery in this series is "uncompressed, development jQuery 1.11.3".
The latest jquery package can be downloaded from the official website please refer to http://jquery.com/
Jquery has two versions on the official website:
It is generally used for debugging and development.
After the system is stable, the compressed version is generally used to improve the efficiency.
Jquery does not need to be installed. In a WEB project, you only need to reference the JS file location.
Eg:
<Script src = "Jquery/jquery-1.11.3.js"> </script>
<Script src = "Jquery/ClientJS/01.js"> </script>
Jquery no longer supports IE6 \ IE7 \ IE8 since version 2.0
I,What can Jquery do?
II,JExcellent Query
III,JQuery operations
The HTML document includes the following information:
HTML Format |
Description |
<! DOCTYPE html> |
Html5 documents |
<Html lang = "en"> |
Webpage subject |
<Head> |
Header information |
<Meta charset = "UTF-8"> |
Encoding format |
<Title> Through the Looking-Glass </title> |
Webpage title |
<Link rel = "stylesheet" href = "Css/01.css" type =" text/css "/> |
CSS |
<Script src = "jquery-1.11.3.js"> </script> |
JqueryJS |
<Script src = "01.js"> </script> |
Custom JS |
<Body> ...... </Body> |
Content information |
HTML Jquery operation steps (download is provided below the original DEMO file)
Follow the JS reference content above:
1)<Script src ="Jquery/jquery-1.11.3.js"> </Script>
The officially defined script must be referenced before it is referenced. Otherwise, an error is returned.
2)<Script src = "Jquery/ClientJS/01.js"> </script>
The storage location of all scripts defined by the user.
Separate custom scripts to facilitate management.
Compile Jquery to reference the <script src = "Jquery/ClientJS/01.js"> </script> script file, and then write your own defined script in 01. js.
EG:
$ (Document). ready (
Function ()
{
$ ('Div. poem-stanza '). addClass ('highlight ');
}
);
<Script type = "text/javascript">
Function addHighlightClass ()
{
$ ('Div. poem-stanza '). addClass ('highlight ');
}
$ (Document). ready (addHighlightClass );
</Script>
Analyze the above Code:
① Search for Poetry text
You can use the $ () function. The parameter includes any CSS selector expression. Here we want to find all the Div elements of the poem-stanza class, and the $ () function will return a new JQuery object instance. We want to change the class in poetry and we need to select it like this.
② Add new class
The addClass () method is self-evident. It applies a CSS class to the page elements we choose. The opposite of the. addClass method is. removeClass (), which facilitates us to explore JQuery's support for various selection expressions. Highlight defines a diagonal text style with a border and a gray background.
③ Execute code
$ (Document). ready () method. Jquery supports calling a function after Dom loading, instead of waiting for image loading on the page.
JQuery debugging tool
1. IE Developer Tools
2. Chrome Developer Tools
3. FireFox FireBug
Use Chrome Developer Tools
F12 open the Chrome Developer Tools debugging panel,
1. In the panel, the default Elements tab is displayed, and the page structure is displayed on the left. Use a magnifier to locate the page element.
2. The [Sources] resource tab displays all scripts loaded on the page. Right-click the row number to set normal breakpoint and condition breakpoint. On the right side of the tab, you can observe the monitoring value. Variables and expressions that can be monitored.
3. Console
You can view Jquery objects in the console. Here, you can enter the Jquery you are using, which is very useful and convenient for debugging.
EG:
$ (Document). ready (function ()
{
Console. log ('hello ');
Console. log ('World ');
Console. log ($ ('div. poem-stanza '));
});
You can pass in any expression to console. log, which is better than alert.
For more information, join the QQ Group 373833228.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
