Basic jquery Course

Environment construction

Setting up a jquery development environment is very convenient and can be done in the following several steps.

1. Download jquery File Library

In the official jquery website (http://jquery.com), download the latest version of the jquery file library. Find the latest version of the file download button in the Web site, the jquery framework file to download to the local, this lesson plan uses a stable version: Version 1.9.0.

1. Introducing the jquery file Library

After downloading the jquery framework file, you do not need any installation, just use the <script> file import tag to import the jquery framework file into the page, assuming that the file is downloaded and saved in the project folder JScript, then the page

<script language= "javascript" type= "Text/javascript" src= "1.9.0/jquery.js" ></script>

In the first part of the page, after adding the above code, we completed the jquery Framework development environment, you can start our jquery learning.

The first experience of jquery

If you know the JavaScript language, it will give you the power of jquery, because jquery itself is JavaScript, but it's just a code library that wraps JavaScript code in a way that allows you to implement a specific function! For example, we want to change the text content of all the paragraph labels in the page:

JavaScript Code:

JQuery Code:

The above two pieces of code to complete the function is the same.    As you can see, jquery is more concise and convenient, and we don't have to care about the implementation details of the DOM when we're dealing with it. $()is the function in jquery, whose function is to get the tag element specified in (). In the example $(“p”) , you get a set of P tag elements, where "P" represents the tag selector in the CSS. The () in $ () is not necessarily the specified element, or it may be a function.

In jquery, the $() method is equivalent to the jQuery() method, the former is more commonly used, is the latter shorthand. Methods are generally used only when they are in $() conflict with other languages jQuery() .

#id selector (use your ID number to find someone)

jquery can use CSS selectors to manipulate tag elements in a Web page. If you want to find an element with an ID number, you can use a selector in the following format:

$("#my_id")

This #my_id means that the label element specified in the page is obtained based on the ID selector, and only one element is returned.

For example:

Effects displayed in the browser:

As you can see, the #id element is obtained by means of a selector, and the method is called in the element html() id= the <div> element of the "Divtest" text is displayed in the page.

In addition, the html() function of the method is to set or get the content displayed in the element, which we will describe in detail in a later section.

Element selector (Find pencil)

In the pencil case, there are pencils, pens and watercolor pens, similar to the <div> in the page, <span> elements, although the same as a container, but has its own function, jquery can be based on the element name to find the element, the format is as follows:

$(“element”)

element is the name of the elements, that is, the name of the pen in the tool box, to find a watercolor marker, we can draw, through the element name to find the element can be manipulated.

As shown: In the page, an element is found based on the element name, and the font it appears is bold.

Effects displayed in the browser:

As can be seen from the image above, the element can be found based on its name, and the method will be called to css() set the style of the text display in the element's content.

In addition, the function of the css() method is to set or get an element of a style property, its more functional we will be detailed in the following chapters.

Basic jquery Course