jQuery练习
jQuery练习
练习一：爱好选择器
$(function () {
//1.点击全选
var $checkedAllBox = $('#checkedAllBox')
var $checkedAllBtn = $('#checkedAllBtn')
var $items = $(':checkbox[name=items]')
$checkedAllBtn.click(function () {
$items.prop('checked',true)
$checkedAllBox.prop('checked',true)
})
//2.点击全不选
var $checkedNoBtn = $('#checkedNoBtn')
$checkedNoBtn.click(function () {
$items.prop('checked',false)
$checkedAllBox.prop('checked',true)
})
//3.反选
var $checkedRevBtn = $('#checkedRevBtn')
$checkedRevBtn.click(function () {
$items.each(function () {
this.checked = !this.checked
})
$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0)
})
//4.提交
var $sendBtn = $('#sendBtn')
$sendBtn.click(function () {
$items.each(function () {
if(this.checked){
console.log(this.value)
}
})
})
//5.全选/全不选
$checkedAllBox.click(function () {
$items.prop('checked',this.checked)
})
//6.点击爱好，更新全选/全不选状态
$items.click(function () {
$checkedAllBox.prop('checked',$items.filter(':not(:checked)').length===0)
})
})
练习二：添加删除记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* 1.添加
* 2.删除
*/
$(function () {
$('#addEmpButton').click(function () {
//1.收集输入的数据
var $name = $('#name')
var $email = $('#email')
var $salary = $('#salary')
var name = $name.val()
var email = $email.val()
var salary = $salary.val()
//2.生成对应的<tr>标签结构，并插入#emplyeeTable中
$('<tr></tr>').append('<td>'+ name +'</td>')
.append('<td>'+ email +'</td>')
.append('<td>'+ salary +'</td>')
.append('<td><a href="">delete</a></td>')
.appendTo('#employeetable>tbody')
.find('a').click(clickDelete)
//3.清除输入
$name.val('')
$email.val('')
$salary.val('')
})
//给所有删除链接绑定点击监听
$('#employeetable a').click(clickDelete)
//$('#employeetable').delegate('a','click',clickDelete
//删除函数
function clickDelete() {
var $tr = $(this).parent().parent()
var name = $tr.children(':first').html()
if(confirm('确定删除'+ name +'吗')){
$tr.remove()
}
return false
}
})
</script>
</head>
<body>
<br><br>添加新员工<br><br>
name:<input type="text" name="name" id="name" >
email:<input type="text" name="email" id="email" >
salary:<input type="text" name="salary" id="salary">
<br><br>
<button id="addEmpButton">Submit</button>
<br><br>
<hr>
<br><br>
<table id="employeetable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<td>Name</td>
<td>Email</td>
<td>Salary</td>
<td> </td>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="">delete</a> </td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@tsohu.com</td>
<td>8000</td>
<td><a href="">delete</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
练习三：图片轮播
$(function () {
/**
* 1.点击向右(左)的图标，平滑切换到下(上)一页
* 2.无限循环切换：第一页的上一页为最后页，最后一页的下一页是第一页
* 3.每隔3s自动滑动到下一页
* 4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，又开始自动切换
* 5.切换页面时，下面的圆点也同步更新
* 6.点击圆点图标切换到对应的页
*
* bug:快速点击时出现问题
*/
var $container = $('#container')
var $list = $('#list')
var $points = $('#pointsDiv')
var $prev = $('#prev')
var $next = $('#next')
var PAGE_WIDTH=600//页的宽度
var TIME =400//翻页的持续时间
var ITEM_TIME = 20//单元移动的间隔时间
var imgCount = $points.length
var index = 0//当前下标
var moving = false//标识是否正在翻页
//1.点击向右(左)的图标，平滑切换到下(上)一页
$prev.click(function () {
nextPage(false)
})
$next.click(function () {
nextPage(true)
})
//2.每隔3s自动滑动到下一页
var intervalId= setInterval(function () {
nextPage(true)
},1000)
//3.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，又开始自动切换
$container.hover(function () {
//清除定时器
clearInterval(intervalId)
},function () {
intervalId= setInterval(function () {
nextPage(true)
},1000)
})
//6.点击圆点图标切换到对应的页
$points.click(function () {
//目标页的下标
var targetIndex = $(this).index()
//只有当点击的不是当前页的圆点时才翻页
if (targetIndex != index){
nextPage(targetIndex)
}
})
/**
* 平滑翻页
* @param next
* true:下一页
* false：上一页
* 数值：指定下标页
*/
function nextPage(next) {
/*
总的偏移量：offset
总的时间：TIME=400
单元移动的间隔时间：ITEM_TIME =20
单元移动的偏移量：itemOffset = offset/(TIME/ITEM_TIME)
*/
//如果正在翻页，直接结束
if (moving){
return
}
moving = true//标识正在翻页
//总的偏移量：offset
var offset = 0
if (typeof next === 'boolean'){
offset = next ? -PAGE_WIDTH:PAGE_WIDTH
} else {
offset = -(next-index)*PAGE_WIDTH
}
//计算单位移动的偏移量：itemOffset
var itemOffset = offset/(TIME/ITEM_TIME)
//得到当前left值
var currLeft = $list.position().left
//计算出目标处的left值
var targetLeft = currLeft + offset
//启动循环定时器不断更新$list的left，到达目标处停止定时器
var intervalId = setInterval(function () {
//计算最新的currleft
currLeft +=itemOffset
if (currLeft === targetLeft){//到达目标位置
//清除定时器
clearInterval(intervalId)
//标识翻页停止
moving = false
//如果到达了最右边的图片(1.jpg)，跳转到最左边的第2张图片(1.jpg)
if (currLeft===-(imgCount+1)*PAGE_WIDTH){
currLeft = -PAGE_WIDTH
}else if (currLeft===0){
//如果到达了最左边的图片(5.jpg)，跳转到最右边的倒数第2张图片(5.jpg)
currLeft = -imgCount * PAGE_WIDTH
}
}
$list.css('left',currLeft)
},ITEM_TIME)
//更新圆点
updatePoints(next)
}
/**
* 更新圆点
* @param next
*/
function updatePoints(next) {
//计算目标圆点的下标targetIndex
var targetIndex = 0
if (typeof next === 'boolean'){
if (next){
targetIndex = index + 1
if (targetIndex === imgCount){
targetIndex = 0
}
} else{
targetIndex = index - 1
if (targetIndex === -1){
targetIndex = imgCount-1
}
}
}else {
targetIndex = next
}
//将当前index的<span>class的on移除
$points.eq(index).removeClass('on')
//给目标圆点添加class='on'
$points.eq(targetIndex).addClass('on')
//将index更新为targetIndex
index = targetIndex
}
})
