正文

jquery中attr()方法用法实例

前端问题记录  前端问题记录  2022-08-07  396

关键词：

本文实例讲述了jQuery中attr()方法用法。分享给大家供大家参考。具体分析如下：

此方法设置或返回匹配元素的属性值。 attr()方法根据参数的不同，功能也不同。

语法结构一: 获取第一个匹配元素指定属性的属性值。

代码如下:

$(selector).attr(name)

参数列表:

参数	描述
name	定义要获取其值的属性名称。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>attr()函数-脚本之家</title>
<style type="text/css">
.font{
  font-size:18px;
  color:yellow
}
.bg{
  background:#336;
}
.second{
  color:green
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    alert($("div").attr("class"));
  })
})
</script>
</head>
<body>
<div class="font bg">我是第一个div</div>
<div class="second">我是第二个div</div>
<button id="btn">点击查看效果</button>
</body>
</html>

以上代码中，点击按钮可以弹出匹配元素集合中，第一个元素的class属性值。

语法结构二: 为匹配元素指定的属性设置属性值。

代码如下:

$(selector).attr(attribute,value)

参数列表:

参数	描述
attribute	定义要设置值的属性名称。
value	定义要设置的属性值。

实例代码:

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset=" utf-8">
 5 <meta name="author" content="http://www.jb51.net/" />
 6 <title>attr()函数-脚本之家</title>
 7 <style type="text/css">
 8 div{
 9   width:200px;
10   height:200px;
11   border:1px solid blue
12 }
13 .font{
14   font-size:18px;
15   color:yellow
16 }
17 .bg{
18   background:#336;
19 }
20 .reset{
21   color:green;
22   font-size:20px;
23 }
24 </style>
25 <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
26 <script type="text/javascript">
27 $(document).ready(function(){
28   $("#btn").click(function(){
29     $("div").attr("class","reset");
30   });
31 })
32 </script>
33 </head>
34 <body>
35 <div class="font bg">脚本之家欢迎您</div>
36 <button id="btn">点击查看效果</button>
37 </body>
38 </html>

以上代码中，当点击按钮的时候，能够重新设置div元素的class属性值。

语法结构三: 将“名/值”形式的对象设置为匹配元素的属性。可以一次性设置多组“名/值”对，对匹配元素属性进行设置。

代码如下:

$(selector).attr(properties)

参数列表:

参数	描述
attribute:value	定义属性名/值对

实例代码:

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset=" utf-8">
 5 <meta name="author" content="http://www.jb51.net/" />
 6 <title>attr()函数-脚本之家</title>
 7 <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
 8 <script type="text/javascript">
 9 $(document).ready(function(){
10   $("#btn").click(function(){
11     $("td").attr({width:"200",height:"300"});
12   })
13 })
14 </script>
15 </head>
16 <body>
17 <table border="1">
18 <tr>
19   <td>欢迎来到脚本之家</td>
20 </tr>
21 </table>
22 <button id="btn">点击查看效果</button>
23 </body>
24 </html>

以上代码中，可以设置单元格的宽度和高度。

语法结构四:通过函数返回值设置属性值。

代码如下:

$(selector).attr(name,function(index,oldvalue))

参数列表:

参数	描述
name	定义要设置值的属性的名称。
function(index,oldvalue)	定义返回属性值的函数 index - 可选，接受选择器的索引位置。 class - 可选，接受选择器的当前的属性值。

实例代码:

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset=" utf-8">
 5 <meta name="author" content="http://www.jb51.net/" />
 6 <title>attr()函数-脚本之家</title>
 7 <style type="text/css">
 8 div{
 9   height:200px;
10   width:200px;
11   border:1px solid blue
12 }
13 .font{
14   font-size:18px;
15 }
16 .bg{
17   background:#336;
18   color:red;
19 }
20 .reset{
21   font-size:20px;
22   color:green;
23 }
24 </style>
25 <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
26 <script type="text/javascript">
27 $(document).ready(function(){
28   $("#btn").click(function(){
29     $("div").attr("class" ,function(){
30       return "reset"
31     })
32   })
33 })
34 </script>
35 </head>
36 <body>
37 <div class="font bg">脚本之家欢迎您</div>
38 <button id="btn">点击查看效果</button>
39 </body>
40 </html>

以上代码中，同样可以设置div的class属性值，只是属性值是以函数的返回值方式获得的。

希望本文所述对大家的jQuery程序设计有所帮助。

转自：http://www.jb51.net/article/59428.htm

jquery中animate()方法用法实例

