<!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. 伪元素::before和::after

    有时候我们的页面里面有不少其他网站的名字,而且还要求网站名后面还要有网站的链接,类似这样:百度(http://www.baidu.com).这个时候如果网站多的话写起来就很麻烦了 <a href ...

  2. jquery中this与$this的区别

    来源:http://www.jb51.net/article/19738.htm jQuery中this与$(this)的区别 $("#textbox").hover( funct ...

  3. js库开发

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  4. android第三方分享之友盟社会化组件

    前言 现在几乎所有的app都带有分享功能,第一为了更好地推广自己的产品,第二作为使用者也能及时的把自己觉得好的文章,话题,app分享到社交平台供大家一起学习和使用.开发中虽然android系统自带分享 ...

  5. SQL创建/修改数据库、表

    --创建表 create table 表(a1 varchar(10),a2 char(2)) --为表添加描述信息 EXECUTE sp_addextendedproperty N'MS_Descr ...

  6. js自定义事件、DOM/伪DOM自定义事件

    一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

  7. 测试工具：insure++

    CSDN资源:http://www.csdn.net/tag/insure%252B%252B 安装. 1,简介:http://baike.baidu.com/link?url=bCcoWd3xi07 ...

  8. JS 中刷新页面的方法

    整理了就是这几种,,有些在IE下面是不支持的,慎用... 1,history.go(0) 2,location.reload() 3,location=location 4,location.assi ...

  9. Wordpress主题中常用代码总结

    1. 在 Wordpress主题中显示最热文章的 PHP代码 <?php $result = $wpdb->get_results("SELECT comment_count,I ...

  10. Linux下源码编译安装rpy2

    R(又称R语言)是一款开源的跨平台的数值统计和数值图形化展现工具.rpy2是Python直接调用R的第三方库,它可以实现使用python读取R的对象.调用R的方法以及Python与R数据结构转换等.这 ...