先扫盲：

　　摘自菜鸟教程：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. How to trace the Geolocation of network traffic

    A case about suspicious malware App. A forensic examiner capatured some pcap files and he'd to know ...

  2. kafka入门

    1.Kafka独特设计在什么地方?2.Kafka如何搭建及创建topic.发送消息.消费消息?3.如何书写Kafka程序?4.数据传输的事务定义有哪三种?5.Kafka判断一个节点是否活着有哪两个条件 ...

  3. [.NET产品源码保护].NET防止反编译（非混淆加密）

    .NET产品源码保护产生的背景: .NET源码加密方案支持C#及VB.NET等语言开发的ASP.NET及WINFORM应用.利用.NET支持托管代码与非托管代码共存的特性,将C#代码经过处理放于非托管 ...

  4. html5表单元素详解

    表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...

  5. STM32学习笔记（五）——通用定时器计数延时

    STM32定时器概述 STM32F40x系列总共最多有14个定时器,定时器分为三类:基本定时器.通用定时器和高级定时器.它们的都是通过计数来达到定时的目的,和51的定时器差不多,基本原理都是一样的,就 ...

  6. 【2017-04-24】winform基础、登录窗口、窗口属性

    一.winform基础  客户端应用程序:C/S 客户端应用程序可以操作用户电脑中的文件,代码要在用户电脑上执行,吃用户电脑配置. 窗体是由控件和属性做出来的 控件:窗体里所放的东西."视图 ...

  7. Array和ArrayCollection作为数据源的一个应用区别

    在不用[Enabled]元标签的前提下,将一个Array赋值给DataGrid.DataList等控件的DataProvider后,当Array值发生改变时,控件显示内容不会及时更新(可调用控件的in ...

  8. MOSFET使用与H桥驱动问题

    0.小叙闲言 最开始学习三极管的时候,很注重它的工作原理,后来到了实际应用,就直接把三极管或MOSFET直接当作一个开关器件使用.直到前这几天,接触到MOSFET组成的H桥驱动电路时,发现它纯当作一个 ...

  9. win10用命令net启动服务没权限解决办法

    法一.右击cmd命令图标,以管理员身份运行即可. 或者 法二.打开cmd命令的位置->右击属性->高级->勾上"以管理员身份运行"->确定.

  10. OK 开始实践书上的项目一：即使标记

    OK 开始实践书上的项目一:及时标记 然而....又得往前面看啦! ----------------------我是分割线------------------------ 代码改变世界