这篇博客介绍了如何使用JavaScript（jQuery库）实现网页交互功能，包括爱好选择器的全选、全不选、反选操作，Tab栏的点击切换，以及页面的返回顶部功能。通过示例代码详细阐述了事件处理、DOM操作和状态管理等技术要点。
目录
一：爱好选择器
注意事项：
①如何用filter()
②this指向
③ 哪个是JQ对象哪个是DOM对象
<body>
<form>
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
<script src="js/jquery-1.10.1.js"></script>
<script>
/*
功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
6. 点击'提交': 提示所有勾选的爱好
*/
$(function () {
var $checkedAllBtn = $('#checkedAllBtn')
var $checkedNoBtn = $('#checkedNoBtn')
var $items = $('input[name=items]')
var $checkedAllBox = $('#checkedAllBox')
// 1.全选按钮
$checkedAllBtn.click(function () {
$items.prop('checked', true)
$checkedAllBox.prop('checked', true)
})
// 2.全不选按钮
$checkedNoBtn.click(function () {
$items.prop('checked', false)
$checkedAllBox.prop('checked', false)
})
// 3.反选按钮
var $checkedRevBtn = $('#checkedRevBtn')
$checkedRevBtn.click(function () {
$items.each(function () {
//反选功能 需要通过判断每一个复选框当前的选中状态 来切换 所以隐试遍历不能满足我们的需求了
this.checked = !this.checked;
})
// 4.反选时如果四个都被选中 全选/全不选按钮 随之选中和未选择
var $itemsLength = $items.filter(':checked').length
// console.log(itemsLength)
$checkedAllBox.prop('checked', $itemsLength == $items.length)
})
// 5.全选/全不选按钮 选中时 下面四个随之选中和未选择
$checkedAllBox.click(function () {
$items.prop('checked', this.checked)
})
// 6.动态检测下面四个选中状态 全选/全不选按钮 状态随之更改
$items.click(function () {
$checkedAllBox.prop('checked', $items.filter(':checked').length == $items.length)
})
var $sendBtn = $('#sendBtn')
$sendBtn.click(function () {
$items.filter(':checked').each(function () {
alert(this.value)
})
})
})
</script>
</body>二：tab栏切换
<body>
<h2>多Tab点击切换</h2>
<ul id="tab">
<li id="tab1" value="1">10元套餐</li>
<li id="tab2" value="2">30元套餐</li>
<li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
<div id="content1">
10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="content2" style="display: none">
30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="content3" style="display: none">
50元包月详情：<br /> 每月无限量随心打
</div>
</div>
<script src="js/jquery-1.10.1.js"></script>
<script>
/* 1.简单写法：有损耗 */
/* $(function () {
var $list = $('ul li')
var $divs = $('#container>div')
$list.click(function () {
var index = $(this).index();
$divs.eq(index).show()
$divs.eq(index).siblings().hide()
})
}) */
/* 2.优化后的写法 */
$(function () {
var $list = $('ul li')
var $divs = $('#container>div')
var before = 0;
$list.click(function () {
var after = $(this).index();
//一个函数的开始 可能是这个函数上一次执行的结尾
//一个函数的结束 可能是这个函数下一次执行的开始
/* 3.优化 :如果两次点击同一个按钮 */
if (before == after) {
alert('请不要重复点击')
return /* 直接退出执行 */
}
$divs.eq(before).hide();
$divs.eq(after).show();
before = after;
})
})
</script>
</body>
三：回到顶部
<style>
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: fixed;
cursor: pointer;
color: #fff;
right: 150px;
top: 500px;
}
</style>
<body style="height: 100000px;">
<div id="to_top">返回顶部</div>
<script src="js/jquery-1.10.1.js"></script>
<script>
$(function () {
// 逐帧动画 固定时间内走完(固定步数100走完)
// 回到顶部
// 滚动条越短 速度越慢 2000m➗100步 = 20m/步 一步走20m
// 滚动条越长 速度越快 5000m➗100步 = 50m/步 一步走50m
var $totop = $('#to_top')
$totop.click(function () {
// 滚动条所在位置 总偏移
var scTop = $('html').scrollTop() + $('body').scrollTop()
// 设置要分100步走完，走一步的步长为onscTop
var onscTop = scTop / 100
// 每过20ms 向上滚动100px
var timer = setInterval(function () {
scTop -= onscTop
// 清除定时器
if (scTop <= 0) {
clearInterval(timer)
}
$('body,html').scrollTop(scTop)
}, 20)
})
})
</script>
</body>
扫一扫
1324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
