文章目录
1 概念
当谈到jQuery时，它通常指的是jQuery库，是一个流行的JavaScript库，用于简化JavaScript编程和处理HTML文档的交互。以下是关于jQuery的一些重要信息：
-
选择器引擎： jQuery 提供了一个强大的选择器引擎，允许你通过CSS选择器来选择和操作HTML元素。这使得查找和操作文档中的元素变得更加容易。
-
DOM操作： jQuery简化了DOM（文档对象模型）的操作。你可以轻松地添加、删除、修改和遍历元素，而不需要编写复杂的原生JavaScript代码。
-
事件处理： jQuery提供了简化的事件处理功能，使你能够轻松地附加事件监听器，并在用户与页面交互时执行相应的操作。
-
动画效果： jQuery包括用于创建动画效果的功能，如淡入淡出、滑动和动画。这使得在页面上创建交互性更高的用户界面变得更加容易。
-
AJAX： jQuery简化了使用AJAX（异步JavaScript和XML）进行数据交换的过程。它提供了用于发送HTTP请求、处理响应和更新页面的方法。
-
插件： jQuery有一个庞大的生态系统，包括大量的插件和扩展，可以用于增强其功能，从图形库到表单验证等等。
-
跨浏览器兼容性： jQuery致力于解决不同浏览器之间的兼容性问题，使开发者能够编写一致的代码，而不用担心浏览器差异。
-
开源： jQuery是一个开源项目，可以免费使用和修改，而且有一个活跃的社区，不断更新和维护。
使用jQuery的主要优点是它可以显著简化复杂的JavaScript任务，提高开发效率，并提供了一种更简单的方式来处理交互性和动态性的网页。但需要注意的是，随着现代Web开发的发展，原生JavaScript也变得更加强大和灵活，因此在使用jQuery时需要谨慎考虑是否真正需要它的功能。
2 jQuery的版本和使用
jQuery版本有很多，分为1.x2.x3.x
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容
IE678）
国内多数网站还在使用1.x的版本
jQuery库是一个JavaScript文件，我们可以直接在HTML页面中通过script标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法。
<head>
<script src="js/jquery-1.12.4.js"></script>
</head>
3 jQuery语法结构
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）
3.1 基础语法： $(selector).action()
说明：
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
3.2 文档就绪事件
文档就绪事件，实际就是文件加载事件。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。所以尽可能将所有的操作都在文档加载完毕之后实现。
文档就绪事件方式一：
$(document).ready(function() {
// 在文档就绪后执行的代码
// 可以操作DOM元素，绑定事件等等
});
文档就绪事件方式二：
可以使用 $() 缩写方式来达到同样的效果
$(function() {
// 在文档就绪后执行的代码
});
这两种方式都会等到整个文档都加载完成并且DOM结构可以操作时执行回调函数。
jQuery 的 ready 方法与 JavaScript 中的 onload 相似，但是也有区别：
4 jQuery选择器
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
4.1 元素选择器
jQuery 元素选择器基于元素/标签名选取元素。
语法：
$("div").css('border','1px solid black');
4.2 #id选择器
jQuery的 #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。
语法：
$("#myDiv").css('color','blue');
4.3 类选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法：
$(".myClass").css('color','red');
4.4 并集选择器
可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
语法：
$("div,span,p.myClass").css('color','pink');
4.5 全局选择器
匹配所有元素
语法：
$("*")
4.6 后代选择器
在给定的祖先元素下匹配所有的后代元素
语法：
//找到表单中所有的 input 元素
$("form input").css('border','1px solid red');
4.7 子选择器
在给定的父元素下匹配所有的子元素
语法：
//匹配表单中所有的子级 input 元素
$("form > input").css('border','5px solid red');
4.8 相邻选择器
匹配所有紧接在 prev 元素后的 next 元素
语法：
//匹配所有跟在 label 后面的 input 元素
$("label + input").css('border','5px solid blue');
4.9 同辈选择器
匹配 prev 元素之后的所有 siblings 元素
语法：
//匹配所有与表单同辈的 input 元素
$("form ~ input").css('border','5px solid yellow');
4.10 属性选择器
匹配包含给定属性的元素
$(function (){
//匹配给定的属性是某个特定值的元素(查找所有 name 属性是 newsletter 的 input 元素)
$("input[name='newsletter']").attr("checked", true);
//查找所有 name 属性不是 newsletter 的 input 元素
$("input[name!='newsletter']").attr("checked", true);
//匹配给定的属性是以某些值开始的元素(查找所有 name 以 'news' 开始的 input 元素)
$("input[name^='news']").attr("checked", true);
//匹配给定的属性是以某些值结尾的元素(查找所有 name 以 'letter' 结尾的 input 元素)
$("input[name$='letter']").attr("checked", true);
//匹配给定的属性是以包含某些值的元素(查找所有 name 包含 'man' 的 input 元素)
$("input[name*='a']").attr("checked", true);
//复合属性选择器，需要同时满足多个条件时使用。(找到所有含有 value 属性，并且它的 name 属性是以 letter 结尾的)
$("input[value][name$='letter']").attr("checked", true);
})
4.11 过滤选择器
$(function (){
//获取第一个元素
$('li:first').css('background-color', 'gray');
//获取最后一个元素
$('li:last').css('background-color', 'gray');
//匹配所有索引值为偶数的元素
$("li:even").css('background-color', 'gray')
//匹配所有索引值为奇数的元素
$("li:odd").css('background-color', 'gray')
//匹配一个给定索引值的元素
$("li:eq(3)").css('background-color', 'gray')
//匹配所有大于给定索引值的元素
$("li:gt(1)").css('background-color', 'gray')
//匹配含有子元素或者文本的元素
$("div:parent").each(function (){
console.log($(this).attr('id'))
});
//去除所有与给定选择器匹配的元素(查找所有未选中的 input 元素)
$("input:not(:checked)").after("<b>Hello</b>");
})
4.12 表单选择器
$(function() {
//选择了所有文本输入框（<input type="text"> 元素）并将它们的文本颜色设置为红色。
$(":text").css('color', 'red');
//选择了所有复选框（<input type="checkbox"> 元素）并在每个复选框后面插入了一个加粗的 "Hello" 文本。
$(":checkbox").after("<b>Hello</b>")
//选择了所有已经被选中的复选框（<input type="checkbox" checked> 元素）并在每个已选中的复选框后面插入了一个加粗的 "Hello" 文本。
$(":checkbox:checked").after("<b>Hello</b>")
//选择了所有被选中的下拉框选项（<option> 元素）并遍历它们，将每个选项的内部文本内容打印到浏览器的控制台。
$(":selected").each(function () {
console.log(this.innerHTML);
});
//选择了所有可用的复选框（未被禁用的 <input type="checkbox"> 元素）
$(":checkbox:enabled")
})
5 jQuery常用函数
5.1 过滤函数
$(function() {
//获取匹配的第二个元素
$("tr:eq(1)").css('background-color', 'gray');
//获取匹配的第一个元素
$("li").first().css('background-color', 'gray');
//保留带有select类的元素
$("p").filter(".selected").css({color: "red", fontSize: "24px"});
//找到id=li3的所有<a>同辈元素。
$("#li3").siblings("a").css("color", "green");
})
5.2 属性相关
$(function() {
//得到 id 为 txt 的 value 的值
console.log($("#txt").val());
//设定文本框的值
$("#txt").val("hello world");
//返回 h1 元素的内容
console.log($("h1").html());
//设置所有 h1 元素的内容
$("h1").html("<span style='color: red'>H1</span>");
//为id为div的元素加上 a，b 类
$("#div").addClass("a").addClass("b");
$("#btn").click(function () {
//如果存在（不存在）就删除（添加）一个类。
$("#div2").toggleClass("c");
});
$("#btn2").click(function () {
//返回id属性值。
console.log($("#txt").attr("id"));
//获取在匹配的元素集中的第一个元素的属性值
console.log($("#img").prop("id"));
//设置id为img的元素的src属性值为img/man02.jpg
$("#img").prop("src", "img/man02.jpg");
});
$("#btn3").click(function () {
alert($("#check1").attr("checked"));
});
$("#btn4").click(function () {
//选中复选框为true，没选中为false
alert($("#check1").prop("checked"));
});
})
6 jQuery文档处理
$(function() {
//向每个匹配的元素内部追加内容(向所有段落中追加一些HTML标记)
$("p").append("<b>Hello</b>");
//把所有匹配的元素追加到另一个指定的元素元素集合中(把所有段落追加到div中)
$("p").appendTo("div");
//向每个匹配的元素内部前置内容
$("p").prepend("<b>Hello! </b>");
//把所有段落追加到ID值为foo的元素中
$("p").prependTo("#foo");
//在每个匹配的元素之后插入内容
$("p").after("<b>Hello</b>");
//将所有匹配的元素用单个元素包裹起来(把所有的段落用一个新创建的div包裹起来)
$("p").wrap("<div style='color: red'></div>");
//用一个生成的div将所有段落包裹起来
$("p").wrapAll("<div style='color: red'></div>");
//将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$("p").wrapInner("<div style='color: red'></div>");
})
7 jQuery CSS操作
示例：
$(function() {
//取得id为p1的color样式属性的值(rgb格式)
console.log($("#p1").css('color'));
$("p").css({ "color": "#87CEEB", "background": "#f5f5f5" });
//取得匹配元素当前计算的高度值(px)
console.log($("#div2").height());
//获取第一个匹配元素内部区域高度(包括补白、不包括边框)
console.log($("#div2").innerHeight());
//获取第一个匹配元素外部高度(默认包括补白和边框)
console.log($("#div2").outerHeight());
})
8 jQuery事件
8.1 常用DOM事件列表
8.2 常用的 jQuery 事件方法
参考文档：https://www.w3school.com.cn/jquery/jquery_ref_events.asp
<script>
$(function() {
//给id为btn的元素绑定单击事件
$("#btn").click(function (){
alert("1");
})
//用来绑定多个事件处理函数到同一元素上
$("#btn").on("click",function (){
alert("2");
})
//为每个匹配元素的特定事件绑定事件处理函数
$("#btn").bind("click",function (){
alert("3");
})
//这可以用来处理动态生成的元素，因为它们可能在页面加载后才添加
$(document).on('click', '.clickme', function () {
alert("click me");
});
//键盘按键事件的处理函数
$("#txt").keypress(function (event) {
if (event.keyCode == 13) {
alert('回车')
}
});
//它只会在第一次点击按钮时触发，之后的点击不再触发
$("#btn").one('click', function() {
alert('click one');
})
})
</script>
9 jQuery效果
9.1 隐藏和显示
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<script>
$(function() {
//隐藏图片
$("#hideBtn").click(function(){
$("img").hide();
});
//显示图片
$("#showBtn").click(function(){
$("img").show();
});
//切换隐藏和显示
$("#toggleBtn").click(function(){
$("img").toggle(2000,function(){
alert("切换完成！");
});
})
</script>
<body>
<button id="hideBtn">hide</button>
<button id="showBtn">show</button>
<button id="toggleBtn">toggle</button>
</body>
9.2 淡入淡出
语法：
//淡入显示元素
$(selector).fadeIn(speed,callback);
//淡出隐藏元素
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
<script>
$(function() {
//淡出隐藏元素
$("#hideBtn").click(function (){
$("img").fadeOut(5000)
});
//淡入显示元素
$("#showBtn").click(function (){
$("img").fadeIn(5000)
});
//缓慢的将图片的透明度调整到0.66，大约2/3的可见度
$("#showBtn").click(function (){
$("img").fadeTo("slow", 0.66)
});
//切换淡入淡出
$("#toggleBtn").click(function (){
$("img").fadeToggle(2000);
});
})
</script>
<body>
<button id="hideBtn">hide</button>
<button id="showBtn">show</button>
<button id="toggleBtn">toggle</button>
</body>
9.3 滑动
语法：
//向上滑动
$(selector).slideUp(speed,callback);
//向下滑动
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<style>
div.panel,p.flip {
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel {
height:120px;
display:none;
}
</style>
<script>
$(function() {
$(".flip").click(function(){
//向下滑动
$(".panel").slideDown("slow");
//向上滑动
$(".panel").slideUp("slow");
});
})
</script>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
9.4 动画
$(selector).animate({params},speed,callback)
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<style>
.block {
position: absolute;
left: 500px;
width: 100px;
height: 30px;
background-color: aqua;
}
</style>
<script>
$(function() {
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
})
</script>
<body>
<button id="left">«</button>
<button id="right">»</button>
<span class="block">block</span>
</body>
10 工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
//字符串转json
var o = $.parseJSON("{\"username\": \"abc\"}");
alert(o.username); //abc
//执行脚本表达式，字符串转json
var o = eval("({\"username\": \"abc\"})");
alert(o.username); //abc
alert("1 + 1"); //1 + 1
alert(eval("1 + 1"));//2
//序列化为字符串
var params = { width:1680, height:1050 };
var str = jQuery.param(params);
alert(str); //width=1680&height=1050
// 序列化为字符串
alert($("#form").serialize());//username=kong&password=123456&age=16
})
</script>
<form id="form">
<input type="text" name="username" value="kong">
<input type="text" name="password" value="123456">
<input type="text" name="age" value="16">
</form>
</body>
</html>
11 jQuery案例
11.1 表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script src="/js/jquery-1.12.4.js"></script>
<script>
function validateName(){
var name=$("#userName").val();
var msg=$("#nameMsg");
if(name==null || name ==""){
msg.html("用户名不能为空！");
msg.css("color","red");
return false;
} else if(name.length<6){
msg.html("用户名长度必须为大于6的！");
msg.css("color","red");
return false;
}
msg.html("用户名可用");
msg.css("color","green");
return true;
}
function validatePwd(){
var password1=$("#password1").val();
var msg=$("#pwdMsg1");
if(password1==null || password1 ==""){
msg.html("密码不能为空！");
msg.css("color","red");
return false;
} else if(password1.length<8){
msg.html("密码的长度必须为大于8的！");
msg.css("color","red");
return false;
}
msg.html("密码合法");
msg.css("color","green");
return true;
}
function confirmPwd(){
var pwd1=$("#password1").val();
var pwd2=$("#password2").val();
var msg=$("#pwdMsg2");
if(pwd1!=pwd2){
msg.html("两次输入的密码不一致！");
msg.css("color","red");
return false;
}
msg.html("两次输入的密码一致");
msg.css("color","green");
return true;
}
function validateGender(){
var gender=$("#gender").val();
if(gender==-1){
alert("性别为必选项！");
return false;
}
return true;
}
function register(){
return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
}
</script>
</head>
<body>
<h1>英雄会注册</h1>
<form action="commit.html" method="get" onsubmit="return register()">
*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
<span id="nameMsg">用户名长度至少6位</span><br />
*密码：<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()"/>
<span id="pwdMsg1">密码长度至少8位</span><br />
*确认密码：<input type="password" id="password2" placeholder="请确认密码" onblur="confirmPwd()" />
<span id="pwdMsg2">确认密码与密码一致</span><br />
*性别：<select id="gender" onblur="validateGender()">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br /><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
效果图：
11.2 隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function () {
//偶行灰色（0开始）
$("tr:even").css("backgroundColor", "#f5f5f5");
//奇行白色
$("tr:odd").css("backgroundColor", "#ffffff");
});
</script>
</head>
<body >
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
效果图：
11.3 全选与全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("#check1").change(function () {
$(":checkbox[name='checkone']").prop("checked", $(this).prop("checked"));
});
});
</script>
</head>
<body >
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" id="check1" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>2</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
.prop("checked")：获取了被选中元素（$(this)）的 checked 属性的值。checked 属性是一个布尔属性，表示复选框是否被选中。如果复选框被选中，这个属性的值为 true，否则为 false。
$(this)：一个jQuery对象，代表了触发事件的元素，即id="check1"的复选框。
.prop("checked", ...)：它设置了被选中元素（$(this)）的checked属性的值。
效果图：
11.4 省市级联
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<!--选择省份-->
<select id="province" >
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>
<script>
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
$("#province").change(function () {
//获取当前选择的省份的值
var v = $("#province option:selected").attr("value");
//根据选择的省份值，从provinces中获取对应省份的城市列表
var citys = provinces[v];
//清空城市选择框（ID为"city"）中的选项
$("#city").html("");
//遍历城市列表，将每个城市作为一个选项添加到城市选择框中
for (var i = 0; i < citys.length; i++) {
$("#city").append("<option>" + citys[i] + "</option>")
}
});
</script>
</body>
</html>
效果图：
11.5 商品的左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" >
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" id="a1"> >> </a> <br />
<a href="#" id="a2"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#" id="a3"> << </a> <br />
<a href="#" id="a4"> <<< </a>
</div>
<script>
$(function () {
//向右添加已选择的商品
$("#a1").click(function () {
$("#leftSelect option:selected").appendTo($("#rightSelect"));
});
//向右添加全部
$("#a2").click(function () {
$("#leftSelect option").appendTo($("#rightSelect"));
});
//向左添加已选择的商品
$("#a3").click(function () {
$("#rightSelect option:selected").appendTo($("#leftSelect"));
});
//向左添加全部
$("#a4").click(function () {
$("#rightSelect option").appendTo($("#leftSelect"));
});
});
</script>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
效果图：
选择左边的三个：
添加到右边：
2519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
