<!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" /> <!--引入JQUERY包--> <script src="../jquery-1.11.2.min.js"></script> <style type="text/css"> #a1{ color:red; } .aa{ 100px; height:100px; background-color:#39F} </style> <title>无标题文档</title> </head> <body> <div id="a1" style="100px; height:200px;">11</div> <div class="aa" bs="1">aaaa</div> <div class="aa" bs="2">bbbbb</div> <div class="aa" bs="3">ccccc</div> <div name="cc"></div> <div bs="1"></div> <input type="text" id="p1" /> <input type="button" id="b1" value="挂事件" /> <input type="button" id="b2" value="移除事件" /> <script type="text/javascript"> //JS //根据ID取元素,取到的是具体的元素 var a = document.getElementById("p1"); //根据CLASS取 var a = document.getElementsByClassName("aa"); //根据标签名取 var a = document.getElementsByTagName("div"); //根据name取 var a = document.getElementsByName("cc"); alert(a); //操作元素 //操作内容 //非表单元素 a.innerText = "hello"; a.innerHTML = "<span style='color:red'>world</span>"; //表单元素 a.value = "hello"; //操作属性 a.setAttribute("bs","1"); a.getAttribute("bs"); a.removeAttribute("bs"); //操作样式 a.style.color = red; //三个DIV隐藏 var a = document.getElementsByClassName("aa"); for(var i=0;i<a.length;i++) { a[i].style.display = "none"; } //事件 /**************************************************/ //Jquery //根据ID找元素,取到的是JQUERY对象 var b = $("#a1"); //根据CLASS取 var b = $(".aa"); //根据标签名取 var b = $("div"); //根据属性筛选 var b = $("[name=aa]"); //操作元素 //操作内容 //非表单元素 b.text(); b.html(); //表单元素 b.val(); //操作属性 b.attr("bs","1"); b.attr("bs"); b.removeAttr("bs"); //操作样式 alert(b.css("color")); b.css("font-size","50px"); alert(b[0]); //取jquery对象用eq()取元素本身用[] //隐藏三个元素 $(".aa").css("display","none"); //Jquery【加】事件 //页面加载完成 $(document).ready(function(e) { //给a1加点击 $("#a1").click(function(){ alert('aa'); }) //给class为aa的所有元素加事件 $(".aa").click(function(){ //alert($(this).attr("bs")); $(".aa").css("background-color","#39F"); $(this).css("background-color","red"); }) //第二种方式【挂】事件 $("#b1").click(function(){ $("#a1").bind("click",function(){ alert("我是挂上的事件"); }); }) $("#b2").click(function(){ $("#a1").unbind("click"); }) }); </script> </body> </html>