一、jQuery方法扩展
在jQuery上扩展方法，通过点击实现选项卡的切换。本实例在jQuery的类上扩展，即$.extend({chooseCard:函数})，通过$.chooseCard('#box')调用；有别于$.fn.extend({chooseCard:函数})扩展，通过$().chooseCard('#box')调用。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:312px;
border:2px red solid;
margin: 0 auto;
}
ul{
overflow: hidden;
}
li{
list-style: none;
background:red;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 2px solid orange;
}
li.on{
background: green;
}
.box div{
background:green;
display: none;
width: 312px;
height: 200px;
font-size: 30px;
border-top: none;
}
.box div.on{
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul>
<li class="">中国</li>
<li>日本</li>
<li>韩国</li>
</ul>
<div class="on">中国是老大</div>
<div>日本是老二</div>
<div>韩国是老三</div>
</div>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
(function($){
$.extend({
chooseCard:function(idStr){
var $box=$(idStr);
var $li=$box.find('li');
console.log($li);
var $aDiv=$box.find('div');
$li.click(function(){
$(this).css({"height":"32px","border-bottom":"none"}).siblings('li')
.css({"height":"30px","border-bottom":"2px solid orange"});
$(this).addClass('on').siblings('li').removeClass('on');
$aDiv.eq($(this).index()).addClass('on').siblings('div').removeClass('on');
})
}
})
})(jQuery);
</script>
<script>
$(function(){
$.chooseCard('#box');
})
</script>
</body>
</html>
```
二、复选框全选、反选(<input type='checkbox'/>)
(1)获取复选框状态：$("#allSelect").prop("checked")
(2)改变复选框状态：$("#allSelect").prop("checked",false)
(3)翻转复选框状态：item.checked = !item.checked;
(4)判断复选框是否被选中：if ($(this).is(':checked'))
(5)找到所有被选中的复选框：myDiv.find("input:checked");
(6)获取所有复选框：$("#single input:checkbox")或$("#single input[type=checkbox]");
(7)获取所有被选中的复选框：$("#single input:checkbox:checked")或$("#single input[type=checkbox]:checked");
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<span>全选</span><input type="checkbox" id="allSelect"><br>
<span>反选</span><input type="checkbox" id="reverseSelect">
<div id="single">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
</body>
</html>
<script>
$("#allSelect").click(function () {
$("#single").children().each(function (index, item) {
item.checked = $("#allSelect").prop("checked");
});
$("#reverseSelect").prop("checked",false);
});
$("#reverseSelect").click(function () {
$("#single").children().each(function (index, item) {
item.checked = !item.checked;
});
$("#reverseSelect").prop("checked",true);
singleInput();
});
$("#single").children().click(function (index, item) {
$("#reverseSelect").prop("checked",false);
singleInput();
});
function singleInput() {
if($("#single input:checkbox:checked").length==$("#single input:checkbox").length){
$("#allSelect").prop("checked",true);
}else{
$("#allSelect").prop("checked",false);
}
}
</script>
```
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。