`

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='input_text2']").val();  
                alert("result2 = " + result2);  
            });  
            //3  
            $("#button_text3").click(function(){  
                var result3 = $("input[id='input_text3']").attr("value");  
                alert("result3 = " + result3);  
            });  
            //4. 可以通过type的值来获取input中的值(未演示)  
            /*  
            $("#button_text4").click(function(){  
                var result4 = $("input[type='text']").val();  
                alert("result4 = " + result4);  
            });  
            */  
            //5. 可以通过name的值来获取input中的值(未演示)  
            /*  
            $("#button_text5").click(function(){  
                var result5 = $("input[name='text']").val();  
                alert("result5 = " + result5);  
            });           
            */  
        });  
        </script>  
    </head>  
  
    <body>  
        <!-- 获取文本框的值:方式一 -->  
        <div id="test1">  
            <input id="input_text1" type="text" value="test1" style="width: 100px;" />  
            <button id="button_text1">test1</button>  
        </div>  
        <!-- 获取文本框的值:方式二 -->  
        <div id="test2">  
            <input id="input_text2" type="text" value="test2" style="width: 100px;" />  
            <button id="button_text2">test2</button>  
        </div>  
        <!-- 获取文本框的值:方式三 -->  
        <div id="test3">  
            <input id="input_text3" type="text" value="test3" style="width: 100px;" />  
            <button id="button_text3">test3</button>  
        </div>  
    </body>  
  
</html>  
分享到:
评论

相关推荐

    jquery获取input type=text中的值的各种方式(总结)

    本篇文章将详细总结在使用jQuery获取input type="text"元素中的值时的各种方法。 首先需要了解的是,在HTML中,input元素通常用来创建各种表单控件,其中input type="text"就是用来创建单行文本输入框。jQuery提供...

    jquery获取input表单值的代码

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[name=items][checked]’).val(); 获取select被选中项的文本 var ...

    Jquery-Ajax各种获取方式

    Jquery-Ajax各种获取方式 &lt;body&gt; &lt;input id="getJsData" type="button" value="获取js值"/&gt; &lt;input id="getMessage" type="button" value="获取单个值"/&gt; &lt;input id="getUserInfo" type=...

    jquery获取form表单input元素值的简单实例

    在本篇内容中,我们将详细探讨如何使用jQuery来获取form表单中input元素的值,包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法,我们可以轻松获取或设置input...

    jquery获取表单值

    获取文本框(`&lt;input type="text"&gt;`)的值 文本框是最常见的表单元素之一。使用jQuery获取文本框的值非常简单: ```javascript var textVal = $("#text_id").val(); // 使用.val()方法获取值 ``` **注意:** `....

    jquery获取input输入框中的值

    如何用javascript获取...一、jquery获取input文本框中的值 通过 name var name = $('input[name="CN_NAME"]').val(); 通过 id var name = $('#CN_NAME').val(); 通过 class var name = $('.CN_NAME').val(); 二、jav

    JQuery获取input控件值.docx

    下面将详细解释如何使用jQuery来获取和设置text、textarea、radio、checkbox以及select等不同类型的input控件的值。 1. **获取text和textarea值**: - 对于`&lt;input type="text"&gt;`和`&lt;textarea&gt;`,可以使用`.attr()...

    JavaScript和jQuery获取input框的绝对位置

    在这个场景中,`input`框可以是任何类型的输入元素,如`&lt;input type="text"&gt;`, `&lt;textarea&gt;`, 或自定义的可编辑区域。不论何时,只要需要知道输入框在页面上的具体位置,以上的方法都可以派上用场。 需要注意的是,...

    点击input,弹出日期选择框

    在这个场景中,我们需要一个特定类型的`input`,即`type="text"`,但为了显示日期选择器,我们需要将其类型改为`type="date"`。这样的`input`标签会像这样编写: ```html &lt;input type="date" id="datePicker" ...

    jquery对所有input type=text的控件赋值实现方法

    在本例中,我们学习了如何使用 jQuery 选择器和 `each()` 函数来遍历并修改所有 `type="text"` 的 `input` 控件的值。这只是一个基础示例,实际上 jQuery 可以处理更复杂的场景,如异步请求、事件绑定等,是前端...

    jQuery实现input[type=file]多图预览上传删除等功能

    根据给定文件内容,下面介绍有关于jQuery实现input[type=file]多图预览上传删除功能的知识点。 ### jQuery实现多图上传预览与删除功能 #### 1. 前端界面结构 在实现多图上传预览与删除功能时,首先需要布局一个...

    如何用正则取input type=text中的value

    本文将重点讨论如何通过正则表达式获取`&lt;input type="text"&gt;`标签中的`value`值,并过滤掉`&lt;input type="checkbox"&gt;`标签。 1. **获取`&lt;input type="text"&gt;`中的`value`值** 在HTML文档中,`&lt;input&gt;`标签可以有多种...

    jQuery在div中去input的值

    本文将详细讲解如何使用jQuery在div中获取和操作input元素的值。 首先,理解基本的HTML结构是至关重要的。假设我们有一个包含input元素的div,其HTML代码可能如下所示: ```html &lt;div id="myDiv"&gt; &lt;input type=...

    jQuery获取Select选择的Text和_Value

    可以使用 `$("#select_id option[text='jQuery']").attr("selected", true)` 方法设置 Select 的 Text 值为 jQuery 的项选中。 三、 jQuery 添加/删除 Select 的 Option 项 jQuery 也提供了方法来添加或删除 ...

    javascript input自动赋值

    在上述例子中,无论使用原生JavaScript还是jQuery,我们都是通过获取input元素并设置其value属性来实现自动赋值的。这种方法对于动态页面尤其有用,比如从服务器获取数据后填充表单,或者根据用户的行为改变输入框的...

    jQuery动态添加&lt;input type="file"&gt;

    #### 获取`&lt;input type="text"&gt;`中的值 除了文件上传功能,表单中通常也会包含文本输入框,供用户输入各种文本信息。使用jQuery同样可以简化获取文本输入框值的过程。 1. **通过ID获取值**:在jQuery中,可以使用`...

    JQuery实现动态表格点击按钮表格增加一行

    6. 表单元素的创建:在新插入的行中创建了文本输入框(`&lt;input type="text"&gt;`)以及按钮(`&lt;input type="button"&gt;`)。这些表单元素可以用于用户输入数据或触发事件。 7. 用户交互反馈:当用户点击“删除”按钮时,...

Global site tag (gtag.js) - Google Analytics