Swiper中的DOM操作

Swiper 自带有DOM7 库,因此无需另外加载Jquery 即可对Dom7/Jquery 对象使用以下常用操作。这些操作适用于Swiper5 和Swiper4,但是要注意DOM7 的更新。

Classes
.addClass(className) 给元素增加class
mySwiper.$el.addClass('MyClass');
.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 样式:
swiper.slides.eq(0).transform('scale(0.8) translate3d(0, 0, 0)')
//translate3d开启3D加速
.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
.offset() 获取当前选中元素的第一个元素相对 document 的位置偏移
.css(property) 获取选中元素中第一个元素的CSS属性值
.css(property, value) 设置全部选中元素中的CSS属性值
mySwiper.slides.css("background-color", "yellow")
mySwiper.slides.css({"background-color":"yellow", "z-index":1})
Dom 操作
.each(callback) 遍历集合,对其中每一个元素执行回调。
.html() 获得选中的第一个元素的HTML内容
.html(newInnerHTML) 给全部选中元素设置HTML内容
.text() 获得选中的第一个元素的文本内容
.text(newTextContent) 给全部选中元素设置文本内容
.is(CSSSelector) 选中的元素是否符合指定的CSS选择器
.is(HTMLElement) 选中的元素是否是给定的 DOM 元素或者 Dom7 集合
.index() 当前选中的第一个元素在他的所有兄弟节点中的排序
.eq(index) 返回当前选中的元素中的指定序号的元素
mySwiper.slides.eq(0).addClass('className');
.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升级频繁,如有错漏请至论坛纠正