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 #d1
9 {
10 font-size:24px;
11 }
12 .list
13 {
14 width:200px;
15 height:30px;
16 text-align:center;
17 line-height:30px;
18 vertical-align:middle;
19 background-color:#999;
20 color:#F00;
21 }
22 </style>
23 </head>
24
25 <body>
26
27 <div id="d1" name="div" ><b>第一个DIV</b></div>
28
29 <div class="d">22222</div>
30 <div class="d">333333</div>
31 <div class="d">444444</div>
32
33
34 <div class="list">hello</div>
35 <div class="list">world</div>
36 <div class="list">hai</div>
37 <div class="list">aaaa</div>
38
39
40 <input type="text" bs="uid" />
41
42
43 <input type="checkbox" id="aa" value="hello" />
44
45 <input type="button" id='btn' value="取值"/>
46
47
48 </body>
49 <script type="text/javascript">
50
51 //JS取元素，取出来的是具体的元素对象
52 //var d = document.getElementById("d1");
53 //alert(document.getElementsByClassName("d"));
54 //alert(document.getElementsByTagName("div"));
55 //alert(document.getElementsByName("uid"));
56
57 //操作内容
58 //alert(d.innerText); //获取文本内容
59 //alert(d.innerHTML); //获取HTML代码
60 //d.innerText = "hello"; //给元素赋值（文本）
61 //d.innerHTML = "<span style='color:red'>hello</span>"; //给元素赋值（HTML代码）
62
63 //d.value 获取或者设置表单元素的内容
64
65 //操作属性
66 //alert(d.getAttribute("name")); //获取属性的值
67 //d.setAttribute("bs","001"); //设置属性
68 //d.removeAttribute("name"); //移除属性
69
70
71 //操作样式
72 //alert(d.style.fontSize); //获取样式，必须是写在元素里面的
73 //d.style.fontSize = "36px"; //修改设置样式
74
75
76
77 $(document).ready(function(e) {
78
79 //Jquery取元素，取出来的是jquery对象
80 //var d = $("#d1"); //根据ID找
81 /*var d = $(".d"); //根据CLASS找
82
83 for(var i=0;i<d.length;i++)
84 {
85 alert(d.eq(i));
86 }*/
87
88 //alert($("div")); //根据标签名找
89
90 //alert($("[bs=uid]")); //根据属性找
91
92 //操作内容
93 //alert(d.text()); //获取元素的内容（文本）
94 //alert(d.html()); //获取元素的内容（HTML代码）
95
96 //d.text("hello"); //给元素赋值（文本）
97 //d.html("<span style='color:red'>hello</span>"); //给元素赋值（HTML代码）
98
99 //d.val(); //操作表单的内容，可以取值赋值
100
101
102 //操作属性
103 //alert(d.attr("name")); //获取属性
104 //d.attr("bs","001"); //设置属性
105 //d.removeAttr("bs"); //移除属性
106
107 //操作样式
108 //alert(d.css("font-size")); //取样式
109 //d.css("font-size","36px"); //设置样式
110
111
112 //事件
113 /* $("#d1").click(function (){
114
115 alert("aa");
116
117 })*/
118
119
120 /* $(".d").click(function(){
121
122 //alert($(this).text());
123
124 })*/
125
126 //菜单选中
127 $(".list").click(function(){
128
129 //让所有元素变为非选中状态
130 $(".list").css("background-color","#999").css("color","#F00");
131
132 //让该元素变为选中状态
133 $(this).css("background-color","#60F").css("color","#FFF");
134
135 })
136
137 //取checkbox选中值
138 $("#btn").click(function(){
139
140 if($("#aa")[0].checked)
141 {
142 alert($("#aa").val());
143 }
144 else
145 {
146 alert("未选中！");
147 }
148
149 })
150
151 });
152 </body>
153 </html>
