jQuery操作属性大全

最新推荐文章于 2022-10-20 12:37:50 发布

原创最新推荐文章于 2022-10-20 12:37:50 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #链式操作 #操作元素 #js

JavaScript 同时被 2 个专栏收录

23 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文详细介绍了jQuery中如何操作元素属性，包括设置和获取属性值、操作样式类、样式及高度宽度。此外，还讨论了操作内容如HTML、文本和值的方法，以及查找和筛选元素、链式操作的使用技巧。jQuery的链式操作能提高代码效率，但可能影响可读性。

操作元素属性

属性是每个页面元素的重要内容，HTML标签可以有一到若干个属性。id即是元素的常用属性之一。例如：

<input type="text" name="firstname" value="Dennis" id="first" />

我们可以使用javascript中的getAttribute和setAttribute来操作元素的"元素属性"。
在jQuery中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性

获取元素属性值：$(selector).attr('属性名')
设置元素属性值：$(selector).attr({'属性名':'属性值'})
传多个：$('img').attr({'src':'./ydggg.jpg','alt':'我是大锅'})

$(selector).attr('属性名','属性值')

在这里插入图片描述

操作样式类

样式类是CSS中的一个概念，它用于设定页面上对应于“class”属性的元素的样式显示。rose样式类就是一个最简单的样式类。

.rose {
	background-color: #FFE4E1;
}

添加样式类：$(selector).addClass('样式类名')
删除样式类：$(selector).removeClass('样式类名')
判断元素是否有给定样式类:$(selector).hasClass('样式类名')
交替添加（删除）样式类：$(selector).toggleClass('样式类名')
在这里插入图片描述
使用addClass(class)和removeClass(class)函数可以方便地对页面元素应用设定好的样式类。但是，这种需求改变了页面元素的class属性。而且其局限性在于必须事先定义好将要使用的CSS样式类，这样一来其灵活性就不是很好。
jQuery中直接操作CSS样式。jQuery不但可以得到指定元素的某个CSS属性的值，还可以随意地对指定元素进行CSS样式的设定，并且jQuery还提供了操作高度、宽度以及偏移的函数。

操作样式

获取样式属性值：$(selector).css('样式属性名')
设置样式属性值：$(selector).css({'属性名':'属性值'})

在这里插入图片描述

获取或设置元素高度和宽度

我们希望获取测试图层的宽度, 使用attr方法获取"元素特性"为undifined, 因为并没有为div添加width. 而使用css()方法虽然可以获取到style属性的值, 但是在不同浏览器里返回的结果不同, IE6下返回auto, 而FF下虽然返回了正确的数值但是后面带有"px".

在这里插入图片描述

宽度

$(selector).width():获取宽度
$(selector).width(value):设置宽度

高度

$(selector).height():获取高度
$(selector).height(value):设置高度

操作内容

所谓内容，就是直接跟终端用户打交道的部分，如测试页面上的两段文字本身。接下来将介绍使用jQuery来操作元素的内容，包括操作HTML代码、操作文本以及操作值三个部分。

操作HTML代码

HTML代码就是之前经常见到的被“<”和“>”包含起来的标签元素。jQuery中的函数html()和html(val)分别用来获取以及设置指定页面元素的HTML代码。这里的HTML代码是一种泛指，它不能处理XML文档，但是对XHTML的各种标签支持良好。

在这里插入图片描述

操作text文本

除了可以直接操作HTML代码之外，jQuery还提供了一种可以直接操作指定元素标签内文本内容的函数，即text()以及text(val)函数。
在这里插入图片描述

操作值

val()函数用来获得第一个匹配元素的当前值。在jQuery 1.2中对该元素作了增强，可以用来操作select等元素。如果多选，将返回一个数组，其包含所选的值。
在这里插入图片描述

在这里插入图片描述

操作元素的固有属性：$(selector).prop('属性名')
设置元素的固有属性值：$(selector).prop('属性名','属性值')

data() 方法向被选元素附加数据，或者从被选元素获取数据。

注释：这是底层级的方法；使用 .data() 更加方便。
向元素附加数据，然后取回该数据：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn1").click(function(){
    $("div").data("greeting", "Hello World");
  });
  $("#btn2").click(function(){
    alert($("div").data("greeting"));
  });
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>

在这里插入图片描述

查找和筛选元素

过滤

在这里插入图片描述

查找

在这里插入图片描述

链式操作

“链式操作”是jQuery语法中最有特色的一个功能之一。简单地说，“链式操作”就是把之前需要分很多行书写的代码使用“.”连接成一行进行书写。这在很大程度上能够节省网站需要加载的代码量，同时也使对元素的各种操作更加集中。
其缺点就是由于链式操作所必需的连贯性，可能导致代码的可读性有所降低。

<table border="1" id="tab">
	<tbody id="tb"></tbody>
</table>
<script type="text/javascript">
alert($("table").first-child().attr("id"));
$(“#tb”).append(“<tr><td>10</td><td>tom</td></tr>”);//正确
$(“#tb”).append(“<tr><td>10</td>”).append(“<td>tom</td>”).append(“</tr>”);//错误
</script>

Append方法是插入到tbody里面，而链式操作返回来的还是tbody对象，所以在错误代码中第二个append实际上是直接插入到tbody中，而不是插入到tr中。
错误代码这种用append方法最后生成的代码结果如下：

<tbody>
   <tr>
      <td>1001</td>
   </tr>
   <td>tom</td>
</tobdy>

jQuery的链接操作如果使用得当，可以极大的提高编写jQuery代码的效率。
$("tr#first")选择器用于得到表格的第一行，之后使用next()函数取得表格的第二行，然后调用addClass()函数为表格的第二行应用样式。这里如果在使用了next()函数之后仍然想对之前的页面元素，即表格的第一行进行操作该怎么办呢？jQuery中提供了一个专门的函数end()来处理这种情况。end()函数将使操作回滚到最近的一个“破坏性”操作之前。也就是说，将匹配的元素列表变为前一次的状态。

在这里插入图片描述