jquery能不能取到标签的值 js获取标签的值

   2023-02-08 学习力0
核心提示:这篇文章主要介绍“jquery能不能取到标签的值”,在日常操作中,相信很多人在jquery能不能取到标签的值问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery能不能取到标签的值”的疑惑有所帮助!接下来,请跟着小编一起来

这篇文章主要介绍“jquery能不能取到标签的值”,在日常操作中,相信很多人在jquery能不能取到标签的值问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery能不能取到标签的值”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

jquery能取到标签中的值;可以利用val()方法来获取标签中的值,该方法可以返回或者设置被选元素的value属性,返回标签值的语法为“$(selector).val();”,设置标签值的语法为“$(selector).val(value);”。

本文操作环境:windows10系统、jquery3.6.0版、Dell G3电脑。

jquery能取到标签的值吗

jquery中可以使用val()方法获取标签的值,val()方法返回或设置被选元素的value属性。

val() 方法返回或设置被选元素的 value 属性。

当用于返回值时:

$(selector).val()

该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时:

$(selector).val(value)

该方法设置所有匹配元素的 value 属性的值。

示例:

获取设置input标签的值

<input class="form-control" type="text" id="username" name="username" 
placeholder="" value="初始值" onblur="keyblurfun()">
<input class="form-control" type="text" id="username" name="username"
 placeholder="" value="{{ user.get('userid','') }}">
<script>
    var username = $("#username").val();   // 获取 id 为 username 的标签的值。
    console.log(username);
    $("#username").val("hello world");     // 设置 id 为 username 的标签的值
    console.log($("#username").val());
</script>

获取设置textarea标签的值

<textarea class="form-control" id="brief" name="brief" cols=10 rows=6 placeholder="">Java</textarea>
<textarea class="form-control" id="brief" name="brief" cols=10 rows=6 placeholder="">
{{study.get('brief','')}}</textarea>
<script>
    var content= $("#brief").val();          // 获取 textarea 标签的值    
    console.log(content);            // Java
    $("#brief").val("Python");               // 设置 textarea 标签的值
    console.log($("#brief").val());  // Pyt<span style="color:transparent">来源gaodai#ma#com搞*代#码网</span>hon
</script>

返回标签值示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("input:text").val());
});
});
</script>
</head>
<body>
第一个名称: <input type="text" name="fname" value="Peter"><br>
最后一个名称: <input type="text" name="lname" value="Griffin"><br><br>
<button>返回第一个输入字段的值</button>
</body>
</html>

输出结果:

jquery能不能取到标签的值

点击按钮后:

jquery能不能取到标签的值

到此,关于“jquery能不能取到标签的值”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注***网站,小编会继续努力为大家带来更多实用的文章!

 
标签: jquery
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 邮箱自动提示Jquery 插件-实战.失败品
    看到很多 SNS 类网站都有 邮箱注册功能. 参考了一下技术过程,触发事件为 focus keyup 和 后缀 mousedown 事件基本匹配过程就可以完成了. 所以写了下面的代码. 对  万一用户 选择错误.目前很多SNS 站都是要 手动删除后另行选择.我就写一个 focus 替换函数. 
    03-08
  • JQuery——事件绑定bind和on的区别
    引言  通过JQuery对目标对象绑定事件我们大部分都是通过$('选择器').事件名()的形式实现,其实对事件的绑定还可以使用on和bind,为了搞明白两者之间的区别特做记录,以备以后查阅。正文  bind和on都是给元素绑定事件用的,但两者在使用时有些差别,我们最
    03-08
  • jQuery select操作
    获取Select选择的Text和Value:$("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Textvar checkValue=$("#select_id").val(); //获
    03-08
  • React中jquery引用 react 引入css
    React中jquery引用 react 引入css
    在React中引用Jquery比较好玩,获取元素的数据更多1.引入方法举例: 1 import $ from 'jquery'; 23 import { Button } from 'antd'; 45 class testJquery extends React.Component { 67   constructor(props) { 8     super(props); 9 10     this.
    03-08
  • javascript怎么清空一个div里面的内容 jquery
    document.getElementById('BIGDraw').innerHTML = "";$('#BIGDraw').html("");清空div内容  两种都可以 版权声明:本文为博主原创文章,未经博主允许不得转载。
    03-08
  • javascript jQuery 用法 和引用顺序
    引用顺序: 先引css再引js js中先引jQuery,再引jabascript,再引自己写的js 用法:jQuery需要引入一个js文件,并在所有js代码之前  1.找标签:    js: document.getElement....  包含所有的找寻代码     dom对象    jQuery:$(选择器);
    03-08
  • 异步加载统计图组件(jquery+css+div)
    异步加载统计图组件(jquery+css+div)
    操作:http://localhost/test/zimg.html效果: ===============zimg.html代码===============!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/19
    03-08
  • js简单固定table表头及css问题分析。 jquery表头固定列
    js简单固定table表头及css问题分析。 jquery表
    headmeta name="viewport" content="width=device-width" /titleTest02/titlescript src="~/Content/js/jquery-1.7.2.min.js"/scriptscript$(document).ready(function () {$("#tabhead").css("width", $("#MyTable&
    03-08
  • jQuery选择器与CSS选择器
    1. 通过位置选择的几个操作:  :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul下的子元素;:last:同上了,只是是最后一个而已;:first- child:为每个父元
    03-08
  • 纯CSS实现nav导航栏+jQuery实现article区DIV切换
    纯CSS实现nav导航栏+jQuery实现article区DIV切
    效果图: main.html 代码:1 !DOCTYPE html2 html3 head4 titleMyHomepage/title5 meta charset="utf-8" /6 link type="text/css" rel="stylesheet" href="css/reset.css" /7 link type="text/css" rel="stylesheet" h
    03-08
点击排行