溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
