The purpose of this article is to teach humans to fish as well as to teach humans to fish. I will only talk about the key part. It is impossible for me to talk about every function in jquery, because many function shells have never been used in practical applications. but when we get caught, do we still need to worry about fish !?
BTW: Shells assume that you have mastered basic JavaScript Application capabilities and basic CSS knowledge.
What is jquery?
Jquery is just a JS File
People always complain about curiosity and rejection of their new business. shells are the same as they did when they started learning.In fact, jquery is very simple.
Jquery is actually a toolkit. Many common functions have been encapsulated by good people. We really need to call them directly (a bit similar to the SDK). We will not discuss the specific internal principles and implementations.It is very easy to remember jquery.
Currently jquery latest release version 1.32, official: http://docs.jquery.com/Downloading_jQuery
This series of tutorials is based on version 1.32.
Jquery has two versions:
The uncompressed version is mainly used in development.
The other is minified. After the development is complete, you can use this version.
Differences between the two versions
The file size is different, and the end user can reduce the waiting time for JS download during browsing.
The size of uncompressed files is 118kb.
Minified file size: 56kb
What does jquery bring to us?
1. standing on the shoulders of giants
People have invented the wheel, and we don't have to create one ourselves.
2. Powerful Bom, Dom, CSS, and event operation capabilities
I usually use CSS and Dom operations, which is really convenient.
3. More conciseCode
My own personal experience. For example, the tr parity in a table is two colors. If I use JavaScript to code dozens of lines, jquery only needs two lines.
4. browser independence
After Javascript development, we know that JavaScript behavior in different browsers is sometimes different. We have to write the corresponding code for different browsers. jquery has been internally processed in this method. We just need to use it.
5. Good Performance
I know myself, at least the JavaScript code I write is less efficient than jquery.
How to Use jquery
I was scared when I used jquery for the first time. I don't know how to use it. It's actually very simple. Here is an example .:)
Create an HTML file, such as index.html, andJquery-1.3.2.jsPut it in the same directory (in fact, it can be put there)
First, we solve jquery reference. The Code is as follows:
<HTML>
<Head>
<Title> jquery test </title>
<Script language = "JavaScript" src = "jquery-1.3.2.js"> </SCRIPT>
</Head>
<Body>
</Body>
</Thml>
The line of code in red completes jquery reference, simple!
Now we can extend the function to make index.html display a table, and the color of each row in the table is odd or even. That is, the odd row is a color, and the even row is another color.
Index.html code structure:
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery test </title>
<Style type = "text/CSS">
/* Even rows in the table */
. Tabeven {
Background: # ff0000;
}
/* Odd rows in table */
. Tabodd {
Background: #00ff00;
}
</Style>
<Script language = "JavaScript" src = "jquery-1.3.2.js">
</SCRIPT>
<Script language = "JavaScript" type = "text/JavaScript">
// <! [CDATA [
$ (Document). Ready (Function (){
$ ("# Tabtest TR: Even "). Addclass (" Tabeven ");
$ ("# Tabtest TR: Odd "). Addclass (" Tabodd ");
});
//]>
</SCRIPT>
</Head>
<Body>
<Table id =" Tabtest ">
<Tbody>
<Tr>
<TD> quickbuy Internet _ 1 </TD>
<TD> 1 </TD>
</Tr>
<Tr>
<TD> quickbuy Internet _ 2 </TD>
<TD> 1 </TD>
</Tr>
<Tr>
<TD> quickbuy Internet _ 3 </TD>
<TD> 1 </TD>
</Tr>
<Tr>
<TD> quickbuy Internet _ 4 </TD>
<TD> 1 </TD>
</Tr>
<Tr>
<TD> FMCG _ 5 </TD>
<TD> 1 </TD>
</Tr>
</Tbody>
</Table>
</Body>
</Thml>
The effect is as follows:
Code parsing:
$ (Document). Ready(Function (){
$ ("#TabtestTR:Even"). Addclass ("Tabeven");
$ ("#TabtestTR:Odd"). Addclass ("Tabodd");
});
$ (Document). ReadyThe function is very simple, that is, wait for the webpage to load internally and then execute JavaScript code (don't forget that jquery is also a javascript code yo). This function is used in almost all the code that uses jquery. because if we have dom operations in JavaScript code and the entire DOM framework has not been fully established before the webpage is fully read, the previous Dom operations are invalid.
$ ("#TabtestTR:Even"). Addclass ("Tabeven"); For the table whose ID is tabtestEven rowAdd a CSS style named tabeven
$ ("#TabtestTR:Odd"). Addclass ("Tabodd"); For the table whose ID is tabtestOdd lineAdd a CSS style named tabeven
Finally, Beginners should never feel overwhelmed by unfamiliar code. Remember that jquery is very simple.
Author information: Wan Sijie
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
