찾다

집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 획기적인 소개 1장_jquery

jQuery 획기적인 소개 1장_jquery

WBOY
WBOY원래의
2016-05-16 18:39:561329검색

1. 요약
2. 서문
3. jQuery란 무엇인가요?
jQuery는 Javascript 스크립트 라이브러리의 집합입니다. 내 블로그에서 "Javascript 경량 스크립트 라이브러리" 시리즈 기사를 찾을 수 있습니다. .NET 클래스 라이브러리의 경우 사용자의 사용을 용이하게 하기 위해 클래스 라이브러리에 일부 도구 메서드나 개체 메서드를 캡슐화합니다.

jQuery는 스크립트 프레임워크가 아니라 스크립트 라이브러리입니다. "framework"와 동일합니다. 예를 들어 "System Assembly"는 클래스 라이브러리이고 "ASP.NET MVC"는 프레임워크입니다. jQuery는 스크립트의 참조 관리 및 기능 관리를 해결하는 데 도움을 줄 수 없습니다.

스크립트 라이브러리는 코딩 논리를 완성하고 비즈니스 기능을 실현하는 데 도움이 됩니다. jQuery를 사용하면 JavaScript 코드 작성의 효율성이 크게 향상되는 동시에 작성된 코드가 더욱 우아해지고 강력해집니다. 인터넷의 풍부한 jQuery 플러그인도 우리 작업을 더 쉽게 만들어 줍니다. 왜냐하면 우리는 이미 거인의 어깨 위에 서 있기 때문입니다.

ASP를 만들 때. NET MVC 프로젝트에는 jQuery 클래스 라이브러리가 자동으로 도입되었습니다. jQuery는 거의 Microsoft의 공식 스크립트 라이브러리입니다! 완벽한 통합 및 지능형 감지 지원을 통해 .NET과 jQuery를 원활하게 결합할 수 있습니다. Dojo, ExtJS 등 대신 jQuery를 선택하세요.

jQuery는 다음과 같은 특징을 가지고 있습니다.

1. 강력한 기능적 기능을 제공합니다. 이러한 기능적 기능을 사용하면 다양한 기능을 빠르게 완성하고 코드를 작성할 수 있습니다.

2. 브라우저 호환성 문제 해결 다양한 브라우저에서 JavaScript 스크립트의 호환성은 웹 개발자에게 항상 악몽이었습니다. IE7과 Firefox에서는 페이지가 정상적으로 실행되지만 IE6에서는 설명할 수 없는 문제가 발생합니다. 다른 브라우저의 경우 다른 스크립트를 작성하는 것은 고통스럽습니다. 예를 들어 jQuery의 Event 개체는 과거에 이벤트 트리거를 기반으로 해야 했습니다. 즉, ff와 같은 표준 브라우저에서는 event.target입니다. jQuery는 이벤트 개체를 통합하여 모든 브라우저에서 이벤트 개체를 가져오는 데 사용할 수 있습니다.

3 . 풍부한 UIjQuery를 구현하면 그라데이션 팝업, 레이어 이동 등과 같은 애니메이션 효과를 얻을 수 있어 더 나은 사용자 경험을 얻을 수 있습니다. 그라데이션 효과를 예로 들면 다음과 같은 그라데이션 애니메이션을 작성한 적이 있습니다. IE, FF와 호환되는데, 엄청난 양의 자바스크립트 코드를 구현하려면 많은 노력이 필요하고, 작성하고 나면 별로 도움이 되지 않고, 시간이 지나면 다시 개발하는데 많은 노력이 필요하게 됩니다. 이제 jQuery를 사용하면 이러한 애플리케이션을 빠르게 완료할 수 있습니다.

