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 ...
随机推荐
- [ Eclipse ] [ Problem ] Eclipse 無法開啟問題
因為 Eclipse 在設定環境的過程掛掉太多次,擷取一些網路上優秀的文章當作備份 http://www.ewdna.com/2013/12/Eclipse-Loading-Workbench.htm ...
- maven仓库快速镜像
国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...
- 使用dotcloud免费ssh
使用dotcloud免费ssh https://www.dotcloud.com一个项目在线托管网站,注册后可以免费托管两个项目. 注册帐号,在ubuntu中执行下面命令,安装dotcloud环境 s ...
- ajax利用php上传图片
<script type="text/javascript"> window.onload = function(){ document.getElementById( ...
- GDB中创建要素数据集
转自 在geodatabase中创建要素集 //在数据集中创建要素 private void menuItem25_Click(object sender, System.EventArgs e) { ...
- mahout測试朴素贝叶斯分类样例
对于这个測试建议大家先理解原理,这里我画了例如以下的示意图 接下来就依照例如以下的细节来输入指令測试: 首先前提是Hadoop安装并启动,mahout已经安装了. <strong>< ...
- Css fixed和absolute定位差别
fixed:固定定位 absolute:绝对定位 差别非常easy: 1.没有滚动栏的情况下没有差异 2.在有滚动栏的情况下.fixed定位不会随滚动栏移动而移动.而absolute则会随滚动栏移动 ...
- Qt的焦点策略
Qt的窗口部件在图形用户界面中按用户的习惯的方式来处理键盘焦点.基本出发点是用户的击键能定向到屏幕上窗口中的任何一个,和在窗口中任何一个部件中.当用户按下一个键,他们期望键盘焦点能够到达正确的位置,并 ...
- linux安装anaconda
打开网址:https://repo.continuum.io/archive/ 下载对应版本: 然后把下载的文件放到linux系统上 在终端执行: bash Anaconda3-5.1.0-Linux ...
- Hibernate与代理模式
代理模式:当须要调用某个对象的时候.不须要关心拿到的是不是一定是这个对象,它须要的是,我拿到的这个对象能够完毕我想要让它完毕的任务就可以,也就是说.这时调用方能够拿到一个代理的一个对象,这个对象能够调 ...