Learn jquery from scratch (i) a groundbreaking introductory article _jquery

I. Summary

This series of articles will take you into the wonderful world of jquery, with many authors ' specific experiences and solutions, even if you can use jquery to find some cheats in your reading.

This article is the first introduction to a brief introduction to jquery, with a simple example to guide how to write jquery code and build a development environment. Explains in detail how to work with jquery in Visual Studio.

Reprint, please specify the Autumn production! Blog Park start!

Two. Foreword

First, Apologize! The "learn asp.net MVC from zero" series is not updated when you introduce filter, because recently I have been studying and learning jquery. See the name and article title of this series, and people who have read my MVC series are familiar with it. Soon to give the company's people to do training, so deliberately produced this tutorial.

While I was writing, I consulted a series of tutorials on online jquery, and did not find a series of tutorials in the blog Park and Google that I was satisfied with. I like to explain the knowledge system in a simple and simple way. Don't like to write "learn Notes" style of article. At the same time the series will soon be all finished (with work pressure is motivated), and then if time allows me to continue to update the MVC series articles. Once again, say sorry to the friends who are waiting for the MVC article!

In addition, most of the knowledge of this series comes from the "jquery Combat" Book of Turing Press. It is a classic in jquery books to recommend that you buy this book.

Let's start the jquery journey.

Three. What is jquery

jquery is a set of JavaScript script libraries. I can find the "JavaScript Lightweight Script Library" series in my blog post. The JavaScript script library is similar to the. NET class library, and we encapsulate some tool methods or object methods in the class library for easy user use.

Note that jquery is a script library, not a scripting framework. Libraries are not equal to frames, such as "system Assembly" is a class library, and "ASP.net MVC" is a framework. jquery does not help us solve scripting reference management and functional management, which is what the scripting Framework does.

The script library can help us to complete the coding logic and realize the business function. Using jquery will greatly increase the efficiency of writing JavaScript code, making the code more elegant and robust. At the same time, the rich jquery plug-ins on the web also make our job "with jquery, drinking tea every day"-because we are already standing on the shoulders of giants.

When you create a asp.net MVC project, you will find that you have automatically introduced the JQuery class library. jquery is almost a script library for Microsoft! Perfect integration and IntelliSense support, so that. NET and jquery seamless together! So with. NET should choose jquery rather than Dojo,extjs.

jquery has the following features:

1. Provides a powerful functional function

By using these functions, we can quickly complete a variety of functions and make our code extremely concise.

2. Troubleshoot browser compatibility issues

JavaScript scripts in different browser compatibility has been a nightmare for web developers, often a page in the Ie7,firefox under normal operation, in IE6 under the inexplicable problems. Writing different scripts for different browsers is a painful thing to do. With jquery we're going to wake up from this nightmare, for example, the event object in jquery has been formatted to be used by all browsers, to get the event trigger based on an event, which is event.srcelements under IE and the FF and other standard browsers under the Event.target. jquery is a unified event object that allows us to use Event.target to get event objects in all browsers.

3. Implementing a Rich UI

jquery can be implemented such as gradient pop-up, layer move and other animation effects, let us get a better user experience. As an example of a gradient effect, I used to write a gradient animation that could be compatible with IE and FF, using a lot of JavaScript code, and trying not to say that after writing it, there was not much help to forget it after a while. Another effort to develop similar functionality is needed. Using jquery today can help us quickly accomplish this type of application.

4. Correct the wrong scripting knowledge

This one is for me, because most developers have a false understanding of JavaScript.  For example, in the page to write the action Dom execution of the statement, the HTML element or Document object directly add "onclick" attribute, do not know that onclick is actually an anonymous function, and so on. Technicians with these error scripting knowledge can also do all the development work, but such programs are not robust. For example, "write the action Dom at load time on the page", when the page code very small user load quickly without problems, when the page load slightly slower, the browser "terminate operation" error. JQuery offers a number of easy ways to help us solve these problems, Once you use jquery you will be correcting these errors-because we are all using the standard and correct jquery scripting Method!

5. Too much! Waiting for us to find out.

Four. Hello World JQuery

As a rule, we've written jquery's Hello World program to take the first step in using jquery.

The complete source code for this chapter can be used at the end of this article.

1. Download jquery class Library

jquery's Project Downloads on google Code, download the address:

Http://code.google.com/p/jqueryjs/downloads/list

The above address is the total download list, there are many versions and types of jquery library, mainly divided into the following categories:

Min: Compressed jquery class library, used in the formal environment. such as: Jquery-1.3.2.min.js

Vsdoc: You need to introduce this version of the JQuery class library in Visual Studio to enable IntelliSense. such as: Jquery-1.3.2-vsdoc2.js

Release pack: There are no compressed jquery code in it, and documentation and sample programs. such as: Jquery-1.3.2-release.zip

2. Writing procedures

Create an HTML page, introduce the jquery class library and write the following code:

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 ">

