change.js文件的内容
对象函数关键字：fn
jQuery.fn.change = function () {
this.css({"background": "red"});//这里的this是当前jQuery对象函数，不是DOM
}
jQuery.fn.onchange = function (c1, c2) {
// this这里的this不是单个对象了而是一个数组了，会导致所有的li都发生改变而不是单个的
//if(this.hasClass(c1)){
// this.removeClass(c1).addClass(c2);
//}else{
// this.removeClass(c2).addClass(c1);
//}
//解决方法：
// this表示当前的jQuery对象
写法1：
this.each(function () {
// this表示当前的Dom对象
var $elem = $(this);
if ($elem.hasClass(c1)) {
$elem.removeClass(c1).addClass(c2);
}else {
$elem.removeClass(c2).addClass(c1);
}
});
}
写法2：
jQuery.fn.onchange = function (c1, c2) {
var $obj = this.each(function () {
// this表示当前的Dom对象
var $elem = $(this);
if ($elem.hasClass(c1)) {
$elem.removeClass(c1).addClass(c2);
}else {
$elem.removeClass(c2).addClass(c1);
}
});
return:$obj;
}
写法3：
jQuery.fn.onchange = function (c1, c2) {
return this.each(function(){
var $elem = $(this);
if ($elem.hasClass(c1)) {
$elem.removeClass(c1).addClass(c2);
} else {
$elem.removeClass(c2).addClass(c1);
}
});
}
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="js/jquery.min.js"></script>
<script src="js/change.js"></script>
<script>
$(document).ready(function(){
$("#btnClick").click(function(){
$(".demo").change();//对象函数调用
});
$("#onchange").click(function () {
$("li").onchange("bold","italic");
});
});
</script>
<style>
.demo{
100px;
height:100px;
border: 2px solid yellow;
}
li{
list-style: none;
margin-top: 20px;
border: 1px solid #b3b3b3;
padding: 5px;
150px;
}
.bold{
font-weight: bold;
}
.italic{
font-style: italic;
}
#onchange{
80px;
height: 30px;
border: 1px solid #00B83F;
color: #fff;
background-color: #00B83F;
}
</style>
</head>
<body>
<div class="demo"></div>
<input type="button" id="btnClick" value="点击改变背景颜色"/>
<hr><hr><hr><hr>
<ul class="box">
<li class="bold">金刚葫芦娃</li>
<li class="italic">这个杀手不太冷</li>
<li class="bold">行尸走肉</li>
<li class="italic">捉妖记</li>
<li class="italic">红楼梦</li>
<li class="bold">三国演义</li>
</ul>
<input type="button" value="点击切换" id="onchange"/>
</body>
</html>
注：首先给字段添加上需要的类，并定义好需要的样式，js只需要做一件事：就是点击按钮时切换相应的样式，添加或者删除类即可。
需要注意的是需挨个遍历，很有可能出现js把当前的jQuery对象当成数组而不是对象时就会出现问题