可以在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去解析

jQuery学习（3）的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  6. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  7. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  8. jquery学习以及下载链接

    jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...

  9. 转载最佳JQuery学习网站

    转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript    ...

  10. JQuery学习笔记--01

    JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...

随机推荐

  1. Iwfu-GitHubclient使用

    Git/GitHub介绍 GitHub是著名的项目托管平台,有关Git和GitHub的介绍參考以下链接: Git介绍 url=OlagjwbaAdSJ2pjckgJCLBYd-LFFTDBriRnLt ...

  2. 【cogs182】【USACO Jan07】均衡队形【st表】

    题目描写叙述 农夫约翰的 N (1 ≤ N ≤ 50,000) 头奶牛,每天挤奶时总会按相同的顺序站好. 一日.农夫约翰决定为奶牛们举行一个"终极飞盘"比赛.为简化问题.他将从奶牛 ...

  3. 【JMeter4.0学习（一）】之FTP性能测试脚本开发，并实现上传下载功能

    参考:<Jmeter常用脚本开发之FTP请求>感谢作者:rosa2015 一.首先,搭建FTP服务器,参考地址:<[FTP]之windows8.1上搭建FTP服务器方法> 二. ...

  4. cocos2d-x 2.x 支持多个方向屏幕翻转

    主要改动 RootViewController.mm 的 supportedInterfaceOrientations 方法 1.四个方向 UIInterfaceOrientationMaskAll ...

  5. JAVA中sleep() 和 wait() 有什么差别?

    (网上的答案:sleep是线程类(Thread)的方法,导致此线程暂停运行指定时间,将运行机会给其它线程.可是监控状态依旧保持,到时后会自己主动恢复.调用sleep不会释放对象锁. wait是Obje ...

  6. centos7.0 安转apache2.4

    安装apache2.4的需要安转apr和apr-util 包 APR和APR-util的下载地址 http://apache.fayea.com//apr/apr-1.6.2.tar.gzhttp:/ ...

  7. springMVC的注释集合

    SpringMVC的工作原理 主要核心实现是DispatcherServlet. 一般来讲客户端对服务器发送请求,是由DispatcherServlet控制的,DispatcherServlet接受到 ...

  8. 【BZOJ3333】排队计划 树状数组+线段树

    [BZOJ3333]排队计划 Description Input Output Sample Input 6 2 160 163 164 161 167 160 2 3 Sample Output 6 ...

  9. Count(二维树状数组)

    [bzoj1452][JSOI2009]Count Description Input Output Sample Input Sample Output 12   HINT 题解:对于每一个颜色建一 ...

  10. Wooden Sticks(hdu1051)

    Wooden Sticks Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submi ...