可以在select中设置size属性的属性值，从而让下拉列表中的选项都显示出来。
<!DOCTYPE html> <html> <head> <title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> <style> .se{ margin:80px; width:80px; height:20px; } #first,#second{ width:80px; height:200px; } </style> </head> <body> <select id="first" size=10> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> <option>选项7</option> <option>选项8</option> <option>选项9</option> </select> <select id="second" class="se" size=10> </select> <div class="bu"> <input type="button" value="右移" id="r"/> <input type="button" value="全部右移" id="ar"/> <input type="button" value="左移" id="l"/> <input type="button" value="全部左移" id="al"/> </div> </body> <script type="text/javascript"> //全部右移 $("#ar").click(function(){ $("#first option").appendTo($("#second")); }); //全部左移 $("#al").click(function(){ $("#second option").appendTo($("#first")); }); //双击的移到右边 $("#first").dblclick(function(){ $("#first option:selected").appendTo("#second"); }); //双击的移到左边 $("#second").dblclick(function(){ $("#second option:selected").appendTo("#first"); }); //选中的移动到右边 $("#r").click(function(){ $("#first option:selected").appendTo("#second"); }); //选中的移动到左边 $("#l").click(function(){ $("#second option:selected").appendTo("#first"); }); </script> </html>
jQuery有9种属性
1、内容选择器
2、可见性选择器
3、基本选择器
4、层级选择器
5、属性选择器
6、简单选择器
7、表单选择器
8、表单对象属性
9、子元素选择器
replaceWith()和replaceAll()方法
$("p").replaceWith("<p>pppp</p>");
<!DOCTYPE html> <html> <head> <title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> </head> <body> 用户名：<input type="text" name="username" id="name"/><br/> 电子邮箱：<input type="text" name="email" id="email"/><br/> 电话：<input type="text" name="phone" id="phone"/><br/> <input type="button" value="提交" id="sub"/> <table id="usertable" border="1px"> <tbody> <tr> <td>Tom</td><td>t@sohu.com</td><td>110</td> <td><a href="welcome.html?id=Tom">delete</a></td> <td><a href="welcome.html?id=Jerry">update</a></td> </tr> <tr> <td>Jerry</td><td>j@sohu.com</td><td>120</td> <td><a href="welcome.html?id=Jerry">delete</a></td> <td><a href="welcome.html?id=Jerry">update</a></td> </tr> </tbody> </table> </body> <script type="text/javascript"> $("#sub").click(function(){ $nameTd=$("<td/>").text($("#name").val()); $emailTd=$("<td/>").text($("#email").val()); $phoneTd=$("<td/>").text($("#phone").val()); $deleteTd=$("<td/>"); $updateTd=$("<td></td>"); $updatehref=$("<a/>"); $updatehref.attr("href","welcome.html"); $updatehref.text("update"); $updateTd.append($updatehref); $a=$("<a/>"); $a.attr("href","welcome.html"); $a.text("delete"); $deleteTd.append($a); $newTr=$("<tr/>"); $newTr.append($nameTd); $newTr.append($emailTd); $newTr.append($phoneTd); $newTr.append($deleteTd); $newTr.append($updateTd); //$("#usertable").append($newTr);//这是在没有tbody的情况下使用的 $("#usertable tbody:first-child").append($newTr); $a.click(function(){ return deleteTR($a); }); $updatehref.click(function(){ return updateTR($updatehref); }); }); function deleteTR($a){ var name=$a.parent().parent().children().eq(0).text(); var fag=window.confirm("您确定要删除"+name+"这个用户名吗？"); if(!fag){ return false; } $a.parent().parent().remove(); return false; } function updateTR($updatehref){ } </script> </html>
JQuery加载并解析XML
jQuery去解析