jquery中html、text、val回调函数
2024-10-13 22:35:14
先扫盲:
摘自菜鸟教程:jQuery 方法:text()、html() 以及 val()拥有回调函数。
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串
再上代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script>
$("li").click(function () {
$(this).html(function(i,originTex){
return (originTex+i);
})
})
</script>
</html>
很奇怪,当点击元素"li"时总是在旧文本后追加下标0,与预期不一样。
再看接下来代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script>
// $("li").click(function () {
// $(this).html(function(i,originTex){
// return (originTex+i);
// })
// })
$(document).click(function(){
$("li").html(function(i,originTxt){
$(this).html(originTxt+i);
})
})
</script>
</html>
改变事件源,期待的结果出现了。
【代码解析】
第一种情况触发事件的是当前触发点击事件的li元素,$(this)指向它,只有一个元素,所以其下标一直是0;
第二种情况仅仅是通过document这个对象触发事件,进而执行的是一个典型的遍历赋值动作,这个不多做解释。
最新文章
- layoutSubviews总结
- VS的工程链接优化的问题
- sql server日志不能shrink或truncate
- PEAR:使用PHPDoc轻松建立你的PEAR文档
- 关闭MyEclipse的Quick Update
- Select标签 依据value值默认选中 Jquery
- Hadoop-2.2.0中国文档—— MapReduce 下一代 -- 公平调度
- 第4章1节《MonkeyRunner源码剖析》ADB协议及服务: ADB协议概览OVERVIEW.TXT翻译参考(原创)
- Machine Learning/Introducing Logistic Function
- 基于 Koa平台Node.js开发的KoaHub.js连接打印机的代码
- Concurrent下的线程安全集合
- C语言基础一(敲打键盘、寻找资料)
- CSS魔法(二)
- osg剔除背面开启
- 编码问题:python写入文件
- 微服务架构之spring cloud hystrix&;hystrix dashboard
- Bridge(桥接)模式
- 解决mac 下mysql安装后root用户登录密码错误问题
- linux文件字符集转换(utf8-gb2312)
- uitableview滚动到最后一行