94JS类库:jQuery方法扩展、全选、反选

编程之家收集整理的这篇文章主要介绍了94JS类库:jQuery方法扩展、全选、反选编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一、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>
```

总结

以上是编程之家为你收集整理的94JS类库:jQuery方法扩展、全选、反选全部内容,希望文章能够帮你解决94JS类库:jQuery方法扩展、全选、反选所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的jQuery相关文章

最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录。 下面是嵌套js的html文件: 效果图: 以下是放在服务器的有关地名xml文件:
1 无穷滚动(无限加载)与分页的比较 现在越来越多的网站或者博客的列表页开始抛弃传统的分页技术,大致的原因在于,分页明显地增加了用户的操作行为以及页面加载等待的时间,而网页浏览者往往没什么耐心。 而无
此前在浏览一些网站的时候,发现他们网站的图片都是你“鼠标”滚到哪,图片才会加载显示。当时觉得好神奇,怎么会这么“跟手”呢。核心原理是:1 设置一个定时器,计算每张图片是否会随着滚动条的滚动,而出现在视
1.开关灯效果 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;U
什么是事件冒泡 &lt;div &quot;width: 200px;height: 200px;background: red;margin: 200px auto;&quot; onc
Allot Transfer $(document).ready(function() { $(&#39;input[type=radio][name=bedStatus]&#39;).change(
目录验证码实现效果如下:生成验证码的方法:生成验证码随机背景颜色在html中引用完整源码下载地址:验证码实现效果如下:生成验证码的方法:function code_draw() { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document.getElementById("canvas"); //获取到canvas
比如info是一个字符串变量,如果需要去该变量的值,需要使用下面的语句:语法:alert($(&quot;#&quot;+id).val());例如:使用id设置隐藏控件 $(&quot;.img&quot;).mouseover(function(event){ var html=event.target.innerHTML; //alert(html); var aid=html.match(/&amp;lt;a id=&quot;(...
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注