JQuery（学习笔记六）JQuery常用实例 - 好文

几个简单例子的实现

（一）表格隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
<style>
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
#data {
width: 600px;
}

#data, td, th {
border-collapse: collapse;
border: 1px solid #aaaaaa;
}

th, td {
height: 28px;
}

#data thead {
background-color: #333399;
color: #ffffff;
}
.odd {
background-color: #ccccff;
}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>姓名</th>
<th>工资</th>
<th>入职时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>$3500</td>
<td>2018-10-25</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Mary</td>
<td>$3400</td>
<td>2018-12-1</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>King</td>
<td>$5900</td>
<td>2019-08-17</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Scott</td>
<td>$3800</td>
<td>2018-11-17</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Smith</td>
<td>$3100</td>
<td>2019-01-27</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Allen</td>
<td>$3700</td>
<td>2019-12-05</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
</tbody>
</table>
<script src="jquery-1.10.1.js"></script>
<script>
$("#data>tbody>tr:odd").attr('class', 'odd')
</script>
</body>
</html>

效果：

（2）多Tab点击切换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多Tab点击切换</title>
<script src="jquery-1.10.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
}
#container {
position: relative;
}
#content1, #content2, #content3 {
width: 300px;
height: 100px;
padding: 30px;
position: absolute;
top: 40px;
left: 0;
}
#tab1, #content1 {
background-color: #ffcc00;
}
#tab2, #content2 {
background-color: #ff00cc;
}
#tab3, #content3 {
background-color: #00ccff;
}
</style>
</head>
<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>
$(function () {
var index = 0
var $contents = $('#container>div')
$("#tab>li").click(function () {
var clickIndex = $(this).index()
if (clickIndex != index) {
$contents[index].style.display = 'none'
$contents[clickIndex].style.display = 'block'
index = clickIndex
}
})
})
</script>
</body>
</html>
效果：

三、导航动态显示效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航动态显示效果</title>
<script src="jquery-1.10.1.js"></script>
<style rel="stylesheet">
* {
margin: 0;
padding: 0;
word-wrap: break-word;
word-break: break-all;
}
body {
background: #FFF;
color: #333;
font: 12px/1.6em Helvetica, Arial, sans-serif;
}
a {
color: #0287CA;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
ul, li {
list-style: none;
}
img {
border: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1em;
}
html {
overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/
}
#navigation {
width: 784px;
padding: 8px;
margin: 8px auto;
background: #3B5998;
height: 18px;
}
#navigation ul li {
float: left;
margin-right: 14px;
position: relative;
z-index: 100;
}
#navigation ul li a {
display: block;
padding: 0 8px;
background: #EEEEEE;
font-weight: 700;
}
#navigation ul li a:hover {
background: none;
color: #fff;
}
#navigation ul li ul {
background-color: #88C366;
position: absolute;
width: 80px;
overflow: hidden;
display: none;
}
#navigation ul li ul li {
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">衬衫</a>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li>
<a href="#">卫衣</a>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li>
<a href="#">裤子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<script>
$("#navigation>ul>li:has(ul)").hover(function () {
$(this).children("ul").stop().slideDown(400)
}, function () {
$(this).children("ul").stop().slideUp("fast")
})
</script>
</body>
</html>
效果：

四、爱好选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选</title>
</head>
<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="jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
6. 点击'提交': 提示所有勾选的爱好
*/
$(function () {
var $Items = $(':checkbox[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. 点击'反选': 改变所有爱好的勾选状态
$('#checkedRevBtn').click(function () {
$Items.each(function () {
this.checked = !this.checked
})
$checkedAllBox.prop('checked',
$Items.filter(':not(:checked)').size()===0)
})
// 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
$checkedAllBox.click(function () {
$Items.prop('checked', this.checked)
})
// 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
$Items.click(function () {
$checkedAllBox.prop('checked',
$Items.filter(':not(:checked)').size()===0)
})
// 6. 点击'提交': 提示所有勾选的爱好
$('#sendBtn').click(function () {
$Items.filter(':checked').each(function () {
alert(this.value)
})
})
})
</script>
</body>
</html>
效果：

五、添加删除记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name:</td>
<td class="inp">
<input type="text" name="empName" id="empName"/>
</td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp">
<input type="text" name="email" id="email"/>
</td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp">
<input type="text" name="salary" id="salary"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
<script src="jquery-1.10.1.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript">
/*
功能说明:
1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
技术要点:
1. DOM查询
2. 绑定事件监听
3. DOM增删改
4. 取消事件的默认行为
*/
$(function () {
$('#addEmpButton').click(function () {
var $empName = $('#empName')
var $email = $('#email')
var $salary = $('#salary')
var empName = $empName.val()
var email = $empName.val()
var salary = $empName.val()
var id = Date.now()
/*
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
*/
$('<tr></tr>')
.append('<td>'+empName+'</td>')
.append('<td>'+email+'</td>')
.append('<td>'+salary+'</td>')
.append('<td><a href="deleteEmp?id="'+id+'>Delete</a></td>')
.appendTo('#employeeTable')
.find('a')
.click(clickA)
$empName.val('')
$email.val('')
$salary.val('')
})
$('a').click(clickA)
function clickA (event) {
event.preventDefault()
var $tr = $(this).parent().parent()
var name = $tr.children('td:first').html()
if(confirm('确定删除'+name+'吗?')) {
$tr.remove()
}
}
})
</script>
</body>
</html>

六、焦点轮播图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
/*去除内边距,没有链接下划线*/
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/*让<body有20px的内边距*/
body {
padding: 20px;
}
/*最外围的div*/
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative; /*相对定位*/
margin: 0 auto;
}
/*包含所有图片的<div>*/
#list {
width: 4200px; /*7张图片的宽: 7*600 */
height: 400px;
position: absolute; /*绝对定位*/
z-index: 1;
}
/*所有的图片<img>*/
#list img {
float: left; /*浮在左侧*/
}
/*包含所有圆点按钮的<div>*/
#pointsDiv {
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 20px;
left: 250px;
}
/*所有的圆点<span>*/
#pointsDiv span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
/*第一个<span>*/
#pointsDiv .on {
background: orangered;
}
/*切换图标<a>*/
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0, 0, 0, 0.3);
color: #fff;
}
/*鼠标移到切换图标上时*/
.arrow:hover {
background-color: RGBA(0, 0, 0, 0.7);
}
/*鼠标移到整个div区域时*/
#container:hover .arrow {
display: block; /*显示*/
}
/*上一个切换图标的左外边距*/
#prev {
left: 20px;
}
/*下一个切换图标的右外边距*/
#next {
right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="1"/>
<img src="img/2.jpg" alt="2"/>
<img src="img/3.jpg" alt="3"/>
<img src="img/4.jpg" alt="4"/>
<img src="img/5.jpg" alt="5"/>
<img src="img/1.jpg" alt="1"/>
</div>
<div id="pointsDiv">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
<script src="./js/jquery.1.10.2.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
效果：

热门工具换一换