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升级频繁,如有错漏请至论坛纠正