Swiper中的DOM操作总结

青春..荒唐

浏览: 962092 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端插件

前端插件

【前言】

结合教程和说明文档，这里我记录下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>

先写到这里，以后有发现再继续补充完善

分享到：

.text()与.html()区别 | 解决网页分辨率的方法

2018-03-03 21:44
浏览 3243
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论