快捷導(dǎo)航

JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容

更新時(shí)間：2022年05月04日 11:36:10 作者：農(nóng)碼一生

本文詳細(xì)講解了JQuery操作與遍歷元素并設(shè)置其屬性、樣式和內(nèi)容的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、操作屬性

屬性分類

固有屬性

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="ch1" name="ch1" abc='123' checked="checked"/>	aa
			<input type="checkbox" id="ch2" name="ch2" abc='456'/>	bb
		</form>
		<script type="text/javascript">
			var ch1 =  $("#ch1");
			var ch2 =  $("#ch2");
			
			//獲取固有屬性
			console.log(ch1.attr('type'));
			console.log(ch1.prop('type'));
			
			//獲取共有屬性
			console.log(ch1.attr('name'));
			console.log(ch2.prop('name'));
			
			//獲取自定義屬性   prop不能操作自定義屬性
			console.log(ch1.attr('abc'));
			console.log(ch2.prop('abc'));//undefined
			
			//獲取boolean類型的屬性
			console.log(ch1.attr('checked'));//checked
			console.log(ch1.prop('checked'));//true
			
			//設(shè)置boolean類型屬性
			ch1.attr("checked",0);
			ch2.attr("checked","checked");
			//效果相同
			ch1.prop("checked",false);
			ch2.prop("checked",true);
			
			//設(shè)置自定義屬性
			ch1.attr("abc",'999');
			//prop不能操作自定義屬性
			ch2.prop("abc",'999'); //---設(shè)置無效
			
			//設(shè)置共有屬性
			ch1.attr("name",'ab1');
			ch2.prop("name",'ab1'); 
			
			//移除屬性
			ch1.removeAttr("checked");//boolen類型
			ch1.removeAttr("abc");//自定義屬性
			ch1.removeAttr("name");//共有屬性
			ch1.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>
		<h3>css()方法設(shè)置元素樣式</h3>
		<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>

三、操作元素內(nèi)容

html()

獲取或設(shè)置元素的內(nèi)容，包含html內(nèi)容可以識(shí)別純文本內(nèi)容

取值：html()

賦值：html("html,內(nèi)容")

text()

獲取或設(shè)置元素的內(nèi)容，不包含html內(nèi)容只能識(shí)別純文本內(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>
		<h3><span>html()和text()方法設(shè)置元素內(nèi)容</span></h3>
		<div id="html"></div>
		<div id="text"></div>
		<input type="text" name="uname" value="oop" />
		
		<script type="text/javascript">
			//獲取元素的內(nèi)容
			var ht = $("h3").html();
			var te = $("h3").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>

四、創(chuàng)建和添加元素

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  同級(jí)前追加
			$(".red").before("<span style='color:black'>薛之謙</span>");
			//after   同級(jí)后追加
			$(".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>
		<h3>刪除元素</h3>
		<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>
		
		<h3>遍歷元素 each()</h3>
		<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 對(duì)象
				console.log(ele);
				console.log(this);
				
				//統(tǒng)一設(shè)置樣式需要用jquery對(duì)象
				$(ele).attr("class","blue");
			});
		</script>
	</body>
</html>

到此這篇關(guān)于JQuery操作和遍歷元素的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: