chimee-helper-dom

    0.1.8 • Public • Published

    chimee-helper-dom

    Build Status Coverage Status npm dependency Status devDependency Status

    dom handler of chimee

    get started

    npm install chimee-helper-dom --save

    if you are using flow, you should import our flow defination, by adding this to your .flowconfig.

    [ignore]
    
    [include]
    
    [libs]
    ./node_modules/chimee-helper-dom/lib/index.flow.js
    [options]
    
    [lints]
    

    doc

    Table of Contents

    dom

    src/index.js:11-11

    一些常用的DOM判断及操作方法,可以使用dom.$('*')包装DOM,实现类jQuery的链式操作;当然这里的静态方法也可以直接使用。

    Meta

    • author: huzunjie

    getAttr

    src/index.js:22-24

    读取HTML元素属性值

    Parameters

    Returns String

    setAttr

    src/index.js:32-38

    设置HTML元素属性值

    Parameters

    addClassName

    src/index.js:45-59

    为HTML元素添加className

    Parameters

    • el HTMLElement 目标元素
    • cls String 要添加的className(多个以空格分割)

    removeClassName

    src/index.js:66-84

    为HTML元素移除className

    Parameters

    • el HTMLElement 目标元素
    • cls String 要移除的className(多个以空格分割)

    hasClassName

    src/index.js:92-94

    检查HTML元素是否已设置className

    Parameters

    Returns Boolean

    supportsPassive

    src/index.js:100-100

    addEventListener 是否已支持 passive

    Returns Boolean

    removeEvent

    src/index.js:120-132

    为HTML元素移除事件监听

    Parameters

    • el HTMLElement 目标元素
    • type String 事件名称
    • handler Function 处理函数
    • once Boolean 是否只监听一次 (optional, default false)
    • capture Boolean 是否在捕获阶段的监听 (optional, default false)

    addEvent

    src/index.js:142-159

    为HTML元素添加事件监听

    Parameters

    • el HTMLElement 目标元素
    • type String 事件名称
    • handler Function 处理函数
    • once Boolean 是否只监听一次 (optional, default false)
    • capture (Boolean | Object) 是否在捕获阶段监听,这里也可以传入 { passive: true } 表示被动模式 (optional, default false)

    addDelegate

    src/index.js:169-193

    为HTML元素添加事件代理

    Parameters

    • el HTMLElement 目标元素
    • selector String 要被代理的元素
    • type String 事件名称
    • handler Function 处理函数
    • capture Boolean 是否在捕获阶段监听 (optional, default false)

    removeDelegate

    src/index.js:203-210

    为HTML元素移除事件代理

    Parameters

    • el HTMLElement 目标元素
    • selector String 要被代理的元素
    • type String 事件名称
    • handler Function 处理函数
    • capture Boolean 是否在捕获阶段监听 (optional, default false)

    getStyle

    src/index.js:218-220

    读取HTML元素样式值

    Parameters

    Returns String

    setStyle

    src/index.js:228-236

    设置HTML元素样式值

    Parameters

    query

    src/index.js:245-248

    根据选择器查询目标元素

    Parameters

    • selector String 选择器,用于 querySelectorAll
    • container HTMLElement 父容器 (optional, default document)
    • toArray Boolean 强制输出为数组

    Returns (NodeList | Array)

    removeEl

    src/index.js:254-256

    从DOM树中移除el

    Parameters

    findParents

    src/index.js:265-278

    查找元素的父节点们

    Parameters

    • el HTMLElement 目标元素
    • endEl HTMLElement 最大父容器(不指定则找到html) (optional, default null)
    • haveEl Boolean 包含当前元素
    • haveEndEl Boolean 包含设定的最大父容器

    NodeWrap

    src/index.js:289-544

    NodeWrap DOM包装器,用以实现基本的链式操作 new dom.NodeWrap('') 相当于 dom.$('') 这里面用于DOM操作的属性方法都是基于上面静态方法实现,有需要可以随时修改补充

    Parameters

    • selector String 选择器(兼容 String||HTMLString||NodeList||NodeArray||HTMLElement)
    • container HTMLElement 父容器(默认为document)

    each

    src/index.js:327-330

    循环遍历DOM集合

    Parameters

    • args ...any
    • fn Function 遍历函数 fn(item, i)

    Returns Object

    push

    src/index.js:337-340

    添加元素到DOM集合

    Parameters

    Returns this

    splice

    src/index.js:348-350

    截取DOM集合片段,并得到新的包装器splice

    Parameters

    • args ...any
    • start Nubmer
    • count Nubmer

    Returns NodeWrap 新的DOM集合包装器

    find

    src/index.js:357-366

    查找子元素

    Parameters

    Returns NodeWrap 新的DOM集合包装器

    append

    src/index.js:373-378

    添加子元素

    Parameters

    Returns this

    appendTo

    src/index.js:385-388

    将元素集合添加到指定容器

    Parameters

    Returns this

    text

    src/index.js:395-402

    DOM集合text内容读写操作

    Parameters

    • val String 文本内容(如果有设置该参数则执行写操作,否则执行读操作)

    Returns this

    html

    src/index.js:409-416

    DOM集合HTML内容读写操作

    Parameters

    • html String html内容(如果有设置该参数则执行写操作,否则执行读操作)

    Returns this

    attr

    src/index.js:424-429

    DOM集合属性读写操作

    Parameters

    • name String 属性名称
    • val String 属性值(如果有设置该参数则执行写操作,否则执行读操作)

    Returns this

    data

    src/index.js:437-447

    DOM集合dataset读写操作

    Parameters

    • key String 键名
    • val Any 键值(如果有设置该参数则执行写操作,否则执行读操作)

    Returns this

    css

    src/index.js:455-460

    DOM集合样式读写操作

    Parameters

    • key String 样式key
    • val String 样式值(如果有设置该参数则执行写操作,否则执行读操作)

    Returns this

    addClass

    src/index.js:467-469

    为DOM集合增加className

    Parameters

    • cls String 要增加的className

    Returns this

    removeClass

    src/index.js:476-478

    移除当前DOM集合的className

    Parameters

    • cls String 要移除的className

    Returns this

    hasClass

    src/index.js:485-487

    检查索引0的DOM是否有className

    Parameters

    • cls String 要检查的className

    Returns this

    on

    src/index.js:497-499

    为DOM集合添加事件监听

    Parameters

    • type String 事件名称
    • handler Function 处理函数
    • once Boolean 是否只监听一次 (optional, default false)
    • capture Boolean 是否在捕获阶段监听 (optional, default false)

    Returns this

    off

    src/index.js:509-511

    为DOM集合解除事件监听

    Parameters

    • type String 事件名称
    • handler Function 处理函数
    • once Boolean 是否只监听一次 (optional, default false)
    • capture Boolean 是否在捕获阶段监听 (optional, default false)

    Returns this

    delegate

    src/index.js:521-523

    为DOM集合绑定事件代理

    Parameters

    • selector String 目标子元素选择器
    • type String 事件名称
    • handler Function 处理函数
    • capture Boolean 是否在捕获阶段监听 (optional, default false)

    Returns this

    undelegate

    src/index.js:533-535

    为DOM集合解绑事件代理

    Parameters

    • selector String 目标子元素选择器
    • type String 事件名称
    • handler Function 处理函数
    • capture Boolean 是否在捕获阶段监听 (optional, default false)

    Returns this

    remove

    src/index.js:541-543

    从DOM树中移除

    Returns this

    $

    src/index.js:552-554

    根据选择器查询并得到目标元素的wrap包装器

    Parameters

    • selector String 选择器,另外支持 HTMLString||NodeList||NodeArray||HTMLElement
    • container HTMLElement 父容器

    Returns Object

    Install

    npm i chimee-helper-dom

    DownloadsWeekly Downloads

    45

    Version

    0.1.8

    License

    MIT

    Last publish

    Collaborators

    • welefen
    • huzunjie
    • toxicjohann
    • yandeqiang
    • gaoyiyi
    • songguangyu