jQuery 属性选择器

昂首下楼梯

于 2019-11-18 21:19:16 发布

阅读量128

点赞数

文章标签： jQuery 基础开发

本文链接：https://blog.csdn.net/qq_42812036/article/details/103130972

版权

jQuery 属性选择器

属性
attr();
attr({})
css类
addClass()
removeClass();
toggleClass();
HTML代码
html();
html(val);
文本
text()；
text(val);
值
val();
val(val):

属性：
attr相当于js的setattribute();

css类

$(this).css({'backgroound':'#ccc'})
相当有HTML的style属性，有时会比较麻烦
可以写一个共有的属性
.img{
'backgroound':'#ccc'
}
然后使用
$(this).addClass('img')进行批量的添加样式
//toggleClass(’img‘)  当有属性则不加，没有则加img属性

HTML代码
html()
值所有的值

实现将第一个div里的内容全部显示到第二个div里：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			font-size: 微软雅黑;
		}
	</style>
	<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="d1">
	<h1>aaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaa</h1>
	<h1>aaaaaaaaaaaaaaaaaaaa</h1>
</div>
<button name="copy" value="copy "></button>
<div class="d2"></div>

<script type="text/javascript">
	$('button').click(function(){
		val = $('.d1').html();
		$('.d2').html(val);
	})
</script>
</body>
</html>

实现在第一个input输入值点击能显示在第二个input：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			font-size: 微软雅黑;
		}
	</style>
	<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
</head>
<body>
<p>
	<input type="text" name="">
</p>
<button name="copy" value="copy "></button>
<p>
	<input type="text" name="">
</p>
<script type="text/javascript">
	$('button').click(function(){
		val = $('input').eq(0).val();
		$('input').eq(1).val(val);
	});
</script>
</body>
</html>