jquery中val获取值，attr获取属性值和attr设置属性值

最新推荐文章于 2024-06-19 19:53:31 发布
最新推荐文章于 2024-06-19 19:53:31 发布
阅读量8.8k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010746364/article/details/53319162
版权

（1）这里可以看到只能获取到input的值，但不能获取button的值。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Value: " + $("#test").val());
  });

  $("#btn2").click(function(){
    alert("Value: " + $("#btnValue").val());
  });
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="coding"></p>
<button id="btnValue">获取此button的值</button></br></br>

<button id="btn1">显示值1</button>
<button id="btn2">显示值2</button>

</body>

</html>




（2）可以看到这里获取了input的属性value的值coding，也获取到了button的属性id的值为btnValue。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Value: " + $("#test").attr("value"));
  });

  $("#btn2").click(function(){
    alert("Value: " + $("#btnValue").attr("id"));
  });
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="coding"></p>
<button id="btnValue">获取此button的值</button></br></br>

<button id="btn1">显示值1</button>
<button id="btn2">显示值2</button>

</body>

</html>



（3）attr设置属性值：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
window.flag =true;
$(document).ready(function(){
  $("#btn1").click(function(){
   $("#test1").attr("id", "number");
  });

  $("#btn2").click(function(){
   if (window.flag) {
       alert("value:" + $("#test1").text());
   } else {
       alert("value:" + $("#number").text());
   }
   window.flag = !window.flag;
  });
});
</script>
</head>

<body>
<p id="test1">这是<b>粗体</b>文本。</p>

<button id="btn1">设置属性id</button>
<button id="btn2">获取属性为id的值</button>
</body>
</html>


