如何开始使用jQuery:使JavaScript编程更容易

披露: 您的支持有助于保持网站的正常运行!我们会为此页面上推荐的某些服务收取推荐费.


最后,所有网站中超过90%都在运行JavaScript。作为最受欢迎的JavaScript库,大多数现代网站都使用jQuery,并且在网络上一千万个最受欢迎的网站中,约有65%.

这意味着如果您想成为Web开发人员,网站设计师或网站管理员,则需要知道如何使用jQuery.

jQuery简介

什么是jQuery?

JavaScript是用于向网站添加交互性的编程语言。 jQuery是一个预先构建的JavaScript函数库,用于处理通常由JavaScript管理的任务。本质上,jQuery使使用JavaScript变得更加轻松快捷。.

jQuery是一个命令库,可以根据访问者的活动轻松地找到,选择和处理网页上的HTML元素。例如,使用jQuery您可以选择特定元素,例如所有

标头元素,并根据访问者的活动以某种方式对它们进行操作,例如当鼠标悬停在它们上面时更改字体大小.

jQuery的优势在于它能够轻松定位和选择HTML元素,而无需将任何其他属性应用于HTML元素.

jQuery使艰苦的事情变得容易

jQuery可以做的任何事情,JavaScript都可以做。区别在于,使用JavaScript可以完成许多非常复杂的事情,而使用jQuery则非常容易。我们来看两个示例:切换和触发.

使用切换隐藏或显示页面元素

CSS显示属性可用于隐藏HTML元素。使用CSS选择器选择任何HTML元素,并将值none应用于display属性,该元素将从视图中隐藏。如果要在命令中隐藏HTML元素,则可以通过CSS display属性来实现.

通过控制CSS显示属性,使用JavaScript来隐藏或显示HTML元素并不难。但是,jQuery toggle()方法包含许多内置选项,这些选项可以轻松产生强大的切换效果,而这些效果很难用JavaScript复制。如果在HTML文档中除了样板jQuery之外还包括jQuery UI,则还可以使用多种jQuery UI效果来控制隐藏和显示切换元素的方式.

如果您想学习如何使用jQuery toggle()方法,可以从很多地方开始:

  • 学习jQuery:来自jQuery Foundation的免费教育资源。完整的jQuery教程值得完成,我们在本文档末尾的资源中提供了链接。但是,如果您想直接转到解释切换方法的部分,请使用此链接。.
  • jQuery API Documentation:切换方法及其可使用的所有选项的概述.
  • jQuery UI效果和切换:jQuery UI用多种效果扩展了toggle方法。此外,它还提供了现场演示,演示了效果如何与切换方法互补.
  • W3Schools的jQuery toggle()方法:toggle方法和代码沙箱的快速介绍,您可以在其中试用.
  • 两个YouTube视频教程,分别是Akshay Jaiswal的jQuery Toggle Effect教程和Harry Finn的jQuery Toggle effect教程,简要演示了如何构建包含jQuery的HTML文档以及如何使用toggle方法隐藏或显示HTML元素。.

使用触发事件处理程序执行脚本

jQuery非常容易实现的另一项任务是触发事件处理程序,即使实际事件尚未发生。例如,假设您有一个脚本,该脚本每次使用JavaScript onclick事件单击特定按钮时都会执行。现在,如果您还希望在每次执行不同操作(就像单击按钮本身一样)时都运行同一脚本,该怎么办? trigger()事件处理程序就是答案.

