1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script src="../jquery-1.11.2.min.js"></script>
7 <style type="text/css">
8 #one
9 {
10 color:#00C;
11 font-size:14px;
12 background-color:#F00;
13
14 }
15
16 </style>
17
18 </head>
19 <div id="one">one</div>
20 <div class="test" bs="aa">two</div>
21 <div class="test">there</div>
22 <div class="test">four</div>
23 <input type="text" bs="aa" name="uid" id="uid" />
24 <body>
25 </body>
26 <script type="text/javascript">
27 $(document).ready(function(e) {
28
29 //JS方式
30 //1.根据ID取元素,DOM对象
31 //var div = document.getElementById("one");
32 //2.根据class取元素
33 //var div = document.getElementsByClassName("test");
34 //3.根据name取
35 //var bd = document.getElementsByName("uid");
36 //4.根据标签名取
37 //var div = document.getElementsByTagName("div");
38 //操作内容
39 //1.非表单元素
40 //alert(div.innerText);
41 //div.innerText = "aaa";
42 //div.innerHTML;
43 //2.表单元素
44 //div.value
45 //操作属性
46 //div.setAttribute("","");//设置属性
47 //div.removeAttribute("");//移除属性
48 //div.getAttribute("");//获取属性
49 //操作样式
50 //div.style.backgroundColor = "red";
51 //获取样式
52 //alert(div.style.color);只能获取内联样式
53 //在数组里面如果要取DOM对象使用索引的方式,如果要取Jquery对象使用eq()
54 //JQUERY方式
55 //1.根据ID取元素,Jquery对象
56 //var div = $("#one");
57 //2.根据class取元素
58 //var div = $(".test");
59 //3.根据属性取
60 //var db = $("[name='uid']");
61 //4.根据标签名取
62 //var div = $("div");
63 //5.组合选取
64 //var div = $("div.test");
65
66
67 //操作内容
68 //1.非表单元素
69 //alert(div.text());//取值
70 //div.text("aaaa");//赋值
71 //div.html();
72 //2.
73 //div.val();//取值赋值都用这一种
74
75
76 //操作属性
77 //div.attr("text","aa");//设置属性
78 //div.removeAttr("");//移除属性
79 //div.attr();//获取属性
80
81
82 //操作样式
83 //div.css("background-color","#009");
84 //获取样式
85 //alert(div.css("color"));
86
87
88 //操作元素
89 //var str = "<div id='a' style='width:100px; height:100px; background-color:red'></div>";
90
91 //div.append(str); //追加元素
92 //$("#a").remove(); //移除某个元素
93
94
95
96 });
97
98
99
100 </script>
101 </html>
