溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細(xì)介紹“JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容的方法”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
屬性分類
固有屬性
href、src.....
共有屬性
id,class,name......
自定義屬性
abc= '1234'
操作屬性的方法
區(qū)別
1.prop不能操作自定義屬性
2.prop獲取Boolean類型的屬性是 true/false
獲取屬性值
attr(屬性名稱) 操作 checkbox 時(shí)， 獲取指定的屬性值,選中返回 checked，沒有選中返回 undefined
op(屬性名稱) 獲取具有true和false兩個(gè)屬性的屬性值
設(shè)置屬性值
attr(屬性名稱,屬性值);
prop(屬性名稱,屬性值);
移除屬性
removeAttr("屬性")
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="" id="myform">
<input type="checkbox" id="ch2" name="ch2" abc='123' checked="checked"/> aa
<input type="checkbox" id="ch3" name="ch3" abc='456'/> bb
</form>
<script type="text/javascript">
var ch2 = $("#ch2");
var ch3 = $("#ch3");
//獲取固有屬性
console.log(ch2.attr('type'));
console.log(ch2.prop('type'));
//獲取共有屬性
console.log(ch2.attr('name'));
console.log(ch3.prop('name'));
//獲取自定義屬性 prop不能操作自定義屬性
console.log(ch2.attr('abc'));
console.log(ch3.prop('abc'));//undefined
//獲取boolean類型的屬性
console.log(ch2.attr('checked'));//checked
console.log(ch2.prop('checked'));//true
//設(shè)置boolean類型屬性
ch2.attr("checked",0);
ch3.attr("checked","checked");
//效果相同
ch2.prop("checked",false);
ch3.prop("checked",true);
//設(shè)置自定義屬性
ch2.attr("abc",'999');
//prop不能操作自定義屬性
ch3.prop("abc",'999'); //---設(shè)置無效
//設(shè)置共有屬性
ch2.attr("name",'ab1');
ch3.prop("name",'ab1');
//移除屬性
ch2.removeAttr("checked");//boolen類型
ch2.removeAttr("abc");//自定義屬性
ch2.removeAttr("name");//共有屬性
ch2.removeAttr("type");//獨(dú)有屬性
</script>
</body>
</html>attr(“class”) 獲取class屬性的值，即樣式名稱
attr(“class”,”樣式名”) 修改class屬性的值，修改樣式
addClass(“樣式名”) 添加樣式名稱
css() 添加具體的樣式 相當(dāng)于直接設(shè)置行內(nèi)style
removeClass(class) 移除樣式名稱
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{
background: blue;
}
.larger{
font-size: 30px;
}
.green {
background : green;
}
</style>
</head>
<body>
<h4>css()方法設(shè)置元素樣式</h4>
<div id="conBlue" class="blue larger">天藍(lán)色</div>
<div id="conRed">大紅色</div>
<div id="remove" class="blue larger">天藍(lán)色</div>
<script type="text/javascript">
//獲取class屬性的值，即樣式名稱
var clas = $("#conBlue").attr("class");
console.log(clas);
//修改class屬性的值，修改樣式
$("#conBlue").attr("class","green");//把字體的大小樣式和顏色均覆蓋
//addClass(“樣式名”) 添加樣式名稱
$("#conRed").addClass("larger");
//css()
$("#conRed").css("color","red");
//removeClass(class) 移除樣式名稱
$("#remove").removeClass("larger");
</script>
</body>
</html>html()
獲取或設(shè)置元素的內(nèi)容，包含html內(nèi)容 可以識別純文本內(nèi)容
取值：html()
賦值：html("html,內(nèi)容")
text()
獲取或設(shè)置元素的內(nèi)容，不包含html內(nèi)容 只能識別純文本內(nèi)容
取值：text()
賦值：text("html,內(nèi)容")
val()
獲取或設(shè)置元素的值
取值:val()
賦值:val(‘值’)
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h4><span>html()和text()方法設(shè)置元素內(nèi)容</span></h4>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
<script type="text/javascript">
//獲取元素的內(nèi)容
var ht = $("h4").html();
var te = $("h4").text();
console.log(ht);
console.log(te);
//設(shè)置元素內(nèi)容
$("#html").html("<b>加粗效果</b>");
$("#text").text("<b>text加粗效果</b>");
//val() 獲取元素值
var input = $('[type="text"]').val();
console.log(input);
//val() 設(shè)置元素值
$('[type="text"]').val("jquery");
</script>
</body>
</html>prepend(content)
在被選元素內(nèi)部的開頭插入元素或內(nèi)容，被追加的 content 參數(shù)，可以是字符、HTML 元素標(biāo)記。
$(content).prependTo(selector)
把 content 元素或內(nèi)容加入 selector 元素開頭
append(content)
在被選元素內(nèi)部的結(jié)尾插入元素或內(nèi)容，被追加的 content 參數(shù)，可以是字符、HTML 元素標(biāo)記。
$(content).appendTo(selector)
把 content元素或內(nèi)容插入selector 元素內(nèi)，默認(rèn)是在尾部
before()
在元素前插入指定的元素或內(nèi)容:$(selector).before(content)
after()
在元素后插入指定的元素或內(nèi)容:$(selector).after(content)
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div {
margin: 10px 0px;
}
span{
color: white;
padding: 8px
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span >小鮮肉</span>
</div>
<script type="text/javascript">
//創(chuàng)建元素
var newP = $("<span>段落標(biāo)簽</span>");
console.log(newP);
//添加元素 prepend(content) 內(nèi)部前追加
//獲取參考位置的元素
var str = "<span>PDD</span>";
$('.green').prepend(newP);
$('.green').prepend(str);
//prependTo(); 被內(nèi)部前追加
var str2 = "<span>麻辣香鍋</span>";
$(str2).prependTo($(".green"));
//append() 內(nèi)部后追加
$('.green').append("<span >周杰倫</span>");
//appendTo(); 被內(nèi)部后追加
$("<span >林俊杰</span>").appendTo($('.green'));
//before 同級前追加
$(".red").before("<span style='color:black'>薛之謙</span>");
//after 同級后追加
$(".blue").after("<span style='color:black'>李榮浩</span>");
</script>
</body>
</html>remove()
刪除所選元素或指定的子元素，包括整個(gè)標(biāo)簽和內(nèi)容一起刪
empty()
清空所選元素的內(nèi)容
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<h4>刪除元素</h4>
<span class="green">jquery<a>刪除</a></span>
<span class="blue">javase</span>
<span class="green">http協(xié)議</span>
<span class="blue">servlet</span>
<script type="text/javascript">
//刪除
//$(".green").remove();
//清空
$(".green").empty();
</script>
</body>
</html>格式：
$("值").each(function(index,element){
});
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<h4>遍歷元素 each()</h4>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http協(xié)議</span>
<span class="green">servlet</span>
<script type="text/javascript">
$(".green").each(function(index,ele){
//當(dāng)前元素的索引位置
console.log(index);
//獲取當(dāng)前 dom 對象
console.log(ele);
console.log(this);
//統(tǒng)一設(shè)置樣式需要用jquery對象
$(ele).attr("class","blue");
});
</script>
</body>
</html>讀到這里，這篇“JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容的方法”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