1 <!--
  2 表单选择器 
  3 
  4 $(":input") 选择所有input,textarea,select,button元素
  5 $(":text") 选择所有单行文本框
  6 $(":password") 获取所有密码框
  7 
  8 同理还有radio,checkbox等
  9 
 10 
 11 Dom操作
 12 
 13 attr 方法读取或设置元素的属性
 14 
 15 设置：$("Object").attr("name","value");
 16 读取：$("Object").attr("name");
 17 
 18 removeAttr 删除指定元素的属性 *删除属性不等于设置该属性为空
 19 
 20 动态创建Dom节点
 21 
 22 $("html字符串") 返回一个JQuery对象、然后调用append等方法将对象添加进document
 23 eg:
 24 $("<a href='#'>link</a>") 返回一个超链接的JQuery对象
 25 
 26 append 追加到指定元素的最后
 27 
 28 prepend 追加到元素最开始
 29 
 30 after 添加元素到指定元素的之前的兄弟元素
 31 
 32 before 添加元素到指定元素的之后的兄弟元素
 33 
 34 remove 删除选择的节点、并返回被删除的节点对象 
 35 -->
 36 
 37 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 38 <html xmlns="http://www.w3.org/1999/xhtml">
 39 <head>
 40     <title>DOM操作</title>
 41     <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 42     <script type="text/javascript">
 43         $(function () {
 44             //创建对象
 45             var span = $("<span style='color:red;'>动态创建的对象</span>");
 46             //添加到指定元素
 47             $("#create").append(span);
 48             //设置他的属性
 49             span.attr("class", "testcss");
 50             //删除字体红色的CSS属性
 51             span.removeAttr("style");
 52         });
 53 
 54         $(function () {
 55             $("#addPart").click(function () {
 56                 $("#delete ul:first").append($("<li class='added'>添加的部门</li>"));
 57             });
 58 
 59             $("#delPart").click(function () {
 60                 $("#delete ul:first > li:last").remove();
 61             });
 62         });
 63     </script>
 64 
 65     <style type="text/css">
 66         .testcss
 67         {
 68             background-color:Blue;
 69         }
 70     </style>
 71 </head>
 72 <body>
 73     <!---动态创建对象-->
 74     <div id="create">
 75     </div>
 76 
 77     <hr />
 78 
 79     <!--删除清空节点-->
 80     <div id="delete">
 81         <ul>
 82             <li>财务部</li>
 83             <li>人事部</li>
 84             <li>后勤部</li>
 85             <li>
 86                 管理部
 87                 <ul>
 88                     <li>小张</li>
 89                     <li>小李</li>
 90                     <li>小王</li>
 91                 </ul>
 92             </li>
 93         </ul>
 94 
 95         <input id="addPart" type="button" value="添加部门" /><br />
 96         <input id="delPart" type="button" value="删除部门" /><br />
 97 
 98     </div>
 99 </body>
100 </html>