Learn jquery from scratch (i) Getting started with the epoch

This series of articles navigation

Learn jquery from scratch (i) Getting started with the epoch

Learn jquery from scratch (ii) Universal Selector

Learn jquery from scratch (iii) managing the jquery package set

Learn jquery from scratch (iv) attributes and styles for manipulating elements using jquery

Learn jquery (v) Events and event objects from scratch

Learn about jquery from scratch (vi) Ajax in jquery

Learn jquery (Seven) jquery animation from scratch-Get the page moving!

Learn jquery from scratch (eight): jquery implementation

Learn jquery from scratch (ix) jquery tool functions

Learn jquery from scratch (10) jQueryUI common function combat

Learn jquery from scratch (11) Combat form verification and auto-completion prompt plugin

I. Summary

This series of articles will take you to the fascinating world of jquery, where many authors use experience and solutions, even if you use jquery to find some cheats in reading.

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

Reprint please specify Autumn production! Blog Park debut!

Two. Preface

First of all, apologize! The "zero-based learning of ASP. NET MVC" series is not updated when the filter is about to be introduced because I have been studying and learning jquery recently. See the name of this series and the article title, people who have seen my MVC series will be very familiar. Soon to the company's people to do training, so deliberately produced this tutorial.

At the same time I was writing a series of tutorials on online jquery, and I didn't find a series of tutorials that I was happy with in the blog Park and Google. I like to explain the knowledge system in a comprehensible way. Do not like to write the "study notes" type of article. At the same time, the series will be all written soon (with the pressure of work and motivation), then if time permits I will continue to update the MVC series. Once again, say sorry to the friends who are waiting for the MVC article!

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

Let's start the jquery tour.

Three. What is jquery

jquery is a set of JavaScript script libraries. In my blog, you'll find a series of articles on the JavaScript Lightweight script library. 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 script framework. "Library" is not equal to "framework", such as "system Assembly" is a class library, and "ASP" is the framework. jquery does not help us with scripting Reference management and feature management, which is what the scripting Framework does.

The script library helps us to complete the coding logic and implement the business functions. Using jquery will greatly improve the efficiency of writing JavaScript code, making the code written more elegant and more robust. At the same time, the rich jquery plugin on the web also makes our work "with jquery, drinking tea every day"-because we have stood on the shoulders of giants.

When you create an ASP. NET MVC project, you will find that the JQuery class library has been introduced automatically. jquery is almost the Microsoft's Queen Script Library! Perfect integration and IntelliSense support to seamlessly combine. NET and jquery! So use. NET must choose jquery instead of Dojo,extjs.

jquery has the following features:

1. Provides a powerful function function

Using these functions can help us quickly complete a variety of functions and make our code exceptionally concise.

2. Troubleshoot browser compatibility issues

JavaScript scripting compatibility with different browsers has always been a nightmare for web developers, and often a page runs normally under Ie7,firefox, and there are puzzling problems under IE6. It's a pain to write different scripts for different browsers. With jquery we're going to wake up from this nightmare, for example, the event object in jquery has been formatted to be common to all browsers, and has been used to get event triggers based on event, which is event.srcelements under IE. The standard browser, such as FF, is event.target. jquery, by unifying the event object, allows us to use event.target in all browsers to get events objects.

3. Implementing a Rich UI

jquery can be used for example, such as gradient popup, layer movement and other animated effects, let us get a better user experience. As an example of a gradient effect, I used to write a gradient animation that was compatible with IE and FF, using a lot of JavaScript code to do it, and didn't have much to help you forget about it after writing. Developing similar features again is a hassle. Using jquery today can help us quickly complete such applications.

4. Error-Correcting scripting knowledge

