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="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>