jquery获取和设置属性_jQuery获取属性，设置属性，删除属性

最新推荐文章于 2023-10-13 18:00:25 发布

cunchi4221

最新推荐文章于 2023-10-13 18:00:25 发布

阅读量1.1k

点赞数

文章标签： html js javascript css java ViewUI

原文链接：https://www.journaldev.com/4656/jquery-get-attribute-set-remove

版权

jquery获取和设置属性

Today we will look into following examples – jQuery get attribute, jQuery set attribute and jQuery remove attribute.

今天，我们将研究以下示例– jQuery get属性，jQuery set属性和jQuery remove属性。

jQuery获取属性 (jQuery Get Attribute)

The most basic components we can manipulate using jQuery is through the attributes and properties of the HTML DOM elements.

我们可以使用jQuery操纵的最基本的组件是通过HTML DOM元素的属性和属性。

Everything is a node in the HTML Document Object Model. The attributes are available through its node properties.

一切都是HTML文档对象模型中的一个节点。这些属性可通过其节点属性使用。

The most common properties include the class name, tag name, id, href, title, rel, search etc.

最常见的属性包括类名称，标签名称，id，href，标题，相关性，搜索等。

jQuery gives us the means to manipulate the properties of the HTML elements. We can modify the attributes later on after getting access to those properties.

jQuery为我们提供了处理HTML元素属性的方法。稍后，我们可以在访问这些属性后对其进行修改。

jQuery Get属性示例 (jQuery Get Attribute Example)

jQuery .attr() method is used for getting the value from the first matched element.

jQuery .attr()方法用于从第一个匹配的元素获取值。

In this example ‘title’ attribute of <em> is fetched using the .attr() method in jQuery.

在此示例中，使用jQuery中的.attr（）方法获取<em>的'title'属性。

<html>
<head>
<title>jQuery get attribute example</title>
   <script type="text/javascript" 
   src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      var title = $("em").attr("title");
	  alert(title);
      $("#divid").text(title);
   });

   </script>
</head>
<body>
   <div>
      <em title=" my title attribute">jQuery get attributes</em>
      <p id="myid">getting my title attribute- success.</p>
      <div id="divid"></div>
   </div>
</body>
</html>

Below images show the output produced by above HTML file.

下图显示了以上HTML文件产生的输出。

jQuery设置属性 (jQuery Set Attribute)

For setting attributes we pass two parameters, name and value in the attr() method. This will set all elements with the named attribute using the value passed by the method.

为了设置属性，我们在attr()方法中传递了两个参数，即名称和值。这将使用方法传递的值来设置所有具有指定属性的元素。

jQuery set attribute syntax: attr(name, value) – name could be any html attribute.

jQuery设置属性的语法 ： attr(name, value) –名称可以是任何html属性。

In below example the value of the ‘alt’ is set using the attr(name, value) method.

在下面的示例中，使用attr(name, value)方法设置'alt'的attr(name, value) 。

<html>
<head>
<title>jQuery set attribute example</title>
   <script type="text/javascript" 
   src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" language="javascript">

   $(document).ready(function() {
      $("#myimg").attr("alt", "Setting New Image");
   });

   </script>
</head>
<body>
   <div>
      <img id="myimg" src="no-image.png" alt="old Image" />
   </div>
</body>
</html>

Just open the above HTML page into any browser and use developer feature to inspect the elements, below image is for Chrome browser.

只需在任何浏览器中打开上面HTML页面并使用开发人员功能来检查元素，下面的图片适用于Chrome浏览器。

Notice that alt attribute value is updated using our jQuery set attribute code.

注意，alt属性值是使用我们的jQuery set属性代码更新的。

Attributes are the basic components of the html elements helps to manipulate in jQuery. You can change the attributes in the way you want once you get access to those properties. Many methods are available in jQuery for the modifications of these attributes.

属性是html元素的基本组成部分，有助于在jQuery中进行操作。一旦可以访问属性，就可以按所需方式更改属性。 jQuery中提供了许多方法来修改这些属性。

jQuery属性方法 (jQuery attribute methods)

Some other useful jQuery method to manipulate DOM element attributes are:

操纵DOM元素属性的其他一些有用的jQuery方法是：

attr( properties ): We have already seen it’s usage, however we can use this method to set multiple key-value properties too.
Syntax: selector.attr({ FirstProperty : First value , second Property: Second value})
```
$( "img" ).attr({
  src: "/images/jquery.gif",
  title: "jQuery Image",
  alt: "Sample jQuery Image"
});
```
attr（properties） ：我们已经看到了它的用法，但是我们也可以使用此方法来设置多个键值属性。
语法： selector.attr（{FirstProperty：第一个值，第二个属性：第二个值}）
removeAttr( name ): This method is used to remove attribute from the matched elements.
Syntax: selector.removeAttr( name ) where name is the name of the element’s attribute.
$("table").removeAttr("border"); Here the attribute border of the table is removed using this method.
removeAttr（name） ：此方法用于从匹配的元素中删除属性。
语法： selector.removeAttr（name） ，其中name是元素属性的名称。

$("table").removeAttr("border"); 在此，使用此方法删除表格的属性边框。
hasClass( class ): This method is used to find a specified class is present on the any of the matched elements. It will return a Boolean value.
Syntax: selector.hasClass( class )
$("p#pID").hasClass("myClass"); – Here myClass is the CSS class name.
hasClass（class） ：此方法用于查找在任何匹配元素上存在的指定类。它将返回一个布尔值。
语法： selector.hasClass（class）

$("p#pID").hasClass("myClass"); –此处myClass是CSS类名称。
removeClass( class ): This method is used to remove all the specified classes.
Syntax: selector.removeClass( class )
$("p#pID").removeClass("myClass"); – Here myClass is the CSS class name
removeClass（class） ：此方法用于删除所有指定的类。
语法： selector.removeClass（class）

$("p#pID").removeClass("myClass"); –这里myClass是CSS类名称
html( ): This method is used to find and get the first HTML element from the set of matched HTML elements.
Syntax: selector.html( ), for example $( "div" ).html();
html（） ：此方法用于从匹配HTML元素集中查找和获取第一个HTML元素。
语法：selector.html（），例如$( "div" ).html();
text( ): This method is used get the combined text contents of matched elements. This method cannot be used for input or form elements.
Syntax: selector.text( )
```
$(document).ready(function() {
     var title = $("em").attr("title");
     $("#divid").text(title);
   });
```
In this example text method is used to get the title of the element.
text（） ：此方法用于获取匹配元素的组合文本内容。此方法不能用于输入或表单元素。
语法： selector.text（）

在此示例中，使用text方法获取element的标题。

These are the commonly used attribute methods in jQuery. There are many more methods than we have in this list. You can use these methods in a variety of ways in different situations.

这些是jQuery中常用的属性方法。有比我们列表中更多的方法。您可以在不同情况下以多种方式使用这些方法。