触发方法的基本用法包括将触发方法应用于特定事件,并在第一个事件发生时使用它来触发第二个事件。这听起来可能很复杂,但是触发方法的基本用法很简单。使用以下资源介绍基础知识,并了解该方法的一些更高级用法.

  • 触发事件处理程序:使用此链接可直接转到Learn jQuery教程中有关触发事件处理程序的章节.
  • jQuery API Documentation:触发器方法以及可与其一起使用的所有参数和选项的概述.
  • W3Schools的jQuery trigger()方法:jQuery触发器方法的介绍和用于测试代码的代码沙箱.
  • 如何在jQuery中创建自定义事件:Sitepoint教程介绍了如何创建自定义jQuery事件,以便您可以将触发方法与自定义事件一起使用,而不是内置jQuery事件.
  • 不要使用jQuery触发真实事件名称!许多开发人员使用标准的jQuery事件,例如 "点击" 作为触发事件的事件类型。但是,这可能会产生问题,David Walsh建议将触发事件与自定义事件一起使用.

使用jQuery的优点

如果jQuery使得使用JavaScript更容易,那么为什么我们完全使用jQuery?为什么不坚持使用JavaScript并避免必须学习一套全新的命令和实现呢??

根据Wikipedia的说法,jQuery至少具有四个优点.

  1. jQuery鼓励脚本和HTML分开. 虽然可以将脚本直接编写到HTML文档中,但是Web设计和开发社区中的当前思想是HTML,CSS和JavaScript都应单独维护。由于必须存在一种将脚本与特定的HTML元素和事件相关联的方法,这使情况变得复杂。没有jQuery,最简单的方法是将事件属性添加到调用JavaScript函数的HTML文档中。但是,jQuery通过提供一种简单的语法来使用JavaScript动态添加事件处理程序来解决此问题。这样可以将JavaScript与HTML文档完全分开.
  2. jQuery鼓励编码人员编写更简短的脚本. jQuery专为简洁而设计。您可以使用jQuery进行的任何操作,也可以使用普通JavaScript进行的操作。但是,完成相同任务的jQuery代码通常比JavaScript代码更短,更清晰。.
  3. 使用jQuery消除了跨浏览器的不一致. 尽管不同的浏览器引擎对JavaScript的渲染有些不同,但jQuery已开发来处理跨浏览器的差异并提供跨浏览器的一致体验。.
  4. jQuery是可扩展的. jQuery库的设计使其易于补充新的元素,事件和方法。将这些新项目添加到本地jQuery库后,它们可以作为插件轻松地在整个网站上重复使用.

jQuery入门

如果您准备开始学习如何使用jQuery,并且还不熟悉JavaScript,那么学习jQuery的第一步就是学习JavaScript。.

如前所述,jQuery是JavaScript命令库。结果,jQuery遵循与JavaScript相同的基本语法和结构。掌握JavaScript的语法,结构和基本功能对于掌握jQuery至关重要。根据jQuery Foundation:

jQuery的所有功能都可以通过JavaScript进行访问,因此对JavaScript的深入了解对于理解,构建和调试代码至关重要。随着时间的流逝,定期使用jQuery可以提高您对JavaScript的熟练程度,但是如果不具备JavaScript的内置结构和语法的使用知识,可能很难开始编写jQuery.

您的开发环境

在开始编码之前,您需要设置开发环境。好消息是,开始编写jQuery所需的全部工作是Web浏览器,文本编辑器和jQuery副本.

尽管可以使用任何网络浏览器,但开发人员都可以使用Mozilla Firefox或Google Chrome。虽然您还应该具有Internet Explorer或Edge,Opera和Safari来在多个浏览器中测试代码,但是如果您尚未使用Firefox或Chrome,请下载并安装这些免费应用程序之一或全部的最新版本,然后将其用于开发目的.

当然,您可以使用记事本编写代码,但是为什么要这么做呢?有许多出色的文本编辑器可免费使用或以非常合理的价格购买,这些编辑器提供了许多旨在简化编码并减少错误发生的功能。我们的一些收藏夹是Atom,Apple计算机的TextMate,Windows计算机的Notepad ++和托架.

最后,由于jQuery是基于JavaScript构建的命令库,因此您需要从所有使用jQuery的文档中调用jQuery库。为此,您需要下载jQuery,或链接到在线托管的jQuery库.