4. 대부분의 개발자가 자바스크립트에 대해 잘못 이해하고 있기 때문에 잘못된 스크립팅 지식을 수정하는 것이 좋습니다. HTML 요소에서 DOM을 작동하기 위해 로드할 때 실행되거나 onclick이 실제로 익명 기능이라는 것을 알지 못한 채 문서 객체에 직접 "onclick" 속성을 추가합니다. 이러한 오류 스크립트에 대한 지식을 갖춘 기술 담당자도 모든 개발 작업을 완료할 수 있습니다. , 그러나 그러한 프로그램은 견고하지 않습니다. 예를 들어 "페이지에 로드할 때 실행되는 DOM을 조작하는 명령문을 작성하십시오. 페이지 코드가 작고 사용자가 빠르게 로드하면 문제가 없습니다. 페이지가 로드될 때. 조금 천천히, 브라우저에서 "작업 종료" 오류가 발생합니다. jQuery는 이러한 문제를 해결하는 데 도움이 되는 많은 간단한 방법을 제공하며 일단 jQuery를 사용하면 이러한 실수를 수정할 수 있는 지식을 갖게 됩니다. 왜냐하면 우리는 모두 올바른 표준 jQuery를 사용하고 있기 때문입니다. 스크립팅 방법!

5. 한 명씩 기다려주세요 4. Hello World jQuery
평소대로 jQuery의 Hello World 프로그램을 작성해보겠습니다. jQuery.

이 글의 끝 부분에서 전체 소스 코드를 다운로드할 수 있습니다.
1. jQuery 라이브러리 다운로드

jQuery 프로젝트 다운로드는 Google 코드에 있으며 다운로드 주소는

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

위 주소는 전체 다운로드 목록으로, 다양한 버전과 유형의 jQuery 라이브러리가 포함되어 있으며 주로 다음 범주로 구분됩니다.

min: 공식 환경에서 사용되는 압축된 jQuery 클래스 라이브러리입니다. 예: jquery-1.3.2.min.js

vsdoc: IntelliSense를 활성화하려면 Visual Studio에 이 버전의 jquery 클래스 라이브러리를 도입해야 합니다. 예: jquery-1.3.2-vsdoc2.js

릴리스 패키지: 압축되지 않은 jquery 코드와 문서, 샘플 프로그램이 포함되어 있습니다. 예: jquery-1.3.2-release.zip

2. 작성합니다. 프로그램 HTML 페이지를 생성하고 jQuery 클래스 라이브러리를 도입한 후 다음 코드를 작성합니다.
코드 복사 코드는 다음과 같습니다. :



<머리>
Hello World jQuery!


<본문>
Hello World!









效果如下:

image 

页面上有三个按钮, 分别用来控制Hello World的显示,隐藏和修改其内容.

此示例使用了:

(1) jQuery的Id选择器: $("#btnShow")

(2) 事件绑定函数 bind()

(3) 显示和隐藏函数. show()和hide()

(4) 修改元素内部html的函数html()

在接下来的教程中我们将深入这些内容的学习.

 

五.启用Visual Studio 对jQuery的智能感知

首先看一下Visual Studio带给我们的智能感知惊喜. 要让Visual Studio支持智能感知, 需要下列条件:

  • 安装 VS2008 SP1
    下载地址: http://msdn.microsoft.com/en-us/vstudio/cc533448.aspx
  • 安装VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.
    该补丁会导致Visual Studio在一个JavaScript库被引用时，查找是否存在一个可选的"-vsdoc.js"文件，如果存在的话，就用它来驱动JavaScript intellisense引擎。这些加了注释的"-vsdoc.js"文件可以包含对JavaScript方法提供了帮助文档的XML注释，以及对无法自动推断出的动态JavaScript签名的另外的代码intellisense提示。你可以在"这里"了解该补丁的详情。你可以在"这里"免费下载该补丁。
  • 必须要引用vsdoc版本的jquery库 
    <span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN> <SPAN class=attr>src</SPAN><SPAN class=kwrd>="scripts/jquery-1.3.2-vsdoc2.js"</SPAN><SPAN class=kwrd>></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></span>


在编写脚本的时候, 甚至刚刚输入"$"的时候,VS可以智能提示:

image

在使用方法时, 还会有更多的提示:

image

 

有了智能感知我们编写javascript变得和C#一样快速,便捷,舒服.大部分情况可以一次编写成功而不用再为了一个大小写而查询javascript帮助文件.能够让Visual Studio对jQuery实现智能感知的前提是要引入vsdoc版本的jQuery类库. 示例中我们引入了"jquery-1.3.2-vsdoc2.js"文件. 如果引用其他版本比如min版本的jQuery类库就无法启用智能提示.但是在正式环境下, 我们必须要使用"min"版本的jquery库文件, 以1.3.2版本号为例,各个版本的大小如下:

