先扫盲：

　　摘自菜鸟教程：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. node.js系列（实例）：原生node.js+formidable模块实现简单的文件上传

    /** * 原生node.js结合formidable模块实现图片上传改名 * @Author:Ghost * @Date:2016/07/15 * @description: * 1.引入模块htt ...

  2. 解决CentOS虚拟机克隆后无法上网（网卡信息不一致）的问题

    一.问题描述 虚拟机克隆后,由于网卡信息不一致的问题,导致不能上网或者执行"sercice network restart"命令失败 [root@lyy 桌面]# ifconfig ...

  3. 基于Hadoop分布式集群YARN模式下的TensorFlowOnSpark平台搭建

    1. 介绍 在过去几年中,神经网络已经有了很壮观的进展,现在他们几乎已经是图像识别和自动翻译领域中最强者[1].为了从海量数据中获得洞察力,需要部署分布式深度学习.现有的DL框架通常需要为深度学习设置 ...

  4. python基本数据类型——set

    一.集合的定义 set集合,是一个无序且不重复的元素集合. 集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键.集合支持用in和not in操作符检查成员,由len()内建函数得到集合的基数 ...

  5. C语言的一些基础

    一.C语言基础: 1.1.main函数是入口函数,用于进行link. 1.2..sln是解决方案的管理文件. 1.3.int:32位.short:16位.long:32位.long long:64位. ...

  6. easyUI中datagrid的使用

    easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...

  7. button按钮点击不刷新（前端交流学习：452892873）

    <button type="button" value="test" >确认买单</button> 可实现页面点击不刷新效果

  8. PHP三维数组拼装

    foreach ($records as $k => $v) { foreach ($records as $m => $n) { if ($v['days'] == $n['days'] ...

  9. sublime设置 快捷键（自动换行）

    一.菜单view > word wrap选上就好了 二.如果让编辑器默认是自动换行的话把它保存到配置中 Preference > Settings-User插入以下一行配置 "w ...

  10. Oracle的正则应用之匹配出手机号

    按照要求匹配出符合中国大陆手机号规则的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into te ...