https://zhidao.baidu.com/question/299628455.html

这个问题包含两个方面:jquery选择器(即针对你指定的那个input元素)和获取内容(即获得输入的值),所以综合起来有如下代码可以实现

$("input#test").val();         // 推荐这种方式,因为id是唯一的
$("input[name='test']").val(); // 此时需要注意是否有同名的input元素
$("input:text").val();         // 这种方式只有整个网页只有一个文本输入框才是正确的

下面给出示例:

  1. 创建一个文本框和一个触发获取文本框输入内容的按钮

  • <input id="test" name="test" type="text"/>
    <input type="button" value="显示文本框输入内容">
  • 简单设置一下css样式

  • input[type='text']{width:200px;height:35px;margin:10px;border:1px dashed green; border-radius:5px;}
    input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;}
  • 添加jquery代码

  1. $(function(){
        $("input:button").click(function() {
            alert($("input#test").val());
        });
    })
  2. 观察显示效果

24

评论(1)

分享

举报

Jquery 选择html 标签获取值的更多相关文章

  1. jQuery 的三种获取值的方式

    本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法.jQuery中为我 ...

  2. 前端 s 标签获取值

    1.  s标签获取action中的值: <s:property value="#parameters.mySessionPropKey"/> or <s:prop ...

  3. Struts2-使用forEach标签+el标签获取值栈数据

    import cn.web.body.User; import com.opensymphony.xwork2.ActionSupport; import java.util.ArrayList; i ...

  4. h5 datalist标签获取值

    今天使用datalist标签时,想要获得选中的值,发现使用datalist标签上的val()输出结果一直都是空的 后面改用配套的input获得值 代码如下 <!DOCTYPE html> ...

  5. jquery checkbox全选 获取值

    <style> table { line-height:35px; }</style> <div align="left" style="m ...

  6. jquery 封装页面之间获取值

    最近在项目中发页面传值比较繁琐.View →  Control → View,或是Session.Cookie 的 感觉不是很好,于是封装了一个页面间的js方法,上码 $.extend({ reque ...

  7. jquery 选择标题标签

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 6、前端--DOM操作(查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this)

    DOM操作之查找标签 前缀关键字>>>:document # 基本查找(核心) document.getElementById 根据ID获取一个标签 document.getElem ...

  9. Firefox、Edge下无法使用jQuery的css("margin")、css("padding”)和css("border")获取值

    今天遇到了浏览器的迷惑行为,在Edge上使用jQuery的css("margin")获取值,发现获取的是空值,换了Firefox也是如此.看了jquery官方原话,发现如下一段话R ...

  10. JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    <script src="jquery.min.js" type="text/javascript"></script> <scr ...

随机推荐

  1. 【保姆级教程】windows 安装 docker 全流程

    一.背景 许多小伙伴在安装 Dify 或是 RagFlow 这些工具的时候,往往会遇到一个难题,那就是 Docker 的安装. 首先,我们的PC安装的绝大部分是 Windows,但众所周知的原因,Wi ...

  2. Linux poweroff 命令

    poweroff 命令命令用于关闭计算器并切断电源. 使用权限:系统管理者. 语法 poweroff [-n] [-w] [-d] [-f] [-i] [-h] 参数说明: -n : 在关机前不做将记 ...

  3. Wolfram常用计算

    1.方程与方程组 例1:求解方程 参考表达式: solve x^3 + 2x^2 - 6x + 5 = 0 real 求解所有根 例2:求解方程: 参考表达式: solve ax^2+bx+c=0 注 ...

  4. 解决多个if-else的方案

    参考链接: 遇到大量if记住下面的口诀: 互斥条件表驱动 嵌套条件校验链 短路条件早return 零散条件可组合 解释: 互斥条件,表示几个条件之间是冲突的,不可能同时达成的.比如说一个数字,它不可能 ...

  5. 鸿蒙动画与交互设计:ArkUI 3D变换与手势事件详解

    大家好,我是 V 哥. 在鸿蒙 NEXT 开发中,ArkUI 提供了丰富的 3D 变换和手势事件功能,可用于创建生动且交互性强的用户界面.下面详细介绍 ArkUI 的 3D 变换和手势事件,并给出相应 ...

  6. Node v18.6 发布的这个新特性未来可能改变前端工程化

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...

  7. NewtonJsonConvert的比较好搭配使用

    (1)与关键字冲突,解决办法加@ var a = new { @class=1, }; var d = JsonConvert.SerializeObject(a); Console.WriteLin ...

  8. Vue知识沉淀

    为什么组件my-item的props是listCount,但传入时候用:list-count传入,而 listCount与list-count不一致 <!DOCTYPE html> < ...

  9. 仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑

    幽蓝君发现一个问题,仓颉开发语言距离发布马上一年了,一些知名App已经使用仓颉开发了许多功能,但是网络上关于仓颉开发语言的教程少之又少,系统性的教程更是没有,仓颉官网的文档也远远不如ArkTS详尽. ...

  10. 赛前十天——递归(easy)

    *理论上,递归与循环是等价的,即任何循环都可以重写为递归形式 eg: package javaPractice; public class Contest {         public stati ...