资源资源

我们在网络上搜寻了最佳的jQuery教程,电子书和互动课程。我们的建议是您利用其中的一些资源,并通过最适合您的学习方式的资源来工作.

我们建议的培训进度从一些基本的交互式教程开始,这些教程将向您展示jQuery的强大功能,并演示世界上最受欢迎的JavaScript库可以实现的功能。接下来,通过复习由Web开发中一些最受尊敬的名字提供的深入教程来深入研究jQuery,其中包括Mozilla开发人员网络和jQuery Foundation。最后,通过逐步阅读电子书或平装书文本来掌握jQuery.

免费互动课程

书面文档只能做很多事情来解释编程语言的工作原理和作用。要真正掌握语言的力量,您必须看到它的实际作用。免费的交互式课程是快速掌握编程语言的基本语法,同时学习其实际功能的最佳方法之一.

由于jQuery Foundation建议您在学习jQuery之前先学习JavaScript,因此我们建议您也这样做。这些免费课程将使您立即编写基本的JavaScipt:

  • CodeSchool的JavaScript Road Trip第1部分:仅此之旅的第1部分是免费的。其余行程都隐藏在付费墙后面。浏览免费内容,然后前往Codecademy继续学习.
  • JavaScript by Codecademy:在此在线全长课程中,此内容是免费的。参加测验是可选的,并且确实带有价格标签。该课程大约需要十个小时才能完成,并且使您能够编写基本的JavaScript代码。通过本课程的学习,您将准备解决一些jQuery.

您应该学习两门互动式jQuery课程,以对jQuery的功能有一个基本的了解。这些课程包括:

  • 尝试jQuery:免费的jQuery简介,由jQuery基金会与CodeSchool合作编写.
  • Codecademy的jQuery:本课程大约需要三个小时。与JavaScript课程一样,该课程的内容是免费的,但是如果您要参加测验,则必须为此付费。我们的建议是浏览免费内容,然后继续使用其他资源。当您完成操作时,您将了解如何使用jQuery选择HTML元素,如何设置这些元素的样式以及如何将网站访问者操作与jQuery代码相关联,以使网站以交互方式做出响应.

业界领导者的深入教程和学习指南

学习JavaScript和jQuery应该齐头并进。如果您准备进一步使用jQuery,则还需要扩展您的JavaScript知识。 Mozilla开发人员网络(MDN)是学习JavaScript的最佳场所之一。查阅以下重要资源:

  • JavaScript基础知识:虽然您可能会通过我们推荐的互动课程学习了如何实际使用JavaScript的基础知识,但在MDN上,您将了解专业的开发人员如何考虑和使用JavaScript。如果您仔细阅读,本文档将需要几个小时才能完全消化.
  • JavaScript指南:这份详尽的指南和教程将带您逐步了解JavaScript语言的所有基础主题,包括函数,错误处理,循环,语法,表达式等。通过本指南,您将了解普通Web设计师所需要的更多JavaScript。.

如果您是通过MDN的JavaScript资源完成的,那么您将完全准备好应对jQuery Foundation提供的培训。在jQuery Foundation网站上,您可以找到按章节组织的广泛学习中心。每章都专门讨论一个特定主题,例如About jQuery,Effects,Ajax,Plugins等。这个权威的资源是详尽而又技术性的,这正是您精通jQuery所需要的.

电子书和平装本

一旦您遍历了我们已经介绍的资源,便可以使用jQuery解决任何常见的网页设计方案。此外,您将具备足够的知识,可以找到使用jQuery API解决更复杂问题所需的帮助.

当您准备成为高级jQuery开发人员之后,有一些文本可以为您提供帮助.

免费电子书

