`
suifan繁
  • 浏览: 18266 次
  • 性别: Icon_minigender_2
  • 来自: 长沙
社区版块
存档分类
最新评论

jQuery 属性操作 - attr() 方法

阅读更多

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

 常用:利用.attr()更改属性的状态,

 

设置属性/值

设置被选元素的属性和值。

$(selector).attr(attribute,value)

实例如下,点击图片时,更改图片的宽度

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width","180");
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 属性</button>
</body>
</html>

使用函数来设置属性/值

设置被选元素的属性和值。

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

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
   $("img").attr("width",function(n,v){
      return v-20;
    });
  });
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" width="128" height="128" />
<br />
<button>减少图像的宽度 20 像素</button>
</body>
</html>

设置多个属性/值对

为被选元素设置一个以上的属性和值。

$(selector).attr({attribute:value, attribute:value ...})

在项目中,常用.attr()方法去更改前端样式,十分重要

 

分享到:
评论

相关推荐

    jquery-1.3.2-vsdoc.js

    当开发者在Visual Studio中引用了`jquery-1.3.2-vsdoc.js`,他们在编写jQuery代码时,只需键入"$."或者"jQuery.",Visual Studio就会自动列出所有可用的jQuery方法和属性,点击相应的选项即可快速插入到代码中。...

    jquery及jquery-ui-1.8.16.custom.zip

    jQuery 1.6.4引入了一些重要的改进,例如增加了`.attr()`和`.prop()`方法的区分,`.attr()`主要用于获取或设置HTML属性,而`.prop()`则针对DOM元素的特性。此外,还修复了一些已知的bug,提高了整体性能和兼容性。 ...

    jquery1.7.2 API jquery-1.7.2-vsdoc 汉化中文版本

    jQuery支持CSS选择器,包括ID选择器(#id)、类选择器(.class)、元素选择器(tag)、属性选择器([attr])等。更高级的选择器如后代选择器(`&gt;`)、兄弟选择器(`+`和`~`)以及组合选择器(`,`)使定位元素更为...

    jquery-1.2.6-vsdoc

    5. 链式操作:jQuery对象返回自身,允许连续调用多个方法,提高了代码的可读性和效率。 四、jQuery 1.2.6的函数详解 1. `$()`:这是jQuery的入口函数,用于选取DOM元素或创建新的jQuery对象。 2. `.each()`:遍历...

    重写按钮---attr属性的使用

    在JavaScript中,`attr`方法是jQuery库的一部分,用于获取或设置元素的属性值。本文将深入探讨`attr`属性的使用及其在实际开发中的应用。 首先,`attr`方法的基本语法是`$(selector).attr(attributeName, value)`。...

    jQuery基础笔记-1

    jQuery属性操作是 jQuery 库中的一种操作,用于设置元素的属性,提供了多种属性操作方法,包括固有属性、自定义属性、数据缓存等。 #### 3.4.1 固有属性 固有属性是 jQuery 库中的一种属性,用于设置元素的固有...

    jquery-1.6.4-vsdoc.js

    - `.attr()` 和 `.prop()` 的区分:1.6版本开始引入`.prop()`方法,用于处理DOM元素的属性,而`.attr()`则主要用于获取或设置HTML属性。 - `live()` 方法的废弃:1.7版本中,`.live()`被`.on()`替代,`.on()`提供更...

    jquery资料--jquery学习资料

    2. **属性操作(Attribute Manipulation)**:`.attr()`用于获取或设置元素属性,`.data()`则处理数据相关的属性。 3. **内容操作(Content Manipulation)**:`.html()`, `.text()`, `.val()`分别用于获取或设置...

    jQuery-1.6-api

    属性操作 `attr()`和`removeAttr()`方法用于获取或移除元素的属性。`attr("href", "newurl")`可以改变元素的href属性,而`removeAttr("disabled")`则可以取消元素的disabled状态。 ### 4. CSS样式 使用`css()`...

    Jquery-Cheat-Sheet-1.2

    该文档主要提供了jQuery库的快速参考指南,旨在帮助开发者快速查阅jQuery的各种功能和方法。它覆盖了从基本操作到复杂功能,如DOM操作、动画效果、事件处理以及AJAX请求等。 ### 重要知识点解析 #### 1. 基本概念 ...

    jQuery学习记录----处理XML数据(二)

    此外,jQuery还提供了`attr()`方法来获取或设置元素的属性值,`children()`或`find()`来查找子元素,`append()`和`prepend()`用于添加内容,以及`remove()`来删除元素等。这些方法使得XML数据的操作变得非常直观和...

    jquery学习笔记--1

    jQuery提供了一套方便的DOM操作方法,如: - `.append()`:在每个匹配元素的末尾添加内容。 - `.prepend()`:在每个匹配元素的开头添加内容。 - `.html()`:获取或设置元素的HTML内容。 - `.attr()`:获取或设置元素...

    jQuery-3.3.1-API-Docs-CN jQuery离线文档

    6. **属性和方法**:jQuery对象有许多内置的方法,如`$(selector).attr('attribute')`获取属性值,`$(selector).addClass('className')`添加CSS类,`$(selector).val()`获取表单元素的值。 7. **链式操作**:jQuery...

    jQuery-1.6-api-en

    **属性操作(Attributes)** 使用`.attr()`和`.removeAttr()`可以设置或移除元素的属性。例如: ```javascript $("#link").attr("href", "http://example.com"); $("#link").removeAttr("target"); ``` 这段代码会...

    jQuery权威指南-源代码

    3.2.1 元素属性操作/45 3.2.2 元素内容操作/49 3.2.3 获取或设置元素值/51 3.2.4 元素样式操作/53 3.3 创建节点元素/58 3.4 插入节点/60 3.4.1 内部插入节点方法/60 3.4.2 外部插入节点方法/64 3.5 复制...

Global site tag (gtag.js) - Google Analytics