Now, let's go to the topic.Jquery is simple, take easy!
From then on? It's best to start with the ready function!
Definition
Ready (FN );
Function
This is in the event module.Most importantBecause it can greatly improve the web applicationProgram.
Simply put, this method is purely directedWindow. Load eventRegister an eventMethod. By using this method, you can call the function you bind immediately when the Dom is ready to read and manipulate, and 99.99% of JavaScript functions need to be executed at that moment.
There is a parameter -- a reference to the jquery function -- passed to this ready event processing function. You can give this parameter any name, so you can use the $ alias without worrying about name conflicts.
Make sure that the function is not registered in the onload event of the element. Otherwise, the $ (document). Ready () event is not triggered.
You can use the $ (document). Ready () event infinitely on the same page. The registered functions follow (CodeIs executed sequentially.
As described above, we can regard ready as an alternative to onload. Some friends will ask, what should we do with the onload method?
My personal experience and opinion is that the disadvantage of onload is that it will be difficult to maintain it in the future. JavaScript code is everywhere and it is easy to cause problems! In <PPK about JavaScript>, PPK also views on this issue. Try not to write JavaScript code directly in tags.
Instance
Two writing methods
I
$ (Document). Ready (Function () {alert ("Hello world! ");});
II
VaR myfun = function () {alert ("Hello world! ");}
$ (Document). Ready (Myfun);
Here I think you should understand the usage of ready, but you should be confused about the previous $ (document). What is this? Don't worry... Now, just remember that the function of this Code is enough to execute the functions in ready after the entire file is loaded.
After reading the following code, we can understand the usage of $.
The code structure of index.html is as follows:
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery test </title>
<Style type = "text/CSS">
. P1 {
Background: # ff0000;
}
. P2 {
Background: #00ff00;
}
. P3 {
Background: # 0000ff;
}
. Mypcss {
Font-size: 36px;
}
</Style>
<Script language = "JavaScript" src = "jquery-1.3.2.js">
</SCRIPT>
<Script language = "JavaScript" type = "text/JavaScript">
// <! [CDATA [
$ (Document). Ready (function (){
$ ("P"). addclass ("p1 ");
$ ("P"). removeclass ("p1 ");
$ ("#Myp "). addclass (" p2 ");
$ (".Mypcss "). addclass (" P3 ");
$ ("#Mydiv P "). addclass (" P3 ");
$ ("#Mydiv>P "). addclass (" P3 ");
$ ("Div+P "). addclass (" P3 ");
$ ("Div~P "). addclass (" P3 ");
VaR ap = Document. getelementbyid ("myp ");
$ (AP). addclass ("p2 ");
});
//]>
</SCRIPT>
</Head>
<Body>
<P> fast purchase of public network 1 </P>
<P id = "myp"> quickbuy Internet 2 </P>
<P class = "mypcss"> FMCG 3 </P>
<Div id = "mydiv">
<Div id = "mydivinner">
<P> FMCG 4 </P>
</Div>
<Div id = "mydivtemp">
</Div>
<P> FMCG 5 </P>
<P> FMCG 6 </P>
</Div>
<P> FMCG 7 </P>
</Body>
</Thml>
Code parsing:
$ ("P"). addclass ("p1 ");
$ ("P"). removeclass ("p1 ");
$ ("#Myp "). addclass (" p2 ");
$ (".Mypcss "). addclass (" P3 ");
$ ("#Mydiv P "). addclass (" P3 ");
$ ("#Mydiv>P "). addclass (" P3 ");
$ ("Div+P "). addclass (" P3 ");
$ ("Div~P "). addclass (" P3 ");
VaR ap = Document. getelementbyid ("myp ");
$ (AP). addclass ("p2 ");
//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ////
//////////////////////////////////////// //////////////////////////////////////// //////////////////////////////////////// ////
$ ("P"). addclass ("p1 ");
$ ("P"). removeclass ("p1 ");
Select DocumentAll<P> element object,Regardless<P>What is the hierarchy in the document?, Finally selected7<P> element object "<p> fast purchase and profit public network 1 </P> <p id =" myp "> fast purchase and profit public network 2 </P> <P class =" mypcss "> FMCG 3 </P> <p> FMCG 4 </P> <p> FMCG 5 </P> <p> FMCG 6 </P> <p> fast purchase of public network 7 </P>"
The addclass ("CSS name") function is very simple, that is, adding a CSS style for the element object selected in the previous $.
Removeclass ("CSS name") function is also very simple, that is, remove the specified style of the element object selected in the previous $.
Here, these two sections of code are offset, and nothing is done.
$ ("#Myp "). addclass (" p2 ");
Select DocumentIDFor "myp"SpecifyElement object, and add a style named "p2" to the element object.1<P> element object "<p id =" myp "> FMCG 2 </P>"
Knowledge point: if you want to select the Element Object of the specified ID number, remember to use"#"
$ (".Mypcss "). addclass (" P3 ");
Select DocumentStyle nameFor "mypcss"SpecifyElement object, and add a style named "P3" to the element object.1<P> element object "<P class =" mypcss "> FMCG 3 </P>"
Knowledge Point: If you want to select the Element Object of the specified style, remember to use"."
Now we can officially introduce it to you.$ (),In jquery, we call her"Selector Function", The content is called"Selector".
Now you can try it yourself,Remember that the objects selected by the selector may be multiple objects.
Is the above content quite simple !! Well, the revolution has just begun. The content below is a little more complicated because it involves the concept of layers, but don't worry,Remember that the element objects selected by the selector may be multiple.
$ ("#Mydiv P "). addclass (" P3 ");
Function: Match all descendant elements under a given ancestor Element
Divided into two parts for analysis
I,$ ("#Mydiv) based on the knowledge above, select1<Div> element object, "<Div id =" mydiv ">"
2, $ ("#Mydiv P ") in the above two <div> element objectsAny LayerMediumSelect <p> element object. How many?3<P> FMCG 4 </P> <p> FMCG 5 </P> <p> FMCG 6 </P>"
Among them, "<p> quickbuy Internet 4 </P> <p> quickbuy Internet 5 </P> <p> quickbuy Internet 6 </P>" both "</P> div id = "mydiv"> </div> "internally defined
Although "<p> quickbuy Internet 4 </P>" is defined internally in "Div" with ID "mydivinner. however, because "Div" with ID "mydivinner" is also the lower layer of "mydiv" with ID, therefore, "<p> quickbuy public network 5 </P>" also belongs to the lower layer with the ID of "mydiv. just remember a bit. if A and B are connected by space, B belongs to the lower layer of a (which can be any layer ).
Finally3<P> Add a style named "P3" to element objects
Knowledge Point:For this type of hierarchical selection expression $ ("a B"), the selector and B selector can be "tag name ","#ID ",".Either of the three types of CSSSpaceSeparated by spaces.
The B selector on the right is performed internally on the result selected by the selector on the left.Any LayerSelect, remember to re-select the Element Object (which may be multiple) selected on the left (which may be multiple). <-This knowledge point must be fully understood!
$ ("#Mydiv>P "). addclass (" P3 ");
Function: Match all child elements under the given parent Element
>Representative#Child element objects under mydiv (multiple and only the next layer), and finally select two <p> element objects, "" <p> FMCG 5 </P> <p> FMCG 6 </P> ", and add a style named" P3 "to the <p> object.
$ ("Div + P"). addclass ("P3 ");
Function: Match allNext DivAfter the elementFirst peer PElement
+RepresentativeThenDivSame LayerThe first child Element Object.
The ID is "mydivinner". The first one after the same layer is "<div>", so there is no "<p>"
The ID is "mydiv", which is exactly behind the same layer "<p>"
Finally, select a <p> element object, "" <p> quickbuy public network 7 </P> ", and add a style named" P3 "to the <p> object.
Knowledge point:If there are other elements between A and B that cannot match.
$ ("DIV~P "). addclass (" P3 ");
Function: Match#MydivAfter the elementAll peer PElement
This function works+Similarly, there are two differences.
I,+Peer and keep up,~Do not keep up with peers
II,+Is the first peer,~Multiple peers.
VaR ap = Document. getelementbyid ("myp ");
$ (AP). addclass ("p2 ");
$ (AP). addclass ("p2") is actually $ ("#Another form of myp "). addclass (" p2.
$ () Contains a string expression selector and a DOM object.
When you can see this sentence, I want to say "hard work ."
The process of learning is hard to bear, and persistence can overcome everything.
Now we should understand what the previous "$ (document)" means.
Now, let's talk about it today. To get familiar with selector usage quickly, we only need to practice more. I believe that more advanced applications can be learned and mastered by everyone.
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
