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 #d1 9 { 10 font-size:24px; 11 } 12 .list 13 { 14 200px; 15 height:30px; 16 text-align:center; 17 line-height:30px; 18 vertical-align:middle; 19 background-color:#999; 20 color:#F00; 21 } 22 </style> 23 </head> 24 25 <body> 26 27 <div id="d1" name="div" ><b>第一个DIV</b></div> 28 29 <div class="d">22222</div> 30 <div class="d">333333</div> 31 <div class="d">444444</div> 32 33 34 <div class="list">hello</div> 35 <div class="list">world</div> 36 <div class="list">hai</div> 37 <div class="list">aaaa</div> 38 39 40 <input type="text" bs="uid" /> 41 42 43 <input type="checkbox" id="aa" value="hello" /> 44 45 <input type="button" id='btn' value="取值"/> 46 47 48 </body> 49 <script type="text/javascript"> 50 51 //JS取元素，取出来的是具体的元素对象 52 //var d = document.getElementById("d1"); 53 //alert(document.getElementsByClassName("d")); 54 //alert(document.getElementsByTagName("div")); 55 //alert(document.getElementsByName("uid")); 56 57 //操作内容 58 //alert(d.innerText); //获取文本内容 59 //alert(d.innerHTML); //获取HTML代码 60 //d.innerText = "hello"; //给元素赋值（文本） 61 //d.innerHTML = "<span style='color:red'>hello</span>"; //给元素赋值（HTML代码） 62 63 //d.value 获取或者设置表单元素的内容 64 65 //操作属性 66 //alert(d.getAttribute("name")); //获取属性的值 67 //d.setAttribute("bs","001"); //设置属性 68 //d.removeAttribute("name"); //移除属性 69 70 71 //操作样式 72 //alert(d.style.fontSize); //获取样式，必须是写在元素里面的 73 //d.style.fontSize = "36px"; //修改设置样式 74 75 76 77 $(document).ready(function(e) { 78 79 //Jquery取元素，取出来的是jquery对象 80 //var d = $("#d1"); //根据ID找 81 /*var d = $(".d"); //根据CLASS找 82 83 for(var i=0;i<d.length;i++) 84 { 85 alert(d.eq(i)); 86 }*/ 87 88 //alert($("div")); //根据标签名找 89 90 //alert($("[bs=uid]")); //根据属性找 91 92 //操作内容 93 //alert(d.text()); //获取元素的内容（文本） 94 //alert(d.html()); //获取元素的内容（HTML代码） 95 96 //d.text("hello"); //给元素赋值（文本） 97 //d.html("<span style='color:red'>hello</span>"); //给元素赋值（HTML代码） 98 99 //d.val(); //操作表单的内容，可以取值赋值 100 101 102 //操作属性 103 //alert(d.attr("name")); //获取属性 104 //d.attr("bs","001"); //设置属性 105 //d.removeAttr("bs"); //移除属性 106 107 //操作样式 108 //alert(d.css("font-size")); //取样式 109 //d.css("font-size","36px"); //设置样式 110 111 112 //事件 113 /* $("#d1").click(function (){ 114 115 alert("aa"); 116 117 })*/ 118 119 120 /* $(".d").click(function(){ 121 122 //alert($(this).text()); 123 124 })*/ 125 126 //菜单选中 127 $(".list").click(function(){ 128 129 //让所有元素变为非选中状态 130 $(".list").css("background-color","#999").css("color","#F00"); 131 132 //让该元素变为选中状态 133 $(this).css("background-color","#60F").css("color","#FFF"); 134 135 }) 136 137 //取checkbox选中值 138 $("#btn").click(function(){ 139 140 if($("#aa")[0].checked) 141 { 142 alert($("#aa").val()); 143 } 144 else 145 { 146 alert("未选中！"); 147 } 148 149 }) 150 151 }); 152 </body> 153 </html>