PHP + MySQL 学习笔记（七）--- jQuery 及 jQuery Mobile 简介 + 两个练习

最新推荐文章于 2023-11-09 08:33:28 发布

READ LEE

最新推荐文章于 2023-11-09 08:33:28 发布

阅读量406

点赞数 1

文章标签： jquery html css php

本文链接：https://blog.csdn.net/weixin_45889834/article/details/112056805

版权

Query简介

虽然JavaScript强大而灵活，具有大量内置函数，您仍然需要其他代码层来处理无法通过本机或CSS实现的简单事情，例如动画，事件处理和异步通信。
而且，由于多年来的各种浏览器大战，令人沮丧和烦人的浏览器不兼容问题一去不复返，有时还是通过乏味的JavaScript代码才能确保网页在所有设备上的外观相同，解决近年来发布的各种浏览器和版本之间的所有差异。一言以蔽之，还是噩梦。
为了填补这些空白，已经开发了许多功能库（其中许多功能还提供了对DOM的轻松挂钩），以最大程度地减少浏览器之间的差异并促进异步通信以及事件和动画处理。这些包括AngularJS，jQuery，MooTools，Prototype，script.aculo.us和YUI之类的东西。

为什么使用jQuery？

这里选择了使用最广泛的库：jQuery，据W3Techs称，jQuery现在已安装在所有网站的73％以上，而且（据我所知他们的图表）比其所有主要竞争对手的总和使用得更多。顺便说一句，如果您想随时了解各种库的堆积方式，请在SameTech网站上搜索javascript。
使用jQuery，您不仅可以获得非常高的跨浏览器兼容性（是的，甚至包括Internet Explorer），而且还可以快速便捷地访问 HTML和DOM操作，可以直接与CSS交互的特殊功能，以及控制事件，创建专业效果和动画的强大工具以及与Web服务器进行异步通信的功能。

jQuery还是各种插件和其他实用程序的基础。

当然，您不一定需要使用jQuery，一些编程纯粹主义者永远都不会碰库，而是喜欢创建自己的定制功能集合（这样做可能有充分的理由，例如不必等待其他人这样做）。纠正发现的错误，实现自己的安全功能等）。但是jQuery确实经受了时间的考验，如果您想利用其柔和的学习曲线并尽快开发高质量的网页。

插入jQuery

在网页中插入jQuery的方法有两种。

您可以转到下载页面，下载所需的版本，将其上传到Web服务器，然后从HTML文件中的脚本标记引用它。
或者，您可以利用免费的内容分发网络（CDN）并只需链接到所需的版本。

jQuery是根据MIT许可的条款发行的，该许可对您的操作几乎没有任何限制。您可以自由地在任何其他项目（甚至是商业项目）中使用任何jQuery项目，只要版权标头保持不变即可。

选择正确的版本

在决定直接下载 jQuery或是使用CDN之前，必须选择一个 jQuery 版本。在大多数情况下，这很简单，因为您只需选择最新版本。但是，如果您以特定的浏览器为目标，或者维护的旧网站依赖于特定版本的 jQuery，则最新版本可能不适合您。
与大多数软件不同，您只需下载并安装最新的可用版本，jQuery就会随着时间的推移而发展，以考虑到不同浏览器版本，功能和错误的市场变化。
同时，对jQuery进行了改进，可能会使较新版本在专门针对特定版本（以及围绕它的怪癖）的网站上以不同的方式运行。
当然，每个较新的版本都是对先前版本的改进，并且越来越可能涵盖所有基础。对于网站来说，相同的操作至关重要的地方，除非您已经完全测试了新版本，否则通常最好坚持使用较早的版本。

不同风格的jQuery

jQuery的三个分支，分别称为1.x，2.x和3.x，分别针对不同的环境而设计。

1.x版是jQuery的第一个稳定版本。此版本支持较旧的网络浏览器，它们各自的开发人员甚至不再支持。如果您期望使用旧版Web浏览器的访问者数量众多，那么这是该版本。

