先扫盲：

　　摘自菜鸟教程：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. vue实现简单表格组件

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...

  2. Unity -JsonUtility的使用

    今天,为大家分享一下unity上的Json序列化,应该一说到这个词语,我们肯定会觉得,这应该是很常用的一个功能点:诚然,我们保存数据的时候,也许会用到json序列化,所以,我们有必要快速了解一下它的简 ...

  3. TomCat杀进程

    有时候当你的tomcat启动时会发现 因为报以下的错误: "Several ports ( 8080, 8009) required by Tomcat v6.0 Server at loc ...

  4. 自定义input默认placeholder样式

    input::input-placeholder { color: #fb4747; } input::-webkit-input-placeholder { color: #fb4747; } in ...

  5. webstorm配置编译sass的输出目录

    关于这个的问题,虽说不是很难,但还是踩了点小坑,下面就来介绍下如何使用webstorm配置编译sass的输出目录. 1.下载Ruby 2.使用Ruby安装sass 3.检测是否安装成功. 前面的几步很 ...

  6. redis多端口，多实例。

    本屌的redis装载/usr/local/redis了 cp    一份配置 vim  配置文件 port 修改 bind 绑定ip,默认0.0.0.0所有用户允许访问. dbfilename cac ...

  7. 最新的css3动画按钮效果

    效果演示     插件下载

  8. 分布式文件系统：HDFS

    学习Hadoop,两个东西肯定是绕不过,MapReduce和HDFS,上一篇博客介绍了MapReduce的处理流程,这一篇博客就来学习一下HDFS. HDFS是一个分布式的文件系统,就是将多台机器的存 ...

  9. Python CGI编程(转自易百)

    Python CGI编程 Python的CGI编程,公共网关接口或CGI,Web服务器和一个自定义的脚本之间交换信息是一组定义的标准.     什么是CGI ? 公共网关接口或CGI,Web服务器和一 ...

  10. 蓝桥杯-有理数类-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...