JQuery 酷炫应用实例集锦 - CH1 上

Posted 2022-05-10 GoldenaArcher

JQuery 酷炫应用实例集锦 - CH1 上

JQuery 版本为最新的 3.6，原来的案例为 2.2，可能有些 API 已经更新了会导致报错。这里下面跑过的案例都已经进行修改过了。

JQ 这东西……好用，就是有点难用……

目前已经重写完的部分丢到这里了：jQuery炫酷应用实例集锦 JQ3.0 重写版，写一部分更一部分。

显示/消失

• fadeIn/fadeOut

  调用方法一致：

  $(selector).fadeIn( [duration ] [, complete ] )
  $(selector).fadeIn( options )
  

  complete Type 为 Function()

  options 选项众多，就不一一列举，参考官方网站为佳。

  对应 001.html

• slideUp/slideDown

  调用方法一致：

  $(selector).slideUp( [duration ] [, complete ] )
  $(selector).slideUp( options )
  

  complete Type 为 Function()

  options 选项众多，就不一一列举，参考官方网站为佳。

  对应 002.html

• show/hide & toggle

  与上面用法一致

  对应 003.html

  注*：这个案例中的源代码无法正确工作, $(input).html("some value") 无法正确更新其中内容。

• slideToggle

  对应 004.html

• fadeToggle

  对应 005.html

  注*：这个案例中的源代码无法正确工作, $(button).html("some value") 无法正确更新其中内容。

  注 2*：如果 toggle 太快，div2 和 div3 是无法与 div1 保持一致的，有类似需求的话最好使用 Promise 和 Promise.all() 保持一致性

• $(:hidden)

  选取不可见元素，即 display: none; 元素

  对应 006.html

  注*：原本代码同样会将写的 javascript 代码渲染出来，这里将 :hidden 改为 div:hidden，只 target body 中的 div 元素

• animate

  对应 007.html

  注*：font 在 HTML5 中已经被弃用，这里使用 span + 行内样式的方式实现了。当然，要用 font 还是可以渲染的……

• parents 判断是否嵌套在父元素中

  对应 008.html

  注*：修改并且测试了一下，$().parents 可以找到所有的祖先元素，这也需要注意，如果要找父级元素应该还是需要使用 parent 而不是 parents

• index 获取指定元素在同级中的索引位置

  对应 009.html

• bind 将点击事件绑定到指定元素上

  使用方法有 3：

  1. .bind( eventType [, eventData ], handler )
  2. .bind( eventType [, eventData ] [, preventBubble ] )
  3. .bind( events )

  对应 010.html

• on 绑定多个点击事件

  对应 011.html

  注*：delegate 在 3.0 中已经 deprecated，从 on 在 1.7 版本被 release 了之后就推荐使用 on 去取代 delegate。

  JQuery3.0 之前还能使用。

  以下为原文：

  As of jQuery 3.0, .delegate() has been deprecated. It was superseded by the .on() method since jQuery 1.7, so its use was already discouraged.

  delegate 的 on 版本对应 012.html，基本逻辑没有变就是了。

  并且这个案例与使用 on 为动态生成的元素绑定事件的实现一模一样，后者就不新建一个案例 cv 一下代码了。

• one 绑定一次性相应方法

  对应 013.html