jQuery教程
+ -

JQuery 属性

2019-09-09 0 0

在涉及DOM元素时,我们可以操纵的一些最基本的组件是分配给这些元素的属性.
这些属性大多数都可以通过JavaScript作为DOM节点属性使用.一些较常见的属性是-

  • className
  • tagName
  • id
  • href
  • title
  • rel
  • src

考虑图像元素的以下HTML标签-

<img id="imageid" src="image.gif" alt="Image" class="myclass" title="This is an image"/>

在此元素的标签中,标签名称为img,而id,src,alt,class和title的标签表示元素的属性,每个属性都由一个名称和一个值组成.

jQuery为我们提供了一种轻松操纵元素属性的方法,并使我们能够访问元素,以便我们也可以更改其属性.

获取属性值

attr()方法可用于从匹配集中的第一个元素中获取属性的值,或者将属性值设置到所有匹配的元素上.

以下是一个简单的示例,该示例获取<em>标签的title属性,并将<div id =" divid">值设置为相同的值:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"$
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript"language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>

   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

这将产生以下输出:

This is first paragraph.
This is second paragraph.
Bold and Brave

设置属性值

attr(name,value)方法可用于使用传递的值将命名属性设置到指定元素上
以下是一个简单的示例,将图像标签的 src 属性设置为正确的位置:

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.learnfk.com"/>
      <script type = "text/javascript"$
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript"language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>

   <body>
      <div>
         <img id = "myimg"src = "/images/jquery.jpg" alt = "Sample image"/>
      </div>
   </body>
</html>

这将产生以下输出:

1605021480098

增加样式

addClass(classes)方法可用于将定义的样式表应用于所有匹配的元素.您可以指定多个以空格分隔的类.

以下是设置<p>标签的类属性的简单示例:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"$
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript"language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>

      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>    
   </head>

   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

这将产生以下输出

This is first paragraph.
This is second paragraph.

属性方法

下表列出了一些有用的方法,可用于操纵属性和属性-

No. Methods 描述
1 attr(properties ) 将键/值对象设置为所有匹配元素的属性.
2 attr( key, fn) 在所有匹配的元素上,将单个属性设置为计算值.
3 removeAttr(name) 从每个匹配的元素中删除一个属性.
4 hasClass(class) 如果指定的类存在于一组匹配元素中的至少一个上,则返回true.
5 removeClass(class) 从匹配的元素集中删除所有或指定的类.
6 toggleClass(class) 如果指定的类不存在,则添加;如果指定的类不存在,则将其删除.
7 html() 获取第一个匹配元素的html内容(innerHTML).
8 html(val) 设置每个匹配元素的html内容.
9 [text() 获取所有匹配元素的组合文本内容.
10 text(val) 设置所有匹配元素的文本内容.
11 val( ) 获取第一个匹配元素的输入值.
12 val(val) 设置每个匹配元素的value属性,如果在<input>上调用它,但是如果在<select>上使用传递的<option>值调用它,那么将选中传递的选项,如果在复选框或单选框上调用它,则所有匹配的复选框和单选框都会被选中.

与上述语法和示例类似,以下示例将使您理解在不同情况下使用各种属性方法:

No. Selector 描述
1 $("#myID").attr()("custom") 这将为与ID myID匹配的第一个元素返回属性 custom 的值.
2 $("img").attr()("alt","Example Image") 这会将所有图像的 alt 属性设置为新值”Example Image”.
3 $("input").attr()({value:"",title:"请输入一个值"}); 将所有<input>元素的值设置为空字符串,并设置为字符串 “请输入一个值”。
4 $("a [href ^=https://]").attr()("target","_blank") 选择具有以 https:// 开头的href属性的所有链接,并将其目标属性设置为 _blank
5 $("a").removeAttr("target") 这将删除所有链接的 target 属性.
6 $("form").submit(function(){$(":submit",this).attr()("disabled","disabled");}); 这将在单击”提交”按钮时将禁用的属性修改为值”disabled”.
7 $("p:last").hasClass("selected") 如果最后一个

标签有selected类,则返回true。

8 $("p").text() 返回包含所有匹配的<p>元素的组合文本内容的字符串。
9 $("p").text("<i>Hello World</i>") 这会将<i> Hello World </i>设置为匹配的<p>元素的文本内容。
10 $("p").html() 这将返回所有匹配段落的HTML内容.
11 $("div").html("Hello World") 这会将所有匹配的<div>的HTML内容设置为Hello World。
12 $("input:checkbox:checked").val() 从选中的复选框获取第一个值.
13 $("input:radio [name=bar]:checked").val() 从一组单选按钮获取第一个值.
14 $("button").val("Hello") 设置每个匹配元素<button>的value属性。
15 $("input").val("on") 这将检查所有值为”on”的单选或复选框按钮.
16 $("select").val("Orange") 这将在带有选项”Orange”,”Mango”和”Banana”的下拉框中选择”Orange”选项.
17 $("select").val("Orange","Mango") 这将在带有选项”Orange”,”Mango”和”Banana”的下拉框中选择”Orange”和”Mango”选项.

0 篇笔记 写笔记

VueJS 计算属性(Computed)
我们已经看到了Vue实例和组件的方法。计算属性(Computed Properties)类似于方法,但与方法相比有一些区别,我们将在本章中讨论。让我们通过一个例子来了解计算属性VueJs Instance&...... </div> </div> <div class="RecommentList"> <div> <a class="RecommentTitle" target=_blank href="/jquery/jqueryattributes.html"> JQuery <em>属性</em></a> <div class="pull-right" style="color:#888;"><!--2020-11-10 23:25:30--></div> </div> <div class="Intra">在涉及DOM元素时,我们可以操纵的一些最基本的组件是分配给这些元素的<em>属性</em>.这些<em>属性</em>大多数都可以通过JavaScript作为DOM节点<em>属性</em>使用.一些较常见的<em>属性</em>是-classNametagNameidhreftitlerelsrc考虑图像元素的以下HTML标签-<img id="ima...... </div> </div> <div class="RecommentList"> <div> <a class="RecommentTitle" target=_blank href="/vuejs/vuejs-watch-property.html"> VueJS 监听<em>属性</em>(Watch)</a> <div class="pull-right" style="color:#888;"><!--2020-11-06 22:18:43--></div> </div> <div class="Intra">在本章中,我们将了解Watch<em>属性</em>。通过一个示例,我们将看到我们可以在VueJS中使用Watch<em>属性</em>。<html> <head> <title>VueJs Instance
取消
感谢您的支持,我会继续努力的!
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

您的支持,是我们前进的动力!