<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script type ="text/javascript">

        $(function () {

            $("#btnToLeft").click(function () {

                $("#sell option:selected").appendTo("#selr"); //如果添加的节点在dom树那么则直接会移动过去

                //右侧排序 按照value的值进行排序

                $("#selr option").sort(function (x, y) {

                    return parseInt(x.value) - parseInt(y.value);

                    //倒序 return parseInt(y.value) - parseInt(x.value);

                }).appendTo("#selr");

            });

        });

    </script>

</head>

<body>

    <select id="sell" multiple ="multiple">

        <option value ="1">中国</option>

         <option value ="2">德国</option>

         <option value ="3">美国</option>

         <option value ="4">意大利</option>

         <option value ="5">英国</option>

    </select>

    <div >

        <input type ="button" id ="btnToLeft" value ="-->" />

    </div>

    <select id="selr" multiple ="multiple">

    </select>

</body>

</html>

　　

dom操作例子的更多相关文章

  1. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  2. webform（九）——JQuery基础（选择器、事件、DOM操作）

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  3. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  4. php中通过DOM操作XML

    DOM文档在js里早就接触过,知道DOM不但可以操作html文档,还可以操作XHTML,XML等文档,有着极强的通用性,下面我们通过两个小例子,看看在PHP中是如何用DOM操作XML文档的,和js中差 ...

  5. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  6. 为什么DOM操作很慢

    转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...

  7. jQuery-1.9.1源码分析系列（十一） DOM操作

    DOM操作包括append.prepend.before.after.replaceWith.appendTo.prependTo.insertBefore.insertAfter.replaceAl ...

  8. jquer 事件，选择器，dom操作

    一.jQuery简介 jQuery 是一个 JavaScript 库.(其实就是js,就是封装了,语法上有些不一样) jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 ...

  9. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

随机推荐

  1. Oracle SQL函数之字符串函数

    1.SQL> ) from dual; --ASCLL(x)返回x的ASCLL码,CHR(x)返回ASCLL码为x的字符 ASCII() ---------- ---------- ------ ...

  2. c#中的数据类型简介（委托）

    c#中的数据类型简介(委托) 什么是委托? 委托是一种类型,它封装了一类方法,这些方法具有相同的方法签名(signature).定义听起来有点拗口,首先可以确定委托是一种数据类型,那么什么是方法签名, ...

  3. Python中安装numpy,scipy,matplotlib安装方法

    这个吧,说简单也简单,说难吧我捣鼓了两天才弄出来,真是头发都急白了.其实只要一个网址就搞定了,嘿嘿 http://www.lfd.uci.edu 这里面有你需要的任何东西,当你运行python imp ...

  4. Ubuntu第一次使用调教教程

    Ubuntu第一次使用调教教程 Ubuntu不允许root用户登录,这让人很蛋疼.下面的方法就是让Ubuntu接受以root身份登录.此外,ubuntu默认没有安装ssh的,所以不能进行ssh远程登录 ...

  5. gcc常用命令集

    引用:http://developer.51cto.com/art/200609/32317_1.htm 对于GUN编译器来说,程序的编译要经历预处理.编译.汇编.连接四个阶段 假设源程序文件名为te ...

  6. SFTP信任公钥配置及JSCH库

    1.SFTP信用公钥配置 1.1 客户端生成密钥对 以DSA举例: ssh-keygen –t dsa 执行该命令后,在home/用户名/.ssh目录下,会生成id_dsa和id_dsa.pub两个文 ...

  7. PHP环境出现时区问题

    如下图所示,php执行的时候出现如下提示: 解决办法: 重新设置php编译的时区. 具体方法如下: 1. 找到php.ini文件: 2. 修改php.ini文件中的date.timezone的值,将其 ...

  8. win32 清空ListBox所有内容

    Q:clear listbox hi i am working in VC++ 6 using Win32 App. .............tell me how to clear the lis ...

  9. zeromq-python使用

    安装参考saltstack编译安装.note 官方使用文档: http://zguide.zeromq.org/page:all 中文翻译文档: http://iyuan.iteye.com/blog ...

  10. 【转载】来自苹果的编程语言——Swift简介

    本文转自Lucida的博客 (新浪微博.豆瓣)   这篇文章简要介绍了苹果于WWDC 2014发布的编程语言——Swift.   前言   在这里我认为有必要提一下Brec Victor的Invent ...