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>

相关推荐