1, 编写程序，实现：
- 选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）。 取消
- 选中复选框时，所在行的背景色恢复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
table,
table td {
border: 1px solid darkslategrey;
}
td {
width: 100px;
height: 30px;
}
.red{
background: red;
}
</style>
<body>
1、选中其中一列的复选框时，该复选框所在行的背景色高亮显示（黄色）。
2、取消选中复选框时，所在行的背景色恢复。
<div id="div">
<table align="center">
<p align="center">员工信息</p>
<tr>
<td></td>
<td>姓名</td>
<td>薪水</td>
<td>年龄</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>张三</td>
<td>20000</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>李四</td>
<td>22000</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>王五</td>
<td>14000</td>
<td>26</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>马六</td>
<td>15000</td>
<td>21</td>
</tr>
</table>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
$("#div input").on('click', function() {
$(this).attr("flag", true);
$(this).parent().parent().toggleClass("red");
});
});
</script>
</html>
2, 使用jquery修改div元素的背景色(随意颜色,点击DIV即修改)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
2.使用jquery修改div元素的背景色(随意颜色,点击DIV即修改)
<div id="div">我是第二题的div</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
$("#div").on('click',function(){
$(this).css("background","red");
});
});
</script>
</html>
3，点击jquery修改div的子元素p的内容为"我是子元素"（使用元素选择器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
3.点击jquery修改div的子元素p的内容为"我是子元素"（使用元素选择器）
<div id="div">
<p>我是文字</p>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$("#div").on('click',function(){
$("#div>p").text("我是子元素");
});
</script>
</html>
4，点击DIV，修改第二个p元素的背景色为"orange"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
4..点击DIV，修改第二个p元素的背景色为"orange"
<div id="div">
<p>我是1</p>
<p>我是2</p>
<p>我是3</p>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$("#div").on('click',function(){
$("#div>p").eq(1).css("background","orange");
});
</script>
</html>
5，使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
5.使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体"，并添加到"被克隆p元素"的后面
<div id="div">
<p>我是本体</p>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$("#div>p").on('click',function(){
$(this).clone(true).appendTo("#div").text("我是克隆体");
});
</script>
</html>
6，页面载入时使用jquery来自动选中页面中的多选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
6.页面载入时使用jquery来自动选中页面中的多选框
<div id="div">
<input type="checkbox" >多选框1<br>
<input type="checkbox">多选框2<br>
<input type="checkbox">多选框3<br>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$("#div>input").attr("checked",true);
</script>
</html>
7，删除列表元素中最后一个li元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
7.删除列表元素中最后一个li元素
<div id="div">
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
<li>元素5</li>
</ul>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$("#div").on('click',function(){
$("#div li").last().remove();
});
</script>
</html>
8，点击当前的p标签,弹出相对应的元素下标 (点击第一个p元素,弹出0,点击第二个p元素,弹出1…)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
8：点击当前的p标签,弹出相对应的元素下标 (点击第一个p元素,弹出0,点击第二个p元素,弹出1........)
<div id="div">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$("#div>p").on('click',function(){
var a = $(this).text()-1;
alert(a);
});
</script>
</html>
9，要求: 点击id为btn的按钮,
-
1.判断id为username的输入是否为空,如果为空,则弹出你输入的不能为空.
-
2.判断id为password的输入的个数是否小于6位,如果小于6位,则弹出你输入的长度不可以少于6位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
9，要求: 点击id为btn的按钮,
1.判断id为username的输入是否为空,如果为空,则弹出你输入的不能为空.
2.判断id为password的输入的个数是否小于6位,如果小于6位,则弹出你输入的长度不可以少于6位
<div id="div09">
<p><input id="userName" type="text"></p>
<p><input id="password" type="password"></p>
<p><button type="button" id="btn">提交</button></p>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$("#btn").on('click',function(){
var name = $('[type=text]').val();
var pwd = $('[type=password]').val();
if(name.length==0){
alert("你输入的不能为空")
}
if(pwd.length<6){
alert("你输入的长度不可以少于6位")
}
});
</script>
</html>
10，利用jquery中的选择器,至少写三种方法,让p元素的字体颜色变成红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
10.利用jquery中的选择器,至少写三种方法,让p元素的字体颜色变成红色
<div id="div">
<p>我是p标签</p>
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$("#div>button").eq(0).on('click',function(){
$("#div10>p").css("background","red");
});
$("#div>button").eq(1).on('click',function(){
$("p").last().addClass('red');
});
$("#div>button").eq(2).on('click',function(){
$("#div10>button").eq(0).prev().addClass('red');
});
</script>
</html>
11，扩展题: 制作一个动态时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#div{
width: 200px;
height: 50px;
border: 2px solid ;
border-radius: 20px;
font-size: 20px;
text-align: center;
line-height: 50px;
}
</style>
<body>
11.扩展题: 制作一个动态时钟，如图所示：
<div id="div"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
setInterval(
function(){
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes();
var h = date.getHours();
$("#div").text(h+":"+m+":"+s);
},1000);
</script>
</html>
来源：https://blog.csdn.net/sgliang18/article/details/102777415