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 #one 9 { 10 color:#00C; 11 font-size:14px; 12 background-color:#F00; 13 14 } 15 16 </style> 17 18 </head> 19 <div id="one">one</div> 20 <div class="test" bs="aa">two</div> 21 <div class="test">there</div> 22 <div class="test">four</div> 23 <input type="text" bs="aa" name="uid" id="uid" /> 24 <body> 25 </body> 26 <script type="text/javascript"> 27 $(document).ready(function(e) { 28 29 //JS方式 30 //1.根据ID取元素,DOM对象 31 //var div = document.getElementById("one"); 32 //2.根据class取元素 33 //var div = document.getElementsByClassName("test"); 34 //3.根据name取 35 //var bd = document.getElementsByName("uid"); 36 //4.根据标签名取 37 //var div = document.getElementsByTagName("div"); 38 //操作内容 39 //1.非表单元素 40 //alert(div.innerText); 41 //div.innerText = "aaa"; 42 //div.innerHTML; 43 //2.表单元素 44 //div.value 45 //操作属性 46 //div.setAttribute("","");//设置属性 47 //div.removeAttribute("");//移除属性 48 //div.getAttribute("");//获取属性 49 //操作样式 50 //div.style.backgroundColor = "red"; 51 //获取样式 52 //alert(div.style.color);只能获取内联样式 53 //在数组里面如果要取DOM对象使用索引的方式,如果要取Jquery对象使用eq() 54 //JQUERY方式 55 //1.根据ID取元素,Jquery对象 56 //var div = $("#one"); 57 //2.根据class取元素 58 //var div = $(".test"); 59 //3.根据属性取 60 //var db = $("[name='uid']"); 61 //4.根据标签名取 62 //var div = $("div"); 63 //5.组合选取 64 //var div = $("div.test"); 65 66 67 //操作内容 68 //1.非表单元素 69 //alert(div.text());//取值 70 //div.text("aaaa");//赋值 71 //div.html(); 72 //2. 73 //div.val();//取值赋值都用这一种 74 75 76 //操作属性 77 //div.attr("text","aa");//设置属性 78 //div.removeAttr("");//移除属性 79 //div.attr();//获取属性 80 81 82 //操作样式 83 //div.css("background-color","#009"); 84 //获取样式 85 //alert(div.css("color")); 86 87 88 //操作元素 89 //var str = "<div id='a' style='100px; height:100px; background-color:red'></div>"; 90 91 //div.append(str); //追加元素 92 //$("#a").remove(); //移除某个元素 93 94 95 96 }); 97 98 99 100 </script> 101 </html>