Swiper3自带有DOM7库,因此无需另外加载Jquery等库即可对Dom7对象使用以下常用的DOM操作
| Classes | |
|---|---|
| .addClass(className) | 给元素增加class
|
| .removeClass(className) | 删除指定的class
|
| .hasClass(className) | 元素上是否有指定的class |
| .toggleClass(className) | 有则删除,无则添加 |
| 属性 | |
| .attr(attrName) | 获取一个属性值 |
| .attr(attrName, attrValue) | 设置一个属性值 |
| .attr(attributesObject) | 设置多个属性值 |
| .removeAttr(attrName) | 删除属性值 |
| 数据存储 | |
| .data(key, value) | 在选中的元素上存储任意数据 |
| .data(key) | 如果只有一个参数,则读取指定的值,如果有两个参数 data(key, value) 则是设置值 |
| CSS transform, transitions | |
| .transform(CSSTransformString) | 添加带前缀的transform 样式:
|
| .transition(transitionDuration) | 设置css transition-duration 属性 |
| 事件 | |
| .on(eventName, handler, useCapture) | 在选中的元素上绑定事件 |
| .on(eventName, delegatedTarget, handler, useCapture) | 通过代理绑定事件 |
| .once(eventName, handler, useCapture) | 添加回调函数或者事件句柄,这些事件只会执行一次。 |
| .off(eventName, handler, useCapture) | 删除事件绑定 |
| .off(eventName, delegatedTarget, handler, useCapture) | 删除通过代理绑定的事件 |
| .trigger(eventName, eventData) | 触发选中元素上的事件,指定所有的事件回调函数 |
| .transitionEnd(callback, permanent) | 在选中的元素上增加 transitionEnd 事件回调 |
| Styles | |
| .width() | 获取当前选中元素中的第一个元素的当前计算出来的宽度。只能获取不能设置 |
| .outerWidth([includeMargin]) | 获取当前选中元素中的第一个元素的当前计算出来的宽度,包括 padding ,border 和 margin(如果 includeMargin 设置为 true) |
| .height() | 获取当前选中玄素中的第一个元素的当前计算出来的高度 |
| .outerHeight([includeMargin]) | 获取当前选中元素中的第一个元素的当前计算出来的高度,包括 padding ,border 和 margin(如果 includeMargin 设置为 true) |
| .offset() | 获取当前选中元素的第一个元素相对 document 的位置偏移 |
| .css(property) | 获取选中元素中第一个元素的CSS属性值 |
| .css(property, value) | 设置全部选中元素中的CSS属性值
|
| Dom 操作 | |
| .each(callback) | 遍历集合,对其中每一个元素执行回调。 |
| .html() | 获得选中的第一个元素的HTML内容 |
| .html(newInnerHTML) | 给全部选中元素设置HTML内容 |
| .text() | 获得选中的第一个元素的文本内容 |
| .text(newTextContent) | 给全部选中元素设置文本内容 |
| .is(CSSSelector) | 选中的元素是否符合指定的CSS选择器 |
| .is(HTMLElement) | 选中的元素是否是给定的 DOM 元素或者 Dom7 集合 |
| .index() | 当前选中的第一个元素在他的所有兄弟节点中的排序 |
| .eq(index) | 返回当前选中的元素中的指定序号的元素
|
| .append(HTMLString) | 在当前选中元素的每一个后面插入指定内容 |
| .append(HTMLElement) | 在当前选中元素的每一个后面插入指定元素 |
| .prepend(newHTML) | 在当前选中元素的每一个前面插入指定内容 |
| .prepend(HTMLElement) | 在当前选中元素的每一个前面插入指定元素 |
| .insertBefore(target) | 把当前选中的每一个元素插入到指定的目标之前。目标(target)应该是一个 CSS 选择器或者 HTML 元素 或者 Dom7集合 |
| .insertAfter(target) | 把当前选中的每一个元素插入到指定的目标之后。目标(target)应该是一个 CSS 选择器或者 HTML 元素 或者 Dom7集合 |
| .next([selector]) | 获得当前选中的每一个元素的下一个直接兄弟元素。如果提供了一个选择器(selector),那么会用这个选择器来过滤这些兄弟元素。 |
| .nextAll([selector]) | 获得当前选中的每一个元素之后的全部兄弟元素。如果提供了一个选择器(selector),那么会用这个选择器来过滤这些兄弟元素。 |
| .prev([selector]) | 获得当前选中的每一个元素的上一个直接兄弟元素。如果提供了一个选择器(selector),那么会用这个选择器来过滤这些兄弟元素。 |
| .prevAll([selector]) | 获得当前选中的每一个元素之前的全部兄弟元素。如果提供了一个选择器(selector),那么会用这个选择器来过滤这些兄弟元素。 |
| .parent([selector]) | 获取选中的每一个元素的父元素。如果提供了一个选择器(selector),那么会用这个选择器来过滤这些父元素。 |
| .parents([selector]) | 获取选中的每一个元素的祖先元素。如果提供了一个选择器(selector),那么会用这个选择器来过滤这些祖先元素。 |
| .find(selector) | 在选中的每一个元素的后代中查找指定的元素。 |
| .children(selector) | 在选中的每一个元素的直接孩子中查找指定的元素。 |
| .remove() | 从DOM中删除选中的元素 |
| .add() | 增加一个元素 |
由于DOM7升级频繁,如有错漏请至论坛纠正