JQuery framework learning day 1: Getting to Know jQuery

Document directory

• 1. provides powerful functions
• 2. Solve browser compatibility issues
• 3. Implement rich UI
• 4. Script knowledge for Error Correction
• 5. Too many! Wait for us to discover them one by one.
• 1. Download The jQuery class library
• 2. Write a program
• 1. control compilation results
• 2. Use backend Variables

JQuery framework learning day 1: Getting to Know jQuery
The second day of jQuery framework Learning: the omnipotent selector in jQuery
The third day of jQuery framework learning: How to manage jQuery packaging Sets
The fourth day of jQuery framework learning: Using jQuery to operate on attributes and styles of Elements
The fifth day of jQuery framework learning: Events and event objects
The sixth day of jQuery framework learning: Ajax applications in jQuery
The seventh day of jQuery framework learning: jQuery animation-jQuery makes the Page Dynamic!
JQuery framework learning: ASP. NET jQuery implementation solution
The ninth day of jQuery framework learning: introduction and use of jQuery tool Functions
The tenth day of jQuery framework learning: Common jQueryUI Functions
11th days of learning the jQuery framework: jQuery Form Verification and jQuery Automatic completion prompt plug-in

I. Summary

This series of articles will take you into the wonderful world of jQuery. Many of them have their specific experiences and solutions. Even if you use jQuery, you can find some tips.

This article is the first to introduce jQuery. It provides a simple example to show you how to compile jQuery code and build a development environment. It explains in detail how to use jQuery in Visual Studio.

For more information, please indicate the products produced by Ziqiu! Blog entry!

Ii. Preface

Sorry first! "Learning ASP from scratch. net mvc "series of articles will not be updated when we will introduce Filter, because recently I have been researching and learning jQuery. people who have read my MVC series will be familiar with the series names and titles. soon, we will provide training to people in the company, so we have made this tutorial specially.

At the same time of writing, I referred to the series of jQuery tutorials on the Internet. I did not find any series of tutorials satisfactory to me on the blog and Google. I like to explain the Knowledge System in depth. I don't like writing the "learning notes" text. at the same time, this series will be completed soon (if there is work pressure, there is motivation), and if time permits, I will continue to update the MVC series of articles. again, I am sorry to my friends who are waiting for the MVC article!

In addition, most of the knowledge points of this series of articles come from the book "jQuery practice" by Turing Publishing House. We recommend that you purchase this book, which is a classic of jQuery books.

Let's start jQuery's journey.

 

Iii. What is jQuery?

JQuery is a Javascript script library. in my blog, I can find the "Javascript lightweight script library" series of articles. the Javascript script library is similar.. NET class library. We encapsulate some tool methods or object methods in the class library for your convenience.

Note that jQuery is a script library rather than a script framework. "library" is not equal to "framework". For example, "System assembly" is a class library, while "ASP. net mvc "is the framework. jQuery does not help us solve the Reference Management and function Management of scripts. These are what the script framework is doing.

The script library can help us complete the encoding logic and implement business functions. using jQuery will greatly improve the efficiency of writing javascript code and make the written code more elegant and robust. at the same time, the rich jQuery plug-ins on the network have turned our work into "drinking tea every day with jQuery"-because we have already stood on the shoulders of giants.

When you create an ASP. net mvc project, you will find that the jQuery class library has been automatically introduced. jQuery is almost a powerful script library of Microsoft! The perfect integration and smart sensing support allow. NET and jQuery to be seamlessly integrated! Therefore, to use. NET, you need to use jQuery instead of Dojo and ExtJS.

JQuery has the following features:

1. provides powerful functions

Using these functions can help us quickly complete various functions and make our code very concise.

2. Solve browser compatibility issues

The compatibility of javascript scripts in different browsers has always been a nightmare for Web developers. A page often runs normally in IE7 and Firefox, and some inexplicable problems occur in IE6. writing different scripts for different browsers is a pain point. with jQuery, we will wake up from this nightmare. For example, the Event event object in jQuery has been formatted as common in all browsers. In the past, we had to obtain the Event Trigger Based on the event, in ie, It is event. under the standard browser such as srcElements and ff, event.tar get. jqueryis a unified eventobject, so that we can use event.tar get in a browser to get the event object.

3. Implement rich UI

JQuery can achieve animation effects such as gradient pop-up and layer movement, so that we can have a better user experience. taking the gradient effect as an example, I wrote a gradient animation that is compatible with ie and ff. It was implemented using a large amount of javascript code, so it took a lot of effort to avoid it, after writing the script, I forgot it for a while without much help. it is effort-consuming to develop similar functions. now, using jQuery can help us quickly complete such applications.

4. Script knowledge for Error Correction

I proposed this article because most developers have incorrect understanding of javascript. for example, compile the DOM statement that is executed during loading on the page, directly add the "onclick" attribute to the HTML element or document object, and do not know that onclick is actually an anonymous function. technicians with these error scripts can complete all the development work, but such programs are not robust. for example, "write the DOM statement that is executed when loading in the page", there is no problem when the Page code is very small and users load quickly, when the page loading is slow, the browser "stop operation" error will occur. jQuery provides a lot of simple methods to help us solve these problems. Once jQuery is used, you will be able to correct these errors-because we all use standard and correct jQuery scripting methods!

