Web开发的大爆炸:jQuery是什么?

  • 时间:2018-06-21 23:20 作者:爱码农 来源:爱码农 阅读:121
  • 扫一扫,手机访问
摘要:jQuery可可以是Web开发中用最广泛的JavaScript库。请继续阅读以理解如何用这个强大的工具。jQuery的核心是一个DOM操作和导航库。记住DOM是我们的文档对象模型 - 基本上是实际呈现的网页。jQuery将许多JavaScript函数从多行,复杂的代码片段简化为单个函数。它为我们提供

jQuery可可以是Web开发中用最广泛的JavaScript库。请继续阅读以理解如何用这个强大的工具。

Web开发的大爆炸:jQuery是什么?

jQuery的核心是一个DOM操作和导航库。记住DOM是我们的文档对象模型 - 基本上是实际呈现的网页。jQuery将许多JavaScript函数从多行,复杂的代码片段简化为单个函数。它为我们提供了JavaScript功可以的API,这意味着任何浏览器都能在不需要编译代码的情况下解释它。我们不需要为jQuery启动和运行做任何事情。我们像对待任何其余JavaScript脚本或者文件一样对待它。

jQuery库能通过网站文件系统中的本地文件或者通过CDN或者内容分发网络提供。用CDN意味着你不需要自己托管库,但是你需要监视版本的支持。假如你不这样做,你正在用的版本可可以会被弃使用或者不受支持,你会有少量快乐的时光!假如您下载回购协议,则必需自己进行管理和更新,但链接永远不会“消失”。查看所有在下载 页面上访问jQuery的方法。

当你在下载页面时,为什么不抓取未压缩的jQuery开发版?将它保存到您的网页目录。它能与索引文件位于同一级别,也能位于资源文件中。

jQuery是许多前台框架的基石之一,包括SAPUI5(基本上,假如您正在构建UI5应使用程序,所有这些都是相关的)。

现在我已经喋喋不休了,让我们看看它的实际情况。

打开你的网页的index.htm文件,我们一直在努力(我知道它已经有一段时间了,所以我会给你一分钟的时间来找到它)。确保你有jQuery下载,或者者,假如你觉得这样做很舒服,你能用CDN。

我们能通过在标题中调使用脚本标记来加载库,就像我们在几周前做过的js文件一样。假如您下载了jQuery Development库并将该文件保存在Web应使用程序的顶级文件夹中,那么脚本标记应该看起来像这样。

假如您通过CDN访问它,src将是一个URL。确保保存更改。

现在,我们能用jQuery库!

让我们看看jQuery为我们简化了多少事情。打开你的script.js文件。

重命名你的 onPictureButtonClicked 函数 onOldPictureButtonClicked 或者相似的东西。我们希望可以够重使用函数名称,但让我们保留旧代码以供参考。

现在创立一个新的 onPictureButtonClicked 功可以。

function onPictureButtonClicked() {

要访问jQuery库,我们能用 $ 。这是调使用jQuery函数的捷径。在功可以内部,拨打电话切换图像。你如何做到这一点:

$("#myImage").toggle()

保存您的更改并在浏览器中打开index.html文件。点击该按钮依然能做同样的事情,但只要一行代码!

这是如何工作的?

用jQuery,我们能getElementById 用选择器来缩短 调使用时间。

我们能用选择器来获取标签,类或者ID。在我们的例子中,我们预先计划 myImage,这是我们对我们的形象标识,同 #。 # 使用于表示ID。我们想选择ID为的任何东西 myImage。假如你想选择基于CSS类(所以从 class=" " 属性),用 . (期)。要选择标签,请不要增加任何内容。

$("#id")

$(".css-class")

$("tag")

理解如何简化访问DOM?

我们总是希望我们的文本属性反映该项目正在做什么,因而请在编辑器中进入index.html文件。将按钮的文本从加载图片升级为切换图片。保存您的更改。

Web开发的大爆炸:jQuery是什么?

jQuery也使DOM遍历更容易。我们来看看如何定位相关标签。而相关的,我的意思是亲戚。

让我们在index.html文件中增加一个新按钮。在h1标签下,创立一个新按钮。此按钮将具备Border Div的子项的文本值。它会做的是在div标签内的所有元素附近包裹边框!该按钮将需要一个 onclick 回调函数。增加一个唯一的ID总是一个好主意。忘记如何增加按钮?您能用下面的代码。

保存您的更改!

现在我们需要实际实现回调函数,让我们回头看看script.js文件。

为新按钮的回调创立一个新的空函数。假如您需要帮助,请复制下面的代码。

function onUpdateDivs(){

}

现在我们需要实际上与所有div的孩子接壤。当所有的孩子都是不同的类型,班级和ID时,我们如何做到这一点?

这就是jQuery如此有使用的起因!它有预构建的方法来帮助我们遍历DOM树。jQuery有一个child方法,它将检索位于该元素的开始和结束标记之间的所有标记。我们如何得到孩子?通过.children()从选择器中调使用 函数,我们能定位所选项目的所有子项。看起来像这样:

$("div").children()

现在我们有了div标签的所有子标签。我们如何为这些标签增加边框?jQuery也有方法为标签增加属性,如CSS类。因为我们的Bootstrap可使用于我们的应使用程序,因而我们能用Bootstrap边框类增加边框。要增加类,请将 .addClass 方法链接到 children() 方法。

$("div").children().addClass("border")

因为边框CSS类将被增加到每个元素,因而它将包装具备边框的div标签的所有子元素。

保存您的更改并在浏览器中打开index.html。你会看到一个新的按钮!

Web开发的大爆炸:jQuery是什么?

点击“Border Div's Children”按钮。div内的所有元素现在都有边框!

Web开发的大爆炸:jQuery是什么?

jQuery有更多的方法来访问兄弟,下一个最接近的标签,删除类,动画元素等等。我会推荐Codecademy的jQuery课程,假如你想有一个指导手,或者者你总是能探究jQuery文档来学习更多。此外,假如您已将我的其余部分博客看作#APIFriday系列的一部分,则您已经看到 $。这是由于jQuery还为我们提供了AJAX,这使得调使用API和外部资源变得更加简单。

jQuery是你的web开发工具带中的一个很好的资源!继续探究它提供的所有优秀功可以,并准备好理解更多信息!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
手机二维码手机访问领取大礼包
返回顶部