先扫盲：

　　摘自菜鸟教程：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. js中计算两个日期之差

    js中计算两个日期之差            var aBgnDate, aEndDate;            var oBgnDate, oEndDate;            var nYl ...

  2. gulp基于seaJs模块化项目打包实践【原创】

    公司还一直在延续使用jq+seajs的技术栈,所以只能基于现在的技术栈进行静态文件打包,而众所周知seajs的打包比较"偏门",在查了不少的文档和技术分享后终于琢磨出了自己的打包策 ...

  3. StringBuilder的实现

    先看看MS给出的官方解释吧 (http://msdn.microsoft.com/zh-cn/library/system.text.stringbuilder(VS.80).aspx) String ...

  4. URL传中文参数导致乱码的解决方案之encodeURI

    通过URL传中文参数时,在服务端后台获取到的值往往会出现乱码问题,解决方案有很多种,本文主要介绍如何通过encodeURI来解决中文乱码问题: first:前端传递参数的时候需要对中文参数进行两次en ...

  5. 消息队列NetMQ 原理分析3-命令产生/处理和回收线程

    消息队列NetMQ 原理分析3-命令产生/处理和回收线程 前言 介绍 目的 命令 命令结构 命令产生 命令处理 创建Socket(SocketBase) 创建连接 创建绑定 回收线程 释放Socket ...

  6. SVD之最小二乘【推导与证明】

    0.SLAM中SVD进行最小二乘的应用 在SLAM应用中,计算Homography Matrix,Fundamental Matrix,以及做三角化(Triangulation)时,都会用到最小二乘 ...

  7. Redhat 安装ftp服务

    介绍: 1 安装ftp服务端及客户端 2 ftp的使用

  8. ajax获取数据后怎么去渲染到页面？

    $.ajax({ url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:fo ...

  9. Struts2之Action接收请求参数和拦截器

    技术分析之在Struts2框架中使用Servlet的API        1. 在Action类中也可以获取到Servlet一些常用的API        * 需求:提供JSP的表单页面的数据,在Ac ...

  10. python中从文件中读取数据

    # average5.py def main(): fileName = input("What file are the numbers in?") infile = open( ...