5. Too many! Waiting for us to find out one by one. 4. Hello World jQuery

By convention, we compile the jQuery Hello World Program to take the first step of using jQuery.

At the end of this article, you can go to the complete source code in this chapter.

1. Download The jQuery class library

The jQuery project is downloaded on Google Code ,:

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

The above address is the total download list, which contains many versions and types of jQuery libraries, mainly divided into the following categories:

Min: Compressed jQuery class library, used in the formal environment. For example: jquery-1.3.2.min.js

Vsdoc: in Visual Studio, You need to introduce this version of jquery class library to enable intelligent sensing. For example: jquery-1.3.2-vsdoc2.js

Release package: There is no compressed jquery code, as well as documentation and sample programs. For example: jquery-1.3.2-release.zip

2. Write a program

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

<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Hello World jQuery! </Title>
<Script type = "text/javascript" src = "scripts/jquery-1.3.2-vsdoc2.js"> </script>
</Head>
<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 = "modify the content to 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>
</Html>

The effect is as follows:

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

This example uses:

(1) jQuery Id selector: $ ("# btnShow ")

(2) bind event binding function ()

(3) display and hide functions. show () and hide ()

(4) modify the html function of an element. html ()

In the next tutorial, we will go deep into these content.

 

5. Enable Visual Studio's intelligent awareness of jQuery

First, let's take a look at the smart perception surprises that Visual Studio brings to us. To enable Visual Studio to Support SMART awareness, we need the following conditions:

• Install VS2008 SP1
  : Http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
• Install VS 2008 Patch KB958502 to support the "-vsdoc. js" intelliisense file.
  This patch causes Visual Studio to check whether an optional "-vsdoc. js "file. If it exists, use it to drive the JavaScript intelliisense engine. The "-vsdoc. the js file can contain XML comments for help documents on JavaScript methods, and other code intelliisense prompts for dynamic JavaScript signatures that cannot be automatically inferred. You can learn more about the patch here. You can download the patch "here" for free.
• The jquery library of vsdoc version must be referenced.

  <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

When writing a script or even entering "$", VS can intelligently prompt:

When using this method, there will be more tips:

 

With Intelligent Sensing, writing javascript becomes as fast, convenient, and comfortable as C. in most cases, you can write a file successfully at a time without querying the javascript help file for Case sensitivity. the premise that Visual Studio can intelligently perceive jQuery is to introduce the jQuery class library of vsdoc version. in the example, we introduced the "jquery-1.3.2-vsdoc2.js" file. if you reference A jQuery class library of another version, such as min, you cannot enable the smart notification function. however, in the official environment, we must use the jquery library file of the "min" version. Take Version 1.3.2 as an example. The size of each version is as follows:

The first one is the uncompressed jquery library. If you enable gzip compression and use the min version of jquery. js, You can scale the file to 19KB during transmission.

Note: If the script is updated, you can use the "Ctrl + Shift + J" shortcut to update Visual Studio's smart awareness, or click Edit-> intelliisense-> Update JScript intelliisense:

To add a script prompt in Visual Studio and use the script library of the min version when going online, we generally use the following method to introduce the jQuery Library:

1. control compilation results

    <script type="text/javascript" src="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 a recommended method on the Internet. After compilation, only the reference of the min version is available on the page, and smart sensing is available during development. However, pay attention to this method.The referenced min class library can only be 1.2.6 or earlier versions. After referencing all the jquery libraries of the latest 1.3.2 Non-vsdoc version, the JScript intelliisense update error will occur.This is a bug in Version 1.3.2 and is expected to be solved in later versions. In fact, you can use the min library of version 1.2.6. jquery functions involved in this tutorial are basically supported in version 1.2.6.

If (false) is used to make the compiled page not contain references of the jquery library of vsdoc version, the same idea can also be used, for example, to put the script reference into a PlaceHolder and set visible = fasle.

2. Use backend Variables

In order to use the min library of Version 1.3.2, we can only place the Script Reference in the variable and use the page output method to normally update JScript intelliisense. however, some people may not like to use variables at the front end like me:

    <asp:PlaceHolder Visible="false" runat="server">        <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>    </asp:PlaceHolder>    <% =jQueryScriptBlock %>

Background declaration variables:

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

6. Enable script intelligent sensing in an independent. JS File

The above solves the problem of intelligent perception on the page. In fact, we can also enable script intelligent awareness in an independent. js file. In the intelliisensedemo. js file, add the following statement:

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

When you update JScript intelliisense, you will find that smart prompts are also enabled in the script:

 

Note: The Script smart sensing described in this article is not only applicable to jQuery class libraries, but also to self-compiled javascript code.

VII. Summary

This article briefly introduces jQuery and how to build a script development environment. the sample program does not have complex functions, and may not be able to make jQuery-ready people realize its power. however, relying only on the "Multi-browser support" feature is enough for us to learn and use jQuery, because it is really difficult to compile cross-browser scripts!

In subsequent articles, we will go deep into jQuery selector, events, tool functions, animations, and plug-ins.

Download the code in this article:

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

From: http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html