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>

显示结果;

jQuery中的DOM操作《思维导图》

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

CSS DOM操作:

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

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

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

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

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

  等.

上一篇:margin-塌陷问题


下一篇:django 时区设置 redis token缓存策略