jQuery考试操作题复习总结（乱序）
目录
-
- 一、菜单关联
- 二、复制、插入节点
- 三、计算器
- 四、全选、全不选、反选
- 五、表单验证
- 六、入口函数
- 七、DOM对象和jQuery对象
- 八、下拉菜单
- 九、折叠菜单
- 十、棋盘效果
- 十一、精品展示
- 十二、精简显示
- 十三、全选按钮级联(双向)效果
- 十四、课题专业选择
- 十五、微博发布
一、菜单关联
完善程序，实现功能和效果如下：
(1)单击“学校概况”、“教育教学”和“招生就业”时，如果它下面的ul列表是显示的，则让其隐藏，否则让其显示;
(2)单击“学校概况”、“教育教学”和“招生就业”时，它们下面的ul列表显示时是互斥的。
已给代码：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>菜单关联title>
<style type="text/css">
*{
margin:0;padding:0}
body{
font-size:12px;font-family:"宋体","微软雅黑";}
ul,li{
list-style: none;}
a:link,a:visited{
text-decoration:none;}
div.list{
width:210px;margin:40px auto 0 auto;}
.list a{
display:block;font-weight:bold;height:36px;line-height:36px;}
.list ul li{
background-color:#467ca2;border-bottom:solid 1px #316a91;}
.list ul li a{
padding-left:10px;color:#fff;}
.list ul li ul{
display:none;}
.list ul li ul li{
background-color:#6196bb;border-bottom:solid 1px #467ca2;}
.list ul li ul li ul{
display:none;}
.list ul li ul li a{
padding-left:20px; color:#9FC;}
.list ul li ul li ul li {
background-color:#d6e6f1; border-bottom:solid 1px #6196bb; }
.list ul li ul li ul li a{
padding-left:30px;color:#316a91;}
style>
<script src="jquery-3.4.1.min.js" type="text/javascript">script>
<script>
//需写代码
script>
head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#" class="inactive">学校概况a>
<ul>
<li><a href="#">科大简介a>li>
<li><a href="#">现任领导a>li>
<li><a href="#">组织机构a>li>
ul>
li>
<li><a href="#" class="inactive">教育教学a>
<ul >
<li><a href="#">本科生教育a>li>
<li><a href="#">研究生教育a>li>
<li><a href="#">继续教育a>li>
ul>
li>
<li><a href="#" class="inactive">招生就业a>
<ul >
<li><a href="#">本科生招生a>li>
<li><a href="#">研究生招生a>li>
<li><a href="#">继续教育招生a>li>
<li><a href="#">就业信息网a>li>
ul>
li>
ul>
div>
body>
html>
答案：
//写法一
<script>
$(function(){
$(".inactive").click(function(){
if($(this).next().is(":visible")) //如果临近的元素是可见的
{
$(this).next().hide(); //将其隐藏
}
else{
$(this).next().show().parent().siblings().children("ul").hide();
//将当前临近元素显示出来
//并将 与父辈同辈的子元素隐藏
//siblings():取得匹配元素前后所有的同辈元素。
}
})
})
script>
//写法二
<script src="../jquery-1.12.4.min.js" type="text/javascript">script>
<script type="text/javascript">
$(function(){
$("a.inactive").click(function(){
$(this).next("ul").show().parent().siblings().find("ul").hide();
})
})
script>
二、复制、插入节点
完善上面的程序，实现功能和效果图如下：
(1)将"哈密瓜"添加在"菠萝"之前;
(2)将 “苹果” 和"橘子"复制一份插入到"雪梨"后。
已给代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="jquery-3.4.1.min.js" type="text/javascript">script>
<script type="text/javascript">
script>
head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是？p>
<ul>
<li>苹果li>
<li>橘子li>
<li>菠萝li>
<li>雪梨li>
ul>
body>
html>
答案：
<script type="text/javascript">
$(function(){
$("哈密瓜 ").insertBefore($("ul li:eq(2)"));
//insertBefore()、insertAfter():要插入的节点的方法，把方法前部分的内容插入其后部分的内容（before是之前after是之后）
$("ul li:lt(2)").clone().appendTo("ul");
//clone():参数为true，复制元素的同时也复制元素绑定的事件
//appendTo()、prependTo():要插入的节点的方法，把方法前部分的内容插入其后部分的内容中
//
//:eq(index) 列表中的第index个元素(index 从О开始)
//:gt(index)列出大于index的元素
//:lt(index)列出小于index的元素
})
script>
三、计算器
完善程序，实现如下功能和效果：
(1)利用Vue.js框架实现简易计算器的功能；
(2)初始页面效果如下图。
已给代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script type="text/javascript" src="vue.min.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+option>
<option value="-">-option>
<option value="*">*option>
<option value="/">/option>
select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
div>
<script type="text/javascript">
script>
body>
html>
答案：
<script type="text/javascript">
var vu = new Vue({
el:"#app",//表示在当前这个元素内开始使用vue，el为element的缩写
data:{
opt:"+",n1:0, n2:0, result:0,
//数据,初始化v-model的值
},
methods:{
//方法中
calc:function()//绑定单击事件方法
{
switch(this.opt){
case "+":this.result=parseInt(this.n1)+parseInt(this.n2);break;
case "-":this.result=parseInt(this.n1)-parseInt(this.n2);break;
case "*":this.result=parseInt(this.n1)*parseInt(this.n2);break;
case "/":this.result=parseInt(this.n1)/parseInt(this.n2);break;
}
}
}
})
script>
四、全选、全不选、反选
效果如下图所示，使用jQuery实现功能如下：
(1jQuery实现鼠标单击“全选”、“全不选”和“反选”按钮时完成对上面复选框的选择。
(2)单击“提交”按钮时在提示框中输出选中的球类。
已给代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<form method="post" action="">
你爱好的运动是？<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" value="全 选"/>
<input type="button" value="全不选"/>
<input type="button" value="反 选"/>
<input type="button" value="提 交"/>
form>
body>
html>
答案：
<script type="text/javascript" src="jquery-3.4.1.min.js">script>
<script type="text/javascript">
$(function(){
//全选
$("#selectall").click(function(){
$("[name=items]:checkbox").prop("checked",true);
//选取所有name属性等于items的复选框
});
//全不选
$("#selectNo").click(function(){
$("[name=items]:checkbox").prop("checked",false);
//获取checked属性赋值为false
});
//反选
$("#checkedRev").click(function(){
//遍历元素
$("[name=items]:checkbox").each(function(){
this.checked=!this.checked;
//如果this.checked=true, !true变为false；如果为false, !false变为true
});
});
//提交
$("#send").click(function(){
var str="你选中的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
});
});
script>
五、表单验证
效果如下图所示，使用jQuery实现表单的验证，功能如下：
(1)class属性值为“required”的文本框后面添加一个红色的星号标识。
(2)判断当前失去焦点的元素如果是“用户名”，判断元素的value值的长度是否小于6，如果小于6，则在元素后面提示红色的“请输入至少6位的用户名！”，否则提示红色的“输入正确！”。
(3)判断当前失去焦点的元素如果是“家庭地址”，判断元素的value值的长度是否小于10，如果小于10，则在元素后面提示红色的“请输入至少10位的地址！”，否则提示红色的“输入正确！”。
(4)单击“提交”按钮时，如果用户名和家庭地址都输入正确，则在提示框中输出“注册成功！”，否则阻止提交。
已给代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<form method="post" action="">
<div class="int">
<label for="username">用户名:label>
<input type="text" id="username" class="required" />
div>
<div class="int">
<label for="address">地址:label>
<input type="text" id="address" class="required" />
div>
<div class="int">
<label for="personinfo">个人资料:label>
<input type="text" id="personinfo" />
div>
<div class="sub">
<input type="submit" value="提交" id="send"/><input
type="reset" value="重置"/>
div>form>
body>
html>
答案：
<script src="jquery-3.4.1.min.js" type="text/javascript">script>
<script type="text/javascript">
$(function(){
//如果是必填的，则加红星标识.
$("form :input.required").each(function(){
var $required = $(" *"); //创建元素
$(this).parent().append($required); //然后将它追加到文档中
});
//文本框失去焦点后
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '请输入至少6位的用户名.';
$parent.append(''+errorMsg+'');
}else{
var okMsg = '输入正确.';
$parent.append(''+okMsg+'');
}
}
//验证邮件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append(''+errorMsg+'');
}else{
var okMsg = '输入正确.';
$parent.append(''+okMsg+'');
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
//提交，最终验证。
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("注册成功！");
});
//重置
$('#res').click(function(){
$(".formtips").remove();
});
})
script>
六、入口函数
新建一个HTML页面，单击按钮后弹出弹窗
答案：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个简单的jQuery程序title>
<script src="jquery-3.4.1.min.js" type="text/javascript">script>
<script>
$(document).ready(function(){
//jQuery入口函数
$("button").click(function(){
alert("欢迎学习jQuery！");
})
})
script>
head>
<body>
<button>单击button>
body>
html>
七、DOM对象和jQuery对象
新建一个HTML页面，实现如下效果，掌握DOM对象和jQuery对象的区别与转换。
功能：当页面上的复选框被选中时，弹出提示框。
要求：利用DOM对象和jQuery对象分别实现，掌握DOM对象和jQuery对象的区别与转换。
答案：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM对象与jQuery对象的区别title>
<script src="../jquery-1.12.4.min.js" type="text/javascript">script>
<script>
$(function(){
//利用DOM对象
document.getElementById("cr").onclick=function(){
if(this.checked) alert("谢谢你参与！");
}
//利用jQuery对象
$("#cr").click(function(){
if($(this).is(":checked")) alert("谢谢你参与!");
});
//利用jQuery对象和DOM对象混合
$("#cr").click(function(){
if($(this)[0].checked) alert("谢谢你参与!");
});
})
script>
head>
<body>
<input type="checkbox" id="cr"><label for="cr">我已经阅读了上面的制度label>
body>
html>
八、下拉菜单
要求：(1)熟悉初始文档结构
(2)添加代码实现，鼠标单移入菜单项时其子菜单显示，移出时子菜单隐藏。
已给代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
ul,li{
padding:0;
margin: 0;
list-style:none;
text-align: center;
}
#wrap{
width:330px;
margin:30px auto 0;
height: 30px;
background-color: blue;
border-radius: 5px;
padding:0 5px;
}
#wrap>ul{
height: 30px;
}
#wrap>ul>li{
float: left;
width: 100px;
background-color:yellow;
height: 30px;
line-height: 30px;
margin: 0 5px;
}
a{
text-decoration: none;
color:red;
}
#wrap .uu{
background-color: pink;
display: none;
}
style>
head>
<body>
<div id="wrap">
<ul>
<li>
<a href="javascript:;">一级菜单1a>
<ul class="uu">
<li>二级菜单11li>
<li>二级菜单12li>
<li>二级菜单13li>
ul>
li>
<li>
<a href="javascript:;">一级菜单2a>
<ul class="uu">
<li>二级菜单21li>
<li>二级菜单22li>
<li>二级菜单23li>
ul>
li>
<li>
<a href="javascript:;">一级菜单3a>
<ul class="uu">
<li>二级菜单21li>
<li>二级菜单22li>
<li>二级菜单23li>
ul>
li>
ul>
div>
body>
html>
答案：
<script type="text/javascript" src="jquery-3.4.1.min.js">script>
<script type="text/javascript">
$(function(){
$("#wrap>ul>li").mouseenter(function(){
//事件最终触发在DOM对象
$(this).children("ul").slideDown(); //slideDown的作用是显示元素
}).mouseleave(function(){
$(this).children("ul").slideUp(); //slideUp的作用是隐藏元素
})
})
script>
九、折叠菜单
要求：(1)熟悉初始文档结构
(2)添加代码实现，单击其中一个菜单选项，显示其对应下面的子菜单列表。
已给代码：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>折叠菜单1title>
<style type="text/css">
body{
margin:0;padding:20px 0 12px 0;font-size:12px;line-height:22px;background:#fff;}
ul,li{
margin:0;
padding:0;
list-style-type:none;
}
a {
color:#00007F;text-decoration:none;}
a:hover {
color:#bd0a01;text-decoration:underline;}
.box {
width: 150px;
margin: 0 auto;
}
.menu{
overflow:hidden;
border-color: #C4D5DF;
border-style: solid;
border-width: 0 1px 1px;
}
.menu li.level1 a{
display: block;
height: 28px;
line-height: 28px;
background:#EBF3F8;
font-weight:700;
color: #5893B7;
text-indent: 14px;
border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{
text-decoration:none;}
.menu li.level1 a.current{
background:#B1D7EF;}
.menu li ul{
overflow:hidden;}
.menu li ul.level2{
display:none;}
.menu li ul.level2 li a{
display: block;
height: 28px;
line-height: 28px;
background:#ffffff;
font-weight:400;
color: #42556B;
text-indent: 18px;
border-top: 0px solid #ffffff;
overflow: hidden;
}
.menu li ul.level2 li a:hover{
color:#f60;
}
style>
<script src="../jquery-1.12.4.min.js" type="text/javascript">script>
head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫a>
<ul class="level2">
<li><a href="#none">短袖衬衫a>li>
<li><a href="#none">长袖衬衫a>li>
<li><a href="#none">短袖T恤a>li>
<li><a href="#none">长袖T恤a>li>
ul>
li>
<li class="level1">
<a href="#none">卫衣a>
<ul class="level2">
<li><a href="#none">开襟卫衣a>li>
<li><a href="#none">套头卫衣a>li>
<li><a href="#none">运动卫衣a>li>
<li><a href="#none">童装卫衣a>li>
ul>
li>
<li class="level1">
<a href="#none">裤子a>
<ul class="level2">
<li><a href="#none">短裤a>li>
<li><a href="#none">休闲裤a>li>
<li><a href="#none">牛仔裤a>li>
<li><a href="#none">免烫卡其裤a>li>
ul>
li>
ul>
div>
body>
html>
答案：
<script type="text/javascript">
$(document).ready(function(){
$(".level1 > a").click(function(){
$(this).addClass("current") //给当前元素添加"current"样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素移除"current"样式
.next().hide(); //它们的下一个元素隐藏
return false;
});
});
script>
十、棋盘效果
要求：1、熟悉初始文档结构。
2、在上面程序中添加jQuery代码，实现如图效果。
已给代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
table{
border: 3px solid #000;
}
td{
width: 50px;
height: 50px;
border: 1px solid #000;
}
style>
<script src="jquery-3.4.1.min.js">script>
<script>
//输入代码
script>
head>
<body>
<table align="center" cellspacing="0">
<tr><td>td><td>td><td>td><td>td><td>td><td>td><td>td><td>td>tr>
<tr><td>td><td>td><td>td><td>td><td>td><td>td> <td>td><td>td>tr>
<tr><td>td><td>td><td>td><td>td><td>td><td>td> <td>td><td>td>tr>
<tr><td>td><td>td><td>td><td>td><td>td><td>td> <td>td><td>td>tr>
<tr><td>td><td>td><td>td><td>td><td>td><td>td> <td>td><td>td>tr>
<tr><td>td><td>td><td>td><td>td><td>td><td>td> <td>td><td>td>tr>
<tr><td>td><td>td><td>td><td>td><td>td><td>td> <td>td><td>td>tr>
<tr><td>td><td>td><td>td><td>td><td>td><td>td> <td>td><td>td>tr>
table>
body>
html>
答案：
<script src="jquery-1.12.4.js">script>
<script>
//输入代码
$(function(){
$("tr:nth-child(2n)>td:nth-child(2n+1)").css("background-color","#000");
$("tr:nth-child(2n+1)>td:nth-child(2n)").css("background-color","#000");
})
script>
head>
十一、精品展示
要求：1、熟悉初始文档结构。
2、在上面程序中添加jQuery代码，实现当鼠标移动到图2-3某个菜单项时，在中间显示相应的文字，如图2-4所示效果。
已给代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精品展示title>
<style>
ul,li{
padding: 0;
margin:0;
list-style: none;
}
.wrapper {
width: 298px;
height: 243px;
margin: 100px auto 0;
border: 1px solid pink;
}
#left, #center, #right {
float: left;
height: 243px;
}
#left,#right{
width: 80px;
}
#center{
width:138px;
height: 243px;
}
#left li, #right li {
background-color:rgba(200,200,200,0.3);
height: 27px;
}
#left li a, #right li a {
display: block;
height: 26px;
border-bottom: 1px solid pink;
line-height: 26px;
text-align: center;
color:red;
text-decoration: none;
font-size: 12px;
}
#left li a:hover, #right li a:hover {
color: blue;
background-color:yellow;
text-decoration: underline;
}
#center li{
height: 243px;
background-color:rgba(255,255,0,0.3);
}
#center li a{
display: block;
height: 243px;
line-height:243px;
text-align: center;
font-size: 40px;
text-decoration: none;
color:#000;
}
#center>li{
display: none;}
#center>li:nth-child(1){
display:block;
}
style>
<script src="jquery-1.12.4.js">script>
<script>
//输入代码
script>
head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴a>li>
<li><a href="#">雪地靴a>li>
<li><a href="#">冬裙a>li>
<li><a href="#">呢大衣a>li>
<li><a href="#">毛衣a>li>
<li><a href="#">棉服a>li>
<li><a href="#">女裤a>li>
<li><a href="#">羽绒服a>li>
<li><a href="#">牛仔裤a>li>
ul>
<ul id="center">
<li><a href="#">女靴a>li>
<li><a href="#">雪地靴a>li>
<li><a href="#">冬裙a>li>
<li><a href="#">呢大衣a>li>
<li><a href="#">毛衣a>li>
<li><a href="#">棉服a>li>
<li><a href="#">女裤a>li>
<li><a href="#">羽绒服a>li>
<li><a href="#">牛仔裤a>li>
<li><a href="#">女包a>li>
<li><a href="#">男包a>li>
<li><a href="#">登山鞋a>li>
<li><a href="#">皮带a>li>
<li><a href="#">围巾a>li>
<li><a href="#">皮衣a>li>
<li><a href="#">男毛衣a>li>
<li><a href="#">男棉服a>li>
<li><a href="#">男靴a>li>
ul>
<ul id="right">
<li><a href="#">女包a>li>
<li><a href="#">男包a>li>
<li><a href="#">登山鞋a>li>
<li><a href="#">皮带a>li>
<li><a href="#">围巾a>li>
<li><a href="#">皮衣a>li>
<li><a href="#">男毛衣a>li>
<li><a href="#">男棉服a>li>
<li><a href="#">男靴a>li>
ul>
div>
body>
html>
答案：
<script src="jquery-1.12.4.js">script>
<script>
//输入代码
//index()返回值是该元素在其兄弟元素构成集合中的下标
$(function(){
$("#left>li").mouseenter(function(){
var index=$(this).index();
$("#center>li:eq("+index+")").show().siblings().hide();
})
$("#right>li").mouseenter(function(){
var index=$(this).index()+9;
$("#center>li:eq("+index+")").show().siblings().hide();
})
})
script>
十二、精简显示
要求：1、熟悉初始文档结构。
2、在上面程序中添加jQuery代码，实现如下效果：
(1)初始页面显示如下图2-5。
(2)单击文字“精简显示品牌”，页面显示如下图2-6所示。
已给代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle><style type="text/css">
*{
padding:0px; margin:0px;}
.SubCategoryBox{
width:600px; margin:20px auto; font-size:12px;}
.SubCategoryBox ul{
list-style:none;}
.SubCategoryBox ul li{
float:left; width:200px; text-align:center;height:24px; line-height:24px;}
.showmore {
clear:both; text-align:center; padding-top:10px;}
a {
color:#04D; text-decoration:none;}
a:hover {
color:#F50; text-decoration:underline;}
.showmore a {
display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a{
color:#f50;}
}
style>
<script src="jquery-1.12.4.js" type="text/javascript">script>
<script>
//输入代码
script>
head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能a><i>(30440)i>li>
<li ><a href="#">索尼a><i>(27220)i>li>
<li ><a href="#">三星a><i>(20808)i>li>
<li ><a href="#">尼康a><i>(17821)i>li>
<li ><a href="#">松下a><i>(12289)i>li>
<li ><a href="#">卡西欧a><i>(8242)i>li>
<li ><a href="#">富士a><i>(14894)i>li>
<li ><a href="#">柯达a><i>(9520)i>li>
<li ><a href="#">宾得a><i>(2195)i>li>
<li ><a href="#">理光a><i>(4114)i>li>
<li ><a href="#">奥林巴斯a><i>(12205)i>li>
<li ><a href="#">明基a><i>(1466)i>li>
<li ><a href="#">爱国者a><i>(3091)i>li>
<li ><a href="#">其它品牌相机a><i>(7275)i>li>
ul>
<div class="showmore">
<a href="#"><span>精简显示品牌span>a>
div>
div>
body>
html>
答案：
<script>
//输入代码
$(function(){
$("li:eq(0),li:eq(2),li:eq(10)").addClass("promoted");
var $category=$("ul li:gt(5):not(:last)");
$(".showmore>a").click(function(){
// if($category.is(":visible")){
if($(this).text()=="精简显示品牌"){
$category.hide();
$(this).children("span").html("显示全部品牌");
$("ul li").removeClass("promoted");
}
else{
$category.show();
$(this).children("span").html("精简显示品牌");
$("li:eq(0),li:eq(2),li:eq(10)").addClass("promoted");
}
})
})
script>
十三、全选按钮级联(双向)效果
要求：1、熟悉初始文档结构。
2、在上面程序中添加jQuery代码，实现如下功能：
(1) 单击全选复选框后，根据全选按钮的选中状态来控制下面所有复选框的状态。
(2) 单击下面的单个复选框时，需要根据当前下面所有复选框的状态来确定全选复选框的状态，当下面所有复选框都选中时，全选复选框才选中，否则全选复选框不能选中。
已给代码：
doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>全选按钮级联(双向)效果title>
<style type = "text/css">
td{
text-align:center;
font-size:24px;
line-height:36px;
}
input{
display: inline-block;
width: 24px;
height: 24px;
}
input[type=button]{
width: 100px;
}
style>
head>
<body>
<table border = "1" cellspacing = "0" cellpadding = "0" width = "600px;" id="tb1" >
<tr>
<td><input type = "checkbox" id = "all" value = "全选" />全选td>
<td>商品名称td>
<td>价格td>
tr>
<tr>
<td><input type = "checkbox" name = "product" />td>
<td>网页设计td>
<td>25td>
tr>
<tr>
<td><input type = "checkbox" name = "product" />td>
<td>css + div布局td>
<td>26td>
tr>
<tr>
<td><input type = "checkbox" name = "product" />td>
<td>JavaScript程序设计td>
<td>28td>
tr>
<tr>
<td><input type = "checkbox" name = "product" />td>
<td>JQuery程序设计td>
<td>28td>
tr>
table>
<script src="jquery-1.12.4.js">script>
<script>
//输入代码
script>
body>
html>
答案：
<script>
//输入代码
$(function(){
//点击全选按钮后，根据全选按钮的选中状态来控制下面所有子复选框的状态
$("#all").click(function(){
var ch=this.checked;
$("input[name=product]").each(function(){
this.checked=ch;
})
})
// 单击下面的单个复选框时，需要根据当前下面所有复选框的状态来确定全选复选框的状态，当下面所有复选框都选中时，全选复选框才选中，否则全选复选框不能选中。
$("input[name=product]").click(function(){
if($("input[name=product]:checked").length==$("input[name=product]").length)
$("#all")[0].checked=true;
else $("#all")[0].checked=false;
})
})
script>
十四、课题专业选择
要求：1、熟悉初始文档结构。
2、在上面程序中添加jQuery代码，实现如下功能：
(1)单击“添加”按钮将左边列表框中选中的列表项添加到右边的列表框中。
(2)单击“删除”按钮将右边列表框中选中的列表项添加到左边的列表框中。
已给代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
float:left;
}
.divC{
padding-top:80px;
margin:0 30px;
}
select{
width:122px;
height: 200px;
}
style>
<script src="jquery-1.12.4.js">script>
<script>
$(function(){
//输入代码
})
script>
head>
<body>
<h1>课题专业选择h1>
<div class="divL">
<span>课题适合专业span><br>
<select name="se1" id="sel1" multiple size="10">
<option value="软件工程">软件工程option>
<option value="软件工程(专升本)">软件工程(专升本)option>
<option value="自动化">自动化option>
<option value="电子信息">电子信息option>
<option value="光学电子">光学电子option>
<option value="物联网">物联网option>
select>
div>
<div class="divC">
<button id="btn1">添加-->>button><br><br>
<button id="btn2">删除<<--button>
div>
<div class="divR">
<span>已选专业span><br>
<select name="se1" id="sel2" multiple size="10">
select>
div>
body>
html>
答案：
<script>
$(function(){
$("#btn1").click(function(){
$("#sel1>option:selected").appendTo($("#sel2"));
})
$("#btn2").click(function(){
$("#sel2>option:selected").appendTo($("#sel1"));
})
})
script>
十五、微博发布
要求：1、熟悉初始文档结构。
2、在上面程序中添加jQuery代码，实现如下功能，效果如图3-5所示。
(1) 单击"发布"按钮，将多行文本框中的内容以列表形式添加到代码中的< ul>元素里面。
(2) 要求最新发布的内容显示在最上面，同时清空多行文本框。
已给代码：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>微博发布title>
<style>
.box{
width:600px;
margin:20px auto;
border: 1px solid #000;
padding:10px;
}
#txt{
width:400px;
height: 150px;
}
ul,li{
padding:0;
margin:0;
}
ul{
list-style: none;
margin:0 126px 0 65px;
}
li{
border-bottom: 1px dashed #ccc;
}
style>
<script src="jquery-1.12.4.js" type="text/javascript"> script>
<script>
$(function(){
//输入代码
})
script>
head>
<body>
<div class="box" id="weibo">
<span>微博发布span>
<button id="btn">发布button>
<textarea name="" id="txt" cols="30" rows="10">
<ul id="ul"> ul>
div>
body>
html>
答案：
<script>
$(function(){
//输入代码
$("#btn").click(function(){
var tt=$("#txt").val();
$("#txt").val("");
var $li=$("" +tt+"" );
$("ul").prepend($li);
});
})
script>