This is what I'm proposing, because most developers have a bad understanding of JavaScript.  For example, in the page to write the execution of the operation of the DOM statement, the HTML element or Document object directly add the "onclick" property, do not know that the onclick is actually an anonymous function and so on. A technician with these false scripting knowledge can do all the development work, but such a program is not robust. For example, "write a script that executes when loading on a page", when the page code is very small, the user loads quickly without problems, and when the page loads slightly slower, the browser "terminates the operation" error. jquery provides a number of easy ways to help us solve these problems, Once you use jquery, you will correct the knowledge of these errors--because we are all using standard and correct jquery scripting methods!

5. Too many! Waiting for us to find out. Four. Hello World JQuery

As a rule, let's write the jquery Hello World program to take the first step toward using jquery.

The complete source code for this chapter is available at the end of this article.

1. Download the jquery class Library

The project download for jquery is on Google code:

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: The compressed jquery class library is used in a formal environment. For example: Jquery-1.3.2.min.js

Vsdoc: This version of the JQuery class library needs to be introduced in Visual Studio to enable IntelliSense. such as: Jquery-1.3.2-vsdoc2.js

Release pack: There are no zipped jquery codes, as well as 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:

<! DOCTYPE HTML Public"-//w3c//dtd XHTML 1.0 transitional//en""Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >"Http://www.w3.org/1999/xhtml" >"Text/javascript" src="Scripts/jquery-1.3.2-vsdoc2.js" ></script>"Divmsg" >hello world!</div> <input id="Btnshow" type="Button"Value="Show"/> <input id= "btnhide" Type= "button" value= "hidden"/> <br/> <input id= "Btnchange" Type= "button" value=< span class= "str" > "Modified content is Hello world, too!"/> <script type= "Text/javascript" > $ ( "click", Function (event) {$ ( "#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 the Hello World, and to hide and modify its contents.

This example uses the following:

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

(2) Event binding function bind ()

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

(4) Function HTML to modify the HTML inside the element ()

In the next tutorial we will delve into the learning of these things.

Five. Enable visual Studio 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:

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

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

When writing a script, or even just typing "$", vs can intelligently tip:

There are more hints when you use the method:

With IntelliSense, we write JavaScript as fast, easy, and comfortable as C #. Most cases can be written one at a time without having to query the JavaScript help file for a case. Enables 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. If you reference other versions of the JQuery class library, such as min version, you cannot enable smart hints. But in a 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.

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

In order to add script hints to Visual Studio and to use the Min version of the script library on-line, we typically introduce the jquery library in the following way:

1. Control compilation results

    <typesrc= "scripts/jquery-1.2.6.min.js"></script> <%if (  False) {%> <script type="Text/javascript" src="Scripts/jquery-1.3.2-vsdoc2.js" ></  Script%>            

This is the way to recommend online. Only the min version of the reference is available on the compiled page, and you can enjoy IntelliSense at development time. Note that the Min class library referenced in this way can only be 1.2.6 or previous version numbers. 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, you can fully use the 1.2.6 version of the Min library, this tutorial involves the jquery feature, 1.2.6 version is basically supported.

We used the if (false) to make the compiled page contain no references to the Vsdoc version of the jquery library, and the same idea could be used such as putting a script reference into a placeholder and setting Visible=fasle.

2. Using back-end variables

To be able to use the 1.3.2 version of Min Library, we can only update JScript Intellisense normally by placing the script reference in the variable, through the way of the page output. But maybe somebody's just like me. Use variables on the front-end:

    <VisibleRunat= "Server"<typesrc= "Scripts/jquery-1.3.2-vsdoc2.js"  ></script</asp:placeholder%>        

Background declaration variables:

@ "<script type=" "Text/javascript" "src=""Scripts/jquery-1.3.2.min.js""></script>";  

Six. Enable script IntelliSense in a standalone. js file

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

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

Update JScript Intellisense to find that smart hints are also enabled in the script:

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

Seven. Summary

This article provides a brief introduction to jquery and how to build a script development environment. The sample program has no complex functionality and may not allow anyone who has not touched jquery to recognize its power. But with the "multi-browser support" feature, it's enough to let us 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 plugins.

This article code download:

Http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-1.rar

Learn jquery from scratch (i) Getting started with the epoch