`

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>

 

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

 

.

分享到:
评论

相关推荐

    html Swiper 插件 视频轮播 轮播图

    此外,Swiper提供了丰富的API和事件,可以让我们在轮播过程中执行各种操作,如暂停视频、控制进度等。例如,当用户点击视频时,我们可以暂停Swiper的自动切换: ```javascript document.querySelectorAll('.swiper-...

    swiper h5手机页面

    总结来说,Swiper是H5手机页面开发中的强大工具,它的全屏滚动功能和丰富的定制选项为设计师和开发者提供了无限的创作空间。通过熟练掌握Swiper,你可以创建出更加引人入胜、交互性强的移动端网页,提升用户的浏览...

    jQuery swiper水平左右滑动时间轴特效

    3. **DOM操作**:jQuery提供了方便的DOM操作方法,如`.append()`、`.prepend()`,可以用于添加新的时间轴项目或在滑动时调整可视区域的内容。 4. **响应式设计**:为了确保在不同屏幕尺寸和设备上都能正常工作,...

    vue生命周期来解释为什么vue-awesome-swiper插件中length=01

    开发者需要根据不同的生命周期阶段合理安排数据获取、DOM操作和第三方库的初始化,以确保所有部分协同工作。在本例中,问题的根源在于`swiper`实例的初始化发生在数据尚未加载完成时,因此需要调整初始化时机,确保...

    手机触屏滑动图片切换插件swiper.js.zip

    jQuery的引入则简化了DOM操作和事件处理,使得在Swiper.js中绑定和触发事件更加便捷。Swiper.js兼容jQuery的API,使得开发者可以利用熟悉的jQuery语法来操作滑动组件。 在实际应用中,Swiper.js还可以与Bootstrap、...

    jQuery基于swiper.js可触摸滑动的发展历程时间轴特效.zip

    总结来说,这个项目展示了jQuery与swiper.js的协同工作,创造了一个具有触摸滑动功能的时间轴特效,这涉及到DOM操作、事件处理、CSS样式和JavaScript动画的综合应用。通过理解并实践这样的项目,开发者可以提升在...

    jQuery+swiper响应式新闻内容图片滚动代码.zip

    jQuery简化了DOM操作、事件处理、动画效果和Ajax交互等任务。其核心功能包括选择器(用于快速定位HTML元素)、DOM操作(增删改元素)和事件绑定。例如,使用`$(selector).action()`结构,可以轻松实现对元素的操作...

    jQuery+swiper响应式布局图文滚动轮播代码.zip

    总结,这个"jQuery+swiper响应式布局图文滚动轮播代码"项目,结合了jQuery的易用性和Swiper的高性能,为网页设计师和开发者提供了一个高效且灵活的解决方案,用于创建高质量的响应式图文滚动轮播效果。通过深入理解...

    jQuery+Swiper仿魅族幻灯片轮播和导航栏特效.zip

    总结来说,"jQuery+Swiper仿魅族幻灯片轮播和导航栏特效"涉及到的关键知识点包括:jQuery的DOM操作和动画API,Swiper的配置和API,HTML结构设计,CSS样式布局,以及JavaScript事件监听和响应。这个案例不仅展示了...

    jQuery+swiper.js实现的手机触屏滑动切换幻灯片效果代码.zip

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和Ajax交互等任务,而swiper.js是专为移动设备设计的一个高性能的触摸滑动组件,适合构建滑动幻灯片、轮播图和其他滚动内容。 首先,让我们深入了解...

    swiper上下滑动选择效果

    JavaScript 部分,Swiper 使用 jQuery 作为辅助库,简化DOM操作。在 `js` 文件夹中的脚本(可能是 `swiper.js` 或 `main.js`)中,我们需要导入 Swiper 库和 jQuery,然后通过以下方式初始化 Swiper: ```...

    Swiper导航内容多列切换代码

    jQuery是一个流行的JavaScript库,它简化了DOM操作,使得Swiper的初始化和事件处理更加简便。在HTML结构中,你需要为每个导航项创建一个对应的滑块元素,并在JavaScript中进行初始化: ```html &lt;div class="swiper-...

    swiper图文卡片滑块切换特效

    jQuery 是一个流行的 JavaScript 库,它简化了 DOM 操作和事件处理。Swiper 则是一个独立的库,专门用于创建滑动效果。确保在 HTML 文件中添加正确的 CDN 链接或者将文件下载到本地项目中: ```html ...

    【JavaScript源代码】React + Threejs + Swiper 实现全景图效果的完整代码.docx

    全景图效果通常利用3D渲染技术来实现,本例中使用了React框架结合Three.js进行开发,并且加入了Swiper轮播库来增加交互性。下面将对整个实现过程进行详细的讲解。 ##### 一、Three.js 基础与全景图创建 Three.js ...

    jQuery图片视差轮播切换代码.zip

    jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件处理和动画效果。在本实例中,jQuery用于处理页面元素的交互,如点击事件,以及与swiper.js的通信。而swiper.js则是一个强大的滑动组件,特别适合创建轮播...

    swiper-menu-mobileui:滑动功能可打开从左向右滑动的菜单

    总结来说,"swiper-menu-mobileui"是一个针对移动设备的JavaScript库,用于创建可以从屏幕边缘滑出的菜单。通过这个库,开发者可以轻松地在网页应用中添加这种互动式的菜单功能,提升用户的操作体验。同时,库本身...

    放大镜效果的JS图片展示

    这通常通过JavaScript和CSS来实现,利用了DOM操作和图像像素处理。 2. **HTML结构** 基本的HTML结构包括两张图片:一张是原始图片,另一张是用于放大的高分辨率图片。高分辨率图片通常隐藏,只在需要放大时显示。 ...

    手机端html5滑动选择题插件

    总结来说,手机端HTML5滑动选择题插件的核心技术包括HTML5的响应式布局、jQuery库用于DOM操作和事件处理,以及Swiper插件实现平滑的滑动效果。这样的插件不仅提供了良好的用户体验,而且易于开发和维护,是构建移动...

    中软国际企业实训自我总结

    2. JavaScript插件:Modal.js用于创建模态框,而jQuery.js则提供了一套高效的选择器和DOM操作方法,如$.ajax()用于实现异步数据加载,$.get()和$.post()用于HTTP请求,$.blur()处理失去焦点的事件。jQuery对象是构造...

    jquery(中文帮助文档+在线实例)

    由于其简洁易用的API,jQuery迅速成为了Web开发中最流行的库之一,尤其在处理DOM操作时,极大地提高了开发效率。 ### 一、jQuery基础 1. **选择器**: jQuery提供了丰富的选择器,如ID选择器(`#id`), 类选择器(`....

Global site tag (gtag.js) - Google Analytics