MyException - 我的异常网
当前位置:我的异常网» Web前端 » Swiper中的DOM操作小结

Swiper中的DOM操作小结

www.MyException.Cn  网友分享于:2013-03-09  浏览:0次
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>

 

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

 

.

文章评论

聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
一个程序员的时间管理
一个程序员的时间管理
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
中美印日四国程序员比较
中美印日四国程序员比较
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员必看的十大电影
程序员必看的十大电影
我是如何打败拖延症的
我是如何打败拖延症的
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
10个调试和排错的小建议
10个调试和排错的小建议
漫画:程序员的工作
漫画:程序员的工作
Java程序员必看电影
Java程序员必看电影
那些争议最大的编程观点
那些争议最大的编程观点
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
每天工作4小时的程序员
每天工作4小时的程序员
老程序员的下场
老程序员的下场
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员和编码员之间的区别
程序员和编码员之间的区别
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
我的丈夫是个程序员
我的丈夫是个程序员
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员的鄙视链
程序员的鄙视链
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
代码女神横空出世
代码女神横空出世
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员都该阅读的书
程序员都该阅读的书
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
为什么程序员都是夜猫子
为什么程序员都是夜猫子
编程语言是女人
编程语言是女人
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有