<title>hello World jquery!</title>
<script type= "Text/javascript" src= "Scripts/jquery-1.3.2-vsdoc2.js" ></script>
<body>
<div id= "divmsg" >hello world!</div>
<input id= "btnshow" type= "button" value= "Display"/>
<input id= "btnhide" type= "button" value= "Hide"/><br/>
<input id= "Btnchange" type= "button" value= "Modified content for Hello world, too!"/>
<script type= "Text/javascript" >
$ ("#btnShow"). Bind ("click", Function (event) {$ ("#divMsg"). Show ();
$ ("#btnHide"). Bind ("click", Function (event) {$ ("#divMsg"). Hide ();};
$ ("#btnChange"). Bind ("click", Function (event) {$ ("#divMsg"). HTML ("Hello World, Too!");});
</script>
</body>

The effect is as follows:

There are three buttons on the page to control the display of Hello World, to hide and modify its contents.

This example uses the following:

(1) JQuery ID selector: $ ("#btnShow")

(2) Event binding function bind ()

(3) Display and hide functions. Show () and Hide ()

(4) Function HTML to modify HTML inside elements ()

In the next tutorial we will delve into this content.

Five. Enable Visual Studio's IntelliSense for jquery

First look at the IntelliSense surprises that Visual Studio brings to us. For Visual Studio to support IntelliSense, the following conditions are required:

• Install VS2008 SP1
  Download Address: http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
  
• Install vs 2008 Patch KB958502 to support the "-vsdoc.js" IntelliSense file.
  This patch causes Visual Studio to find out if an optional "-vsdoc.js" file exists when a JavaScript library is referenced, and use it to drive the JavaScript IntelliSense engine if it exists. These annotated "-vsdoc.js" files can contain XML annotations that provide a help document for JavaScript methods, as well as additional code IntelliSense hints for dynamic JavaScript signatures that cannot be inferred automatically. You can find out the details of the patch in "here". You can download the patch at "here" for free.
  
• You must refer to the Vsdoc version of the jquery library
  

  <typesrc= "scripts/jquery-1.3.2-vsdoc2.js"></script>   

VS can be a smart cue when writing a script, even when you just enter "$":

There are more hints when you use the method:

With IntelliSense we write JavaScript as fast, convenient, and comfortable as C #. Most situations can be written successfully at once without having to query the JavaScript help file for a single case. To enable visual The premise of Studio's IntelliSense for jquery is to introduce the Vsdoc version of the jquery class library. In the example we introduced the "jquery-1.3.2-vsdoc2.js" file. You cannot enable smart prompts if you refer to other versions, such as a min version of the jquery class library. But in the formal environment, we have to use the "min" version of the jquery library file, with the 1.3.2 version number as an example, the size of each version is as follows:

The first of these is the uncompressed jquery library. If you enable gzip compression and use the Min version of Jquery.js, you can compress to 19KB during the transfer process.

Note that if we update the script, you can update Visual Studio IntelliSense with the Ctrl+shift+j shortcut, or click Edit->intellisense-> to update JScript IntelliSense:

To add script hints to Visual Studio and to use the Min version of the script library on the line, we typically introduce the jquery library in the following ways:

1. Control the results of the compilation

 <script type = "Text/javascript" =" Span class= "KWRD" >></script> <%if (false) {%> <script type= "Text/javascript" Src=script> <%} %>               

This is the way recommended online. The compiled page has only a min version of the reference, while developing to enjoy IntelliSense. But note that this way the Min class library referenced can only be 1.2.6 or previous version number. The latest 1.3.2 all non-vsdoc versions of the jquery library reference will cause a JScript IntelliSense update error. This is a bug in version 1.3.2 and is expected to be resolved in subsequent releases. In fact, we can use the 1.2.6 version of the Min library, this tutorial covers the jquery function, 1.2.6 version of the basic support.

We used the if (false) to let the compiled page not contain references to the Vsdoc version of the jquery library, and the same ideas can be used such as putting script references into a placeholder and setting Visible=fasle.

2. Use back-end variables

In order to be able to use the 1.3.2 version of the Min library, we can simply update JScript Intellisense by placing the script reference in a variable, in the form of a page output. But maybe someone like me hates it. Use variables on the front end:

 <asp:placeholder Visible< Span class= "KWRD" >= "false" runat= "Server" > <script type= "Text/javascript" src= "scripts/jquery-1.3.2-vsdoc2.js" ></ script> > <% =jqueryscriptblock %>     

Background declaration variable:

protected string Jqueryscriptblock = @ "<script type="  "Text/javascript"  "src="  "scripts/jquery-1.3.2.min.js"  "></script>";     

Six. Enable scripting IntelliSense in standalone. js files

Above we solve the problem of IntelliSense in the page, in fact, in the Independent. js file We can also enable the IntelliSense of the script, in the Intellisensedemo.js file, add the following statement:

<reference path="Jquery-1.3.2-vsdoc2.js"/>

Updating JScript Intellisense, you will notice that smart hints are also enabled in the script:

Note that the scripting IntelliSense described in this article applies not only to the JQuery class library, but also to the JavaScript code that you write.

Seven. Summary

This article gives a brief introduction to jquery and how to build a scripting development environment. The sample program has no complex functionality and may not be able to make it powerful to anyone who has not touched jquery. But with the "multi-browser support" feature, it's enough for us to learn and use jquery because it's really hard to write Cross-browser scripts today!

In subsequent articles we will delve into jquery selectors, events, tool functions, animations, and Plug-ins.

This Code downloads:
/201009/yuanma/code-jquerystudy-1.rar
Author: Zhang Zixiu
Source: http://www.cnblogs.com/zhangziqiu/