jQuery中的DOM操作《思维导图》
首先,是关于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操作《思维导图》的更多相关文章
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
- jQuery中的Ajax应用<思维导图>
传统的WEB应用程序模型是这样工作的:当用户的界面操作触发HTTP请求,服务器在接到请求后进行一些业务逻辑处理,如保存数据等,然后向客户端返回一个html页面.但这种方式并没有给予用户很好的应用体验, ...
- 如何合理利用iMindMap中的模板创建思维导图
思维导图的制作并不是一项简单的工作,尤其是对许多工作或学习有特殊要求的朋友而言,当我们需要应对不同场景制作不同的思维导图时,总不能都靠自己从头制作,这样难度比较大也比较耗时.而iMindMap(win ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- Jquery：jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- 锋利的jQuery ——jQuery中的DOM操作（三）
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
随机推荐
- C#工具类（包含获取枚举描述方法）
//把一个对象转换成功键值对字典格式 var obj = new { CustomerId = customerId }; var dic = obj.ToDictionray(); public s ...
- Ubuntu通过使用PyCharm 进行调试 Odoo 8.0 可能出现的问题
实现步骤,请移步http://shine-it.net/index.php?topic=16603.0 要么 http://www.mindissoftware.com/2014/09/11/Run- ...
- C#操作Xml：通过XmlDocument读写Xml文档
什么是Xml? Xml是扩展标记语言的简写,是一种开发的文本格式.关于它的更多情况可以通过w3组织了解http://www.w3.org/TR/1998/REC-xml-19980210.如果你不知道 ...
- MVC中，视图的Layout使用
本文目标 1.能够重用Razor模板进行页面的组件化搭建 本文目录 1.母板页_Layout.cshtml 2.用户自定义控件 3.默认Layout引用的使用(_ViewStart.cshtml) 1 ...
- 胖client和瘦client
胖和瘦?纠结了妙龄少女,更郁闷了无数男女老少.每天充斥在宿舍的一句话就是:从明天開始我要减肥!!结果,可想而知,真的永远是明天而已.就这样,胖和瘦在我们人类之间无缝不在的存在着.但是client怎么就 ...
- android网络操作使用汇总（http）
Android是作为智能手机的操作系统,我们开发的应用,大多数也都须要连接网络,通过网络发送数据.获取数据,因此作为一个应用开发人员必须熟悉怎么进行网络訪问与连接. 通常android中进行网络连接通 ...
- Critical thinking and Thoughtful writing
Critical thinkers are able to : Articulate their ideas clearly and persuasively in writing Understan ...
- Linux的错误码
在使用时需要包含头文件 #include <errno.h> merlin@tfAnalysis:~/projects/tfradius$ cat /usr/include/asm-gen ...
- 织梦不仅是链接到其他调用next
//打开系统文件织梦 /include/arc.archives.class.php 找到GetPreNext函数 function GetPreNext($gtype='') { $rs = ''; ...
- win7 64位的apache2.4.9+php5.5+mysql5.6的安装
Win7 下64位的apache2.4.9+php5.5+mysql5.6.19的安装 1.首先下载文件 httpd-2.4.9-win64-VC11.zip(http://www.apachelou ...