jQuery的操作屬性你真的了解嗎
更新時(shí)間：2022年02月23日 17:31:19 作者：Han_Zhou_Z
這篇文章主要為大家詳細(xì)介紹了jQuery的操作屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
一、操作屬性
1、讀取屬性值：attr(屬性名)
取得以第一匹配元素的屬性值。通過(guò)這個(gè)方法可以方便地從第一個(gè)匹配元素中獲取一個(gè)屬性的值。如果元素沒(méi)有相應(yīng)屬性，則返回undefined
2、修改屬性值
（1）attr(key,value)
為所有匹配的元素設(shè)置一個(gè)屬性值
（2）attr(key,fn)
'key'：表示屬性名
'fn'：表示函數(shù),將函數(shù)的屬性值作為key代表的屬性的值
為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值。不提供值，而是提供一個(gè)函數(shù)，由這個(gè)函數(shù)計(jì)算的值作為屬性值
（3）attr({屬性名1：屬性值，屬性名2：屬性值})
3、刪除屬性：removeAttr(屬性名)
從每一個(gè)匹配的元素中刪除一個(gè)屬性
<!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 >去百度</a>
<br><br>
<input type="text">
<div></div>
<script>
$(function(){
let str = $('a').attr('href');//選中a標(biāo)簽把href的屬性賦給str
console.log(str)
// $('input').attr('value','123')
$('input').attr('value',function(){//將函數(shù)的值賦給value，注意函數(shù)必須有返回值
let s = 0;
for(let i=1;i<=10;i++){
s+=i;
}
return s;
})
})
</script>
</body>
</html>
value為55，輸出的是href屬性的值
二、操作類(lèi)（class）
1、添加class屬性：addClass(class屬性)
為每個(gè)匹配的元素添加指定的類(lèi)名
2、刪除class屬性：removeClass(屬性名)
從所有匹配的元素中刪除全部或指定的類(lèi)
3、交替添加/刪除class屬性：toggleClass(class屬性)
如果存在（不存在）就刪除（添加）一個(gè)類(lèi)
<!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>西安郵電大學(xué)</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>
點(diǎn)擊變色：變成紅色
點(diǎn)擊取消：變成原來(lái)的顏色
點(diǎn)擊交替：顏色交替變換
點(diǎn)擊單擊三次：每點(diǎn)擊第三次都會(huì)變色
三、操作css
1、獲取CSS樣式屬性值：css('樣式屬性名')
訪問(wèn)第一個(gè)匹配元素的樣式屬性
2、設(shè)置樣式屬性--采用'key/value'
css({'屬性名','屬性值','屬性名','屬性值'})
把一個(gè)"名/值對(duì)"對(duì)象設(shè)置為所有匹配元素的樣式屬性。這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式
3、一次設(shè)置一個(gè)屬性：css('屬性名','值')
在所有匹配的元素中，設(shè)置一個(gè)樣式屬性的值
<!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>西安郵電大學(xué)</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>開(kāi)發(fā)者工具的控制臺(tái)輸出的是rgb(0, 0, 0)和16px
四、設(shè)置、獲取元素的width和height
1、獲取width：width()
取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值（px）
2、設(shè)置width：width(val)
為每個(gè)匹配的元素設(shè)置css寬度（width）屬性的值
3、獲取height：height()
4、設(shè)置height：height(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>
<div></div>
<script>
$(function(){
$('div').width(300);
$('div').height(200);
$('div').css('backgroundColor','red')
})
</script>
</body>
</html>
五、操作元素內(nèi)容
1、獲取內(nèi)容
html() ---innerHTML
2、設(shè)置內(nèi)容
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>西安郵電大學(xué)</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>
六、操作值--操作元素的value屬性
1、獲取值：val()
2、設(shè)置值：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>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
今日開(kāi)始學(xué)習(xí)使用JQuery,嘗試?yán)肑Query來(lái)制作一個(gè)動(dòng)態(tài)表格,結(jié)構(gòu)如下2011-05-05
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了jQuery中:reset選擇器用法,實(shí)例分析了:reset選擇器的功能、定義及匹配重置按鈕的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了基于jquery自定義顯示消息數(shù)量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
從零學(xué)jquery之如何使用回調(diào)函數(shù)
回調(diào)函數(shù)指的是被調(diào)用者完成處理后自動(dòng)回調(diào)調(diào)用者預(yù)先傳遞的函數(shù)。2014-05-05
jquery實(shí)現(xiàn)回車(chē)鍵觸發(fā)事件(實(shí)例講解)
下面小編就為大家分享一篇jquery實(shí)現(xiàn)回車(chē)鍵觸發(fā)事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了JQuery中extend的用法,實(shí)例分析了extend的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
jQuery避免$符和其他JS庫(kù)沖突的方法對(duì)比
jQuery中需要用到$符號(hào)，如果其他js庫(kù)也定義了$符號(hào)，那么就會(huì)造成沖突，會(huì)影響到j(luò)s代碼的正常執(zhí)行，下面有幾個(gè)不錯(cuò)的解決方法，大家可以參考下2014-02-02
這篇文章主要介紹了jQuery判斷一個(gè)元素是否可見(jiàn)的方法,涉及jQuery鏈?zhǔn)讲僮骷皹邮脚卸ǖ募记?需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery限制圖片大小的方法,對(duì)比分析了常見(jiàn)的jQuery限制圖片操作方法及改進(jìn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05