这篇文章主要介绍jQuery的操作属性有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
取得以第一匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined
为所有匹配的元素设置一个属性值
'key'：表示属性名
'fn'：表示函数,将函数的属性值作为key代表的属性的值
为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值
从每一个匹配的元素中删除一个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<style>
.ok{
color: red;
}
</style>
<body>
<a href="https://www.baidu.com">去百度</a>
<br><br>
<input type="text">
<div></div>
<script>
$(function(){
let str = $('a').attr('href');//选中a标签把href的属性赋给str
console.log(str)
// $('input').attr('value','123')
$('input').attr('value',function(){//将函数的值赋给value，注意函数必须有返回值
let s = 0;
for(let i=1;i<=10;i++){
s+=i;
}
return s;
})
})
</script>
</body>
</html>
value为55，输出的是href属性的值
为每个匹配的元素添加指定的类名
从所有匹配的元素中删除全部或指定的类
如果存在（不存在）就删除（添加）一个类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<style>
.ok{
color: red;
}
</style>
<body>
<p>西安邮电大学</p>
<button id='btn1'>变色</button>
<button id="btn2">取消</button>
<button id="btn3">交替</button>
<button id="btn4">单击三次</button>
<div></div>
<script>
$(function(){
$('#btn1').click(function(){
$('p').addClass('ok')
})
$('#btn2').click(function(){
$('p').removeClass('ok')
})
$('#btn3').click(function(){
$('p').toggleClass('ok')
})
var count = 0;
$('#btn4').click(function(){
$('p').toggleClass('ok',++count % 3 ===0)
//如果值为0，那么就添加css样式
})
})
</script>
</body>
</html>
点击变色：变成红色
点击取消：变成原来的颜色
点击交替：颜色交替变换
点击单击三次：每点击第三次都会变色
访问第一个匹配元素的样式属性
css({'属性名','属性值','属性名','属性值'})
把一个"名/值对"对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式
在所有匹配的元素中，设置一个样式属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<style>
.ok{
color: red;
}
</style>
<body>
<p>西安邮电大学</p>
<div></div>
<script>
$(function(){
let c = $('p').css('color');
let f = $('p').css('font-size');
console.log(c)
console.log(f)
})
</script>
</body>
</html>开发者工具的控制台输出的是rgb(0, 0, 0)和16px
取得第一个匹配元素当前计算的宽度值（px）
为每个匹配的元素设置css宽度（width）属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<style>
.ok{
color: red;
}
</style>
<body>
<div></div>
<script>
$(function(){
$('div').width(300);
$('div').height(200);
$('div').css('backgroundColor','red')
})
</script>
</body>
</html>
html() ---innerHTML
html(val)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<style>
.ok{
color: red;
}
</style>
<body>
<p>西安邮电大学</p>
<div></div>
<script>
$(function(){
$('div').width(300);
$('div').height(200);
$('div').css('backgroundColor','red')
console.log($('p').html())
$('div').html('<b>西游记</b>')
})
</script>
</body>
</html>
1、获取值：val()
2、设置值：val(值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<style>
.ok{
color: red;
}
</style>
<body>
<input type="text">
<script>
$(function(){
$('input').val('AAAAA')
})
</script>
</body>
</html>
以上是“jQuery的操作属性有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
