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