image

其中第一个是未压缩的jquery库. 如果启用gzip压缩并且使用min版本的jquery.js可以在传输过程中压缩到19KB.

注意,如果我们更新了脚本, 可以通过"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感知,或者单击 编辑->IntelliSense->更新JScript Intellisense:

image

为了即能在Visual Studio中增加脚本提示, 又能在上线的时候使用min版本的脚本库, 我们一般是用如下方式引入jQuery库:

1. 控制编译结果

  <span class="kwrd"><</SPAN><SPAN class=html>script</SPAN> <SPAN class=attr>type</SPAN><SPAN class=kwrd>="text/javascript"</SPAN> <SPAN class=attr>src</SPAN><SPAN class=kwrd>="scripts/jquery-1.2.6.min.js"</SPAN><SPAN class=kwrd>></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></span>
  <%<SPAN class=kwrd>if</SPAN> (<SPAN class=kwrd>false</SPAN>)
   { %>
  <script type=<SPAN class=str>"text/javascript"</SPAN> src=<SPAN class=str>"scripts/jquery-1.3.2-vsdoc2.js"</SPAN>><span class="kwrd"></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></span>  
  <span class="asp"><%</SPAN>} <SPAN class=asp>%></span>

这是网上推荐的方式. 编译后的页面上只有min版本的引用, 同时在开发时能够享受到智能感知.但是注意这种方式引用的min类库只能是1.2.6或者之前的版本号. 最新的1.3.2的所有非vsdoc版本的jquery库引用后都会导致JScript Intellisense更新出错. 这是1.3.2版本的一个bug, 期待后续版本中解决. 其实大家完全可以使用1.2.6版本的min库, 本教程涉及的jquery功能, 1.2.6版本基本都支持.

我们使用了if(false)让编译后的页面不包含vsdoc版本jquery库的引用, 同样的思路还可以使用比如将脚本引用放入一个PlaceHolder并设置visible=fasle等.

2. 使用后端变量

为了能使用 1.3.2 版本的min库, 我们只能通过将脚本引用放在变量里, 通过页面输出的方式, 此种方式可以正常更新JScript Intellisense.但是可能有人和我一样不喜欢在前端使用变量:

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


后台声明变量:

<span class="kwrd">protected</span> <span class="kwrd">string</span> jQueryScriptBlock = <span class="str">@"<script type="</SPAN><SPAN class=str>"text/javascript"</SPAN><SPAN class=str>" src="</SPAN><SPAN class=str>"scripts/jquery-1.3.2.min.js"</SPAN><SPAN class=str>"></script>"</span>;
 <style type="text/css">



.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style><br><br><br>

 

 

六.在独立的.JS文件中启用脚本智能感知

上面我们解决了在页面中智能感知的问题, 其实在独立的.js文件中我们同样可以启用脚本的智能感知, 在IntellisenseDemo.js文件中,添加如下语句:

/// <reference path=<SPAN class=str>"jquery-1.3.2-vsdoc2.js"</SPAN> /><br>
 

更新JScript Intellisense, 会发现在脚本中也启用了智能提示:

 

image

注意,本文中讲解的脚本智能感知不仅适用于jQuery类库, 还适用于自己编写的javascript代码.

 

七.总结

本文简单介绍了jQuery, 以及如何搭建脚本开发环境. 示例程序没有复杂的功能, 可能还无法让没有接触过jQuery的人认识到它的强大.但是仅凭借"多浏览器支持"这一特性, 就足以让我们学习并使用jQuery, 因为如今想编写跨浏览器的脚本真的是一件困难的事情!

다음 기사에서는 jQuery 선택기, 이벤트, 유틸리티 함수, 애니메이션, 플러그인 등에 대해 자세히 알아볼 것입니다.
이 기사의 코드 패키지 다운로드 http:// xiazai.jb51.net/200912/yuanma/Code-jQueryStudy-1.rar

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：현재 page_javascript 스킬의 내용을 검색하는데 사용할 수 있는 js 코드다음 기사：현재 page_javascript 스킬의 내용을 검색하는데 사용할 수 있는 js 코드

관련 기사

더보기