Cyerversion1.0.3

文档索引

• 快速上手

• 核心部分

  • selector：用于获取和遍历页面的元素，支持的五种格式如下所示。

    • #id
    • .className
    • tagName.className
    • @name
    • node

  • dom操作：对获得的元素进行操作，主要API如下所示。

    • hasClass(className)
    • addClass(className)
    • removeClass(className)
    • css(name, value)
    • html(content)
    • remove()
    • offset()
    • position()
    • height()
    • width()
    • hide()
    • show()
    • append(elem || string)
    • prepend(elem || string)
    • before(elem || string)
    • after(elem || string)

  • event机制

    • bind(type, callback)
    • unbind(type, callback)
    • $.event.add(elem, type, callback)
    • $.event.remove(elem, type, callback)
    • $.event.fix(event)
    • event.preventDefault()
    • event.stopPropagation()

• API文档

  • hasClass(className)
  • addClass(className)
  • removeClass(className)
  • css(name, value)
  • show()
  • hide()
  • scrollLeft()
  • scrollTop()
  • offset()
  • position()
  • height()
  • width()
  • html(content)
  • remove()
  • bind(type, callback)
  • unbind(type, callback)
  • append(elem || string)
  • prepend(elem || string)
  • before(elem || string)
  • after(elem || string)

• 主要全局函数

  • $.isWindow(obj)
  • $.isIE()
  • $.isChrome()
  • $.isFirefox()
  • $.isStr(obj)
  • $.isNum(obj)
  • $.isObj(obj)
  • $.isAry(obj)
  • $.isNodeList(obj)
  • $.isNode(obj)
  • $.contains(a, b)
  • $.extend(destination, source, override)
  • $.deepextend(destination, source)
  • $.each(obj, callback)
  • $.css(elem, name)
  • $.data(elem, name, data)
  • $.removeData(elem, name)
  • $.event.add(elem, type, callback)
  • $.event.remove(elem, type, callback)
  • $.event.fix(event)

快速上手

Cyer api 简洁易懂，接触过jQuery的同学通过阅读文档5分钟即可上手。

引入文件

在页面 head 引入 Cyer脚本文件:

<script src="source/Cyer.js"></script>

选择器

• $("#id")

  概述

  根据元素的id值获取Cyer实例对象，元素的引用是该实例对象的第一个属性。

  参数

  String

  返回值

  Object

• $(".className")

  概述

  根据元素的className获取Cyer实例对象，元素的引用是该实例对象的第一个属性。

  参数

  String

  返回值

  Object

• $("tagName.className")

  概述

  根据元素的tagName以及它的className获取Cyer实例对象，元素的引用是该实例对象的第一个属性。

  参数

  String

  返回值

  Object

• $("@name")

  概述

  根据元素的name属性获取Cyer实例对象，元素的引用是该实例对象的第一个属性。

  参数

  String

  返回值

  Object

• $(node)

  概述

  如果传入的参数是一个元素引用或元素集合引用，则直接获得Cyer实例对象，且该实例对象的第一个属性为传入的元素或元素集合引用。

  参数

  Object

  返回值

  Object

dom操作

• hasClass(className)

  概述

  判断元素或元素集合是否存在给定样式类，返回boolean值。

  参数

  String

  返回值

  Boolean

• addClass(className)

  概述

  为元素或元素集合添加样式类(添加多个样式类时用空格隔开)，返回实例对象，可以链式调用。

  参数

  String

  返回值

  Object

• removeClass(className)

  概述

  删除元素或元素集合的样式类，当不提供className时将删除所有挂在该元素上的样式，返回实例对象，可以链式调用。

  参数

  String || Empty

  返回值

  Object

• css(name, value)

  概述

  读写应用到元素的最终样式： css(name) 访问元素的样式属性； css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式值； css(name, value) 在所有匹配的元素中，设置一个样式属性的值。

  参数

  String || Object

  返回值

  Object || String

• html(content)

  概述

  读写HTML内容(传入content参数时为设置元素的HTML内容，不传入content参数时为获取元素的HTML内容)

  参数

  String || Empty

  返回值

  Object

• remove()

  概述

  移除元素或元素集合

  参数

  Empty

  返回值

  Object

• offset()

  概述

  获取元素相对于文档区域(document)的坐标，返回一个包含left、right、top、bottom属性的对象。

  参数

  Empty

  返回值

  Object

• position()

  概述

  获取元素相对于浏览器视口(window)的坐标，返回一个包含left、right、top、bottom属性的对象。

  参数

  Empty

  返回值

  Object

• height()

  概述

  获取文档区域(document)或元素节点(node)或浏览器视口(window)的高度

  参数

  Empty

  返回值

  Number

• width()

  概述

  获取文档区域(document)或元素节点(node)或浏览器视口(window)的宽度

  参数

  Empty

  返回值

  Number

• hide()

  概述

  隐藏元素或元素集合，返回实例对象。

  参数

  Empty

  返回值

  Object

• show()

  概述

  显示隐藏的元素或元素集合，返回实例对象。

  参数

  Empty

  返回值

  Object

