1 <style type="text/css">
2 #aa{ color:#F90}
3 </style>
4
5 <script src="jquery-1.11.2.min.js"></script>
6
7 </head>
8
9 <body>
10 <div id="aa" style="width:100px; height:100px; background-color:#63F">端口号非空</div>
11 <div class="aa"></div>
12 <span class="aa"></span>
13
14 <input name="aa" type="text" bs="1" id="cc" />
15
16 <input type="button" value="测试" class="test" />
17 <input type="button" value="测试1" class="test" />
18 <input type="button" value="测试2" class="test" />
19 <input type="button" value="测试3" class="test" />
20 <input type="button" value="测试4" class="test" />
21
22 </body>
23 <script type="text/javascript">
24
25 //JS
26 //取元素
27 //var a = document.getElementById("aa"); //DOM对象
28 //var a = document.getElementsByClassName("aa");
29 //var a = document.getElementsByTagName("div");
30 //var a = document.getElementsByName("aa");
31
32 //操作内容
33 //非表单元素
34 //a.innerText = "ceshi";
35 //alert(a.innerText);
36 //a.innerHTML = "<span style='color:red'>hello</span>";
37 //alert(a.innerHTML);
38 //表单元素
39 //a.value = "请输入用户名";
40 //alert(a.value);
41
42 //操作属性
43 //alert(a.getAttribute("bs")); //获取属性
44 //a.setAttribute("test","test"); //添加属性
45 //a.removeAttribute("bs"); //移除属性
46
47 //操作样式
48 //alert(a.style.color); //获取样式
49 //a.style.color = "green"; //设置样式
50
51
52 //Jquery
53 //取元素
54 //var a = $("#aa"); //Jquery对象
55 //var a = $(".aa"); //根据class名找
56 //alert(a.eq(0)); //取第几个jquery对象
57 //var a = $("div"); //根据标签名找
58 //var a = $("[bs=1]"); //根据属性找
59
60 //操作内容
61 //非标单元素
62 //a.text("hello");
63 //alert(a.text());
64 //a.html("aaa");
65 //alert(a.html());
66 //表单元素
67 //a.val("aa");
68 //alert(a.val());
69
70 //操作属性
71 //a.attr("test","test"); //添加属性
72 //alert(a.attr("bs")); //获取属性
73 //a.removeAttr("bs"); //移除属性
74
75 //操作样式
76 //alert(a.css("color")); //获取样式
77 //a.css("background-color","red"); //设置样式
78
79
80 //加事件
81 $("#cc").blur(function(){ //匿名函数
82 alert("失去焦点了");
83 })
84
85 //事件一般有两个参数：事件源 事件数据
86 //Jquery事件源不写，事件数据可写可不写
87 //批量加事件
88 $(".test").click(function(e){
89 alert($(this).val());
90 alert(e.clientX);
91 })
92
93
94
95
96 </script>
