Greasy Fork

Greasy Fork is available in English.

js-domExtend

轻量级原生js增强插件,将部分原生dom对象方法模仿jQuery进行二次封装,便于使用

当前为 2022-04-26 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/444044/1044371/js-domExtend.js

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
tutu辣么可爱
版本
0.0.1.20220426172825
创建于
2022-04-26
更新于
2022-04-26
大小
5.7 KB
许可证
暂无

js-domExtend

  • author:tutu辣么可爱
  • day:2022.4.27 GMT+0800 (中国标准时间)
  • description:原生js增强插件,将部分原生dom对象方法模仿jQuery进行二次封装,便于使用

方法介绍

1.function $ele(dom, dom2)

  • parameter0 dom:需要创建的dom对象的html字符串或者选择器字符串
  • parameter1 dom2:选择器模式时生效,选择器的父节点,默认值document
  • note:本质是对createElement、querySelectorAll的二次封装,使用体验类似jQuery的$()方法

2.function $eleFn(dom, dom2)

  • parameter0 dom:选择器字符串
  • parameter1 dom2:选择器的父节点,默认值document
  • note:返回一组方法,用于对需要选择的dom对象进行监控,具体用法见$eleFn.listen和$eleFn.ready部分

(1) function $eleFn.listen(callback, interval)

  • parameter0 callback:对dom对象监控时循环执行的回调方法
  • parameter1 interval:dom对象的监控时间间隔,默认值500
  • note:返回定时器ID。本质是调用setInterval不断执行$ele方法检测dom对象是否存在

(2) function $eleFn.ready(callback, interval)

  • parameter0 callback:dom对象检测到存在时的回调方法
  • parameter1 timeout:dom对象检测存在的超时时长
  • note:返回定时器ID。本质是调用$eleFn.listen检测对象是否存在,setTimeout控制超时时长

3.function DOM.attr(key, val)

  • parameter0 key:dom对象属性名
  • parameter1 val:dom对象属性值
  • note:没有val则返回对应属性名的值;有val则进行属性设置,返回dom对象本身。本质是对getAttribute、setAttribute、removeAttribute的二次封装,使用体验类似jQuery的$.attr方法

4.function DOM.css(key, val)

  • parameter0 key:dom对象css样式属性名
  • parameter1 val:dom对象css样式属性值
  • note:没有val则返回对应属性名的值;有val则进行属性设置,返回dom对象本身。本质是对getComputedStyle、DOM.style.setProperty的二次封装,使用体验类似jQuery的$.css方法

5.function DOM.hide()

  • note:调用DOM.css隐藏dom对象,返回dom对象本身。本质是将dom对象样式display设置为none,使用体验类似jQuery的$.hide方法。DOM.hide支持nodeList对象

6.function DOM.show()

  • note:调用DOM.css显示dom对象,返回dom对象本身。本质是将dom对象样式display还原为原属性值,使用体验类似jQuery的$.show方法。DOM.show支持nodeList对象

7.function DOM.insert(dom, position)

  • parameter0 dom:选择器字符串、dom对象或多个dom对象组成的Array数组
  • parameter1 position:插入位置,默认值end
  • note:返回值为dom节点本身。position为start时,插入到DOM父节点开头;position为end时,插入到DOM父节点结尾;position为before时,插入到dom节点前面;position为after时,插入到dom节点后面。本质是对insertBefore、append的二次封装

8.function DOM.replace(dom)

  • parameter dom:选择器字符串、dom对象或多个dom对象组成的Array数组
  • note:返回值为新dom节点。本质是调用DOM.insert后将原dom节点remove