首先,是关于jQuery中的DOM操作的《思维导图》,请点击这里：jQuery中的DOM操作

列表框的左右选项移动

<html>

<head>

<title></title>

<script type="text/javascript" src="jquery-1.4.1-vsdoc.js"></script>

<script type="text/javascript" >

$(function(){

//添加到右边

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

var $de=$("#multiple option:selected").remove();

$de.appendTo(multiple1);

});

//全部添加到右边

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

var $add=$("#multiple option");

var $as=$("#multiple1")

$($add).appendTo($as);

});

//添加到左边

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

$("#multiple1 option:selected").appendTo(multiple);

});

//全部添加到左边

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

var $add=$("#multiple");

var $as=$("#multiple1 option")

$($as).appendTo($add);

});

})

</script> </head>

<body> <div>

<select id="multiple" multiple="multiple" style="height: 150px;width: 100px">

<option>第一项</option>

<option>第二项</option>

<option>第三项</option>

<option>第四项</option>

<option>第五项</option>

<option>第六项</option>

<option>第七项</option>

<option>第八项</option>

</select>

<select id="multiple1" multiple="multiple" style="height: 150px;width: 100px">

</select> <br>

<input id="add" type="button" value="选中添加到右边>>>">

<input id="left" type="button" value="选中添加到左边>>>"><br>

<input id="all" type="button" value="全部添加到右边>>>">

<input id="leftAll" type="button" value="全部添加到左边>>>"><br> </div> </body> </html>

显示结果;

总结:本章主要介绍了什么是DOM,介绍了DOM操作等等.

CSS DOM操作:

　　1.css()方法,最常用的,

　　2.opacity属性,对透明度的设置

　　3.height()方法,获取元素高度

　　4.width()方法,获取元素宽度

　　5.offset()方法,获取元素在当前视窗的相对偏移

　　等.

jQuery中的DOM操作《思维导图》的更多相关文章

  1. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  2. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  3. jQuery中的Ajax应用<思维导图>

    传统的WEB应用程序模型是这样工作的:当用户的界面操作触发HTTP请求,服务器在接到请求后进行一些业务逻辑处理,如保存数据等,然后向客户端返回一个html页面.但这种方式并没有给予用户很好的应用体验, ...

  4. 如何合理利用iMindMap中的模板创建思维导图

    思维导图的制作并不是一项简单的工作,尤其是对许多工作或学习有特殊要求的朋友而言,当我们需要应对不同场景制作不同的思维导图时,总不能都靠自己从头制作,这样难度比较大也比较耗时.而iMindMap(win ...

  5. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  6. Jquery：jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  7. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  8. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

  9. 锋利的jQuery ——jQuery中的DOM操作（三）

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

随机推荐

  1. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)-实现用户异步登录和T4模板

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)-实现用户异步登录和T4模板 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建  ...

  2. Microsoft Build 2015

    Microsoft Build 2015 汇总   简要概括(GitHub 完成约 45%): Visual Studio Code Preview Visual Studio 2015 RC Vis ...

  3. ArcGIS API for Silverlight 使用GP服务实现要素裁剪功能

    原文:ArcGIS API for Silverlight 使用GP服务实现要素裁剪功能 昨天一QQ好友问了一个关于裁剪的问题,感觉自己也没有帮上什么忙,之后自己做了一个裁剪的例子,不过在做这个例子的 ...

  4. 关于微软公有云Azure会计标准

    前几年.中国的云计算项目往往搞成了房地产项目.大搞形"象project",没有实质性的内容.云计算老总成了房地产大老板,国内业界是在胡闹! 现今,世纪互联与微软(中国)联手搞公有云 ...

  5. 【百度地图API】北京周边7日游——图标按路线轨迹行动

    原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...

  6. Web API 2 对 CORS 的支持

    Web API 2 对 CORS 的支持 CORS概念 跨域资源共享 (CORS) 是一种万维网联合会 (W3C) 规范(通常被认为是 HTML5 的一部分),它可让 JavaScript 克服由浏览 ...

  7. 【POJ3037】Skiing 最短路

    题意: 有个n*m的滑雪场,bessie要从(1,1)滑到(n,m),问最小时间. 起始有一个速度v,然后每从一个点A到一个点B(仅仅能上下左右走,每次一格),速度就会乘上2^(权值A-权值B). 然 ...

  8. Linux忘记rootpassword

    我们常常会碰到忘记rootpassword的情况,以下是解决之道,  此方法使用绝大多数的Linux发行版:  1. 首先进入grub  2. 在须要编辑的入口处,按下e,在quite后增加     ...

  9. 快速构建Windows 8风格应用17-布局控件

    原文:快速构建Windows 8风格应用17-布局控件 本篇博文主要介绍三种常用的布局控件:Canvas.Grid.StackPanel. Panel类是开发Windows 8 Store应用中一个重 ...

  10. 基于jQuery的上下无缝滚动应用(单行或多行)

    工作中遇到的一个js代码,现在对.trigger('mouseleave'),仍一知半解... <script>$(function(){//单行应用var _wrap=$('ul.lin ...