本文实例讲述了jQuery中animate()方法用法。分享给大家供大家参考。具体分析如下：此方法用于创建自定义动画，并且能够规定动画执行时长、擦除效果。动画完成后还可以地触发一个回调函数。animate()方法的使用:方式一:以“属... 查看详情

jquery中.each()的用法。

.each()方法的两个简单例子用法1.<scripttype="text/javascript">$("#dianji").click(function(){varattr=["one","two","three","four"];$.each(attr,function(){//遍历数组attr中的每一项alert(this);});//上面这个each输出的结果分别为：one,t 查看详情

jquery中attr和prop的区别

因为项目中经常会遇到使用attr和prop的情况。趁着有时间总结一下attr和prop的用法。总结起来：1.对于HTML元素本身所固有的属性，在处理时使用prop方法.2.对于HTML元素我们所自定义的DOM属性，在处理时使用attr方法例如：像checkbox，... 查看详情

jquery中data()方法用法实例

语法结构一:复制代码代码如下:$(selector).data(name,value) 参数列表:参数描述name存储的数据名称。value将要存储的任意数据。实例代码: 复制代码代码如下:<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="au... 查看详情

jquery属性-attr()方法

定义和用法attr()方法设置或返回被选元素的属性值。根据选择attr()方法不同的参数，工作方式也会有点差异。返回属性值-返回被选元素的属性值。　　语法$(selector).attr(attribute) 参数描述selector被选元素attribute规定要获取... 查看详情

jquery之attr()和prop()的区别(代码片段)

文章目录前言如何使用两种方法1.attr()用法2.prop()用法前言attr()与prop()都具有设置和获取属性值的功能，但还是有所不同，下面就来解释一下吧如何使用两种方法对于checked，readOnly，selected，disabled等属性的操作... 查看详情

jquery之attr()和prop()的区别(代码片段)

jquery的attr()方法

在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，用一个attr()就可以全部搞定了,赞一个先^^jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQueryDOM操... 查看详情

jquery的attr和prop区别之实例

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 html文件<tr><th></th><td><aclass="easyui-linkbutton"style="width:60px;"onclick="selectAll()">... 查看详情

jquery中attr()&prop()的区别与其实现方法

$(function(){$(‘#check‘).attr(‘checked‘);//undefind？？？一头雾水})在jquery中attr本来就是用来设置或者获取属性的，可是上面的方法却返回给undefined？然后我尝试用$(‘#check‘).prop(‘checked‘);发现可以正常运行！！在jquery中prop是相对... 查看详情

jquery中this与this的用法区别

jquery中this与$(this)的用法区别.先看以下代码:$("#textbox").hover(function()this.title="Test";,fucntion()this.title="OK”;);这里的this其实是一个Html元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。但是如果将this换成$(this)就不是... 查看详情

jquery中attr()与prop()区别

　　我们知道jquery中获取元素属性有两种常见的方法，一个是attr()方法，这个是用的比较多的，也是我们第一个想到的。另外一个就是prop()方法了，这个方法之前很少用到，它是jquery1.6之后新增的方法。那么这两个方法都是获取... 查看详情

jquery操作属性的方法(代码片段)

jQuery操作属性的方法1、一般属性的操作方法1.1、attr()方法传一个参数用于获取传入的属性值，如果调用者为一个集合，则返回集合中第一个对象的属性值传两个参数用于设置属性值，如果调用者为一个集合，则设置集合中每一... 查看详情

jquery中attr和prop方法的区别

也就是1.6版本以后将以前的attr混淆的部分区分开来。下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述，以及.attr()方法和.prop()方法的首选使用 Attributes模块的变化是移除了attributes和properties之间模棱两可的东西，但是在jQuery... 查看详情

jquery之attr()与prop()方法

一、Prop()的由来　　JQuery1.6开始新增方法prop()　　prop()解决：表单元素中checked,selected,disabled等属性在方法attr()中可能会出现的不一致问题(属于attr方法之前的bug);　　[引用文献]https://segmentfault.com/a/1190000002680303 二、BUG重现<... 查看详情

jquery中prop()方法和attr()方法的区别

jquery1.6中新加了一个方法prop()，一直没用过它，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled="disabled"，checked="checked"，比如用attr(... 查看详情

jquery中prop()方法和attr()方法的区别浅析

jquery中$.fn的用法示例介绍

本文出自http://www.jb51.net/article/42816.htm看完自己似乎理解了点东西，记录一下：$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效，下面有个不错的示例，喜欢的朋友可以参考下 $.fn是指jquery的命名空... 查看详情