Swiper中的DOM操作总结
【前言】
结合教程和说明文档,这里我记录下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>