元素样式操作使用css方法的几种写法
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//设置div样式
//第一种写法:
$("#dv").css("width","300px");
$("#dv").css("height","300px");
$("#dv").css("backgroundColor","hotpink");
$("#dv").css("border","3px solid red");
//第二种写法:链式编程
$("#dv").css("width","300px").css("height","300px").css("backgroundColor","hotpink").css("border","3px solid red");
//第三种写法:键值对的写法
var json-{"width":"200px","height":"100px","backgroundColor":"pink","border":"2px solid green"};
$("#dv").css(json);
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
链式编程:
对象不停调用方法
对象.方法().方法().方法();
对象调用方法,如果返回值还是当前这个对象,那么就可以继续调用方法
在jQuery中,一般情况,对象调用方法,这个方法的意思是设置,那么返回来的几乎都是当前的对象,就可以继续链式编程
$(function(){
$("#btn").click(function(){
//获取按钮的value属性——这个方法此时是获取,返回的是value属性值
//console.log($(this).val());
//var obj=$(this).val("我想喝星卡里");
//console.log(obj);
$(this).val("哈哈哈我也想").css("backgroundColor","red").css("width","300px");
});
});
addClass()方法,括号里什么也没有,返回来的仍然是这个对象,即使括号中设置了内容,返回来的还是这个对象。
链式编程原理:
对象.方法();调用,如果返回的还是对象,那么可以继续调用方法
<script>
$(function(){
//为按钮注册点击事件
$("#btn").click(function(){
$(this).val("哈哈").val("呵呵");
console.log();
});
});
</script>
......
<input type="button" value="显示效果" id="btn" />
移除类样式:
//1
$("#dv").removeClass("cls");
//2
$("#dv").removeClass("cls").removeClass("cls2");
//3
$("#dv").removeClass("cls cls2");
设置元素的样式可以使用css()方法,也可以使用addClass()或者removeClass()方法