JQuery 炫酷应用实例集锦 - CH2

Posted 2022-05-24 GoldenaArcher

JQuery 炫酷应用实例集锦 - CH2

上篇地址：JQuery 炫酷应用实例集锦 - CH1

有些在 chapter1 中讲过用法的这里就不继续了。

函数及简述

• replaceWith

  这个函数和 ch1 中的这个案例：$(this).html($(this).html().replace(regExp, "")); 比起来，实现方法要更加的简单直接一些，replaceWith() 也会将所选 selector 中的内容全都替换。

• insertBefore & insertAfter

  将指定元素插入另一元素之前或之后。

• 动态隐藏 DIV 块并带有动画缓冲效果

  这是 animate 和 slideUp 的组合使用

  效果图如下：

  

  总体来说，JQuery 组合一些函数使用可以获得不错的效果，对应代码为 022.html

• 动态显示或隐藏在 DIV 块中包含的内容

  这里就是 toggle 搭配 attr('style', 'display: none') 的进行元素展示/隐藏的实现，不过也可以直接使用 hide 进行实现。

• 使用 AJAX 方式加载 HTML

  即 load，使用 load 可以在页面中加载另外一个 HTML 文档。

  对应案例为 023.html 和 024.html

• 获取用户在 DIV 块中的鼠标单击坐标值

  其实这个函数 javascript 原生也有实现了，不过这个方法获取的坐标值 好像是 整个页面中的坐标值，而非元素中的相对坐标值。

  JavaScript 中的对应调用方式为：event.offsetX || event.layerX。

  对应案例为 025.html

• 拖动分隔条改变左右两个 DIV 块的范围

  效果如下：

  

  这个代码相对而言还是比较复杂的，因为它需要获得好几个 x 轴和 y 轴去重设两个 div 之间的宽度。

  对应案例为 026.html

• 拖动分隔条改变上下两个 DIV 块的范围

  这里的代码和上面的实现比较像，用的函数稍微有些不一样。

  对应案例为 027.html

• 实现左右两个不同 DIV 块高度自动匹配

  对应案例为 028.html

使用函数一览

• replaceWith
• insertBefore & insertAfter
• animate + slideUp
• toggle + attr / show & hide
• load
• event.offSetX || event.originalEvent.layerX & event.offsetX || event.layerX
• clientY & offsetTop
• offsetHeight

修改 div 的宽度与高度

这个操作主要还是看这么几个属性：

• offsetX & offsetY 等

  这些属于在 event 中的只读属性，MDN 链接为：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX，这些应该获得的就是当前事件的 XY 值。

• offsetTop & offsetLeft 等

  这个是属于 HTML 元素中的只读属性，MDN 链接为：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop。

  要想要合理玩转 resize 这种事件，还是得多了解一下 API 以及如何获取想要的值才行。