jquery Introductory-jquery program code style details

jquery Introductory-jquery program code style details _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags jquery library

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

The jquery authoritative guide 1th chapter jquery Development Introduction, this chapter through the continuation gradual way, first starts from the jquery basic concept, introduced the jquery library the download, introduces the simple application method, the latter part focuses on the jquery control DOM object and the page CSS style introduction, With a few simple examples, the reader has a general idea of jquery's functional application on the page, laying the groundwork for further study of the detailed objects and methods of the jquery library in the next section. This section introduces the code style of the jquery program.

code style for 1.1.5 jquery programs
1. Use of the "$" dollar character
In the jquery program, the most used is the "$" dollar sign, whether it is the choice of page elements, function prefix, you must use the symbol, it can be said that it is a jquery program logo.
2. Event Action Link Writing
When you write an element event for a page, the jquery program can write all the events for that element in a linked way. To better illustrate the use of this writing method, we illustrate it through an example.
example 1-2 the chain style of jquery events
(1) Functional Description
In the page, there is a <div> tag, within which the tag contains two <div> tags, one for the theme, the other for content, when the page is first loaded, the content <div> markup is not visible when the user clicks on the theme <div> Mark, change the background color of your own, and display the content <div> tags.
(2) Implementation code
Create a new HTML file 1-2.html and add the code shown in Listing 1-2.
Code listings 1-2 The chain style of jquery events

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
transitional//en "
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
The chain style of <title>jquery events </title>
<script language= "javascript" type= "Text/javascript"
Src= "Jscript/jquery-1.4.2.min.js" ></script>
<style type= "Text/css" >
. divframe{width:260px;border:solid 1px #666;
FONT-SIZE:10PT}
. Divtitle{background-color: #eee;p adding:5px}
. Divcontent{padding:5px;display:none}
. divcurrcolor{background-color:red}
</style>
<script type= "Text/javascript" >
$ (function () {
$ (". Divtitle"). Click (function () {
$ (this). addclass ("Divcurrcolor")
. Next (". Divcontent"). CSS ("Display", "block");
});
});
</script>
<body>
<div class= "Divframe" >
<div class= "divtitle" > Theme </div>
<div class= "Divcontent" >
<a href= "#" > Link one </a><br/>
<a href= "#" > Link two </a><br/>
<a href= "#" > Link three </a>
</div>
</div>
</body>

In the code of the above file, the bold code is a chain-style notation.
Code Description: When a user clicks an element with a class name called "Divtitle", it increases its own style with the name "Divcurrcolor" and displays the next class name as the "divcontent" element. As you can see, the implementation of the two function passes "." Symbols are linked together.
(3) page effect
Executes the HTML file 1-2.html, and the implementation page effect is shown in Figure 1-3.

After clicking:

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