* jQuery中DOM常用方法或属性
1)val():取得标签中value属性的值2)html():取得标签内的内容
3)size()或length:取得数组的长度
4)each():该方法必须由jQuery对象调用(即数组对象),each(function)方法,会自动将数组中的每个元素自动调用
function函数
5)click(function)
6)dblclick(function)
... ...
7)父.append(子),子元素位于父元素之后,但依然是父子关系
8)父.prepend(子),子元素位于父元素之前,但依然是父子关系
9)text():取得标签的内容,优先考虑html()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
<hr />
<div align="center">
<input type="checkbox" value="篮球" />篮球<br />
<hr />
<input type="checkbox" value="排球" />排球<br />
<hr />
<input type="checkbox" value="羽毛球" />羽毛球<br />
<hr />
<input type="checkbox" value="乒乓球" />乒乓球<br />
<hr />
<input type="button" value="选中的个数"><br />
<hr />
<input type="button" value="依次选中的value" /><br />
<hr />
<ul>
<li>no.1</li>
<li>no.2</li>
<li>no.3</li>
</ul>
<hr />
<div>
这是子元素,要插到父元素中
</div>
<hr />
<div align="center">
<select style="width: 60px" multiple size="10" id="leftID">
<option>item 1</option>
<option>item 1</option>
<option>item 1</option>
<option>item 1</option>
<option>item 1</option>
<option>item 1</option>
<option>item 1</option>
<option>item 1</option>
<option>item 1</option>
<option>item 1</option>
</select>
<div style="position:absolute;left: 100px;top: 60px">
<input type="button" value="批量右移" id="rightMoveID" />
</div>
<div style="position:absolute;left: 100px;top: 90px">
<input type="button" value="全部右移" id="rightMoveAllID" />
</div>
<div style="position:absolute;left: 220px;top: 20px">
<select multiple size="10" style="width: 60px;" id="rightID">
</select>
</div>
</div>
<script type="text/javascript">
//定位"选中的个数"按钮,同时添加单击事件
$("input[value='选中的个数']").click(function() {
alert($(":checkbox:checked").size());
});
//定位"依次选中的value"按钮,同时添加单击事件
$("input[value='依次选中的value']").dblclick(function() {
$(":checkbox:checked").each(function() {
alert($(this).val());
})
});
//
//定位ul父元素
var $ul = $("ul");
//定位div子元素
//var $div = $("div");
//子元素添加到父元素中,形成父子关系、
$ul.append( & div);
//双击左移
$("#leftID").dblclick(function()
{
var $option=$("select option:selected");
$("#rightID").append($option);
});
//批量右移
$("#rightMoveID").click(function()
{
var $option=$("select option:selected");
$("#rightID").append($option);
});
//全部右移
$("#rightMoveAllID").click(function()
{
$("#rightID").append($("select option"));
});
</script>
</body>
</html>