返回顶部
首页 > 资讯 > 前端开发 > VUE >attr怎么使用
  • 810
分享到

attr怎么使用

2024-04-02 19:04:59 810人浏览 八月长安
摘要

这篇文章主要介绍“attr怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“attr怎么使用”文章能帮助大家解决问题。   .attr( attributeN

这篇文章主要介绍“attr怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“attr怎么使用”文章能帮助大家解决问题。

  .attr( attributeName, value )

  描述: 设置每一个匹配元素的一个或多个属性。

  attr( attributeName, value )

  attributeName

  类型: String

  要设置值的属性名

  value

  类型: String,Number

  这个属性设置的值

  attributes

  类型: PlainObject

  一个 属性 - 值 集合对象。(译者注:例如{ alt: '', title: 'WEB前端开发-Http://www.CSS88.com })

  attributeName

  类型: String

  要设置值的属性名.

  function(index, attr)

  类型: Function()

  这个函数返回用来设置的值,this指向当前的元素。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。

  这个 .attr() 方法 是一个设置属性值的方便而且强大的途径—特别是当设置多个属性或使用值来自函数。 让我们考虑下面的图片:

  <img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

  Setting a simple attribute(设置一个简单的属性)

  我们可以通过.attr()方法非常简单的改变 alt 属性并附上新值:

  $('#greatphoto').attr('alt', 'Beijing Brush Seller');

  我们可以用同样的方法 添加 一个属性:

  $('#greatphoto')

  .attr('title', 'Photo by Kelly Clark');

  Setting several attributes at once(一次设置多个属性)

  同时改变alt 属性 和 添加  title属性, 我们可以使用一个“名/值”形式的对象 (javascript object literal)传递给这个方法。 每个 key-value 对象将增加或者修改一个属性:

  $('#greatphoto').attr({

  alt: 'Beijing Brush Seller',

  title: 'photo by Kelly Clark'

  });

  当设置多个属性,包裹属性名的引号是可选的。

  警告: 当设置样式名(“class”)属性时,必须使用引号!

  注意: Jquery禁止改变一个 <input> 或 <button>元素的type 特性(attribute),并且在所有浏览器下将抛出一个错误。因为Internet Explorer不会允许你改变<input>或者<button>元素的type属性。

  Computed attribute values(推算属性值)

  通过使用一个函数来设置属性, 可以根据该元素上的其它属性值返回最终所需的属性值。例如,我们可以把新的值与现有的值联系在一起:

  $('#greatphoto').attr('title', function(i, val) {

  return val + ' - photo by Kelly Clark'

  });

  当前运用一个函数来计算属性的值,当我们修改了多个元素的属性,特别有用。

  注意 如果setter函数没有返回任何数据(例如:function(index, attr){}),属性的当前值返回值是undefined,作为一个getter行为。实际上,如果不进行任何更改的setter函数不返回的东西。

  例子:

  Example: 为页面中全部的 <img>设置一些属性。

  <!DOCTYPE html>

  <html>

  <head>

  <style>

  img { padding:10px; }

  div { color:red; font-size:24px; }

  </style>

  <script src="https://code.jquery.com/jquery-latest.js"></script>

  </head>

  <body>

  <img />

  <img />

  <img />

  <div><B>Attribute of ajax</B></div>

  <script>

  $("img").attr({

  src: "images/hat.gif",

  title: "jQuery",

  alt: "jQuery LoGo"

  });

  $("div").text($("img").attr("alt"));

  </script>

  </body>

  </html>

关于“attr怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网VUE频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: attr怎么使用

本文链接: https://lsjlt.com/news/96470.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • attr怎么使用
    这篇文章主要介绍“attr怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“attr怎么使用”文章能帮助大家解决问题。   .attr( attributeN...
    99+
    2024-04-02
  • 怎么使用jquery attr
    本篇内容主要讲解“怎么使用jquery attr”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用jquery attr”吧! ...
    99+
    2024-04-02
  • jquery中attr()怎么使用
    这篇文章主要介绍“jquery中attr()怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery中attr()怎么使用”文章能帮助大家解决问题。jQuery是一个轻量级的JavaScr...
    99+
    2023-07-06
  • javascript中的attr方法怎么用
    这篇文章主要介绍“javascript中的attr方法怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript中的attr方法怎么用”文章能帮助大家...
    99+
    2024-04-02
  • jquery中attr怎么设置
    这篇文章主要介绍“jquery中attr怎么设置”,在日常操作中,相信很多人在jquery中attr怎么设置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery中att...
    99+
    2024-04-02
  • 用jQuery attr方法
    在Web开发中,JavaScript是必不可少的工具之一。jQuery作为JavaScript库之一,在其文档库中提供了许多有用的方法和函数。其中,attr方法就是一个常用的方法之一。attr方法可以用于获取或设置元素的属性值,它是jQue...
    99+
    2023-05-18
  • jQuery中attr()方法有什么用
    小编给大家分享一下jQuery中attr()方法有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!获取属性 - attr()...
    99+
    2024-04-02
  • jquery中attr的作用是什么
    今天就跟大家聊聊有关jquery中attr的作用是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。jquery是什么jquery是一个简洁而快速的JavaScript库,它具有独特...
    99+
    2023-06-14
  • 在CSS中怎么用attr()显示HTML属性值
    这篇“在CSS中怎么用attr()显示HTML属性值”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看...
    99+
    2024-04-02
  • 怎么解决jquery .attr失效问题
    这篇文章主要介绍“怎么解决jquery .attr失效问题”,在日常操作中,相信很多人在怎么解决jquery .attr失效问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • 一文解析jquery中attr()的使用方法
    jQuery是一个轻量级的JavaScript库,它的出现极大地简化了JavaScript脚本的编写,极大地提高了Web应用的开发效率。而其中的attr方法更是为Web应用开发者带来了无限的便利。attr方法是jQuery中一个十分重要的方...
    99+
    2023-05-14
  • css中的content和attr属性有什么用
    小编给大家分享一下css中的content和attr属性有什么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   CSS3的...
    99+
    2024-04-02
  • jquery里attr的概念是什么
    今天小编给大家分享一下jquery里attr的概念是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2024-04-02
  • CSS表达式attr()的用法介绍
    本篇内容主要讲解“CSS表达式attr()的用法介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS表达式attr()的用法介绍”吧!CSS表达式 attr...
    99+
    2024-04-02
  • 如何使用CSS content的attr实现鼠标悬浮提示
    这篇文章主要介绍了如何使用CSS content的attr实现鼠标悬浮提示,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。需要那么大的插件库,其实就一两个地方需要做一些提示(t...
    99+
    2023-06-08
  • jquery中css()和attr()有什么区别
    这篇文章给大家介绍jquery中css()和attr()有什么区别,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。jquery中有attr()和css()两种方法:attr是attribute的缩写,意思是标签属性。cs...
    99+
    2023-06-15
  • Jquery中attr与prop有什么区别
    Jquery中attr与prop有什么区别?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。jquery是什么jquery是一个简洁而快速的JavaScript库,...
    99+
    2023-06-14
  • 如何使用jquery的attr方法实现图片切换效果
    这篇文章主要介绍如何使用jquery的attr方法实现图片切换效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!利用jquery的attr方法实现如下简单的图片切换效果代码如下:&l...
    99+
    2024-04-02
  • jQuery中的prop和attr区别是什么
    这篇文章主要介绍了jQuery中的prop和attr区别是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在JQuery中,对CheckBox的操作分两个阶段,一个是JQu...
    99+
    2023-06-27
  • jQuery中attr和prop方法有什么不同
    小编给大家分享一下jQuery中attr和prop方法有什么不同,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!相比 attr,prop 是 1.6.1 才新出来的...
    99+
    2023-06-27
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作