js进阶  11-14  jquery如何实现元素的替换和遍历

一、总结

一句话总结:替换:replaceAll() 与 replaceWith()。遍历:each()。

1、replaceAll() 与 replaceWith() 的异同是什么?

replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。

31             $('#btn1').click(function(){
32 //$('li:last').replaceWith($('li:first'))
33 // $('li:last').replaceWith('<li class="orange"></li>')
34 $('li:last').replaceWith(function(){
35 return '<li class="orange"></li>'
36 })
37 })
38 $('#btn2').click(function(){
39 //$($('li:first')).replaceAll($('li:last'))
40 $('<li class="orange"></li>').replaceAll($('li:last'))
41 })

2、jquery中怎么实现元素的遍历?

each()方法

42             $('#btn3').click(function(){
43 // $('li').each(function(){
44 // alert($(this).text())
45 // })
46 $('li').each(function(index){
47 var arr=["HTML5","JavaScript", "jQuery"]
48 $(this).text(arr[index])
49 })
50 })

3、jquery的替换的参数中可以放哪些东西?

jquery选择器(jquery对象),标签(dom的elememt对象),匿名函数(返回dom的element对象)

31             $('#btn1').click(function(){
32 //$('li:last').replaceWith($('li:first'))
33 // $('li:last').replaceWith('<li class="orange"></li>')
34 $('li:last').replaceWith(function(){
35 return '<li class="orange"></li>'
36 })
37 })

二、jquery如何实现元素的替换和遍历

1、相关知识

  1. 替换节点

    • replaceWith():用指定的 HTML 内容或元素替换被选元素。
    • replaceAll():用指定的 HTML 内容或元素替换被选元素。

      replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。

  2. 遍历节点:each()

    在jQuery中,我们可以使用each()方法来轻松实现元素的遍历操作。

    语法:$(selector).each(function(index))

2、代码

 <!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{
background: #ccc;margin-top: 25px;width: 150px;
}
.orange{background: orange}
.red{background: red}
.green{background: green}
.ccc{background: #ccc;}
</style>
</style>
</head>
<body>
<ol>
<li class="orange">1</li>
<li class="red"><i>2</i></li>
<li class="green">3</li>
</ol>
<input id="btn1" type="button" value='replaceWith'>
<input id="btn2" type="button" value='replaceAll'>
<input id="btn3" type="button" value='each'>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
//$('li:last').replaceWith($('li:first'))
// $('li:last').replaceWith('<li class="orange"></li>')
$('li:last').replaceWith(function(){
return '<li class="orange"></li>'
})
})
$('#btn2').click(function(){
//$($('li:first')).replaceAll($('li:last'))
$('<li class="orange"></li>').replaceAll($('li:last'))
})
$('#btn3').click(function(){
// $('li').each(function(){
// alert($(this).text())
// })
$('li').each(function(index){
var arr=["HTML5","JavaScript", "jQuery"]
$(this).text(arr[index])
})
})
})
</script>
</body>
</html>
 

js进阶 11-14 jquery如何实现元素的替换和遍历的更多相关文章

  1. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. js进阶课程 12-9 jquery的事件对象event的方法有哪些?

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶 11-17 juqery如何查找一个元素的同级元素

    js进阶 11-17 juqery如何查找一个元素的同级元素 一.总结 一句话总结:三个方法,向前(prev()),向后(next())和兄弟(siblings()),而前面两个每个都对应三个,pre ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$)

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

随机推荐

  1. 11.Bean2Document-BEAN转document

    1. package com.glodon.gspm.adapter.plugin.common; import com.glodon.cloudt.tenancy.context.TenantCon ...

  2. 洛谷——P1316 丢瓶盖

    https://www.luogu.org/problem/show?pid=1316 题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想 ...

  3. 《开源公开课分享》:Java开源框架案例分享

        缺乏高端技术人才?缺乏开发标准?    代码复用性低?技术风险难于把控?     招聘成本高?培训成本高?    假设想法不够雄伟,那么就会局限于细节:假设一開始就铺很大的摊子,将会失去控制: ...

  4. 使用差分VHD启动Win7

    平台:windows 8.1 目的:在VHD里装个Win7 介绍:建立VHD装系统姑且不表,比较有意思的是用差分VHD备份系统这点. 差分硬盘这个概念在虚拟机里常用,类似VM中的快照,不过差分硬盘更灵 ...

  5. Java vs C++:子类覆盖父类函数时缩小可访问性的不同设计

    Java 和 C++ 都是面向对象的语言,允许对象之间的继承.两个语言的继承都设置有允许子类覆盖父类的“虚函数”,加引号是因为 Java 中没有虚函数这一术语,但是我们的确可以把 Java 的所有函数 ...

  6. POJ 2718 Smallest Difference 枚举

    http://poj.org/problem?id=2718 题目大意: 给你一些数字(单个),不会重复出现且从小到大.他们可以组成两个各个位上的数字均不一样的数,如 0, 1, 2, 4, 6 ,7 ...

  7. Java FutureTask Example Program(Java FutureTask例子)

    Sometime back I wrote a post about Java Callable Future interfaces that we can use to get the concur ...

  8. ex.Message "ORA-01691: Lob 段 USER_MURPHY.SYS_LOB0000093717C00006$$ 无法通过 1024 (在表空间 ZJHH 中) 扩展"

    Oracle,往数据库里导入dmp的时候报错:ORA-01691:Lob 段 无法通过8192(在表空间TS_SI中)扩展 解决方案1: 原因:所创建的表空间不足. 创建一个可拓展的表空间 creat ...

  9. android开发-获取wifi列表

    近期博主在学frangment框架,因此想着想着就想通过listfragment完毕对wifi列表的获取. 好! 如今就不说废话了. 一.wifi的基础知识 在Android的官方文档中定义了例如以下 ...

  10. zabbix自定义监控mysql

    创建用户: use mysql; grant all privileges on *.* to 'zabbix'@'%' identified by 'zabbixpasswd'; grant all ...