jquery No Nonsense series Tutorials (ii) jquery real-World chapter on

jquery No Nonsense series Tutorials (ii) jquery real-World chapter on _jquery

Last Update:2017-01-18 Source: Internet

Author: User

Tags tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I know everyone's idea, rest assured, some things do not need too much theoretical knowledge to do as a basis, in fact, we have mastered JavaScript, we have mastered the theory of jquery. As you can say in the introductory article, jquery is simple. : )
Before we start to study, we recommend that you download the JQuery1.3 Chinese reference. Download Address
Http://www.jb51.net/books/17812.html

All right, get to the point. Again , jquery is simple, take easy!

What's the beginning? The best place to start is from the Ready function!

Definition

Ready (FN);

function

This is one of the most important functions in the event module, because it can greatly improve the response speed of Web applications.

Simply put, this method is purely an alternative to registering events with the window.load event . By using this method, you can immediately call the function you are binding when DOM loading is ready to be read and manipulated, and 99.99% of JavaScript functions need to be executed at that moment.

There is a parameter-a reference to the jquery function-that is passed to the ready event handler function. You can give this parameter a name, and you can therefore safely use the $ alias without worrying about naming conflicts.

Make sure that there is no registration function in the onload event for the element, otherwise the $ (document) is not triggered. Ready () event.

The $ (document). Ready () event can be used indefinitely on the same page. The functions that are registered are executed sequentially in the order in which they are (in code).

As mentioned above, we can think of ready as an alternative to onload. At this time some friends will ask, have the OnLoad method what do we need to use ready method?

My personal experience and view is the onload defect is later maintenance trouble, everywhere is JavaScript code, very easy to problem yo! In <<PPK talk about javascript>>, PPK's view on this issue is the same, try not to write JavaScript code directly in the label.

Instance

Two ways of writing

One

$ (document). Ready (function () {alert ("Hello world!");});

Two

var myfun = function () {alert ("Hello world!");}

$ (document). Ready (myfun);

Here I think we should understand the use of ready, but the previous $ (document) should be very confused. What is this stuff? Now just remember that the function of this piece of code is when the entire document is loaded and then the function inside the ready is enough.

After reading the following code, we understand the use of $ ().

The index.html code structure is as follows:

. 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>
<body>

<p> Fast Shopping Network 1</p>

<p id= "MYP" > Fast Shopping Network 2</p>

<p class= "Mypcss" > Fast Shopping Network 3</p>

<p> Fast Shopping Network 4</p>

</div>

</div>

<p> Fast Shopping Network 5</p>

<p> Fast Shopping Network 6</p>

</div>

<p> Fast Shopping Network 7</p>
</body>
</thml>

Code Resolution:

$ ("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 all the <p> element objects in the document, regardless of the hierarchy of <p> in the document , the last 7 <p> element objects were selected <p > Fast Buy the network 1</p><p id= "MYP" > Fast-Buy the network 2</p><p class= "MYPCSS" > Fast-Shopping Network 3</p><p> fast Shopping Network 4 </p><p> fast-Buy the network 5</p><p> quickly buy the network 6</p><p> quickly buy the network 7</p> "

The addclass ("CSS name") function is simply to add CSS styles to the element objects that are selected for the preceding $ ().

The Removeclass ("CSS name") function is also very simple, which is to remove the specified style of the element object that is selected in the preceding $ ().

Here, these two pieces of code function cancel out, quite nothing to do.

$ ("#myP"). AddClass ("P2");

Select the specified element object with ID "MYP" in the document and add a style with the name "P2" for that element object. Finally selected 1 <p> element Objects "<p id=" MYP "> Fast Shopping Network 2</p>"

Knowledge Point: If you want to select an element object that specifies an ID number, remember to precede the "#"

$(". Mypcss "). AddClass (" P3 ");

Select the specified element object with the style name "Mypcss" in the document and add a style with the name "P3" for the element object. Finally selected 1 <p> element Objects "<p class=" mypcss "> Fast Shopping Network 3</p>"

Knowledge Point : If you want to select the element object for the specified style, remember to precede the "."

Now we can formally introduce $ (), in jquery, we call her " selector function ", which is called " selector ".

Now try it yourself, and remember that the selector may be more than one object.

The above content is not quite simple!! Well, the revolution is just beginning, the following is slightly more complicated because it involves the concept of hierarchy, but don't worry, just remember that "selector" Select the element object may be more than the point of fear.

$ ("#myDiv P"). AddClass ("P3");

Function: Matches all descendant elements under a given ancestor element

divided into two parts to analyze

One,$ ("#myDiv") according to the knowledge learned above, select 1 <div> element objects, "<div id=" mydiv ">"

Two, $ ("#myDiv P") Select the <p> element object in any of the above 2 <div> element objects . How many? 3 "<p> fast-Buy network 4</p><p> fast -Buy the network 5</p><p> Fast purchase of the network 6</p>"

Among them, "<p> fast purchase of the network 4</p><p> Fast Shopping Network 5</p><p> fast shopping net 6</p>" are <div id= "mydiv" ></ Div> "internally defined

Although the "<p> quick Buy network 4</p>" is defined in the "div" with id "Mydivinner". But because the id "Mydivinner" div is also the lower level of the id "mydiv, so" <p> Fast-Buy the network 5</p> "also belong to the ID" mydiv the lower level. Some around the mouth, just remember a little bit on the line. If the a,b operator is connected by a space, then B is the lower level of a (can be any layer)

Finally, add a style named "P3" for these 3 <p> element objects

Knowledge Point : for this class of hierarchical choice expression $ ("a B"), a selector and B selector can be "tag name", "#id", ". css" In any of the three kinds of, the middle with a space separated, space to represent any time.

The B selector on the right is selected in an internal arbitrary layer on the result of the left a selector selection , remembering to select (possibly multiple) the interior of the element object (possibly multiple) that is selected on the left. <- This knowledge point must understand thoroughly!

$ ("#myDiv>p"). AddClass ("P3");

function: Matches all child elements under a given parent element

> representative #myDiv下的子元素对象 (multiple and only the next level), and finally selected 2 <p> element objects, "" <p> fast-Buy network 5</p><p > Quick-Buy network 6</p> "and add a style named" P3 "for the <p> object

$ ("Div+p"). AddClass ("P3");

function: Matches all the first sibling p elements immediately after the div element

+ represents the first child element object immediately following the DIV's same layer .

ID is "Mydivinner" the first after the same layer because it is "<div>", so there is no followed by "<p>"

ID is "mydiv" and it's just a "<p>" behind the same layer.

Finally, select 1 <p> element objects, "<p> 7</p> Network", and add a style named "P3" for the <p> object.

Knowledge Point: is immediately thereafter, if there is no other element between A and B can match.

$ ("DIV~p"). AddClass ("P3");

function: Match all sibling p elements after #myDiv element

This feature is similar to + , with two different places.

One, + for peers and closely followed, ~ for peers do not need to be followed

Two, + for peers and first, ~ for multiple peers.

var AP = document.getElementById ("MYP");

$ (AP). addclass ("P2");

$ (AP). addclass ("P2") is actually $ ("#myP"). Another form of addclass ("P2") .

$ () An expression selector can be used in a string, and a DOM object can be used

When you can see this, I want to say to you, "it's hard."

The process of learning is hard intolerable, only to persevere to conquer all.

Now we should understand what the previous "$ (document)" means.

All right, let's talk about this today. To quickly familiarize yourself with the use of selectors you only have to practice. More advanced applications I believe that we all can learn, master.

Author Information: Wansijie

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More