<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" bs="aa" id="uid" />
<input type="button" id="btn" value="取消绑定" />
<input type="button" id="add" value="绑定事件" />
</body>
书写位置在JS代码中
<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 = "aaaa";
//div.innerHTML;
//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 = $("[bs='aa']");
//4.根据标签名取
//var div = $("div");
//5.组合选取
//var div = $("div span");
//操作内容
//1.非表单元素
//alert(div.text());
//div.text("aaaa"); ——文本
//div.html(); —— html代码
//2.表单元素
//div.val("aaa");
//操作属性
//div.attr("属性名","属性值"); ——添加、设置属性
//div.removeAttr("属性名"); ——移除属性
//div.attr("属性名"); ——获取属性
//操作样式
//div.css("样式名","样式值"); ——添加样式
//div.css("样式名"); ——获取样式
//操作元素
//var str = "<div id='a' style='width:100px; height:100px; background-color:red'></div>";
//div.append(str); //追加元素
//$("#a").remove(); //移除某个元素
$(".test").click(function(){
$(this).text();
})
绑定事件：
$(".test").bind("click",function(){
$(this).text();
});
取消绑定：
$("#btn").click(function(){
$(".test").unbind("click");
});
绑定事件：
$("#add").click(function(){
$(".test").bind("click",function(){
$(this).text();
});
});
});
</script>