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>