Jquery基础 

 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>

 

posted @ 2017-05-09 16:21  小牛吃青草  阅读(183)  评论(0)    收藏  举报