• append()

  概述

  向匹配的元素内部追加节点或HTML内容(注意：追加的HTML内容或节点还是在该匹配元素内部，只不过是成为其最后一个子节点(当存在子节点时))。

  参数

  Object || String

  返回值

  Object

• prepend()

  概述

  向匹配的元素内部前置节点或HTML内容(注意：前置的HTML内容或节点还是在该匹配元素内部，只不过是成为其第一个子节点(当存在子节点时))。

  参数

  Object || String

  返回值

  Object

• before()

  概述

  把一个元素或HTML内容移动到匹配的元素之前。

  参数

  Object || String

  返回值

  Object

• after()

  概述

  把一个元素或HTML内容移动到匹配的元素之后。

  参数

  Object || String

  返回值

  Object

事件机制

• bind(type, callback)

  概述

  为元素绑定事件(目前只支持单个元素的事件绑定)，参数依次为事件类型、事件处理函数，返回实例对象。

  参数

  String && Function

  返回值

  Object

• unbind(type, callback)

  概述

  为元素移除事件(目前只支持单个元素的事件移除)，参数依次为事件类型、事件处理函数，返回实例对象。

  参数

  String && Function

  返回值

  Object

• $.event.add(elem, type, callback)

  概述

  为元素绑定事件(目前只支持单个元素的事件绑定)，参数依次为要绑定的元素、事件类型、事件处理函数，返回实例对象。

  参数

  Object && String && Function

  返回值

  undefined

• $.event.remove(elem, type, callback)

  概述

  为元素移除事件(目前只支持单个元素的事件移除)，参数依次为要处理的元素、事件类型、事件处理函数，返回实例对象。

  参数

  Object && String && Function

  返回值

  undefined

• $.event.fix(event)

  概述

  获取兼容各浏览器的event事件对象，注意--事件对象event只存在于事件处理函数调用期间。

  参数

  Object

  返回值

  Object

• event.preventDefault()

  概述

  取消或阻止浏览器的默认事件

  参数

  Empty

  返回值

  undefined

• event.stopPropagation()

  概述

  取消或阻止事件冒泡

  参数

  Empty

  返回值

  undefined

API

• scrllLeft()

  概述

  获取文档水平滚动距离，不支持写入。

  参数

  Empty

  返回值

  Number

• scrollTop()

  概述

  获取文档垂直滚动距离，不支持写入。

  参数

  Empty

  返回值

  Number

全局函数

• $.isWindow(obj)

  概述

  检测window，返回boolean值。

  参数

  Object

  返回值

  Boolean

• $.isIE()

  概述

  检测是否IE，返回boolean值。

  参数

  Empty

  返回值

  Boolean

• $.isChrome() && $.isWebKit()

  概述

  检测是否chrome，返回boolean值。

  参数

  Empty

  返回值

  Boolean

• $.isFirefox()

  概述

  检测是否Firefox，返回boolean值。

  参数

  Empty

  返回值

  Boolean

• $.isStr(obj)

  概述

  检测是否字符串，返回boolean值。

  参数

  Attribute

  返回值

  Boolean

• $.isNum(obj)

  概述

  检测是否数值，返回boolean值。

  参数

  Attribute

  返回值

  Boolean

• $.isObj(obj)

  概述

  检测是否对象，返回boolean值。

  参数

  Attribute

  返回值

  Boolean

• $.isAry(obj)

  概述

  检测是否可迭代，返回boolean值。

  参数

  Attribute

  返回值

  Boolean

• $.isNodeList(obj)

  概述

  检测是否节点列表(HTMLCollection)，返回boolean值。

  参数

  Attribute

  返回值

  Boolean

• $.isNode(obj)

  概述

  检测是否节点(node)，返回boolean值。

  参数

  Attribute

  返回值

  Boolean

• $.contains(a, b)

  概述

  比较element位置，如果a包含b返回true，否则返回false。

  参数

  Object

  返回值

  Boolean

• $.extend(destination, source, override)

  概述

  扩展对象(override参数的作用是是否覆盖第一个对象中的已有属性,true时覆盖，false时不覆盖，不提供override参数时默认为true)

  参数

  Object || Boolean

  返回值

  Object

• $.deepextend(destination, source)

  概述

  深度扩展对象(当source对象的属性也为对象时，则递归调用直到destination的属性也变成对象)

  参数

  Object && Array

  返回值

  Object

• $.each(obj, callback)

  概述

  遍历对象或迭代数组，注意在callback函数里this引用当前元素。

  参数

  Object && Function

  返回值

  Object

• $.css(elem, name)

  概述

  获取元素的最终样式值

  参数

  Object && String

  返回值

  String

• $.data(elem, name, data)

  概述

  读写缓存，如果没有传入data参数，则为读取缓存，如果传入data参数，则为写入缓存。参数依次为要缓存的元素、缓存名称、缓存的数据(可以是任意类型)，返回缓存的数据。

  参数

  Object && String && Attribute

  返回值

  undefined || Attribute

• $.removeData(elem, name)

  概述

  删除缓存，参数必须对应写入缓存时的参数，即elem、name要一一对应。

  参数

  Object && String

  返回值

  undefined