jQuery 案例（下拉选择框右移）

来源：互联网发布：乐视刷windows 编辑：程序博客网时间：2024/05/13 20:32

* 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>

阅读全文

0 0