先扫盲：

　　摘自菜鸟教程：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这个对象触发事件，进而执行的是一个典型的遍历赋值动作，这个不多做解释。

jquery中html、text、val回调函数的更多相关文章

  1. jquery中html(), text(),val()区别(zhuan)

    https://zhidao.baidu.com/question/307317838.html http://www.cnblogs.com/aqbyygyyga/archive/2011/11/0 ...

  2. js与jquery中html() text() val()中的区别

    首先html() text() val() 是jquery方法. 1.html()取得内容可以包含标签. 2.text()取得内容为元素文本内容. 3.val()只有value属性的元素才能使用该方法 ...

  3. jquery中html()/text()/val()区别

    html就是你可以添加<span></span><li></li>的标记text只能写文本如果写了上面的标记则会以文本形式输出,就是输出标签体的内容va ...

  4. JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系？jQuery中的text()、html()和val()

    一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HT ...

  5. jQuery中的text(),html(),val()用法

    jQuery中的text(),html(),val()用法 text():获取或者改变指定元素的文本 html():获取或改变指定元素的html元素以及文本 val():获取或者改变指定元素的valu ...

  6. 不能调用jquery中ready里面定义的函数？

    现象:不能调用jquery中ready里面定义的函数 源码:<script type="text/javascript"> $(document).ready(func ...

  7. python中进程池和回调函数

    一.数据共享 1.进程间的通信应该尽量避免共享数据的方式 2.进程间的数据是独立的,可以借助队列或管道实现通信,二者都是基于消息传递的. 虽然进程间数据独立,但可以用过Manager实现数据共享,事实 ...

  8. Unity C# 调用 C++ DLL 并在 DLL 中调用 C# 的回调函数

    Unity C# 调用 C++ DLL 并在 DLL 中调用 C# 的回调函数~~~    呵呵... 看着有点晕.. 再解释一下就是 在Unity中 使用 C# 调用 C++ 写的 DLL, 但是在 ...

  9. jQuery中的text()、html()和val()以及innerText、innerHTML和value

    *jQuery中设置或者获取所选内容的值:text();设置或者获取所选元素的文本内容: html();设置或者获取所选元素的内容(包括html标记): val();设置或者获取表单字段的值(前提是表 ...

随机推荐

  1. 浩哥解析MyBatis源码（九）——Type类型模块之类型处理器注册器（TypeHandlerRegistry）

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6709157.html 1.回顾 上一篇研究的是类型别名注册器TypeAliasRegist ...

  2. 使用NPOI生成Excel级联列表

    目录 1    概要    1 2    磨刀不误砍柴工——先学会Excel中的操作    2 3    利用NPOI生成导入模板    7 3.1    设置workbook&sheet   ...

  3. 是什么让C＃成为最值得学习的编程语言

    随着 Web.iOS.Android.智能设备的流行,新的编程语言纷纷涌现并表现不俗,如 Ruby,Python,Scala,Go,Node.js,Swift 等.反观已经发展了近20年的 C# 语言 ...

  4. MongDB系列(一)：使用node.js连接数据库

    1.首先启动mongodb数据库服务器 2.创建app.js,代码如下: /** * Created by byzy on 2016/8/18. * node.js 连接 mongodb实例 */ / ...

  5. Latex 公式在线可视化编辑器

    寻觅 最近的一个demo需要用到Latex公式在线编辑器,从搜索引擎一般会得到类似http://latex.codecogs.com/eqneditor/editor.php的结果,这个编辑器的问题在 ...

  6. 一、iOS中的事件可以分为3大类型

    触摸事件加速计事件远程控制事件 响应者对象在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象" UIApplica ...

  7. 如何有效快速提高Java服务端开发人员的技术水平？

    我相信很多工作了3-5年的开发人员都会经常问自己几个问题: 1.为什么总是感觉技术没有质的提高? 2.如何能够有效和快速的提高自身的技术水平? 3.如何进入到一个牛逼的大公司,认识牛逼的人? 这篇文章 ...

  8. java运算符 与（&）、非（~）、或（|）、异或（^）

    最近看HashMap源码,遇到了这样一段代码: static final int hash(Object key) { int h; return (key == null) ? 0 : (h = k ...

  9. MyBatis-plus 代码自动生成器

    MyBatis-plus  代码自动生成器 1.添加pom文件依赖 <!-- Mybatis-Plus 自动生成实体类--> <dependency> <groupId& ...

  10. 【代码学习】PHP 正则表达式

    一.正则表达式介绍 正则表达式是用于描述字符排列和匹配模式的一种规则,主要用于字符串的匹配.查找.替换.分割等操作 ------------------------------------------ ...