6.jQuery - 4.21-dya3-jQuery - 《Web 前端资料》

jQuery - 第3天

jQuery - 第3天

学习如何基于事件监听提交表单数据，理解 jQuery 插件的本质及实现方法，知道并掌握网页中常见插件的基本用法。

知道如何基于事件监听提交表单
掌握 jQuery 中获取表单数据的方法
了解常见的 jQuery 插件的基本用法
知道如何使用 jQuery 的工具方法
知道如何避免 $ 标识命名冲突

表单

学习 jQuery 中与表单相关的实例方法，知道如何基于事件监听提交表单数据。

表单提交

HTML 标签本身具有数据提交的能力，然而现实中更常见的是通过监听 DOM 事件获取表单的数据，然后通过 Ajax 将表单的数据提交至服务端。

<form>
  昵称: <input type="text" name="nickname">
  <br>
  密码: <input type="password" name="password">
  <br>
  <button>提交</button>
</form>
<script src="your/path/jquery-版本号.min.js"></script>
<script>
    // 监听表单的 submit 事件
  $('form').submit(function (ev) {
    // 表单提交的相关逻辑...
    // 阻止 HTML 表单的默认提交
    // ev.preventDefault();
    // ev.preventDefault() 在 jQuery 中可以
    // 被简写成 return false
    return false;
  })
</script>

总结：

HTML 本身具有提交表单的能力，但是会刷新当前的页面
通过监听 form 元素的 submit 事件提交表单能够带来较好的用户体验
用户按回车键或单击提交按钮（type 属性值为 submit）时会触发 form 的 submit 事件
jQuery 的事件回调函数中执行 return false 时，相当于执行 ev.preventDefault()

注：button 标签默认的 type 属性为 submit

序列化

HTML 标签默认提交表单时会自动根据表单项的 name 属性将用户在表单中填写的数据提交至服务端，然而采用监听 DOM 事件对表单提交时，需要开发者自行获取表单项中用户填写的数据，其用户如下代码所示：

<form>
  昵称: <input type="text" name="nickname">
  <br>
  密码: <input type="password" name="password">
  <br>
  <button>提交</button>
</form>
<script src="your/path/jquery-版本号.min.js"></script>
<script>
  // 监听表单的 submit 事件
  $('form').on('submit', function () {
    // 通过 jQuery 对象的 serialize 方法，获取所有表单元素的数据
    $(this).serialize();
        // 阻止表单默认提交
    return false;
  })
</script>

总结：

val 方法用来获取或设置表单元素的值
serialize 方法用来获取表单中具有 name 属性的表单项中的数据
调用 serialize 方法获取到的表单数据会被处理 key=val&key1=val1&key2=val2&... 格式的字符串
trim 方法用来清除字符串两端的空白符

注：单选框和复选框表单项的 value 属性省略时默认值为 on

插件

理解 jQuery 插件的本质及实现机制并能编写简单的插件，掌握常见插件的的基本使用。

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery；
常用的网站：
- jQuery 插件库 http://www.jq22.com/
- jQuery 之家 http://www.htmleaf.com/
插件使用步骤：
- 引入相关文件。（jQuery 文件和插件文件）
- 复制相关html、css、js (调用插件)。

瀑布流

下载位置
http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html

4.21-dya3-jQuery - 图1

代码演示：插件的使用三点： 1. 引入css. 2.引入JS 3.引入html。（有的简单插件只需引入html和js，甚至有的只需引入js）
1.引入css

<!-- 下面的样式代码为页面布局，可以引入，也可以自己写，自己设计页面样式，一般为直接引入，方便 -->
<style type="text/css">
  #gallery-wrapper {
    position: relative;
    max-width: 75%;
    width: 75%;
    margin: 50px auto;
  }
  img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .white-panel {
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px;
  }
  .white-panel h1 {
    font-size: 1em;
  }
  .white-panel h1 a {
    color: #A92733;
  }
  .white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
</style>

2.引入js.

<!-- 前两个必须引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的为启动瀑布流代码，参数可调节属性，具体功能可参考readme.html -->
<script type="text/javascript">
    $(function() {
      $("#gallery-wrapper").pinterest_grid({
          no_columns: 5,
          padding_x: 15,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700
      });
    });
</script>

3.引入html.

    <!-- html结构一般为事先写好，很难修改结构，但可以修改内容及图片的多少（article标签） -->
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
    </section>

总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）

图片懒加载

图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。
代码演示：懒加载只需引入html 和 js操作即可，此插件不涉及css。
http://www.jq22.com/

