jquery学习系列12(Dom操作)-优快云博客

本文通过实例展示了如何使用jQuery进行动态DOM操作，包括创建、加载和移动网站列表等。此外，还介绍了如何读取和设置元素的内容及属性，提供了一个完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 .t
6 {
7 background-color: Yellow;
8 }
9 </style>
10
11 <script language="javascript" src="js/jquery-1.5.js">
12 </script>
13
14 <script language="javascript">
15 //动态创建节点
16 // $(function() {
17 // var link = $("<a href='http://www.baidu.com'>百度</a>");
18 // $("div:first").append(link);
19 // })
20
21 //动态加载网站列表
22 $(function() {
23 var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "搜狐": "http://www.souhu.com" };
24 $.each(data, function(key, value) {
25 var tr = $("<tr><td></td><td><li><a href=" + value + ">" + key + "</a></li></td></tr>");
26 $("#tb").append(tr);
27 })
28 })
29 //移除背景色为黄色的那两行
30 $(function() {
31 $("#removeUL").click(function() {
32 $("ul li.t").remove();
33 });
34 })
35 //将左边移除的添加到右边
36 $(function() {
37 $("#btnRemove").click(function() {
38 var s = $("#s1 option:selected").remove();
39 $("#s2").append(s);
40 });
41 });
42 </script>
43
44 </head>
45 <body>
46 
50 <div>
51 </div>
52 <table id="tb">
53 </table>
54 <ul>
55 <li>abc</li>
56 <li class="t">abbc</li>
57 <li>abcc</li>
58 <li class="t">aabc</li>
59 </ul>
60 <input type="button" id="removeUL" value="删除UL一部分" /><br />
61
62 <select id="s1" multiple="multiple">
63 <option>aa</option>
64 <option>bb</option>
65 <option>cc</option>
66 <option>dd</option>
67 </select>
68 <input type="button" id="btnRemove" value="从左边移到右边" />
69 <select id="s2" multiple="multiple"></select>
70
71 </body>
72 </html>

转载于:https://www.cnblogs.com/aspneteye/articles/2040896.html