Mr.J-- jQuery学习笔记(二十九)--属性操作方法（获取属性&判断）

最新推荐文章于 2022-09-12 08:59:20 发布

原创最新推荐文章于 2022-09-12 08:59:20 发布 · 299 阅读

1 ·

CC 4.0 BY-SA版权

jQuery学习专栏收录该内容

33 篇文章

订阅专栏

这篇博客详细介绍了jQuery中用于属性操作的方法，包括attr()、prop()用于获取和设置元素属性，css()处理样式，val()获取或设置value值，以及hasClass()用于判断元素是否包含特定类。通过实例展示了各种方法的用法和区别，特别是attr()和prop()的区别以及如何使用indexOf()检查类名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取

attr()

<span class="span1" name="it666"></span>
<span class="span2" name="yjk11"></span>

设置或者获取元素的属性节点值

传递一个参数, 返回第一个元素属性节点的值

console.log($("span").attr("class"));

传递两个参数, 代表设置所有元素属性节点的值，并且返回值就是方法调用者

console.log($("span").attr("class", "abc"));

传递一个对象, 代表批量设置所有元素属性节点的值

$("span").attr({
	"class": "123",
	"name": "888"
});

改变之后:

prop()

设置或者获取元素的属性值

传递两个参数, 代表设置所有元素属性节点的值, 并且返回值就是方法调用者

console.log($("span").prop("abc", "yjk11"));

传递一个参数, 返回第一个元素属性节点的值

console.log($("span").prop("abc"));

传递一个对象, 代表批量设置所有元素属性节点的值

$("span").prop({
	"aaa": "111",
	"bbb": "222"
});

.css()

设置获取样式

<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>

*{
	margin: 0;
	padding: 0;
}
.box1{
	width: 100px;
	height: 100px;
	background: red;
	margin-bottom: 10px;
}
.box2{
	width: 200px;
	height: 200px;
	background: blue;
	margin-bottom: 10px;
}

传递一个参数, 返回第一个元素指定的样式

传递两个参数, 代表设置所有元素样式,并且返回值就是方法调用者

传递一个对象, 代表批量设置所有元素样式

获取样式

查阅资料，发现错误原因

Element.currentStyle 是一个与 window.getComputedStyle方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.

设置样式

val()

获取设置value的值

不传递参数, 返回第一个元素指定的样式

传递两个参数, 代表设置所有元素样式，并且返回值就是方法调用者

设置元素内容

获取内容

var input = document.querySelector("input");

var btn = document.querySelector("button");

btn.onclick = function (ev) {
console.log(input.getAttribute("value"));

console.log($('input').val());

console.log(input.value); 
}

判断

hasClass()

判断元素中是否包含指定类

<div class="aabb cc dd"></div>
<div class="aabb bb"></div>

传递参数, 只要调用者其中一个包含指定类就返回true,否则返回false

没有传递参数, 返回false

获取元素中class保存的值

getAttribute() .className

通过indexOf判断是否包含指定的字符串

定义和用法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

语法

stringObject.indexOf(searchvalue,fromindex)

参数	描述
searchvalue	必需。规定需检索的字符串值。
fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

说明

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。