[简介]从如何安装jQuery到如何使用它!我将以一种易于理解的方式进行解释

“我想向使用HTML / CSS创建的网站添加动态功能。”
“我觉得有必要学习jQuery,但我无法前进。”

我将向有这种想法的人解释jQuery的引入。使用jQuery的原因是,对于仅使用HTML / CSS的网站只能做些限制,而客户和用户对此并不满意。

另外,在考虑HTML / CSS +α时,jQuery具有丰富的参考意义,因此学习成本较低,并且与Javascript相比,这些函数以直观的方式进行组织,因此相对而言相对而言您可以轻松进入世界。这是我希望学习HTML / CSS的人可以使用的语言之一。

另一方面,尽管相对容易,但要使某些jQuery工作起来可能需要比HTML更长的时间。让我们在做很多项目时逐渐习惯它。在这里,我们将介绍如何安装jQuery和基本语法,以免您迷失它。

本文是为jQuery新手撰写的,因此有经验的用户应在需要时跳过它。

什么是jQuery

在了解jQuery之前,我们必须先解释Javascript一词。有些人经常将此Javascript误认为是“ java”,但这是一种完全不同的语言。 Javascript是前端使用的一种编程语言,您可以在不启动服务器的情况下检查实现。从这个意义上说,就像HTML / CSS一样,它可以轻松使用而无需设置开发环境。

没有一天,我们看不到此功能。此Javascript功能用于我们认为有用的功能,例如幻灯片放映,滚动和在Web和移动屏幕上选择日期。

但是,Javascript语法往往很长且很复杂。这就是jQuery在2006年问世的原因。这使得处理带有少量描述的复杂Javascript程序变得容易。所以它不是完全不同的语言。可以用jQuery实现的功能也可以用Javascript实现。最常见的解释之一是“ jQuery是Javascript库”。

库和插件之间的区别

在学习jQuery时,让我们看一下常用单词的定义。这是“库”和“插件”这两个词。对于初学者来说,这个词很难理解,因为有时会感到困惑。

含义 特征 术语用法
图书馆 它是对如何使用函数和语言的重新定义,并且在相当广泛的意义上使用。 功能被简化并且非常易于使用。因此,即使结果相同,Javascript和jQuery可以使用的功能也不同。 jQuery更易于编写。 jQuery是Javascript“库”。
插入 它提供了扩展以辅助特定功能,并且在相对狭窄的意义上专门用于该功能。 例如,如果要实现幻灯片功能,它将专门研究此功能并提供设计和其他功能。 我使用了一个插件向我的网站添加幻灯片。 *我不会说“我使用图书馆在网站上添加了幻灯片”。

不要害怕误解,库是Javascript中使用的功能的简洁明了的摘要,而插件是用于实现特定功能的功能的摘要。

如何设置jQuery

设置jQuery有两种主要方法。都不难。第一,jQuery官方页面会去。

创建一个js文件

此页面右上方有一个“下载jQuery”按钮,因此请单击它。

然后,我转到可以下载jQuery文件的页面,但是由于有很多链接,我感到困惑。

但是首先,请考虑不使用以下部分。粘液版本非常适合初学者使用。结果,所使用的链接仅缩小到上述三个。

我将解释如何阅读链接。感兴趣的链接是前两个链接。

“压缩生产”与“未压缩开发”之间的区别

这是晚上压缩之间的区别。我们建议使用压缩版本,因为它是轻量级的。您可以在文件中看到它(下图),但是您将无法理解它的含义,因为它会忽略换行符等。但是,由于这种写作风格,它更轻巧。

最后要检查的是版本。由于是3.3.1,jQuery 3.x系列目前是主流。如果没有特殊原因要在旧IE中使用第1个系统,请使用最新版本。因此,这次,单击下面的链接打开文件。

下载压缩的生产版jQuery 3.3.1

复制所有内容并将其粘贴到编辑器中。将其命名为“ jQuery-3.3.1.min.js”。该文件的结构如下。

由于没有换行符,因此如果将其粘贴到编辑器中,则只有几行。

接下来,将以下代码粘贴到HTML头中以与HTML连接。这样,在许多情况下,js文件都作为外部文件读入HTML。与CSS一样,可以直接写入html文件,但我不建议这样做。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
 <div class="container">
 
 </div>
 <script type="text/javascript" src="js/jQuery-3.3.1.min.js"></script>
</body>
</html>

脚本标签在哪里放置?

有两种放置脚本标记的方法。一个在头部,另一个在身体中,就在body标签的闭合标签之前。哪一个都没关系。但是,脚本标记首先读取HTML标记。因此,为了确保它能正常工作,最好将其放到主体的闭合标签之前。可以有多个脚本标签。 “ @@@ .js”文件中可以包含Javascript代码和jQuery代码。您现在准备好了。

CDN(内容交付网络)的使用

接下来,还有另一种启用jQuery的方法。这种模式使用来自其他服务器的jQuery文件。它具有由Google,Microsoft等准备的jQuery文件,并读取和使用它。

即使您没有连接到网络,也可以使用第一种方法,而通过连接到网络可以使用此方法,但是您不需要安装外部文件。

作为测试,让我们使用Google提供的jQuery文件。请点击下面的链接。然后,您将被带到google提供的图书馆页面。

Google CDN

转到3.x片段:并选择版本3.3.1。复制它并将其粘贴在html body标签的结束标签之前。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
 <div class="container">
 
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

接下来,创建您编写的js文件。给它一个唯一的名称,如下所示,并给它一个扩展名“ .js”。

最后,也将其添加到html中。请编写您在此处设置的jQuery函数。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
 <div class="container">
 
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript" src="js/sample.js"></script>
</body>
</html>