2.x版本放弃了对Internet Explorer 6–8的支持，以提高jQuery的整体性能并减小库的文件大小。它比1.x版更快，更小，但不支持较早的网络浏览器。由于Microsoft放弃了对Windows XP的支持，因此可以安全地假设您的访问者将使用与2.x版兼容的浏览器，除非您另外知道。

一般来说，jQuery的每个新版本都支持以下浏览器版本：

• Chrome: (Current – 1) and Current
• Edge: (Current – 1) and Current
• Firefox: (Current – 1) and Current
• Internet Explorer: 9+
• Safari: (Current – 1) and Current
• Opera: Current

如果您需要支持较旧的浏览器，例如Internet Explorer 6-8，Opera 12.1x或
Safari 5.1 +，jQuery开发人员建议使用1.12版。有关的详细信息支持的不同版本，请访问网站。

下载

jQuery的最新发行版本在下载页面上以未压缩和最小化形式提供。您还可以在jQuery CDN上找到所有过去的发行版。下载页面上显示的jQuery苗条版本省略了异步通信功能以节省空间，因此，如果您希望使用jQuery来使用任何AJAX功能，则应避免使用这些功能。
您需要做的就是选择所需的版本，右键单击旁边显示的链接，然后将其保存到硬盘上。从那里，您可以将其上传到Web服务器，然后将其包含在

<script src ='http：//myserver.com/jquery-3.2.1.min.js'> </ script>

如果您以前从未使用过jQuery（并且没有特殊要求），则只需下载最新的缩小版本，或通过CDN链接到它，如以下部分所述。

使用直接网络挂载

一些CDN支持jQuery。如果使用其中之一，则只需直接链接到这些网络提供的URL，就可以省去下载新版本然后将它们上传到服务器的麻烦。
不仅如此，他们还免费提供此服务，而且通常在可能是世界上最快的高容量主干网上提供。此外，CDN通常将其内容保存在多个不同的地理位置，然后从最靠近冲浪者的服务器提供所需的文件，以确保最快的交付速度。

总体而言，如果您不需要修改jQuery源代码（要求您将其托管在自己的网络服务器上），并且您的用户肯定可以进行实时互联网连接，那么使用CDN可能是可行的方法。而且非常简单。您只需要知道要访问的文件名和CDN正在使用的根文件夹即可。例如，可以通过jQuery使用的CDN访问所有当前和以前的版本，如下所示：

<script src ='http：//code.jquery.com/jquery-3.2.1.min.js'> </ script>

基本目录位于http://code.jquery.com/，您只需在其后加上所需包含的文件名（在本例中为jquery-3.2.1.min.js）。
Microsoft和Google都在其网络上提供jQuery，因此您也可以通过以下两种方式之一将其包括在内：

<script src ='http：//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js'> </ script>
<script src ='http：//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'> </ script>

对于Microsoft CDN（aspnetcdn.com），您应以ajax.aspnetcdn.com/ajax/jQuery/ 的基本目录开头，然后再以所需的文件名开头。
但是，对于Google，您必须将文件名（例如jquery-3.2.1.min.js）拆分为文件夹和文件名（例如：3.2.1 / jquery.min.js）。然后在其前面加上ajax.googleapis.com/ajax/libs/jquery/。

使用CDN的另一个好处是，大多数其他网站也都可以这样做，因此jQuery很可能已经缓存在用户的浏览器中，甚至可能不需要重新交付。 73％或更多的网站使用jQuery，这可以节省很多宝贵的带宽和时间。

自定义jQuery

如果绝对要最小化网页下载的数据量，那么您可能仍可以使用jQuery，只需对其进行特殊构建即可包含网站将要使用的功能。您将不能依靠CDN来交付它，但是在这种情况下，您可能根本不打算使用CDN。
要创建自己的jQuery自定义版本，请尝试使用jQuery Builder。只需选中您想要的框，然后取消选中您不需要的框即可。然后将定制版本的jQuery加载到单独的选项卡或窗口中，您可以在其中根据需要复制和粘贴它。

