<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> //引入Jquery <style type="text/css"> #d1 { font-size:24px; } .list { width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; background-color:#999; color:#F00; } </style> </head> <body> <div id="d1" name="div" ><b>第一个DIV</b></div> <div class="d">22222</div> <div class="d">333333</div> <div class="d">444444</div> <div class="list">hello</div> <div class="list">world</div> <div class="list">hai</div> <div class="list">aaaa</div> <input type="text" bs="uid" /> <input type="checkbox" id="aa" value="hello" /> <input type="button" id='btn' value="取值"/> </body> <script type="text/javascript"> //JS取元素，取出来的是具体的元素对象 //var d = document.getElementById("d1"); //alert(document.getElementsByClassName("d")); //alert(document.getElementsByTagName("div")); //alert(document.getElementsByName("uid")); //操作内容 //alert(d.innerText); //获取文本内容 //alert(d.innerHTML); //获取HTML代码 //d.innerText = "hello"; //给元素赋值（文本） //d.innerHTML = "<span style='color:red'>hello</span>"; //给元素赋值（HTML代码） //d.value 获取或者设置表单元素的内容 //操作属性 //alert(d.getAttribute("name")); //获取属性的值 //d.setAttribute("bs","001"); //设置属性 //d.removeAttribute("name"); //移除属性 //操作样式 //alert(d.style.fontSize); //获取样式，必须是写在元素里面的 //d.style.fontSize = "36px"; //修改设置样式 $(document).ready(function(e) { //Jquery取元素，取出来的是jquery对象 //var d = $("#d1"); //根据ID找 /*var d = $(".d"); //根据CLASS找 for(var i=0;i<d.length;i++) { alert(d.eq(i)); }*/ //alert($("div")); //根据标签名找 //alert($("[bs=uid]")); //根据属性找 //操作内容 //alert(d.text()); //获取元素的内容（文本） //alert(d.html()); //获取元素的内容（HTML代码） //d.text("hello"); //给元素赋值（文本） //d.html("<span style='color:red'>hello</span>"); //给元素赋值（HTML代码） //d.val(); //操作表单的内容，可以取值赋值 //操作属性 //alert(d.attr("name")); //获取属性 //d.attr("bs","001"); //设置属性 //d.removeAttr("bs"); //移除属性 //操作样式 //alert(d.css("font-size")); //取样式 //d.css("font-size","36px"); //设置样式 //事件 /* $("#d1").click(function (){ alert("aa"); })*/ /* $(".d").click(function(){ //alert($(this).text()); })*/ //菜单选中 $(".list").click(function(){ //让所有元素变为非选中状态 $(".list").css("background-color","#999").css("color","#F00"); //让该元素变为选中状态 $(this).css("background-color","#60F").css("color","#FFF"); }) //取checkbox选中值 $("#btn").click(function(){ if($("#aa")[0].checked) { alert($("#aa").val()); } else { alert("未选中！"); } }) }); </script> </html>