我们在jQuery社区中找到了两本享有很高声誉的免费电子书。借助一些jQuery编码经验,通过逐步尝试以下一种或两种高质量的文本,可以提高对最受欢迎的JavaScript库的了解:

  • BoCoup,LLC。的jQuery Fundamentals:部分为电子书和一部分为交互式教程,本文以书面格式和实际示例涵盖了jQuery。.
  • jQuery Succinctly,由Cody Lindley编写,由Syncfusion主持:一百页文字,涵盖了高级jQuery开发所必需的概念。如果您只是入门,那么这不是您想要的文本,但是如果您是一位精通JavaScript或jQuery的开发人员,可以开始下一步,那么此文本就是一个不错的选择.

平装文本

如果您更喜欢物理文本,那么以下是当今可用的一些最佳jQuery文本:

  • 学习jQuery:jQuery Foundation Boards Advisors的现任成员Karl Swedberg,以及Web开发人员和有影响力的Drupal程序员Jonathan Chaffer,设计了此文本,使其适合JavaScript新手或经验丰富的开发人员。此文本也可用于Kindle.
  • JavaScript和JQuery,交互式前端Web开发:Jon Duckett的这段文字补充了他有关HTML和CSS的领先文字,并且可能是当今最受欢迎的JavaScript和jQuery文字.
  • Bear Bibeault,Yehuda Katz和Aurelio De Rosa编写的jQuery in Action:Katz和De Rosa都是jQuery基金会的活跃成员– Katz是顾问委员会的成员,而De Rosa是内容团队的成员。此权威文本是对jQuery的快速了解,非常适合初学者JavaScript开发人员.

用jQuery设计

在本部分中,我们将研究如何使用jQuery设计令人惊叹的交互网站。到最后,您将了解可用的工具,并拥有所需的所有知识,资源和工具.

的JavaScript

JavaScript是每种现代Web浏览器中内置的编程语言。与HTML和CSS一起,它是现代网络技术三合会中的第三条腿.

JavaScript是一种高级通用编程语言,可用于网络上和网络外的各种脚本任务。设计人员使用JavaScript的主要方式是增强用户交互。样式更改和AJAX调用是可以使用JavaScript支持的用户交互的两个示例。让我们简要地看一下.

但首先,我们将退后一步,讨论JavaScript的某些方面.

使用JavaScript更改样式

虽然网页的样式通常是级联样式表(CSS)的领域,但是JavaScript可用于处理CSS。可以通过选择一个元素并使用style属性来直接操纵样式,如下所示:

我的Div的内容

document.getElementById("我的div").style.backgroundColor = "蓝色";

这段JavaScript捕获ID为my-div的元素,并应用蓝色的背景色。虽然直接使用JavaScript操纵CSS很有用,但是如果您想一次更改一堆样式,那么将这些样式包含在网站CSS中要容易得多,然后使用JavaScript来应用样式。这是完成此操作的一种方法:

.第一州{
背景颜色:#303030;
颜色:#fff;
边框:3px实线#ddd;
宽度:200像素;
高度:200px;
}
.第二州{
背景颜色:#ddd;
颜色:#333;
边框:3px实线#333;
宽度:300像素;
高度:300像素;
}

我的Div的内容

document.getElementById("我的div").onclick = function(){
this.className = "第二状态";
}

现在,当单击具有my-div的id属性的div元素时,将删除第一状态类并替换为第二状态类,并将应用第二状态类CSS.

添加类动画

使用AJAX即时更新内容

AJAX代表异步JavaScript和XML,是一种用于在不刷新页面的情况下向网页添加内容的技术。基本思想是JavaScript将数据发送到幕后的Web服务器,从服务器接收响应,并根据该响应调整网页内容.

这听起来可能有点理论上的问题,所以让我们开始实践吧。 AJAX使诸如自动完成功能,无限滚动和即时搜索结果之类的事情成为可能。在每种情况下,网页都会将数据发送到Web服务器,并将响应加载到网页中而无需刷新.

实现AJAX调用是一项具有挑战性的任务,并且超出了基本的JavaScript编程范围。但是,作为前端开发人员或设计师,AJAX是您几乎无法缺少的一项JavaScript功能。在下一节中,我们将重点介绍出色的AJAX资源.