jQuery语法

对于jQuery初学者来说，最引人注目的是** $ 符号**，它充当 jQuery 因子方法。选择该符号是因为该符号在JavaScript中是合法的，简短的并且不同于常规变量，对象或函数/方法的名称。
该符号代替了对jQuery函数的调用（也可以根据需要执行此调用）。这样做的目的是使您的代码简短有趣，并在每次访问jQuery时节省不必要的额外输入。它还会立即向您的代码新用户显示正在使用jQuery（或类似的库）。

jQuery Mobile库

您已经意识到可以节省时间并可以利用jQuery的强大功能，我想您将很高兴得知可以使用jQuery Mobile库做更多的事情。
创建jQuery Mobile是为了补充jQuery，它要求您在网页中同时包含jQuery和jQuery Mobile（以及您还将需要的CSS文件和随附的图像），以便在手机和其他设备上查看时将其转换为完全交互式的体验。移动设备。
jQuery Mobile库使您可以使用“渐进增强”技术（使基本的浏览器功能先显示良好，然后在遇到更多功能时添加越来越多的功能）将普通网页改编为移动网页。在浏览器中）。它还具有所谓的**“响应式网页设计**”（其中网页在各种设备和窗口或屏幕尺寸上都能很好地呈现）。

重点不是要绝对地教您有关jQuery Mobile的所有知识，它本身可能会占用一整本书！相反，我想为您提供足够的信息，以使您可以将任何不太大的网页集重新构建为一个连贯，快速且外观漂亮的Web应用程序，以及所有页面幻灯片和其他过渡功能，触摸设备，以及更大，更易于使用的图标，输入字段以及输入和导航的其他增强方面。
为此，仅介绍jQuery Mobile的一些主要功能，这些功能将使您能够使用在桌面和移动平台上都能很好运行的干净且可行的解决方案来启动和运行。在此过程中，认识以这种方式使网页适应移动时可能会遇到的一些陷阱，以及如何避免这些陷阱。精通jQuery Mobile后，您将发现仔细阅读在线文档来查找自己项目所需的功能很简单。
除了逐步增强HTML的显示方式之外，jQuery Mobile 还根据其自身运行所在的浏览器的功能，还根据使用的标签和一组自定义数据逐步增强了常规HTML标记。
属性。有些元素不需要任何数据属性即可自动增强（例如，选择元素会自动升级到菜单），而其他元素则需要存在数据属性才能进行增强。可以在API文档中查看受支持的数据属性的完整列表。

Including jQuery Mobile

有两种方法可以将 jQuery Mobile 包含在您的网页中。

首先，您可以转到下载页面，选择所需的版本，将文件下载到Web服务器（包括与库一起提供的样式表和随附的图像），然后从那里提供服务。
例如，如果您已经将 jQuery Mobile 1.4.5（当前版本）及其 CSS 文件下载到服务器的文档根目录，则可以包括它们以及随附的 jQuery JavaScript（必须为2.2.4版本）。如我所写，因为 jQuery Mobile 尚不支持版本3（尽管 jQuery Mobile 1.5已计划支持 jQuery 3）—在这样的网页中：

<link href="http://myserver.com/jquery.mobile-1.4.5.min.css" rel="stylesheet">
<script src='http://myserver.com/jquery-2.2.4.min.js'></script>
<script src='http://myserver.com/jquery.mobile-1.4.5.min.js'></script>

或者，与jQuery一样，您可以利用免费的内容交付网络（CDN）直接网络挂载, 只需链接到所需的版本即可。您可以从以下三种主要CDN中进行选择（Max CDN，Google CDN和Microsoft CDN），并且您可以通过以下方式从中检索所需的文件：