u010746364
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 获取多选框的值及多选框中文的函数
10-22
在jQuery中，获取多选框（checkbox）的值和对应的中文文本是一项常见的需求，尤其是在处理用户输入或表单提交时。本文将详细讲解如何利用jQuery实现这一功能。 首先，我们来看一个基本的HTML结构，这通常包含一组多...
jQuery的attr（）方法
anfield的门柱
09-08 1351
1. attr(属性名) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ） 2. attr(属性名, 属性值) //设置属性的值 （为所有匹配的元素设置一个属性值。） 3. attr(属性名,函数值) //设置属性的函数值 （为所有匹配的元素设置一个计算的属性值。不提供值，
jquery设置attr属性值
weixin_30591551的博客
05-27 85
1.返回属性值 $(selector).attr(attribute); 2.设置属性值 $(selector).attr(attribute,value); 3.设置多个属性值 $(selector).attr({ 　　attribute:value, 　　attribute:value }); 多个键值对都用{}，里面各用key:value,来写 J...
jQuery常用属性函数
最新发布
m0_64455070的博客
06-19 991
获取或设置备选元素的属性值。 2、.removeAttr（） 功能： 从被选元素中移出一个或多个属性。$(selector).removeAttr(attributeName) 3、.prop() 功能: 获取或设置被选元素的属性值，特别适用于某些具有布尔值的属性，如 、 和 。 注意：对于大多数属性， 和 可以互换使用，但 更适合处理那些表示 DOM 元素状态的属性，如 、 和 。在指定的元素上存储和检索数据，这些数据是私有的，不会影响元素的 DOM 结构。 5、.val()
jQuery的attr()方法和JavaScript的属性操作
rr20060119的博客
10-13 434
使用来读取元素的属性值。使用来设置元素的属性值。使用来设置多个属性的值。使用来移除元素的属性。使用来检查属性是否存在。使用来添加自定义数据属性。使用回调函数来根据属性的旧值来设置新值。
jQuery怎样获得内容和属性？
qq_52265298的博客
12-12 1529
测试内容
jquery attr/attribute()方法
乐杨俊浅谈LAMP
10-16 8100
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以全部搞定了,赞一个先 ^^ jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. at
jQuery操作DOM之获取表单控件的值
10-24
总结来说，jQuery的`.val()`方法是处理表单控件值的最佳选择，它简化了DOM操作，确保了在获取和设置值时的准确性和实时性。熟练掌握这一方法，将极大地提高jQuery编程的效率和代码的可读性。在开发过程中，结合使用`...
jQuery实现获取多选框的值示例
10-15
在本示例中，我们将详细探讨如何使用jQuery来获取多选框（checkbox）的值，同时了解相关的jQuery事件响应和页面元素属性获取方法。 首先，我们需要了解jQuery的选择器。在jQuery中，`$`符号是库的主入口点，用于...
Jquery属性的获取/设置及样式添加/删除操作技巧分析
10-15
在jQuery中，对元素属性和样式的操作是常见的任务，这包括获取属性值、设置属性值、添加或删除样式。以下是对这些操作的详细解析： 首先，jQuery提供了`attr()`方法来获取或设置元素的属性。例如，我们可以使用`$(...
详谈jQuery中使用attr(), prop(), val()获取value的异同
10-19
在jQuery中，`attr()`, `prop()`, 和 `val()` 都是用来获取或设置HTML元素属性的方法，但在处理特定属性如"value"时，它们之间存在微妙的差异。这篇文章将详细探讨这三种方法在获取input元素value值时的不同之处。 ...
js中attr的用法
hwt的博客
10-09 1万+
$(document).ready(function(){         $("#btn").click(function(){             //使用attr(name)获取属性值：             alert($("p").attr("title"));//你最喜欢的水果是。             alert($("ul li:eq(1)").attr("titl
jQuery基础：prop（）与attr（）的区别
weixin_33940102的博客
10-05 58
1、结论： 处理HTML本身的属性，使用prop（） 处理HTML自定义属性，使用attr（） 2、对待属性值为true 或者false类的元素： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docu...
js-使用attr()方法
热门推荐
春暖花未开
05-20 2万+
在使用attr()过程中遇到些许问题，总结归纳一下：获取xo标签attribute属性的值$(xo).attr(attribute)设置attribute属性的值为value$(xo).attr(attribute, value)设置多个attribute属性的值value们$(xo).attr({attribute1: value1, attribute2: value2})...
jq 对象的 attr 和 data 方法
weixin_34080571的博客
03-21 554
有一定基础的前端一定对 jq 中的 attr() 和 data() 方法不陌生，attr() 可以获取 html 元素的属性，其中包括自定义属性（data-xxx） <div class="test" a="a" data-id="1"></div> <script> $('div').attr('a'); // a ...
重写按钮---attr属性的使用
点点滴滴
12-26 268
 首先呢 我们重写两个按钮事件 一个图片button 一个用文字button package com.pocketjourney.view; import com.pocketjourney.tutorials.R; import android.content.Context; import android.content.res.TypedArray; import ...
复习之JQuery基本语法（一）——选择器、JQuery对象属性与方法
IManiy的博客
09-24 279
JQuery简介 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和A...
jquery禁用、启用button以及button的样式操作
CHINAHamilton的博客
11-06 829
1、 jQ禁用按钮 $("#btn").attr(‘disabled’,true); $("#btn").attr(‘disabled’,‘disabled’); $("#btn").prop(‘disabled’,‘disabled’); 2、jQ启用按钮 $("#btn").attr(‘disabled’,false); $("#btn").removeAttr(“disabled”); $(...
操纵DOM之---attr 获取与设置属性的值
天下无敌庞成勇
11-16 4480
在使用JavaScript编写网页代码的过程中，多数时间都在操纵DOM，比如Ajax返回json数据、动态地向DOM添加显示节点或者是动态地更改页面上元素的CSS和属性等。DOM的全称是Document Object Model，即文档对象模型，是一种与浏览器、平台和语言无关的接口，它可以让用户代码访问任何浏览器中呈现的元素，可以将DOM看作是网页呈现的一种标准。attr 获取与设置属性的值 要
jquery 方法调用获取值
08-23
要使用jQuery方法获取元素的值，可以使用`.text()`方法来获取文本内容，`.val()`方法来获取输入框的值，或者`.attr()`方法来获取元素的属性值。例如，如果要获取一个`<div>`元素中的文本内容，可以使用`$('div').text()`方法。如果要获取一个输入框中的值，可以使用`$('input').val()`方法。如果要获取一个元素的自定义属性值，可以使用`$('element').attr('attributeName')`方法。请根据具体需求选择合适的方法来获取元素的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [自学分享--jQuery的基本调用](https://blog.csdn.net/weixin_50967329/article/details/120626314)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值