11.8 开课二个月零四天 （Jquery）

<!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{ width:100px; height:100px; background-color:#39F}
</style>

<title>无标题文档</title>
</head>

<body>

<div id="a1" style="width: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>