<!-- Retrieving jQuery & Mobile via Max CDN -->
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<!-- Retrieving jQuery & Mobile via Google CDN -->
<link rel="stylesheet" href=
 "http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js">
</script>
<!-- Retrieving jQuery & Mobile via Microsoft CDN -->
<link rel="stylesheet" href=
  "http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src=
"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>
<script src=
"http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>

您可能需要将一组这些语句放在页面的部分中。

为了确保您可以在离线状态下使用这些示例，下载了所有必需的 jQuery 文件，并将它们与示例文件的存档一起包括在内，您可以从本书的配套网站上免费下载这些文件。因此，所有这些示例都显示了在本地服务的文件。

两个 jQuery Mobil 例题：

第一个，基本实验架构：welcome.html
(请在 PHP 环境下练习）

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome</title>
    <meta name='viewport' content='width=device-width, 
      initial-scale=1'>
    <link rel='stylesheet' href='http://code.jquery.com
      /mobile/1.1.1/jquery.mobile-1.1.1.min.css' />
    <script src='http://code.jquery.com/jquery-
      1.7.1.min.js'></script>
    <script src='http://code.jquery.com/mobile
      /1.1.1/jquery.mobile-1.1.1.min.js'></script>
  </head>
  <body>
    <!-- Main Page -->
    <div id='main' data-role='page'>
      <div data-role='header'>
        <h1>Welcome!</h1>
      </div>
      <div id='content' data-role='content'>
        <p>The jQuery Mobile Cookbook</p>
      </div>
      <div data-role='footer'>
        <h4>Enjoy reading the book ...</h4>
      </div>
    </div>
  </body>
</html>

在这里插入图片描述

第二个，对话框
(请在 PHP 环境下练习）

<!DOCTYPE html>
<html>
<head>
  <!-- 下列档案是先抓下来放在我的伺服器目录上 -->
    <link href="../jquery.mobile-1.1.1.min.css" rel="stylesheet" type="text/css" />
    <script src="../jquery-1.7.1.min.js"></script>
    <script src="../jquery.mobile-1.1.1.min.js"></script>
    
    <title>Example 02-05</title>
   <script type="text/javascript">
    /* 准备的空位/
    </script>
  </head>
<body>
 <!-- Main Page -->
    <div id="main" data-role="page">
      <div data-role="header">
        <h1>Header of Main Page</h1>
      </div>
      <div data-role="content">
        <a href="#customdialog" data-role="button"  data-rel="dialog">Open Custom Dialog</a>
      </div>
      <div data-role="footer">
        <h4>Footer of Main Page</h4>
      </div>
    </div>

<!--  #customdialog page  -->
    <div id="customdialog" data-role="page">  
      <div class="ui-corner-top ui-overlay-shadow ui-header ui-bar-a" role="banner">
        <a href="#main" data-icon="delete" data-iconpos="notext" 
          class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a" 
          title="Close" data-theme="a"  data-transition="pop" data-direction="reverse">
        <span class="ui-btn-inner ui-btn-corner-all"> <!-- -->
            <span class="ui-btn-text">Close</span>
            <span class="ui-icon ui-icon-delete ui-icon-shadow"></span>
          </span>
        </a>
        <h1 class="ui-title" tabindex="0" role="heading"  aria-level="1">Custom Dialog</h1>
      </div>
      <div data-role="content">
        <p> Create the #customdialog page in main.html, and add the custom header to 
the dialog that positions the close button on the right side of the header. The default 
header enhancement is prevented in this code: </p>
        <a href="#" data-role="button" data-rel="back"  data-theme="b">Go Back</a>
      </div>
      <div data-role="footer">
           <h4>Footer of Dialog</h4>
      </div>
    </div>

</body>
</html>

在这里插入图片描述
点击 “Open Custom Dialog” 按钮后会出现下面的结果：

/*************** 本篇 END *****************/