<!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> <style type="text/css"> #one { color:red; font-size:30px; background-color:#999;} </style> </head> <body> <div id="one"><span>one</span></div> <div class="test" bs="aa">two</div> <div class="test">three</div> <div class="test">four</div> <input type="text" name="uid" id="uid" /> <input type="button" id="btn" value="取消绑定" /> <input type="button" id="add" value="绑定事件" /> </body> <script type="text/javascript"> $(document).ready(function(e) { //js方式 //1.根据ID取元素，DOM对象 //var div=document.getElementById("one"); //2.根据class取元素 取出来的是数组 //var div=document.getElementsByClassName("test"); //3.根据name取元素 取出来的是数组 //var bd=document.getElementsByName("uid"); //4.根据标签名取元素 取出来的是数组 //var div=document.getElementsByTagName("div"); //操作内容 //1.非表单元素 //alert(div.innerText); 取值 直接输出 //div.innerText="aaa"; 赋值 直接输出 //div.innerHTML; 取值或添加HTML代码 可以解析HTML代码 //2.表单元素 //div.value 取值或赋值 //操作属性 //div.setAttribute("",""); //设置属性 //div.removeAttribute(""); //移除属性 //div.getAttribute(""); //获取属性 //操作样式 //div.style.backgroundColor="red"; 设置样式表 背景色 红色 //alert(div.style.color) 获取样式表 只能获内联样式 //在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq() //jquery方式 //1.根据ID取元素，JQUERY对象 //var div=$("#one"); //2.根据class取元素 取出来的是数组 //var div=$(".test"); //3.根据属性取元素 取出来的是数组 //var bd=$("[name='uid']"); //4.根据标签名取元素 取出来的是数组 //var div=$("div"); //5.组合选取 //var div=$("div span"); //操作内容 //1.非表单元素 //alert(div.text()); 取值 直接输出 //div.text("aaa"); 赋值 直接输出 //div.html(); 取值或添加HTML代码 可以解析HTML代码 //2.表单元素 //div.val("aaa"); 取值或赋值 //操作属性 //div.attr("test","aa"); //设置属性 //div.removeAttr("test"); //移除属性 //div.attr("test"); //获取属性 //操作样式 //div.css("background-color","#FF0"); 设置样式表 背景色 黄色 //alert(div.css("color")); 获取样式表 内联内嵌都可以 //操作元素 //var str="<div id='abc' style='100px; height:100px; background-color:red'></div>"; //添加元素 //div.append(str); //追加元素 //$("#abc").remove(); //移除某个元素 /*$(".test").click(function(){ //添加事件 alert($(this).text()); })*/ /*$(".test").bind("click",function(){ //添加事件 alert($(this).text()); }); $("#btn").click(function(){ //解除事件 $(".test").unbind("click"); }); $("#add").click(function(){ //绑定事件 $(".test").bind("click",function(){ alert($(this).text()); }); });*/ }); </script> </html>