JavaScript资源

如果您的JavaScript技巧有些生锈,这里有3个出色的资源,它们将使您重新起步:

  • CodeCademy的JavaScript课程在基于浏览器的交互式课程中介绍了语法,循环,控制流,数据结构和对象.
  • Mozilla开发人员网络(MDN)JavaScript基础教程是JavaScript语法,变量,运算符,条件,函数和事件的简介。.
  • 《 MDN AJAX入门》是一个简短的教程,涵盖了基本的AJAX调用。 MDN上还提供了其他文章,涵盖了高级AJAX技术.

尽管JavaScript功能强大,但jQuery可以让您以更少的精力做更多的事情.

jQuery:准备去摇滚世界

将jQuery视为一堆预构建的JavaScript构建块。让我们看一个基本的例子。在JavaScript中,然后在jQuery中,首先选择一个ID为my-div的元素的方法如下:.

// JavaScript
document.getElementById(’my-div’);

// jQuery
$(’#my-div’);

通过id选择元素在两种语言中都非常容易。但是,正如您所看到的,与使用JavaScript相比,使用jQuery进行键击的时间大约少了25次.

将jQuery添加到HTML文档

您必须先加载jQuery,然后才能使用它,并且有两种简单的方法可以加载它。您可以下载jQuery并包含本地副本,也可以使用托管副本,例如Google Hosted Libraries.

这是您要包含在HTML文档中以加载jQuery的代码:

请注意,在编写jQuery时,必须在jQuery核心加载后加载代码.

在WordPress中使用jQuery

要注意的一个特别注意事项是,当您在WordPress网站上使用jQuery时,必须使用jQuery来为代码加上前缀而不是$。您可以使用一些变通方法来使$前缀起作用,但是如果失败,只需在代码中加上jQuery前缀即可,如下所示:

//普通jQuery
$(’#my-div’);

// WordPress的jQuery
jQuery(’#my-div’);

jQuery CSS

正如您可以使用JavaScript来操纵CSS一样,您也可以使用jQuery做同样的事情.

我们可以使用jQuery非常有效地操作类。下面的脚本监视鼠标单击id为my-div的元素,然后删除一个类并添加另一个类。您可以使用此代码在两个CSS类之间切换.

var myDiv = $(’#my-div’);
$(myDiv).click(function(){
如果($(’#my-div’).hasClass(’first-state’)){
$(’#my-div’).removeClass(’first-state’);
$(’#my-div’).addClass(’second-state’);
}
否则if($(’#my-div’).hasClass(’second-state’)){
$(’#my-div’).removeClass(’second-state’);
$(’#my-div’).addClass(’first-state’);
}
})

这样做很有帮助,不过,我们可以改用.toggleClass()来简化操作.

var myDiv = $(’#my-div’);
$(myDiv).click(function(){
$(myDiv).toggleClass(’first-state’);
$(myDiv).toggleClass(’second-state’);
})

让我们看看这种过渡.

切换类动画

还有许多其他的jQuery CSS方法。最值得注意的是,.css()方法可用于直接操作目标元素的CSS。其他方法(例如.height()和.width())可用于定位特定的CSS值.

jQuery特效

jQuery内置了多种效果。这些效果与其他jQuery方法和功能串在一起,以控​​制对页面元素所做更改的执行.

那是一个大问题,所以让我们看一个例子。如果返回到.toggleClass()函数,则可以添加一些效果以平滑过渡.

var myDiv = $(’#my-div’);
$(myDiv).click(function(){
$(this).fadeOut(’slow’,function(){
$(this).toggleClass(’first-state’);
$(this).toggleClass(’second-state’);
})
$(this).fadeIn(’slow’);
})

该代码的作用是淡出元素,切换类,然后淡入更改的元素.

切换效果动画

fadeOut()和fadeIn()效果只是几种可用的jQuery效果中的两个。此外,所有效果都可以采用许多不同的选项来微调其行为.

jQuery事件

在本教程中,我们已经多次看到一个jQuery事件:.click(),当用户单击目标元素时将触发该事件。但是,还有许多其他事件可用.

用于定位用户操作的事件包括.click()、. dblclick()、. hover()、. mouseenter()、. mouseleave()和.mousemove(),它们都是不言自明的。还有一些事件处理程序可以监视页面元素的更改:

  • .change()检测表单元素何时更改。同样,.submit()检测何时提交表单.
  • .当目标元素获得焦点时触发focus().
  • .当浏览器建立网页后,ready()就会触发.
  • .调整视口大小时,resize()触发代码运行.
  • .trigger()将一个事件与另一个相关事件联系起来.

本简要指南中未涉及其他jQuery事件。通过参考jQuery文档或建议的资源了解更多信息.

jQuery UI

jQuery UI是jQuery的扩展,其中包括功能强大的UI小部件和工具。与从头开始编码相同功能相比,实现jQuery UI功能(例如手风琴小部件)非常简单.

jQuery UI功能可以分为四类:小部件,效果,交互和实用程序。让我们来看看每个。但是首先,我们需要知道如何将jQuery UI添加到HTML文档中.

将jQuery UI添加到HTML文档

加载jQuery UI时,有两种选择:下载并包含本地副本或包含CDN托管的副本.

此外,请记住以下几点:

  • CSS样式表链接应放在文档标题中.
  • jQuery UI脚本应该位于结束body标签的正上方.
  • 必须先加载jQuery核心(jquery.js或jquery.min.js),然后再加载jQuery UI(jquery-ui.js或jquery-ui.min.js)。.

jQuery UI主题

当您下载jQuery UI副本时,下载生成器允许您包含主题。这是因为jQuery UI小部件需要默认样式。您选择的jQuery UI主题定义了默认的小部件样式,并且相关的代码包含在jquery-ui.css中.

如果您确实选择使用Google托管的选项,请注意主题名称将放在文件名称的前面:…/ smoothness / jquery-ui.css。平滑度是默认的jQuery UI主题。您可以在构建URL时通过替换主题名称来使用任何主题.

另外,jQuery UI网站提供了一个ThemeRoller,您可以使用它来构建自己的主题,并在下载jQuery UI时将其包括在内。.

jQuery UI小部件

小部件使创建有用的UI元素变得相对容易,而使用纯JavaScript和CSS创建有用的UI元素需要花费大量的代码。让我们看一些最有用的jQuery小部件(单击任何一个即可进入演示):

  • 手风琴可让您将信息隐藏在标题后面,并通过切换打开和关闭的每个部分来显示信息.
  • 制表符是手风琴的替代品。它们是节省空间的信息展示方式.
  • jQuery UI中的按钮漂亮且始终如一.
  • 可以将Datepicker添加到表单中,以确保正确选择日期并设置日期格式.
  • 进度条提供了视觉上的指示,说明在实现目标方面已经取得了多少进展.
  • 滑块允许用户在提交表单时选择一个值或一个值范围.
  • 微调框添加上下箭头,用于在表单字段中输入数字.
  • 工具提示可用于向表单用户提供特定于字段的信息.

为了让您了解如何轻松实现小部件,这里是创建一组手风琴所需的所有代码:

手风琴第一节

手风琴的内容。您可以使用段落,列表,链接等.

手风琴第二节

就像我说的.

  • 能够
  • 采用
  • 清单

手风琴第3节

而已。超级容易.

$(function(){
$( "#手风琴" )。手风琴();
});

如您所见,HTML比将HTML变成手风琴所需的几行jQuery长得多。.

jQuery UI手风琴动画

jQuery UI效果

该类别中的大多数方法都是核心jQuery方法的扩展。例如,如果您要操作类,则jQuery UI中都可以使用.addClass()、. removeClass()和.toggleClass()方法,以及其他方法.switchClass()。不同之处在于,在jQuery UI中,这些方法包括其他选项,例如直接向方法本身添加过渡效果的功能。.

让我们看一个例子。还记得我们使用.fadeIn()和.fadeOut()来更改div的外观吗?好吧,我们可以使用jQuery UI用更少的代码创建更好的效果.

var myDiv = $(’#my-div’);
$(myDiv).click(function(){
$(this).toggleClass(’second-state’,1000);
})

这是行动的过渡.

jQuery UI切换类动画

您需要了解的其他几种效果方法包括:

  • .show()方法删除显示内容:none;来自目标元素.
  • .hide()方法添加显示:none;到目标元素.
  • .toggle()方法将在可见状态和隐藏状态之间切换目标元素.
jQuery UI效果动画

有15种不同的效果动画,它们的名称分别为盲目,反弹,剪辑,掉落和爆炸。让我们看一个幻灯片效果的例子.

var myDiv = $(’#my-div’);
var myButton = $(’#my-button’);
$(myButton).click(function(){
$(myDiv).toggle( "滑动" );
})

在这种情况下,我们添加了一个按钮来在屏幕上上下滑动div。让我们来看看div中隐藏了div的div的样子.

jQuery UI隐藏动画

这些jQuery过渡效果可以应用于.show()、. hide()和.toggle()方法。 jQuery UI网站包含一个效果预览工具,您可以使用它来决定哪种效果最适合您的实现.

简化jQuery UI过渡

jQuery核心仅包括两个缓动:摆动和线性。但是,jQuery UI添加了20多个缓动。让我们回顾一下.toggle()方法的实现,这次添加了两种不同的缓动.

var myButton = $(’#my-button’);
$(myButton).click(function(){
$(’#first-div’).toggleClass(’second-state’,2000,’easeInOutQuad’);
$(’#second-div’).toggleClass(’second-state’,2000,’easeInOutExpo’);
})

在此示例中,有两个div。两者都将在2秒内转换为第二状态。但是,每个人都会使用不同的宽松政策。让我们来看看.

jQuery UI缓动动画

jQuery UI交互

交互是一组jQuery UI方法,允许网站和应用程序用户选择和移动页面元素。有五种jQuery UI交互。单击下面的任何链接,将带您到jQuery UI网站上的每个交互的演示。.

  • Draggable交互允许用户通过使用鼠标拖放来重新定位网页元素.
  • Droppable交互与可拖动交互紧密配合。要使用它,可拖动项目和可拖放项目必须在网页上均可用。当将可拖动项拖放到可拖放项上时,将触发操作.
  • 可调整大小完全按照您的想法进行:它使页面元素可调整大小.
  • Selectable可以通过一次单击一个列表,或者按住Ctrl或单击并拖动多个项目以一次选择多个项目,从而使列表中的项目成为可选项目.
  • 可排序使得可以以任何顺序重新排列列表项.

jQuery UI交互并不是您希望在一般网站上实现的那种功能。但是,如果您要创建互动式网络应用,游戏或复杂表格,这些互动将非常方便.

jQuery UI实用程序

可以扩展jQuery UI,而小部件工厂就是用来扩展它的实用程序。小部件工厂允许您将多个jQuery UI方法,样式和功能打包到单个可重用小部件中.

如果您熟悉面向对象的编程,那么将jQuery UI小部件视为对象可能会有所帮助。因此,jQuery UI手风琴实际上是手风琴类的对象。小部件工厂允许您执行的操作是定义新的小部件类,然后使用该类创建多个对象,这与创建类并在OOP中一遍又一遍地使用相同.

另一个有用的jQuery UI实用程序是.position()方法。使用此方法,您可以定义任何元素相对于另一个元素或用户操作的位置。一旦掌握了该方法,该方法就非常简单。让我们看一个例子.

$(’#second-div’).position({
我的:“左上方”,
位于:“右下”,
的:’#first-div’
});

这段代码说明,id为second-div的元素的左上角应位于id为first-div的元素的右下角,如下所示:

jQuery UI位置动画

另外,可以基于用户动作来定位项目。让我们调整代码以使用鼠标的位置而不是第一个div来确定第二个div的位置.

$(document).mousemove(函数(事件){
$(’#second-div’).position({
我的:“中心”,
的:事件,
碰撞:“适合”
})
})

该代码为.mousemove()事件添加了一个侦听器,该事件将在每次鼠标进入文档时触发。发生这种情况时,将根据鼠标的位置确定目标div的.position().

让我们来看看.

jQuery UI位置Mousemove动画

jQuery Mobile

jQuery Mobile是jQuery库的另一个扩展。它用于创建触摸优化的响应式网站和应用程序.

在考虑jQuery Mobile时,实际上应该重点放在触摸优化上。 jQuery和jQuery UI的许多核心方法和事件不适用于移动设备,而jQuery Mobile解决了该缺点。与jQuery UI(仅可用于支持网站的一个或两个方面)不同,jQuery Mobile旨在成为基于触摸的响应式网站和应用程序的全有或全无的解决方案.

该库包含大量的响应式,触摸优化的按钮,日期选择器,表单元素,滑动事件,导航元素,表格,选项卡,滑块等。另外,jQuery Mobile包含一个ThemeRoller.

使用jQuery Mobile的挑战在于其全有或全无的方法。它旨在为网站和应用程序的桌面版本创建全部替换。如果您希望有一个可以在所有设备上运行的网站或应用,那么jQuery Mobile并不是您想要的。如果确实将jQuery Mobile用于可在所有设备上运行的应用程序或网站(不支持触摸功能),则需要通过检测设备类型,大小和触摸屏的存在来找到打开和关闭jQuery Mobile的方法。.

设计资源

我们已经指出了一些可以学习JavaScript的地方。如果您还不懂JavaScript,请在​​开始使用jQuery之前先发展这些技能。一旦掌握了JavaScript,以下资源将帮助您快速掌握jQuery,jQuery UI和jQuery Mobile.

  • jQuery Foundation学习中心是学习jQuery的官方(也是最好的)场所。在这里,您将找到一个基于章节的课程,内容涉及基础知识,事件和效果,AJAX,插件等。准备就绪后,您还可以学习如何使用jQuery UI和jQuery Mobile.
  • 从头开始学习jQuery是一个基于项目的教程,它将帮助您提高作为jQuery程序员的信心.
  • CodeCademy jQuery课程向您教授jQuery语法,以及如何编写基本功能,修改DOM元素,使用事件和实现效果的方法.
  • Bocoup的jQuery Fundamentals是一本带有内置JavaScript控制台的电子书,因此您可以在浏览器中直接尝试代码。它涵盖了jQuery基础知识,遍历和操纵DOM元素,事件,效果和AJAX.

设计师需要jQuery

jQuery,jQuery UI和jQuery Mobile的扩展添加了许多小部件,交互,方法,效果和触摸优化工具。掌握这些内容将使您成为更好的设计师和开发人员,因为您将能够构建功能强大的交互式网络应用程序而不会浪费任何按键.

其他有趣的东西

我们有更多与编码和网站开发有关的指南,教程和信息图:

  • CSS3 —简介,指南 & 资源:这是开始学习网页布局的好地方.
  • ASP.NET资源:本指南将指导您使用Microsoft的.NET框架来创建网页.

您应该学习什么代码?

对应该学习哪种编程语言感到困惑?查看我们的信息图,您应该学习什么代码?它不仅讨论了语言的不同方面,还回答了一些重要问题,例如:“我将以编程为生赚多少钱?”

您应该学习什么代码?
您应该学习什么代码?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map