jquery获取input type=text中的值的各种方式-js教程-PHP中文网

首页

web前端

js教程

jquery获取input type=text中的值的各种方式

高洛峰

Feb 11, 2017 pm 04:59 PM

下面小编就为大家带来一篇jquery获取input type=text中的值的各种方式(总结)。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

实例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>JQuery获取文本框的值</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    //使用id的方式获取
    $(document).ready(function(){
      //1
      $("#button_text1").click(function(){
        var result1 = $("#input_text1").val();
        alert("result1 = " + result1);
      });
      //2
      $("#button_text2").click(function(){
        var result2 = $("input[id=&#39;input_text2&#39;]").val();
        alert("result2 = " + result2);
      });
      //3
      $("#button_text3").click(function(){
        var result3 = $("input[id=&#39;input_text3&#39;]").attr("value");
        alert("result3 = " + result3);
      });
      //4. 可以通过type的值来获取input中的值（未演示）
      /*
      $("#button_text4").click(function(){
        var result4 = $("input[type=&#39;text&#39;]").val();
        alert("result4 = " + result4);
      });
      */
      //5. 可以通过name的值来获取input中的值（未演示）
      /*
      $("#button_text5").click(function(){
        var result5 = $("input[name=&#39;text&#39;]").val();
        alert("result5 = " + result5);
      });      
      */
    });
    </script>
  </head>

  <body>
    <!-- 获取文本框的值：方式一 -->
    <p id="test1">
      <input id="input_text1" type="text" value="test1" style="width: 100px;" />
      <button id="button_text1">test1</button>
    </p>
    <!-- 获取文本框的值：方式二 -->
    <p id="test2">
      <input id="input_text2" type="text" value="test2" style="width: 100px;" />
      <button id="button_text2">test2</button>
    </p>
    <!-- 获取文本框的值：方式三 -->
    <p id="test3">
      <input id="input_text3" type="text" value="test3" style="width: 100px;" />
      <button id="button_text3">test3</button>
    </p>
  </body>

</html>

登录后复制

以上这篇jquery获取input type=text中的值的各种方式(总结)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多jquery获取input type=text中的值的各种方式相关文章请关注PHP中文网！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7504

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何创建和发布自己的JavaScript库？ Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？ Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码？ Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何使用源地图调试缩小JavaScript代码？ Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。

开始使用Chart.js：PIE，DONUT和BUBBLE图表 Mar 15, 2025 am 09:19 AM

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。创建饼图和环形图饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体