`

jquery方法之-attr()返回或设置属性值

 
阅读更多
返回被选元素的属性值:$(selector).attr(attribute)
设置被选元素的属性和值:$(selector).attr(attribute,value)
设置一个以上的属性和值:$(selector).attr({attribute:value, attribute:value ...})

<script type="text/javascript">
$("button").click(function(){
    $("#p1").attr("title","我是div1");
    alert($("#p1").attr("title"));
});
</script>
<div id="p1" style="background-color:red" >段落1</div>
<button>返回图像的宽度</button>


网上有这样的说法:css()是用来操纵style{}的,而attr()是加在标签内部的。【我是对的
so:如<img>标签,attr()的权重比css()要大,它会覆盖css()的样式。【我是错的
http://jsfiddle.net/t4m2tkxa/1/
<script type="text/javascript">
$(document).ready(function () {
    $("#button1").click(function () {        
        $("img").attr("width", "180");
    });
    $("#button2").click(function () {        
        $("img").css("width","20");
    });
});
</script>
<img src="/i/eg_smile.gif"  width="280"/>
<br />
<button id="button1">通过attr()设置图像的 width 属性</button>
<button id="button2">通过css()设置图像的 width 属性</button>

但是测试结果显示:
此时,先点击按钮1图片宽度改变再点击按钮2图片宽度再次改变。
      先点击按钮2图片宽度改变再点击按钮1图片宽度不发生改变。
为什么呢?原来是理解有偏差:attr()是修改获取属性,css()是修改获取样式。

css()作用后:<img src="/i/eg_smile.gif" style="width: 280px" width="280"/>
attr()作用后:<img src="/i/eg_smile.gif"  width="180"/>
分享到:
评论

相关推荐

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

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

    jquery-1.2.6-vsdoc

    4. `.attr()`/`.removeAttr()`:获取或设置元素的属性值。 5. `.data()`:存储和检索与元素相关的数据。 6. `.append()`/`.prepend()`:在元素内部添加内容。 7. `.bind()`/`.unbind()`:绑定和解绑事件处理函数。 8...

    jquery的attr方法使用

    当`attr`方法只有一个参数时,它将返回被选元素的第一个匹配项的属性值。例如: ```javascript var hrefValue = $('a').attr('href'); console.log(hrefValue); // 输出链接元素的href属性值 ``` ### 三、设置属性...

    jquery资料--jquery学习资料

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

    jquery学习笔记--1

    - `.attr()`:获取或设置元素的属性值。 ### 4. 事件处理 jQuery的事件处理比原生JavaScript更简洁,如: - `.click(fn)`:为元素绑定点击事件。 - `.on('event', fn)`:通用事件绑定,可以绑定多种事件。 - `.off...

    jQuery权威指南-源代码

    3.2.3 获取或设置元素值/51 3.2.4 元素样式操作/53 3.3 创建节点元素/58 3.4 插入节点/60 3.4.1 内部插入节点方法/60 3.4.2 外部插入节点方法/64 3.5 复制节点/66 3.6 替换节点/68 3.7 包裹节点/69 3.8 ...

    Jquery-Cheat-Sheet-1.2

    - **任意对象扩展**:通过`$.extend()`方法,可以递归地将一个或多个属性添加到目标对象上,实现对象的扩展和合并。 - **格式化插件**:`$.fn`用于定义插件,插件可以以 `{name: plugin}` 的形式注册在jQuery的函数...

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

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

    jQuery-1.6-api

    - `.attr()`:获取或设置元素的属性值。 - `.removeAttr()`:移除元素的属性。 - `.hasClass()`:检查元素是否包含指定类名。 - `.addClass()`,`.removeClass()`,`.toggleClass()`:添加、移除或切换类名。 4...

    jQuery入门---设计思想

    比如,`.html()` 用于获取或设置HTML内容,`.text()` 用于获取或设置文本内容,`.attr()` 用于获取或设置属性值,`.width()` 和 `.height()` 用于获取或设置元素的宽度和高度,而 `.val()` 则用于获取或设置表单元素...

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

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

    jQuery-api-1.7.1

    - `attr()`: 获取或设置元素的属性值。 - `remove()`: 删除匹配的所有元素。 3. **事件处理(Events)**: - `click()`: 绑定点击事件。 - `change()`: 绑定元素改变事件。 - `keydown()`: 绑定按键事件。 - ...

    JQ 设置属性 attr()

    在本篇文章中,我们将深入探讨`attr()`这个jQuery方法,它是用来设置或获取HTML元素属性值的重要工具。通过`attr()`,我们可以方便地对页面上的元素进行动态操作,实现各种功能。 `attr()`方法的基本语法是: ```...

    jquery attr方法获取input的checked属性问题

    问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取的checked返回值为boolean,...

    jquery (1.41-1.80)

    jQuery提供了一系列方法来操作DOM,如`append()`用于向元素内部添加内容,`remove()`删除匹配的元素,`html()`用于获取或设置元素的HTML内容,以及`attr()`和`removeAttr()`来处理元素的属性。 3. **事件处理...

    jQuery完全实例.rar

    jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果...

    jQuery-Demo-Working-With-XML-Documents

    4. **访问属性**:使用`.attr()`方法可以获取或设置元素的属性值。例如,获取`&lt;item&gt;`的`id`属性: ```javascript var itemId = $item.attr('id'); ``` 5. **操作内容**:`.text()`和`.html()`用于读取或设置...

    jquery帮助文档--jquery帮助文档

    2. **属性操作**:`attr()`用于获取或设置元素属性,`prop()`用于处理DOM元素的布尔属性。 3. **CSS操作**:`css()`用于设置或获取元素的样式,`addClass()`和`removeClass()`用于添加或移除类。 4. **尺寸与位置*...

    jquery-api-1.8.chm

    5. **样式操作(Style Manipulation)**:`css()`方法可以用来设置或获取元素的样式属性,如颜色、尺寸等。`addClass()`, `removeClass()`和`toggleClass()`则用于管理元素的CSS类。 6. **动画(Animation)**:...

Global site tag (gtag.js) - Google Analytics