首先,是关于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. ABP入门教程

    ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...

  2. HDOJ 5017 Ellipsoid

    第一次尝试模拟退火..... Ellipsoid Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java ...

  3. cocos2d-x-3.1 经常使用宏 (coco2d-x 学习笔记五)

    在代码中使用这些宏,能够降低敲键盘的次数,从而提高编写效率. 与节点属性(property)相关的 CC_PROPERTY_READONLY CC_PROPERTY_READONLY_PASS_BY_ ...

  4. hdoj 1226 超级password 【隐图BFS】

    称号:hdoj 1226 超级password 分析:这题属于隐式图搜索,状态不是非常明显,须要自己建立. 事实上搜索说白了就是暴力. 这个题目就是,首先对给出的能够组成的全部的数依次枚举.长度从小到 ...

  5. oracle_解锁表_解锁用户

    1.解锁用户 以dba身份登录   sqlplus / as sysdba alter user scott account unlock; 2.解锁表 alter   system   kill   ...

  6. 基于 自己定义注解 和 aop 实现使用memcache 对数据库的缓存 演示样例

    好久没更新blog了,在新公司打拼了两个月,每天都从早忙到晚,学到了非常多东西,可是没有时间来更新blog了.... 以下開始解说这次的主题 公司老大让我研究 ocs 就是阿里云的 开放缓存服务 点击 ...

  7. Hack 语言学习/参考---1.1 What is Hack?

    What is Hack?¶ Hack is a language for HHVM that interopates seamlessly with PHP. The barrier to entr ...

  8. SVN:One or more files are in a conflicted state

    解决代码冲突 如果commit时出现"You have to update your work copy first."红色警告,说明版本库中的此文件已经被其他人修改了. 请先点& ...

  9. jQuery多文件

    jQuery多文件下载 文件下载是一个Web中非常常用的功能,不过你是做内部管理系统还是做面向公众的互联网公司都会遇到这个问题,对于下载一般有点实际开发经验的都会自己解决,上周弄了一下多文件下载,业务 ...

  10. C语言连接Oracle

    原文:C语言连接Oracle 最近在搞C语言连接Oracle.DB2数据库,现把C连接Oracle的文章总结下: 用C语言连接ORACLE数据库.有两个思路和目的 思路一)本地环境:UBUNTU 7. ...