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 #aa{ background-color:#36C}
9 </style>
10 </head>
11
12 <body>
13
14 Jquery
15 $代表选择器
16
17 JS
18 选取元素
19 操作内容
20 操作属性
21 操作样式
22
23 <div id="aa" style="width:100px; height:100px;">11</div>
24
25 <div class="aa">22</div>
26 <span class="aa">33</span>
27
28 <input type="text" name="uid" aa="bb" id="cc" />
29
30 <input type="checkbox" value="1" id="dd" />
31
32 </body>
33 <script type="text/javascript">
34
35 //页面加载完成
36 $(document).ready(function(e) {
37
38 //页面加载完成之后执行
39
40 //JS
41 //找元素,DOM对象
42 //var a = document.getElementById("aa");
43 //alert(a);
44
45 //var a = document.getElementsByClassName("aa");
46 //alert(a[1]);
47
48 //var a = document.getElementsByTagName("div");
49
50 //var a = document.getElementsByName("uid");
51 //alert(a[0]);
52 yua
53 //操作内容
54 //a.innerHTML //操作元素里面的html代码
55 //a.innerTEXT //操作元素里面的文本
56
57 //a.value //操作表单元素的值
58
59 //操作属性
60 //a.setAttribute("",""); //设置
61 //a.removeAttribute(""); //移除
62 //a.getAttribute(""); //获取
63
64 //操作样式
65 //a.style.backgroudColor = "red";
66
67
68 //Jquery
69 //找元素,Jquery对象
70 //var b = $("#aa"); //根据ID找
71 //alert(b[0]);
72
73 //var b = $(".aa"); //根据class找
74 //alert(b[1]); //找到的是DOM对象
75 //alert(b.eq(1)); //找到的是Jquery对象
76
77 //var b = $("div"); //根据标签名找
78 //alert(b[0]);
79
80 //var b = $("[id='aa']"); //根据属性找
81 //alert(b[0]);
82
83 //操作内容
84 //非表单元素
85 //b.html(); //操作元素里面的HTML代码
86 //b.text(); //操作元素里面的文本
87
88 //表单元素
89 //b.val("hello");
90
91 //操作属性
92 //设置属性
93 //b.attr("bs","test");
94 //获取属性
95 //alert(b.attr("aa"));
96 //移除属性
97 //b.removeAttr("aa");
98
99 //b.prop("checked",false);
100
101 //操作样式,可以获取内嵌的样式
102 //b.css("background-color","red");
103 //alert(b.css("width"));
104 //alert(b.css("background-color"));
105
106 });
107
108 </script>
109 </html>
