jquery用法思想
同一个函数完成取值和赋值
操作行间样式
代码语言:javascript复制// 获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。
操作样式类名
代码语言:javascript复制$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
编写一个点击按钮,切换div样式的示例
代码语言:javascript复制<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').click(function(){
// alert('点击');
$('div').css({'background':'cyan'});
// $('div').addClass("big");
$('div').toggleClass('big');
})
})
</script>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: gold;
}
.big{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<input type="button" name="" value="切换">
<div>1</div>
</body>
</html>