Swiper中的DOM操作总结
zhangyusng 2018-03-03
【前言】
结合教程和说明文档，这里我记录下Swiper中相关的DOM操作
【目录列表】
（1）Classes类；
（2）属性；
（3）数据存储；
（4）CSS transform变换和 transitions过渡；
（5）事件；
（6）styles样式；
（7）Dom操作
【详解】
（1）Classes类操作
①.addClass(className) 给元素增加class---mySwiper.$el.addClass('MyClass');
②.removeClass(className) 删除指定的class
③.hasClass(className) 判断元素上是否有指定的class
④.toggleClass(className) 有则删除，无则添加
（2）属性操作
①.attr(attrName) 获取一个属性值
②.attr(attrName, attrValue) 设置一个属性值
③.attr(attributesObject) 设置多个属性值
④.removeAttr(attrName) 删除属性值
（3）数据存储
①.data(key, value) 在选中的元素上存储任意数据
②.data(key) 如果只有一个参数，则读取指定的值，如果有两个参数 data(key, value) 则是设置值------与属性操作attr()类似，.attr(attrName)获取属性值和.attr(attrName, attrValue)设置值
（4）CSS transform变换和 transitions过渡
①.transform(CSSTransformString) 添加带前缀的transform 样式：
swiper.slides.eq(0).transform('scale(0.8) translateX(100px)')②.transition(transitionDuration) 设置css transition-duration 属性；
（5）事件
①.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事件回调
（6）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})（7）Dom操作
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #00bcd4;
}
</style>
</head>
<body>
<div class="one">我是1</div>
<div class="one">我是2</div>
<div class="one">我是3</div>
<script src="./jquery.min.js"></script>
</body>
</html> 接下来依次实验Demo操作：①.each(callback) 遍历集合，对其中每一个元素执行回调
$(function(){
var value = $("div").each(cb);
function cb(){
console.log("回调函数")
}
})②.html() 获得选中的第一个元素的HTML内容
$(function(){
var value = $("div").html();
console.log(value)
})③.html(newInnerHTML) 给全部选中元素设置HTML内容
$(function(){
var value = $("div").html('更改内容');
console.log(value)
})④.text() 获得选中的元素的文本内容
例如：获取所有class为'one'的元素的内容：
$(function(){
var value = $("div").text();
console.log(value)
})⑤.text(newTextContent) 给全部选中元素设置文本内容
例如：设置所有class为'one'的元素的内容：
$(function(){
var value = $("div").text('更改');
console.log(value)
})注意：关于.text()和.html()的区别，我在文章.text()与.html()区别里做了总结
⑥.val() 获取或修改表单元素的value值
<input class="two" value="235">
<script>
$(function(){
console.log("获取input的value值"+$(".two").val());
var change = $(".two").val("修改235");
console.log(change)
})
</script>⑦.is(CSSSelector) 选中的元素是否符合指定的CSS选择器，返回布尔值
$(function(){
var value = $("div").is('.one');
console.log(value);
})
⑧.is(HTMLElement) 选中的元素是否是给定的 DOM 元素或者 Dom7 集合
$(function(){
var value1 = $("div").is('form');
console.log(value1);
var value2 = $("div").is('div');
console.log(value2);
}) ⑨.index() 当前选中第一个元素在他的所有兄弟节点中的排序（从0开始）
$(function(){
var value1 = $("div").index();
console.log(value1);
}) ⑩.eq(index) 返回当前选中的元素中的指定序号的元素
$(function(){
var value2 = $("div").eq('1');
console.log(value2);//这里会输出"我是2"的标签
})swiper里：
mySwiper.slides.eq(0).addClass('className');⑪.append(HTMLString/HTMLElement) 译为附加（HTML字符串或元素），在当前选中元素的每一个后面插入指定内容，即字符串或元素标签
添加字符串：
$(function(){
var value2 = $("div").eq('1').append('我是append到后面的');
console.log($("div").eq('1').text())
})添加元素：
<style type="text/css">
.append{color:red;}
</style>
<script>
$(function(){
var value2 = $("div").eq('1').append('<div class="append">附加元素</div>');
console.log($("div").eq('1').text())
})
</script>⑫.prepend(newHTML) 翻译为前置（）在当前选中元素的每一个前面插入指定内容
前置HTML元素：
<style type="text/css">
.append{
color: red;
}
</style>
<script>
$(function(){
var value2 = $("div").eq('1').prepend('<span class="append">前置元素</span>');
console.log($("div").eq('1').text())
})
</script>前置字符串：
<script>
$(function(){
var value2 = $("div").eq('1').prepend('前置元素');
console.log($("div").eq('1').html())
})
</script>⑬.insertBefore(target)把当前选中的每一个元素插入到指定的目标之前。目标（target）应该是一个 CSS 选择器或者 HTML 元素 或者 Dom7集合；
对应的.insertAfter(target)插入到目标之后
.insertBefore(target)插入目标之前：
$(function(){
var value2 = $("div").eq('1').insertBefore($("div").eq('0'));
//现在"我是2"被插入到了"我是1"的前面
}).insertBefore(target)插入目标之后：
$(function(){
$("div").eq('1').insertAfter($("div").eq('2'));
//现在"我是3"被插入到了"我是2"的前面
})⑭next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素
$(function(){
var value = $("div").eq('1').next();
//，因为没有提供选择器，所以这里会获取"我是2"的紧邻的（所有）同胞元素
console.log(value)
})提供选择器，过滤兄弟元素：
<div class="one">我是1</div>
<div class="three">我是1的兄弟元素</div>
<div class="one">我是2</div>
<div class="four">我是2的兄弟元素</div>
<div class="one">我是3</div>
<div class="three">我是3的兄弟元素</div>
<script src="./jquery.min.js"></script>
<script>
$(function(){
var value = $("div").next('.four');
console.log(value);//这里只会输出类名有"four"的兄弟元素
})
</script>⑮.nextAll([selector]) 获得当前选中的每一个元素之后的全部兄弟元素。如果提供了一个选择器（selector），那么会用这个选择器来过滤这些兄弟元素
注意：.next([selector])与.nextAll([selector])的区别
next:同级元素中紧贴着的后面一个元素；nextAll：同级元素中后面所有的元素
<div class="one">我是1</div>
<div class="three">我是1的兄弟元素</div>
<div class="one">我是2</div>
<div class="four">我是2的兄弟元素</div>
<div class="one">我是3</div>
<div class="three">我是3的兄弟元素</div>
<script src="./jquery.min.js"></script>
<script>
$(function(){
var next = $("div").eq(0).next();
console.log(next);
var nextAll = $(".one").next();
console.log(nextAll)
})
</script>⑯.parent([selector]) 获取选中元素的直接父元素。如果提供了一个选择器（selector），那么会用这个选择器来过滤这些父元素
.parents([selector]) 获取选中元素的祖先元素
<div class="parents">
<div class="parent">
<div class="one">我是1</div>
<div class="three">我是1的兄弟元素</div>
<div class="one">我是2</div>
<div class="four">我是2的兄弟元素</div>
<div class="one">我是3</div>
<div class="three">我是3的兄弟元素</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function(){
var parent = $(".one").eq(0).parent();
console.log(parent);
var parents = $(".one").eq(0).parents();
console.log(parents)
})
</script>⑰.find(selector) 在选中的每一个元素的后代中查找指定的元素
.find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选
<div class="parents">
<div class="parent">
<div class="one">我是1</div>
<div class="three">我是1的兄弟元素</div>
<div class="one">我是2</div>
<div class="four">我是2的兄弟元素</div>
<div class="one">我是3</div>
<div class="three">我是3的兄弟元素</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function(){
var parent = $(".parent").find('.four');
console.log(parent);
})
</script>⑱.children(selector) 在选中的每一个元素的直接子元素中查找指定的元素
$(function(){
var children = $(".parent").children('');
console.log(children);
})由选择器筛选是可选的，例如：
$(function(){
var children = $(".parent").children('.four');
console.log(children);
})注意：.children()与.find()区别
.children()获取的是该元素的下级元素，而通过.find()获取的是该元素的下级所有元素
例如：
<div class="parents">
<div class="parent">
<div class="one">我是1</div>
<div class="three">我是1的兄弟元素</div>
<div class="one">我是2</div>
<div class="four">我是2的兄弟元素</div>
<div class="one">我是3</div>
<div class="three">我是3的兄弟元素</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function(){
var children = $(".parents").children('.four');
console.log(children.text());
var find = $(".parents").find('.four');
console.log(find.text());
})
</script>这里可以发现.children()获取不到.four的值，若想用.children()方法获取，可以这样写
var children = $(".parents").children().children('.four');
console.log(children.text());⑲.remove() 从DOM中删除选中的元素
<div class="parents">
<div class="parent">
<div class="one">我是1</div>
<div class="three">我是1的兄弟元素</div>
<div class="one">我是2</div>
<div class="four">我是2的兄弟元素</div>
<div class="one">我是3</div>
<div class="three">我是3的兄弟元素</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function(){
var value = $(".parents").find('.four').remove();
console.log(value);
})
</script>⑳.add() 增加一个元素
<button>添加一个span元素</button>
<p>一个P元素。</p>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").add("<br><span>一个新的span元素。</span>").appendTo("p");
});
});
</script> 