4.21-dya3-jQuery - 图2

1.引入js一定放在JQ文件的后面：插件基本上都是这样

<script src="js/EasyLazyload.min.js"></script>
<script>
       lazyLoadInit({
        // 1.1s
           showTime: 1100,
        // 函数：监听到图片什么时候加载开始，完毕！
           onLoadBackEnd: function(i, e) {
             //console.log("onLoadBackEnd:" + i);
           },
           onLoadBackStart: function(i, e) {
             // console.log("onLoadBackStart:" + i);
           }
     });
</script>

2.引入html：注意修改src，写自定义属性data-lazy-src

 <img data-lazy-src="upload/floor-1-3.png" alt="">

全屏滚动

商品宣传：类似PPT大屏展示！
全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：
http://www.dowebok.com/demo/2014/77/
代码演示全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大。所以下面只演示js的引入，html和css引入根据自己实际
项目需要使用哪种风格引入对应的HTML和CSS。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
      $(function() {
          $('#dowebok').fullpage({
            sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
            navigation: true
          });
    });
</script>

注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能。

日期选择器

在网页中为用户提供方便快捷的日期选择方式，不仅有利于增强用户体验，最重要的是能够保证日期的准确性及统一性，datepicker 提供了良好的选择日期的方式，其用法如下所示：

首先引入 datepicker 插件及配套样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 日期选择器</title>
  <!-- 插件配套的样式 -->
  <link rel="stylesheet" href="./assets/datepicker/datepicker.min.css">
</head>
<body>
  <script src="./assets/jquery/jquery-3.5.1.min.js"></script>
  <!-- 在 jQuery 之后引入插件 -->
  <script src="./assets/datepicker/datepicker.min.js"></script>
</body>
</html>

其次调用 datepicker 插件方法，输入框获得焦点时自动弹出日期选择层：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 日期选择器</title>
  <!-- 插件配套的样式 -->
  <link rel="stylesheet" href="./assets/datepicker/datepicker.min.css">
</head>
<body>
  <h3>选择日期</h3>
  <input type="text" class="datepicker">
  <script src="./assets/jquery/jquery-3.5.1.min.js"></script>
  <!-- 在 jQuery 之后引入插件 -->
  <script src="./assets/datepicker/datepicker.min.js"></script>
  <script>
      // 调用插件方法
    $('.datepicker').datepicker();
  </script>
</body>
</html>

通过配置参数能够自定义日期选择的细节，以下是对常用参数的使用说明：

配置参数	含义	备注
language	语言	zh-CN 代表中文
date	默认日期
format	日期显示格式	y 代表年份，m 代表月份，d代表日份
startDate	起始日期
endDate	截止日期

datepicker 默认语言为英文，通过 language 指定其它语言时需要引入对应的语言包（存放在 i18n 目录中），更多的配置参数详见官方文档。

其它

了解 jQuery 的工具方法的使用，知道避免命名冲突和多库共存的解决方法。

工具方法

jQuery 除了封装了大量的 DOM 操作外，还提供了一些工具方法，这些方法通过 $ 或 jQuery 直接调用，如下所示：

迭代/遍历

let arr = ['html', 'css', 'javascript'];
// 遍历数组，相当于 arr.forEach(function () {})
$.each(arr, function (val) {
  console.log(val);
})

数组转换

// 伪数组
let p = document.querySelectorAll('p');
// 报错，伪数组没有 pop 方法
// p.pop();
// 转换数组，相当于 Array.from(p)
let pArr = $.makeArray(p);
pArr.pop();

jQuery 中还有更多的工具方法，但是 ES6 及更高版本新增的特性正在逐渐替代这些工具方法，因此我们对 jQuery 的方法有个了解即可，推荐采用 ES6 及更高版本的新特性。

多库共存

实际开发中有可能存在同一个网页中引入不同版本 jQuery 的情形，不同版本之间彼此会产生覆盖现象，为了解决这个问题 jQuery 提供了 $.noConflict 方法。

<script src="./assets/jquery/jquery-3.5.1.min.js"></script>
<script>
  let _ = $.noConflict();
  // 重新命名 jQuery v3.5.1 为全局标识 _
  console.log(_.fn.jquery);
</script>
<script src="./jquery-2.2.4.js"></script>
<script>
  // jQuery v2.2.4 仍然使用全局标识 $
    console.log($.fn.jquery);
</script>

利用 $.noConflict 方法还可以解决与其它类库（也以 $ 作为全局标识命名）全局标识命名冲突的问题。