Home > Developer > JavaScript
Author: Tian xiangbing
This is not a series of tutorials, but also a series of tutorials. It is a personal experience for beginners. I hope to give them a learning direction. There are too many basic tutorials on jquery on the Internet, this is also too complicated, so I will introduce the basic applications of jquery from my personal perspective. Of course there is something wrong with it. You are welcome to correct it and join my Q group to learn it together, group Q: 70210212,778 13547. the following content assumes that you are a person who does not fully understand js, so the content will be inferior.
Click here for the case in this article.
First, you need to know how to reference jquery, as shown below:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type = "text/javascript"> </script>The jquery file on google is referenced here. It supports gzip compression and CDN acceleration, so you can reference it if not necessary. Of course, you can also reference local files, in this way, the network can be disconnected, and where should jquery code be written?
<Script>The meaning of this sentence is: after the dom elements of the page are fully loaded, execute the function (); and windo. onload = function () {} is similar. If you know this for the time being, do not go into details. This will only waste your time, you can understand it as to avoid calling the div before it is loaded when you write the js Code. In this case, an error is reported, so you must write it like this, do not worry about others. Anyone who uses jquery should write such a thing. It can also be abbreviated:
$ (Function (){Next, let's write code in it. First, I recommend a browser, firefox, and a plug-in on it, firebug. After installation, you can call it up by pressing F12. Its interface is like this.
This time we will use the console, which is the first tab. We often want to debug the code in the program. After the code is run, we want to print a value. Some people will use alert ("xxx "); however, the pop-up dialog box will interrupt the program, so "professional" people use the console. log ("xxxx"), which is displayed in the console, and an object can be displayed in the form of a tree.
Next, let's talk about the query of html elements. Download a Chinese version of jquery API from Baidu or Google. For now, download the 1.4 version. I also provide a temporary version: Click here to download it.
Then we open the left-side selector => base, which has the most common selector. Its rule is based on the CSS3 standard, # id, div ,. class, * These are the same in CSS, so it is not difficult to understand them. If you don't even understand this CSS, I suggest you change it, how can I call it:
$ (Function (){
In this way, all P labels will be printed in the console. If you want to find the tag whose ID is mydiv, you should write $ ("# mydiv") in this way. If the search class is myclass, you should write $ (". myclass "), find the section P and the class is myp, which should be written as follows: $ (" p. myp "), if you want to find all span classes in section P as myspan, you should write: $ (" p span. myspan "); they are close to a collection of jquery objects, similar to arrays. Since they are arrays, We will traverse them from time to time. jquery provides the each method, to implement a foreach loop set. For example, if I want to change the color of paragraphs or tr intervals on the page, I can write as follows:
Css:
<Style>Html:
<Body>Js:
$ ("# Mydiv> p"). each (function (I ){The function parameter in each is the index number of the Set, starting from 0. Therefore, the even number of rows must be (I + 1) % 2 = 0, here, we can use a new method, addClass, which is used to add style classes to dom elements and also remove style classes from removeClass.
Next, let me give you a simpler way:
$ ("P: even"). addClass ("even ")Each is omitted here. As mentioned earlier, $ ("selector") returns a jquery set, but it is not an array but a subset of an array, when you use the method provided by jquery, it will automatically call each internally for traversal. Therefore, if no special processing is required in the set, we can directly use the jquery object method. As for: the even method is also in css3, similar to: checked: slected: lt. For more information, see the jquery API manual.
Well, let's talk about it here today. It has very little content and is also very basic. This is the first step for you to open the jquery door, so it is necessary to learn.
Click here for the case in this article.
<Script> </script>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
