首页 > 代码库 > jQuery 快捷操作
jQuery 快捷操作
快捷操作
1. class属性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class’); //删除class的所有属性
$().addClass(值); //给class属性追加信息值
$().removeClass(值); //删除class属性中的某个信息值
$().toggleClass(值); //开关效果，有就删除，没有就添加 //可以在网页上做内容展开和关闭的操作
/*********************************************************************************/
<script type="text/javascript">
function f1(){
//设置class属性信息
//$("div").attr(‘class‘,‘apple‘);
//$("div").attr(‘class‘,‘orange‘);
//$("div").attr(‘class‘,‘pear‘);
//以上三行代码同时执行，后者覆盖前者，class最后体现pear的信息
//给class属性追加信息值
$("div").addClass(‘apple‘);
$("div").addClass(‘orange‘);
$("div").addClass(‘pear‘);
}
function f2(){
//删除class属性的信息值
$(‘div‘).removeClass(‘orange‘);
$(‘div‘).removeClass(‘apple‘);
$(‘div‘).removeClass(‘pear‘);
}
function f3(){
//开关class属性值操作
$(‘div‘).toggleClass(‘orange‘);
}
</script>
<style type="text/css">
.apple{width:300px; height:200px; border:2px solid blue;}
.orange{background-color:lightblue;}
.pear{font-size:30px;}
</style>
</head>
<body>
<h1>class属性快捷操作</h1>
<div>this is jquery subject</div>
<input type="button" value="http://www.mamicode.com/设置" onclick="f1()" />
<input type="button" value="http://www.mamicode.com/删除class的属性值" onclick="f2()" />
<input type="button" value="http://www.mamicode.com/开关class属性值操作" onclick="f3()" />
/*********************************************************************************/
jQuery 快捷操作