js进阶 11-14 jquery如何实现元素的替换和遍历
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、相关知识
- 替换节点
- replaceWith():用指定的 HTML 内容或元素替换被选元素。
- replaceAll():用指定的 HTML 内容或元素替换被选元素。
replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。
- 遍历节点: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如何实现元素的替换和遍历的更多相关文章
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 11-17 juqery如何查找一个元素的同级元素
js进阶 11-17 juqery如何查找一个元素的同级元素 一.总结 一句话总结:三个方法,向前(prev()),向后(next())和兄弟(siblings()),而前面两个每个都对应三个,pre ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）
js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...
随机推荐
- Apache通用日志工具commons-logging和Log4j使用总结
转自:https://blog.csdn.net/lzl13391522110/article/details/53758536 Apache通用日志工具commons-logging和Log4j使用 ...
- Java Web学习总结（1）——JavaWeb开发入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
- VBS 脚本调用
https://my.oschina.net/Tsybius2014/blog/602641
- 51NOD——T 1079 中国剩余定理
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1079 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难 ...
- 洛谷 P1781 宇宙总统
P1781 宇宙总统 题目背景 宇宙总统竞选 题目描述 地球历公元6036年,全宇宙准备竞选一个最贤能的人当总统,共有n个非凡拔尖的人竞选总统,现在票数已经统计完毕,请你算出谁能够当上总统. 输入输出 ...
- [TypeScript@2.5] Omit catch error block if not needed
From TypeScript@2.5, you can omit catch error block. Before: try { throw new Error('whatever'); } ca ...
- vue的使用（一）
之前找了一个学前端的同学,给我免费做几个页面,但是后来也就杳无音信了,今天脑子发热自己学一下vue算了. 本节目标: 安装以及数据绑定 1.安装和运行 ·必须要安装nodejs,这个到网上写 ...
- 并发，two
引言 为了更加形象的描述并发的基础知识,因此本文LZ采用了园子里一度大火的标题形式--"没听说过XXXX,就不要说你XXXX了".希望能够给猿友们一个醒目的警醒,借此来普及并发的基 ...
- (最新)使用爬虫刷CSDN博客访问量——亲测有效
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 1.概述 前言:前两天刚写了第一篇博客https://blog.csdn.net/qq_41782425/article/deta ...
- 讨论：怎样加快android的开机时间
如题,近期项目须要,须要将android的开机时间大幅缩短,查了下网上资料,作用有限,望有处理过相关问题的兄弟姐妹參与讨论,给予不吝赐教,期待ing