<!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. SQL*Plus break与compute的简单用法

    SQL*Plus break与compute的简单用法在SQL*Plus提示符下输出求和报表,我们可以借助break与compute两个命令来实现.这个两个命令简单易用,可满足日常需求,其实质也相当于 ...

  2. python 笔记4-- 函数式编程

    高阶函数 把函数作为参数传入,这样的函数称为高阶函数,函数式编程就是指这种高度抽象的编程范式. 在python中 函数也是一种变量 def add(x, y, f): return f(x) + f( ...

  3. [转]C# 中的.pdb/ .vshost.exe/ .vshost.exe.manifest文件讨论

    原文出处:http://blog.163.com/chwei_sunshine/blog/static/19412628320125893656652/ pdb文件: 英文全称:Program Dat ...

  4. C#常用的内置委托

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  5. Crystal Report分組中的序號重新遞增

    客戶要批次列印發票,也就是報表需要按照發票號碼(INV_NO)進行分組,每個發票里還有明細的item,之前因為直接抓RecordNumber,所以該欄位只能從1開始計數,遇到新的發票發號不會重新從1開 ...

  6. @init 自定义

    相当于构造方法,有的时候初始化的时候有一些默认值,还有就是页面加载数据的时机问题,防止加载了页面再填数据 声明: -(instancetype)initWithName:(NSString *)aNa ...

  7. 防止输入时键盘覆盖掉textfiled

    添加监听者 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardwasChange:) ...

  8. sql 事务和回滚

    (1) set ANSI_NULLS ON --见图1 set QUOTED_IDENTIFIER ON go ALTER proc [dbo].[procname] as begin begin t ...

  9. oracle数据块的大小

    标准数据块用于临时表空间和系统表空间,同时也是一个表空间数据块的默认值.标准数据块的大小是在创建数据库时由参数DB_BLOCK_SIZE确定的.若要改变这一设置必须重建数据库. DB_CACHE_SI ...

  10. AngularJS：何时应该使用Directive、Controller、Service？【新手必看】

    (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...