您现在准备好了。

基本语法

了解jQuery的基本描述。在以下描述中编写jQuery语法。这意味着HTML完成加载后,请执行函数()中的处理。

jQuery(document).ready(function () {
  ここにjQueryの処理を書く。
});

但是,还有其他一些写作方法会误导初学者。除上述以外,我经常看到其他写作风格,我想您可能想知道它们与上述写作风格有何不同。总之,它们都具有相同的含义。下面的jQuery(功能()的简称)是“ $(功能()”)。

jQuery(document).ready(function () {
  ここにjQueryの処理を書く。
});

$(document).ready(function(){
    ここにjQueryの処理を書く。
});

jQuery(function(){
  ここにjQueryの処理を書く。
});

$(function(){
  ここにjQueryの処理を書く。
});

如何编写程序

现在,让我们了解编写jQuery的基础。 jQuery的基本描述由“选择器”和“方法”组成。以下是基本形式。

如何编写选择器

让我们立即使用jQuery。我有以下简单的html。 h1标签当前为蓝色。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>jquery</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
 <div class="container">
   <h1>jQuery</h1>
 </div>
 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 <script type="text/javascript" src="js/sample.js"></script>
</body>
</html>
h1{
	color: blue;
}

让我们使用jQuery将颜色更改为红色。在您自己的js文件中编写以下代码。然后颜色将改变。

$(function(){
  $("h1").css('color','red');
});

通过这种方式,选择器被选中,并且使用jQuery方法“ css”更改了css设置。您还学习了CSS中的选择器。它是使用CSS进行设计更改的基础。

如何设置各种选择器

在jQuery中,有几种编写选择器的方法。你必须,”” “」で囲むことを忘れないでください。

$(“.sample”).メソッド()
ID $(“#sample”).メソッド()
子元素 $(“.sample li”).メソッド()
:第一/:最后 这是获取第一个和最后一个元素的方法。
$(“.sample li:first”).メソッド()
$(“.sample li:last”).メソッド()
:偶数/:奇数 这是获取第一个奇数或偶数元素的方法。
$(“.sample li:even”).メソッド()
$(“.sample li:odd”).メソッド()
:eq() 这是获取具有指定编号的元素的方法。请注意第一个数字是第0。
$(“.sample li:eq(2)。方法()

方法设定

现在,关于方法设置,这是一个大主题。实际上,jQuery可以处理的方法范围很广,在这里我仅介绍一些基础知识。

CSS方法

这是一种更改css内容的方法。如下使用。

$(function(){
  $("セレクタ").css("プロパティ", “値”);
});

这是基本的,但是有时您想更改多个属性,而不仅仅是一个。在这种情况下,请将其括在{}中并编写如下。

$(function(){
  $("セレクタ").css({"プロパティ", “値”, "プロパティ", “値”});
});

例如,对h1进行以下指示,如下所示。

$(function(){
  $("h1").css({"color":"yellow", "font-size":"50px"});
});

然后,您可以看到CSS指令已如下更改。

addClass / removeClass方法

您还可以添加和删除类。例如,使用该场景的场景是要根据页面更改背景图像的场景。这次,为以下html设置背景颜色。

   <div class="list">
   	 <ul>
	   	<li>1</li>
	   	<li>2</li>
	   	<li>3</li>
	   	<li>4</li>
	  </ul>
   </div>

将一个类添加到上面的“列表”中,然后为该类设置CSS。

$(function(){
  $(".list").addClass("background");
  $(".background").css("background-color", "#C8FE2E");
});

然后,设计将更改如下。

您也可以删除班级。首先,设置多个类,创建一个设计,并在您只想消除特定页面或零件的设计效果时使用它。例如,最好为方法指定类名。

$(function(){
  $(".list").removeClass("background");
});

追加/前置方法

这是一种将另一个元素放在一个元素之前或另一个元素放在一个元素之后的方法。例如,让我们在以下html的li标签中添加“ 0”。

   <div class="list">
   	 <ul>
	   	<li>1</li>
	   	<li>2</li>
	   	<li>3</li>
	   	<li>4</li>
	  </ul>
   </div>

首先,洗第一个“ li”。然后将prepend方法应用于该第一个li。将要添加的代码作为参数,如下所示。

$(function(){
  $("li:first").prepend("<li>0</li>");
});

接下来,使用“追加方法”。如果要在特定元素之后添加另一个元素,则使用此方法。在li的末尾添加“ 5”。

$(function(){
  $("li:last").append("<li>5</li>");
});

然后您可以看到已添加“ 5”。

事件

jQuery中经常使用此“事件”。事件是处理的时间,即“时间”的设置。将执行“单击目标元素时显示另一个元素(方法)(设置时为”)的过程。

   <a class="btn btn-primary" id="one" href="#" role="button">ボタン</a>

在下面的代码中,当您单击btn时,将执行“ .click()”中的函数。

$(function(){
  $('.btn').click(function() {
     alert("ボタンがクリックされました。");
  })
});

然后,将显示以下警报。

这样,事件就是执行的时机。除了上述点击以外,还有其他事件。

活动名称 影响
点击 单击元素时进行处理。
更改 当元素的内容更改时,将进行处理。
提交提交 提交表单内容时进行处理。
滚动 屏幕滚动时进行处理。

概要

我将把jQuery的详细功能放到另一个场合,但是在这里您可以感受到jQuery简化函数处理的好处。本文以设置和操作的简要说明结束,但实际上,您将通过组合每个功能,将值存储在变量中并采取各种步骤来实现这些功能。首先,要习惯简单的操作。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。