属性操作、对css类操作、对html和text操作、对表单的值的操作

最新推荐文章于 2024-01-05 00:15:00 发布

birdlun

最新推荐文章于 2024-01-05 00:15:00 发布

阅读量170

点赞数

分类专栏： 05 jquery

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/100891595

版权

05 jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery属性操作

	<script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
	<script>
		$(function() {
			//1 获取属性的值
			var srcEle = $('img').attr('src');
			alert(srcEle);
			//2 设置属性的值
			$('img').attr('width', '80px');
			//3 设置多个属性的值
			$('img').attr({'width': '80px','height': '300px'});
			//4 删除某个属性和值
			$('img').removeAttr('width');
			
		});
	</script>
</head>
<body>
	<img src="../img/1.jpg" width="800px" />
</body>

jQuery对css类进行操作

html

<div id="father">
	<div id="div1">AAAAAA</div><br />
	<input type="button" value="背景颜色变为黄色" id="button1" />
	<input type="button" value="背景颜色清空" id="button2" />
	<input type="button" value="字体颜色开关" id="button3" />
</div>

css

<style type="text/css">
	.divclass {
		color: red;
	}
	
	.div1 {
		background-color: yellow;
	}
	
	#div1 {
		border: 1px solid black;
		width: 400px;
		height: 250px;
		margin: auto;
	}
	
	#father {
		border: 1px solid white;
		width: 450px;
		height: 300px;
		margin: auto;
		text-align: center;
	}
</style>

jQuery

<script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script>
	$(function(){
		//1 btn点击时添加css
		$('#button1').click(function(){
			$('#div1').addClass('div1');
		});
		//2 清空之前的样式
		$('#button2').click(function(){
			$('#div1').removeClass('div1');
		});
		//3通过toogleClass(class)实现颜色切换
		$('#button3').click(function(){
			$('#div1').toggleClass('divclass')
		})
		
	});
</script>

结果：

jQuery对html和text操作

html

<div>
	<p>我是jQuery</p>
</div>
<input type="button" value="获取html" id="btn1" />
<input type="button" value="设置html" id="btn2" />
<input type="button" value="获取text" id="btn3" />
<input type="button" value="设置text" id="btn4" />

jQuery

<script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script>
	$(function(){
		//1 点击btn获取div中的html
		$('#btn1').click(function(){
			var divEle=$('div').html();
			alert(divEle);//结果:	<p>我是jQuery</p>
		});
		//2 点击btn设置div中的html
		$('#btn2').click(function(){
			$('div').html('我是html的jquery');
		})
		//3 点击btn获取div中的html
		$('#btn3').click(function(){
			var divEle=$('div').text();
			alert(divEle);//结果:我是jQuery
		});
		//4 点击btn设置div中的html
		$('#btn4').click(function(){
			$('div').text('我是text的jquery');
		})
	});
</script>

jQuery对表单的值操作

html

用户名 <input type="text" id="username" /> <br />
性别 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" checked="checked" /> 女<br />
城市
<select id="city">
	<option value="北京">北京</option>
	<option value="上海">上海</option>
	<option value="广州">广州</option>
</select> <br />
<input type="button" value="获取val" id="btn1" />
<input type="button" value="设置val" id="btn2" />

jQuery

<script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script>
	$(function(){
		$('#btn1').click(function(){
			alert($('#username').val())//获取文本框的值
			alert($("#city").val());//获取下拉列表的值
			alert($("input[type='radio']:checked").val())//
		})
		$('#btn2').click(function(){
			$('#username').val('laowang')
		})
	});
</script>